:root{
    --bg:#f3f6fb;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --border:#e2e8f0;
    --text:#0f172a;
    --muted:#64748b;

    --primary:#0f4c81;
    --primary-2:#1366ad;
    --primary-soft:#e9f1fb;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#d97706;
    --info:#2563eb;

    --shadow:0 5px 16px rgba(15,23,42,.06);
    --shadow-soft:0 2px 8px rgba(15,23,42,.04);

    --radius:14px;
    --radius-sm:10px;

    --sidebar-width:246px;
    --topbar-height:68px;

    --font:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
}

body{
    min-height:100vh;
    overflow-x:hidden;
    font-size:14px;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
}

.app-shell{
    display:flex;
    min-height:100vh;
    width:100%;
    background:var(--bg);
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    max-width:var(--sidebar-width);
    background:linear-gradient(180deg, #0c2f50 0%, #123f69 58%, #155588 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:14px 12px 12px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    box-shadow:6px 0 18px rgba(15,23,42,.10);
}

.sidebar-top{
    min-height:0;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:2px 4px 12px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.sidebar-logo-wrap{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:11px;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:6px;
}

.sidebar-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.sidebar-brand-text{
    min-width:0;
    flex:1;
}

.sidebar-brand-text h1{
    margin:0;
    font-size:.92rem;
    line-height:1.1;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-brand-text p{
    margin:3px 0 0;
    font-size:.72rem;
    color:rgba(255,255,255,.74);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-section-label{
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,.56);
    padding:0 6px;
    margin-bottom:8px;
    font-weight:700;
}

.sidebar-section-spaced{
    margin-top:14px;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:8px 10px;
    border-radius:11px;
    color:rgba(255,255,255,.88);
    font-weight:600;
    transition:background .18s ease, transform .18s ease, color .18s ease;
}

.nav-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.nav-link.active{
    background:rgba(255,255,255,.14);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.nav-icon{
    width:18px;
    min-width:18px;
    text-align:center;
    font-size:.88rem;
    line-height:1;
}

.nav-text{
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.85rem;
}

.sidebar-footer{
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:10px;
    margin-top:12px;
}

.sidebar-user-card{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:11px;
    background:rgba(255,255,255,.08);
    margin-bottom:10px;
}

.sidebar-user-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:999px;
    background:#fff;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:.80rem;
}

.sidebar-user-info{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.sidebar-user-info strong{
    font-size:.80rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-user-info span{
    font-size:.70rem;
    color:rgba(255,255,255,.72);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-meta{
    display:grid;
    gap:6px;
    margin-bottom:10px;
}

.sidebar-meta-item{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    padding:7px 8px;
}

.sidebar-meta-label{
    display:block;
    font-size:.60rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:rgba(255,255,255,.58);
    margin-bottom:2px;
}

.sidebar-meta-item strong{
    display:block;
    font-size:.73rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.btn-logout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:36px;
    border-radius:11px;
    background:#fff;
    color:var(--primary);
    font-weight:700;
    box-shadow:var(--shadow-soft);
    font-size:.78rem;
}

.btn-logout:hover{
    background:#eef5fc;
}

/* =========================
   MAIN AREA
========================= */
.main-wrapper{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    width:calc(100% - var(--sidebar-width));
}

.topbar{
    min-height:var(--topbar-height);
    height:var(--topbar-height);
    background:rgba(255,255,255,.94);
    border-bottom:1px solid rgba(15,23,42,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 18px;
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(10px);
}

.topbar-heading{
    min-width:0;
    flex:1;
}

.page-title{
    margin:0;
    font-size:1.02rem;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.page-subtitle{
    margin:3px 0 0;
    color:var(--muted);
    font-size:.76rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.topbar-meta{
    display:flex;
    gap:10px;
    flex-shrink:0;
}

.topbar-chip,
.topbar-company,
.topbar-role{
    min-width:110px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:11px;
    padding:6px 10px;
    box-shadow:var(--shadow-soft);
}

.topbar-label{
    display:block;
    font-size:.58rem;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:2px;
    letter-spacing:.05em;
}

.content-area{
    flex:1;
    min-width:0;
    padding:14px 14px 18px;
}

/* =========================
   ALERTS
========================= */
.alert{
    padding:11px 13px;
    border-radius:12px;
    margin-bottom:14px;
    font-weight:600;
    border:1px solid transparent;
    font-size:.82rem;
}

.alert-success{
    background:#ecfdf3;
    color:#166534;
    border-color:#bbf7d0;
}

.alert-danger{
    background:#fef2f2;
    color:#991b1b;
    border-color:#fecaca;
}

.alert-warning{
    background:#fffbeb;
    color:#92400e;
    border-color:#fde68a;
}

.alert-info{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#bfdbfe;
}

/* =========================
   CARDS / GRID
========================= */
.card,
.kpi-card{
    background:var(--surface);
    border:1px solid rgba(15,23,42,.05);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    min-width:0;
}

.card{
    padding:14px;
}

.kpi-card{
    padding:12px 14px;
    min-height:90px;
}

.card + .card{
    margin-top:14px;
}

.grid{
    display:grid;
    gap:14px;
    width:100%;
    min-width:0;
}

.grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.grid-4{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.kpi-label{
    color:var(--muted);
    font-size:.72rem;
    margin-bottom:5px;
    line-height:1.2;
}

.kpi-value{
    font-size:1.06rem;
    font-weight:800;
    line-height:1.1;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.kpi-foot{
    margin-top:5px;
    color:var(--muted);
    font-size:.69rem;
    line-height:1.3;
}

.section-title{
    margin:0 0 10px;
    font-size:.92rem;
    font-weight:800;
    color:var(--text);
}

/* =========================
   TABLES
========================= */
.table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid rgba(15,23,42,.05);
    border-radius:12px;
    background:#fff;
}

.table{
    width:100%;
    min-width:700px;
    border-collapse:collapse;
}

.table th,
.table td{
    padding:9px 10px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:middle;
    font-size:.74rem;
}

.table th{
    background:#f8fafc;
    color:#334155;
    font-size:.64rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

.table td{
    color:#1e293b;
}

.table tr:hover td{
    background:#fbfdff;
}

/* =========================
   BADGES
========================= */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:4px 7px;
    border-radius:999px;
    font-size:.62rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.badge-success{
    background:#dcfce7;
    color:#166534;
}

.badge-danger{
    background:#fee2e2;
    color:#991b1b;
}

.badge-warning{
    background:#fef3c7;
    color:#92400e;
}

.badge-info{
    background:#dbeafe;
    color:#1d4ed8;
}

.badge-secondary{
    background:#e2e8f0;
    color:#334155;
}

/* =========================
   FORMS
========================= */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:10px;
    min-width:0;
}

.form-group label{
    font-weight:700;
    color:#334155;
    font-size:.78rem;
}

.form-control,
.form-select,
.form-textarea{
    width:100%;
    border:1px solid #d7dee7;
    background:#fff;
    border-radius:10px;
    padding:9px 11px;
    outline:none;
    color:var(--text);
    transition:border-color .2s ease, box-shadow .2s ease;
    font-size:.80rem;
}

.form-textarea{
    min-height:90px;
    resize:vertical;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus{
    border-color:#7bb0e3;
    box-shadow:0 0 0 3px rgba(19,102,173,.10);
}

/* =========================
   BUTTONS / ACTIONS
========================= */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    border:none;
    border-radius:10px;
    padding:7px 11px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
    white-space:nowrap;
    font-size:.74rem;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color:#fff;
    box-shadow:0 5px 12px rgba(19,102,173,.14);
}

.btn-primary:hover{
    filter:brightness(1.03);
}

.btn-secondary{
    background:#eef2f7;
    color:#1e293b;
}

.btn-secondary:hover{
    background:#e2e8f0;
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-block{
    width:100%;
}

.actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    align-items:center;
}

/* =========================
   HELPERS
========================= */
.empty-state{
    padding:20px 16px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    text-align:center;
    color:var(--muted);
    background:#f8fafc;
    font-size:.82rem;
}



/* =========================
   LOGIN
========================= */
.login-body{
    background:
        radial-gradient(circle at top left, rgba(19,102,173,.18), transparent 26%),
        radial-gradient(circle at bottom right, rgba(15,76,129,.14), transparent 24%),
        linear-gradient(135deg, #eef4fb 0%, #f8fbff 48%, #eef3f9 100%);
}

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.login-shell{
    width:min(1120px, 100%);
    min-height:680px;
    display:grid;
    grid-template-columns:minmax(320px, 1.05fr) minmax(420px, .95fr);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.75);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(15,23,42,.16);
}

.login-side{
    position:relative;
    background:linear-gradient(160deg, #0a3357 0%, #0f4c81 52%, #1366ad 100%);
    color:#fff;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:24px;
    overflow:hidden;
}

.login-side::before,
.login-side::after{
    content:"";
    position:absolute;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}

.login-side::before{
    width:260px;
    height:260px;
    top:-90px;
    right:-70px;
}

.login-side::after{
    width:220px;
    height:220px;
    left:-80px;
    bottom:-90px;
}

.login-side-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%, rgba(255,255,255,.04));
    pointer-events:none;
}

.login-side-top,
.login-side-bottom{
    position:relative;
    z-index:1;
}

.login-side-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:20px;
}

.login-logo-panel{
    width:112px;
    height:112px;
    border-radius:26px;
    background:rgba(255,255,255,.96);
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 26px rgba(0,0,0,.16);
    margin-bottom:22px;
}

.login-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.login-kicker{
    display:inline-block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:rgba(255,255,255,.72);
    margin-bottom:10px;
    font-weight:700;
}

.login-brand-block h1{
    margin:0 0 10px;
    font-size:2.35rem;
    line-height:1.05;
    font-weight:800;
}

.login-brand-block p{
    margin:0;
    max-width:430px;
    color:rgba(255,255,255,.80);
    font-size:1rem;
    line-height:1.7;
}

.login-feature-list{
    display:grid;
    gap:14px;
}

.login-feature-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:15px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
}

.login-feature-dot{
    width:12px;
    height:12px;
    min-width:12px;
    margin-top:5px;
    border-radius:999px;
    background:#93c5fd;
    box-shadow:0 0 0 5px rgba(147,197,253,.16);
}

.login-feature-item strong{
    display:block;
    margin-bottom:5px;
    font-size:.92rem;
}

.login-feature-item p{
    margin:0;
    font-size:.82rem;
    color:rgba(255,255,255,.74);
    line-height:1.55;
}

.login-card{
    background:rgba(255,255,255,.92);
    padding:38px 40px 28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.login-card-header{
    margin-bottom:18px;
}

.login-mobile-brand{
    display:none;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.login-mobile-logo-wrap{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:16px;
    background:linear-gradient(145deg, #ffffff, #eef4fb);
    border:1px solid rgba(15,76,129,.10);
    box-shadow:var(--shadow-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}

.login-mobile-logo{
    width:100%;
    height:100%;
    object-fit:contain;
}

.login-mobile-brand strong,
.login-mobile-brand span{
    display:block;
}

.login-mobile-brand strong{
    font-size:.92rem;
    color:#0f172a;
}

.login-mobile-brand span{
    font-size:.76rem;
    color:var(--muted);
    margin-top:2px;
}

.login-chip{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:800;
    font-size:.74rem;
    margin-bottom:14px;
}

.login-card-header h2{
    margin:0 0 8px;
    font-size:2rem;
    line-height:1.05;
}

.login-card-header p{
    margin:0;
    color:var(--muted);
    line-height:1.65;
    font-size:.95rem;
}

.login-form{
    margin-top:8px;
}

.login-form .form-group{
    margin-bottom:16px;
    gap:7px;
}

.login-form .form-group label{
    font-size:.82rem;
}

.input-icon-wrap{
    position:relative;
}

.input-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    color:#7c8aa0;
    pointer-events:none;
    z-index:2;
}

.input-icon svg,
.password-toggle svg{
    width:100%;
    height:100%;
}

.input-with-icon{
    padding-left:44px;
}

.input-with-action{
    padding-right:48px;
}

.login-form .form-control{
    min-height:52px;
    border-radius:14px;
    background:#fff;
    border-color:#d8e1ec;
    font-size:.88rem;
}

.login-form .form-control:focus{
    border-color:#8db8e6;
    box-shadow:0 0 0 4px rgba(19,102,173,.12);
}

.password-toggle{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border:none;
    border-radius:10px;
    background:transparent;
    color:#7c8aa0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}

.password-toggle:hover{
    background:#eef4fb;
    color:var(--primary);
}

.password-toggle .icon-hide{
    display:none;
}

.password-toggle.is-active .icon-show{
    display:none;
}

.password-toggle.is-active .icon-hide{
    display:block;
}

.btn-login-submit{
    min-height:52px;
    border-radius:14px;
    font-size:.88rem;
    margin-top:6px;
    box-shadow:0 12px 24px rgba(19,102,173,.18);
}

.login-footer{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:22px;
}

.login-footer-item{
    border:1px solid rgba(15,23,42,.06);
    border-radius:16px;
    background:#f8fbff;
    padding:14px 16px;
}

.login-footer-item span{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:700;
}

.login-footer-item strong{
    display:block;
    color:#0f172a;
    font-size:.88rem;
}

.login-copy{
    margin:18px 0 0;
    text-align:center;
    color:var(--muted);
    font-size:.76rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1400px){
    .grid-4{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .grid-3{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px){
    :root{
        --sidebar-width:228px;
    }

    .topbar{
        height:auto;
        min-height:var(--topbar-height);
        align-items:flex-start;
        flex-direction:column;
    }

    .topbar-meta{
        width:100%;
    }

    .topbar-chip,
    .topbar-company,
    .topbar-role{
        flex:1;
        min-width:0;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .form-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px){
    .app-shell{
        flex-direction:column;
    }

    .sidebar{
        position:relative;
        width:100%;
        min-width:100%;
        max-width:100%;
        height:auto;
    }

    .main-wrapper{
        width:100%;
    }

    .content-area{
        padding:12px;
    }

    .topbar{
        padding:12px;
    }
}

@media (max-width: 1100px){
    .login-shell{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .login-side{
        min-height:320px;
    }

    .login-card{
        padding:32px 28px 24px;
    }
}

@media (max-width: 768px){
    .login-page{
        padding:14px;
    }

    .login-shell{
        border-radius:22px;
    }

    .login-side{
        display:none;
    }

    .login-card{
        padding:24px 18px 20px;
    }

    .login-mobile-brand{
        display:flex;
    }

    .login-card-header h2{
        font-size:1.65rem;
    }

    .login-card-header p{
        font-size:.88rem;
    }

    .login-footer{
        grid-template-columns:1fr;
    }
}