:root{
    --brand-1:#0f766e;
    --brand-2:#0b3b46;
    --brand-3:#f59e0b;
    --text-1:#0f172a;
    --text-2:#64748b;
    --soft:#f5f7fb;
    --white:#ffffff;
    --border-soft:rgba(15,23,42,.08);
    --shadow-1:0 12px 30px rgba(15,23,42,.08);
    --shadow-2:0 18px 42px rgba(15,23,42,.10);
    --topbar-h:84px;
    --sidebar-w:280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"Segoe UI",Arial,sans-serif;color:var(--text-1);background:var(--soft);}
a{text-decoration:none;}

/* LOGIN */
.login-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top right, rgba(245,158,11,.14), transparent 22%),
        linear-gradient(135deg, rgba(8,47,73,.98), rgba(15,118,110,.92));
}
.login-card{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    padding:2rem;
    border-radius:28px;
    box-shadow:var(--shadow-2);
}
.login-brand{display:flex;align-items:center;gap:1rem;}
.brand-mark{
    width:58px;height:58px;border-radius:18px;
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:1.4rem;box-shadow:var(--shadow-1);
}
.brand-mark.sm{width:40px;height:40px;border-radius:12px;font-size:1rem;}
.login-title{font-size:1.6rem;font-weight:800;color:var(--brand-2);}
.login-subtitle{color:var(--text-2);}
.login-note{
    margin-top:1.25rem;padding:1rem 1.1rem;border-radius:18px;
    background:#eef6f6;color:var(--brand-2);font-size:.95rem;
}
.form-control,.form-select{
    border-radius:16px;border:1px solid rgba(15,23,42,.10);padding:.9rem 1rem;
}
.form-control:focus,.form-select:focus{
    border-color:rgba(15,118,110,.35);
    box-shadow:0 0 0 .25rem rgba(15,118,110,.12);
}
.btn-brand{
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
    color:#fff;border:none;border-radius:999px;font-weight:700;
    box-shadow:0 10px 22px rgba(15,118,110,.20);
}
.btn-brand:hover,.btn-brand:focus{color:#fff;background:linear-gradient(135deg,var(--brand-2),#082f49);}
.btn-brand-outline{
    border:1px solid rgba(15,118,110,.25);background:#fff;color:var(--brand-1);font-weight:700;
}
.btn-brand-outline:hover{background:var(--brand-1);color:#fff;}

/* ADMIN LAYOUT */
.admin-body{background:var(--soft);min-height:100vh;}
.admin-topbar{
    height:var(--topbar-h);
    background:linear-gradient(135deg, rgba(8,47,73,.98), rgba(15,118,110,.95));
    box-shadow:var(--shadow-1);
    z-index:1035;
}
.topbar-wrap{
    min-height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.topbar-brand{display:flex;align-items:center;gap:.75rem;color:#fff;font-weight:800;font-size:1.05rem;}
.topbar-brand:hover{color:#fff;}
.topbar-user{display:flex;align-items:center;gap:1rem;color:#fff;}
.user-meta strong,.user-meta small{display:block;color:#fff;line-height:1.15;}
.user-meta small{text-transform:capitalize;opacity:.82;}
.btn-topbar{background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:12px;padding:.55rem .75rem;}

.admin-sidebar{
    --bs-offcanvas-width:var(--sidebar-w);
    background:transparent;
}
.sidebar-panel{
    width:var(--sidebar-w);
    min-height:100vh;
    background:#fff;
    border-right:1px solid var(--border-soft);
    padding-top:calc(var(--topbar-h) + 1rem);
    box-shadow:var(--shadow-1);
}
.sidebar-head{padding:0 1.25rem 1rem 1.25rem;}
.sidebar-title{font-size:1rem;font-weight:800;color:var(--brand-2);}
.sidebar-subtitle{font-size:.9rem;color:var(--text-2);}
.sidebar-nav{padding:.4rem .8rem 1rem;display:flex;flex-direction:column;gap:.35rem;}
.sidebar-link{
    display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:18px;color:var(--text-1);font-weight:600;
}
.sidebar-link:hover{background:rgba(15,118,110,.07);color:var(--brand-1);}
.sidebar-link.active{
    background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(11,59,70,.08));
    color:var(--brand-1);
}
.sidebar-icon{width:24px;text-align:center;}

.admin-main{
    padding-top:calc(var(--topbar-h) + 1.5rem);
    padding-bottom:1.5rem;
}
.page-header{
    display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.page-title{font-size:1.85rem;font-weight:800;margin-bottom:.3rem;color:var(--brand-2);}
.page-subtitle{color:var(--text-2);margin-bottom:0;}
.content-card,.metric-card{
    background:#fff;border-radius:24px;box-shadow:var(--shadow-1);border:1px solid rgba(255,255,255,.55);
}
.content-card{padding:1.25rem;}
.metric-card{padding:1.4rem 1.4rem;min-height:180px;}
.metric-card-soft{background:linear-gradient(135deg, #eef6f6, #f8fafc);}
.metric-label{font-size:.95rem;color:var(--text-2);font-weight:700;margin-bottom:.6rem;}
.metric-value{font-size:2.35rem;line-height:1;font-weight:800;color:var(--brand-2);margin-bottom:.8rem;}
.metric-note{color:var(--text-2);}
.metric-note-lg{font-size:1.05rem;line-height:1.7;color:var(--brand-2);}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.card-title-admin{font-size:1.1rem;font-weight:800;color:var(--brand-2);}

.admin-table thead th{
    border-bottom:1px solid rgba(15,23,42,.08);color:var(--text-2);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
}
.admin-table tbody td{padding-top:1rem;padding-bottom:1rem;border-color:rgba(15,23,42,.05);}
.badge-role,.badge-ok,.badge-off{
    border-radius:999px;padding:.55rem .8rem;font-weight:700;
}
.badge-role{background:rgba(15,118,110,.10);color:var(--brand-1);}
.badge-ok{background:rgba(34,197,94,.12);color:#15803d;}
.badge-off{background:rgba(239,68,68,.12);color:#b91c1c;}

@media (min-width: 992px){
    .admin-sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:var(--sidebar-w);
        z-index:1030;
    }
    .admin-main{
        margin-left:var(--sidebar-w);
        padding-left:1.5rem;
        padding-right:1.5rem;
    }
}

@media (max-width: 991.98px){
    .sidebar-panel{padding-top:1rem;min-height:auto;width:100%;}
    .admin-main{padding-left:.4rem;padding-right:.4rem;}
}

@media (max-width: 767.98px){
    .login-card{padding:1.35rem;}
    .page-title{font-size:1.55rem;}
    .metric-card{min-height:auto;}
    .content-card{padding:1rem;}
}


.sub-menu {
    margin-top: .35rem;
    margin-left: .75rem;
    padding-left: .75rem;
    border-left: 2px solid rgba(15, 118, 110, 0.12);
}

.sub-menu .nav-link {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    color: #475569;
    border-radius: 10px;
}

.sub-menu .nav-link:hover {
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
}

.sub-menu .nav-link.active {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-weight: 700;
}