/*
============================================================
HomeFinance License Server
assets/css/style.css

Admin Panel Design
PHP 7+
============================================================
*/


* {
    box-sizing: border-box;
}


html,
body {

    margin:0;

    padding:0;

    min-height:100%;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:#f4f6f9;

    color:#1f2937;

}



/*
============================================================
LAYOUT
============================================================
*/


.wrapper {

    min-height:100vh;

}



.topbar {

    height:64px;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

}



.logo {

    display:flex;

    align-items:center;

    gap:10px;

    font-size:19px;

    font-weight:600;

}



.logo-icon {

    font-size:28px;

}



.top-right {

    display:flex;

    align-items:center;

    gap:20px;

}



.user {

    color:#e5e7eb;

}



.logout {

    color:#fff;

    text-decoration:none;

}



.logout:hover {

    opacity:.8;

}




.container {

    display:flex;

    min-height:calc(100vh - 64px);

}



/*
============================================================
SIDEBAR
============================================================
*/


.sidebar {

    width:260px;

    background:#1f2937;

    color:white;

    flex-shrink:0;

}



.sidebar-logo {

    padding:22px;

    display:flex;

    align-items:center;

    gap:12px;

    border-bottom:1px solid #374151;

}



.logo-text {

    display:flex;

    flex-direction:column;

}



.logo-text small {

    color:#9ca3af;

}



.sidebar-menu a {

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    color:#d1d5db;

    text-decoration:none;

    transition:.2s;

}



.sidebar-menu a:hover,

.sidebar-menu a.active {

    background:#2563eb;

    color:#fff;

}



.sidebar-footer {

    padding:20px;

}



.logout-link {

    color:#fca5a5;

    text-decoration:none;

}



/*
============================================================
CONTENT
============================================================
*/


.content {

    flex:1;

    padding:30px;

}



h1 {

    margin-top:0;

    margin-bottom:25px;

    font-size:28px;

}



/*
============================================================
CARDS
============================================================
*/


.card-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:25px;

}



.stat-card {

    background:#fff;

    padding:22px;

    border-radius:14px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



.stat-title {

    color:#6b7280;

    font-size:14px;

}



.stat-number {

    margin-top:10px;

    font-size:34px;

    font-weight:700;

    color:#2563eb;

}



.card {

    background:#fff;

    border-radius:14px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



.card-header {

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;

}



/*
============================================================
TABLES
============================================================
*/


.table-responsive {

    overflow-x:auto;

}



.table {

    width:100%;

    border-collapse:collapse;

}



.table th {

    background:#f3f4f6;

    padding:13px;

    text-align:left;

}



.table td {

    padding:13px;

    border-bottom:1px solid #e5e7eb;

}



.table tr:hover {

    background:#f9fafb;

}



/*
============================================================
FORMS
============================================================
*/


.form-group {

    margin-bottom:18px;

}



.form-label {

    display:block;

    margin-bottom:7px;

    font-weight:600;

}



.form-control {

    width:100%;

    padding:12px;

    border:1px solid #d1d5db;

    border-radius:9px;

    font-size:14px;

}



.form-control:focus {

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.15);

}



/*
============================================================
BUTTONS
============================================================
*/


.btn {

    padding:11px 18px;

    border-radius:9px;

    border:0;

    cursor:pointer;

    text-decoration:none;

    display:inline-block;

}



.btn-success {

    background:#16a34a;

    color:#fff;

}



.btn-danger {

    background:#dc2626;

    color:#fff;

}



.btn:hover {

    opacity:.85;

}



/*
============================================================
BADGES
============================================================
*/


.badge {

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

}



.badge-success {

    background:#dcfce7;

    color:#166534;

}



.badge-danger {

    background:#fee2e2;

    color:#991b1b;

}



/*
============================================================
ALERTS
============================================================
*/


.alert {

    padding:15px;

    border-radius:10px;

    margin-bottom:20px;

}



.alert-success {

    background:#dcfce7;

    color:#166534;

}



.alert-danger {

    background:#fee2e2;

    color:#991b1b;

}



/*
============================================================
LOGIN PAGE
============================================================
*/


.login-page {

    min-height:100vh;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #111827
    );

}



.login-box {

    width:400px;

    max-width:100%;

    background:#fff;

    padding:40px;

    border-radius:18px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}



.login-logo {

    text-align:center;

    margin-bottom:30px;

}



.login-logo h1 {

    margin-bottom:5px;

}



.login-logo p {

    color:#6b7280;

}



/*
============================================================
FOOTER
============================================================
*/


.footer {

    background:#fff;

    padding:15px 25px;

    display:flex;

    justify-content:space-between;

    color:#6b7280;

}



/*
============================================================
MOBILE
============================================================
*/


@media(max-width:900px){


.container {

    flex-direction:column;

}



.sidebar {

    width:100%;

}



.content {

    padding:15px;

}



.card-grid {

    grid-template-columns:1fr;

}



}
/*
============================================================
LICENSE TABLE DESIGN
============================================================
*/


.table-card {

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

}



.table-card .table {

    margin:0;

}



.table-card .table thead th {

    background:#111827;

    color:#fff;

    padding:16px;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.5px;

    border:0;

}



.table-card .table tbody td {

    padding:15px 16px;

    vertical-align:middle;

}



.table-card .table tbody tr {

    transition:.2s;

}



.table-card .table tbody tr:hover {

    background:#f8fafc;

    transform:scale(1.002);

}




/*
|--------------------------------------------------------------------------
| License key
|--------------------------------------------------------------------------
*/


.license-key {

    font-family:
    Consolas,
    monospace;

    background:#f1f5f9;

    padding:7px 12px;

    border-radius:8px;

    color:#2563eb;

    font-weight:600;

    display:inline-block;

}





/*
|--------------------------------------------------------------------------
| Status badges
|--------------------------------------------------------------------------
*/


.status-active {

    background:#dcfce7;

    color:#15803d;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}



.status-new {

    background:#dbeafe;

    color:#1d4ed8;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}



.status-blocked {

    background:#fee2e2;

    color:#b91c1c;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}





.status-expired {

    background:#f3f4f6;

    color:#6b7280;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}





/*
|--------------------------------------------------------------------------
| Action buttons
|--------------------------------------------------------------------------
*/


.action-buttons {

    display:flex;

    gap:6px;

    flex-wrap:wrap;

}



.action-buttons .btn {

    padding:7px 10px;

    font-size:12px;

}





.btn-view {

    background:#2563eb;

    color:white;

}



.btn-edit {

    background:#16a34a;

    color:white;

}



.btn-delete {

    background:#dc2626;

    color:white;

}





/*
|--------------------------------------------------------------------------
| Device counter
|--------------------------------------------------------------------------
*/


.device-count {

    background:#f1f5f9;

    padding:6px 10px;

    border-radius:8px;

    font-weight:600;

}





/*
|--------------------------------------------------------------------------
| Responsive table
|--------------------------------------------------------------------------
*/


@media(max-width:900px){


.table-card {

    overflow-x:auto;

}



.table-card table {

    min-width:900px;

}


}
/*
============================================================
Dashboard cards
============================================================
*/

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(220px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

}



.stat-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 22px;

    min-height: 110px;

    display: flex;

    align-items: center;

    gap: 18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.08);

    transition: .25s;

    overflow: hidden;

}



.stat-card:hover {

    transform: translateY(-4px);

}



.stat-icon {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    background: #f1f5f9;

}



.stat-card span {

    display: block;

    color: #64748b;

    font-size: 14px;

    margin-bottom: 8px;

    white-space: nowrap;

}



.stat-card strong {

    display: block;

    color: #111827;

    font-size: 32px;

    line-height: 1;

    white-space: nowrap;

}





/*
============================================================
Dashboard responsive
============================================================
*/


@media(max-width:1200px){


    .dashboard-grid {

        grid-template-columns: repeat(3, minmax(220px,1fr));

    }

}



@media(max-width:900px){


    .dashboard-grid {

        grid-template-columns: repeat(2, minmax(200px,1fr));

    }

}



@media(max-width:600px){


    .dashboard-grid {

        grid-template-columns: 1fr;

    }


    .stat-card {

        padding:18px;

    }

}