:root{
    --navy:#2457a8;
    --navy-2:#2d68c4;
    --navy-3:#3b78d8;
    --navy-soft:#e6efff;

    --blue:#2d68c4;
    --blue-2:#3b78d8;
    --blue-soft:#e6efff;

    --orange:#f18716;
    --orange-2:#e97b10;

    --sidebar:#f6f8fc;
    --page:#e9edf3;
    --card:#ffffff;

    --line:#d8e0eb;
    --text:#243142;
    --muted:#748397;

    --danger:#d9534f;
    --success:#1f9d63;
    --warning:#d79a18;

    --shadow:0 6px 18px rgba(45,104,196,.12);
    --shadow-lg:0 14px 32px rgba(45,104,196,.18);
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:20px;

    --transition:.2s ease;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--page);
    color:var(--text);
}

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

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

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

/* =========================
   LAYOUT ADMIN
========================= */
.app-shell{
    min-height:100vh;
}

.topbar{
    height:44px;
    background:var(--navy-2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px 0 305px;
    color:#fff;
    box-shadow:var(--shadow);
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.menu-toggle{
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    font-size:26px;
    line-height:1;
}

.top-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#fff;
}

.top-icon-text{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    margin-right:4px;
}

.top-icon,
.user-icon{
    font-size:13px;
}

.top-circle{
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.user-menu{
    position:relative;
}

.user-toggle{
    border:none;
    background:none;
    cursor:pointer;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0;
}

.user-caret{
    font-size:12px;
    opacity:.9;
}

.user-badge{
    background:rgba(255,255,255,.10);
    padding:7px 12px;
    border-radius:20px;
    min-width:120px;
    justify-content:center;
}

.user-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:270px;
    display:none;
    z-index:1000;
}

.user-menu.open .user-dropdown{
    display:block;
}

.user-dropdown-card{
    background:#f3f3f3;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    border:1px solid rgba(0,0,0,.08);
}

.user-dropdown-head{
    background:var(--orange);
    padding:18px 16px 16px;
    text-align:center;
    color:#fff;
}

.user-avatar{
    width:86px;
    height:86px;
    margin:0 auto 10px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:54px;
    border:4px solid rgba(255,255,255,.18);
}

.user-name{
    font-size:18px;
    margin-bottom:4px;
}

.user-nip{
    font-size:12px;
    opacity:.95;
}

.user-dropdown-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px;
    background:#efefef;
}

.user-action-btn{
    flex:1;
    text-align:center;
    padding:8px 10px;
    background:#f7f7f7;
    border:1px solid #d8d8d8;
    color:#7a7a7a;
    border-radius:18px;
    font-size:13px;
    transition:background var(--transition);
}

.user-action-btn:hover{
    background:#ffffff;
}

.app-body{
    display:flex;
    align-items:flex-start;
}

.sidebar{
    width:295px;
    background:var(--sidebar);
    min-height:calc(100vh - 44px);
    border-right:1px solid var(--line);
    flex:none;
}

.sidebar-topbar{
    height:72px;
    background:var(--navy-2);
    padding:10px 14px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    color:#fff;
}

.logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-circle{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}

.logo-circle i{
    font-size:20px;
}

.logo-circle-image{
    width:48px;
    height:48px;
    background:rgba(255,255,255,.12);
    box-shadow:0 10px 22px rgba(5,20,65,.28), inset 0 0 0 2px rgba(255,255,255,.1);
}

.logo-circle-image img{
    width:34px;
    height:34px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));
}

.logo-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.1;
}

.logo-title-main{
    font-size:17px;
    font-weight:800;
    color:#fff;
}

.logo-title-sub{
    font-size:11px;
    color:rgba(255,255,255,.82);
    font-weight:600;
    max-width:150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-menu-btn{
    display:none !important;
    font-size:26px;
    line-height:1;
}

.quick-menu{
    display:flex;
    gap:4px;
    background:var(--navy-2);
    padding:0 10px 10px;
}

.quick-item{
    width:88px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px 4px;
    color:#fff;
    border-radius:6px;
    font-size:12px;
    transition:background var(--transition);
}

.quick-item:hover,
.quick-item.active{
    background:rgba(255,255,255,.10);
}

.quick-emoji{
    font-size:28px;
    line-height:1;
    margin-bottom:4px;
}

.quick-emoji i{
    font-size:24px;
}

.quick-item-logout{
    position:relative;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
}

.quick-item-logout:hover{
    background:rgba(255,255,255,.10) !important;
}

.quick-item-logout .quick-emoji{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
}

.quick-item-logout .quick-emoji-image{
    width:44px !important;
    height:44px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px !important;
}

.quick-item-logout .quick-emoji-image img{
    width:40px !important;
    height:40px !important;
    object-fit:contain;
}

.quick-item-logout span:last-child{
    margin-top:2px;
}

.sidebar-label{
    padding:10px 12px 8px;
    color:var(--navy-2);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.sidebar-nav{
    padding:0 0 18px;
    height:calc(100vh - 132px);
    overflow:auto;
}

.nav-parent,
.nav-single{
    width:100%;
    border:none;
    background:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 12px 11px 10px;
    color:#5b7394;
    font-size:15px;
    cursor:pointer;
    border-radius:0 14px 14px 0;
    margin-right:6px;
    transition:background var(--transition), color var(--transition);
}

.nav-left{
    display:flex;
    align-items:center;
    gap:8px;
}

.nav-icon{
    width:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    color:var(--navy-2);
}

.nav-icon i,
.submenu-icon i,
.nav-arrow i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.nav-arrow{
    color:#72829a;
}

.submenu-icon,
.nav-icon,
.quick-emoji,
.logo-circle,
.nav-arrow{
    line-height:1;
}

.nav-single:hover,
.nav-parent:hover,
.submenu-link:hover{
    background:#edf3fb;
}

.nav-single.active,
.nav-group.active > .nav-parent{
    background:var(--navy-soft);
    color:var(--navy-2);
    font-weight:700;
}

.nav-group .nav-children{
    display:none;
    padding:2px 0 6px 40px;
}

.nav-group.open .nav-children{
    display:block;
}

.submenu-link{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    color:#6280a8;
    border-radius:12px 0 0 12px;
    font-size:14px;
    transition:background var(--transition), color var(--transition);
}

.submenu-icon{
    width:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--navy-2);
    opacity:.92;
    flex:none;
}

.submenu-link.active{
    background:#edf4ff;
    color:var(--navy-2);
    position:relative;
    font-weight:700;
}

.submenu-link.active::after{
    content:'';
    position:absolute;
    right:14px;
    top:50%;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--navy-2);
    transform:translateY(-50%);
}

.nav-single.active .nav-icon,
.nav-group.active > .nav-parent .nav-icon,
.submenu-link.active .submenu-icon{
    color:var(--navy-2);
}

.main-content{
    flex:1;
    min-width:0;
}

.content-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:14px 18px 10px;
}

.content-header h1{
    margin:0;
    font-size:27px;
    font-weight:600;
    color:#17202b;
}

.header-badges{
    display:flex;
    gap:10px;
}

.date-badge,
.time-badge{
    color:#fff;
    padding:10px 15px;
    border-radius:18px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
}

.date-badge{
    background:var(--navy-2);
}

.time-badge{
    background:#c63f6d;
    min-width:96px;
    justify-content:center;
}

.content-area{
    padding:0 12px 16px;
}

.page-title{
    margin:0 0 14px;
    font-size:24px;
}

.page-title-blue{
    color:var(--navy-2);
    font-weight:500;
}

.dark-title{
    color:#1f2d3d;
    font-size:24px;
    font-weight:600;
}

/* =========================
   CARDS / DASHBOARD
========================= */
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:14px;
}

.stat-card{
    height:98px;
    border-radius:16px;
    color:#fff;
    box-shadow:var(--shadow);
    padding:10px 14px 26px;
    position:relative;
    overflow:hidden;
}

.stat-card h2{
    margin:0;
    font-size:28px;
    line-height:1.05;
    font-weight:700;
}

.stat-card p{
    margin:10px 0 0;
    font-size:14px;
}

.stat-card .more{
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    text-align:center;
    font-size:12px;
    opacity:.98;
}

.stat-card .icon-bg{
    position:absolute;
    right:16px;
    top:10px;
    font-size:68px;
    opacity:.16;
    line-height:1;
}

.stat-card::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:18px;
    background:rgba(0,0,0,.10);
}

.green{background:linear-gradient(90deg,#1da67a,#35c06d)}
.cyan{background:linear-gradient(90deg,#1f7fbd,#2d68c4)}
.orange{background:linear-gradient(90deg,#f1ab2f,#d97111)}
.violet{background:linear-gradient(90deg,#4a64d4,#2d68c4)}
.purple{background:linear-gradient(90deg,#6d4ab5,#2d68c4)}
.blue{background:linear-gradient(90deg,#3b78d8,#2d68c4)}

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:16px;
}

.card{
    background:var(--card);
    border:1px solid rgba(0,0,0,.04);
    border-radius:18px;
    padding:14px;
    box-shadow:var(--shadow);
}

.card-title{
    margin:0 0 12px;
    color:var(--navy-2);
    font-size:19px;
    font-weight:700;
}

.inline-card{
    margin-bottom:14px;
}

.narrow-card{
    border-radius:14px;
}

.single-grid-gap{
    grid-template-columns:1fr;
    gap:0;
}

.table-card{
    padding:0;
    border-radius:16px;
    overflow:hidden;
}

.label-mini{
    display:inline-block;
    background:var(--navy-2);
    color:#fff;
    padding:6px 9px;
    border-radius:4px;
    font-weight:700;
    margin-bottom:10px;
}

.timeline-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.timeline-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--navy-2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:14px;
}

.timeline-line{
    width:3px;
    background:#d9dfe8;
    border-radius:4px;
    align-self:stretch;
    margin-left:12px;
}

.announcement-box{
    flex:1;
    border:1px solid #e7eaf0;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
}

.announcement-head{
    background:#eef4ff;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--navy-2);
    font-weight:700;
}

.announcement-body{
    padding:13px 12px;
    color:#596579;
    font-size:14px;
}

.announcement-meta{
    font-size:11px;
    color:#90a0b2;
    margin-left:4px;
}

.activity-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(180deg,#d9e3f4,#5d87d3);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.activity-main{
    flex:1;
}

.activity-name{
    font-weight:700;
    font-size:12px;
    color:#2f2f2f;
    margin-bottom:4px;
}

.activity-strip{
    background:#d7dfeb;
    border-radius:4px;
    padding:6px 10px;
    font-size:12px;
    color:#59697e;
}

.activity-time{
    font-size:11px;
    color:#9a9a9a;
    white-space:nowrap;
}

/* =========================
   TABLE / FORM / BUTTON
========================= */
.toolbar,
.table-controls,
.data-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.toolbar{
    margin-bottom:14px;
}

.master-toolbar{
    margin-bottom:10px;
}

.toolbar-actions,
.panel-actions,
.top-action-group{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.table-wrap,
.big-table-wrap{
    overflow:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
}

.table th,
.table td{
    padding:11px 13px;
    border-bottom:1px solid #ebeff4;
    text-align:left;
    font-size:14px;
}

.table th{
    background:#edf3fb;
    color:var(--navy-2);
}

.striped-table thead th{
    background:#4094e5;
    color:#0f1f33;
    border-right:1px solid rgba(255,255,255,.35);
}

.striped-table thead th:last-child{
    border-right:none;
}

.striped-table tbody tr:nth-child(odd){
    background:#eef0fb;
}

.striped-table tbody tr:nth-child(even){
    background:#ffffff;
}

.striped-table tbody td{
    border-bottom:1px solid #e5e8f2;
}

.master-table td,
.master-table th{
    font-size:15px;
}

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

.big-table thead th{
    background:#4094e5;
    color:#0e1e33;
    padding:10px 8px;
    font-size:13px;
    border-right:1px solid rgba(255,255,255,.35);
    white-space:nowrap;
}

.big-table thead th:last-child{
    border-right:none;
}

.big-table tbody td{
    padding:10px 8px;
    font-size:13px;
    border-bottom:1px solid #e7ebf4;
    vertical-align:top;
}

.big-table tbody tr:nth-child(odd){
    background:#eef0fb;
}

.big-table tbody tr:nth-child(even){
    background:#fff;
}

.big-table .num-col{
    width:48px;
    text-align:center;
}

.table-length,
.table-search{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#3a4a60;
}

.small-select{
    width:86px;
    padding:7px 10px;
}

.compact-input{
    width:170px;
    padding:8px 10px;
}

.table-footer-note{
    padding:10px 14px 14px;
    font-size:13px;
    color:#6a7789;
}

.table-footer-lite{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 16px 16px;
    gap:12px;
    flex-wrap:wrap;
    font-size:13px;
    color:#333;
}

.pager-lite{
    display:flex;
    align-items:center;
    gap:0;
}

.pager-lite span{
    border:1px solid #d8dfeb;
    padding:8px 14px;
    background:#fff;
    color:#7c8796;
}

.pager-lite .active{
    background:#3f93e5;
    color:#fff;
}

.btn{
    display:inline-block;
    padding:9px 14px;
    border-radius:10px;
    border:none;
    background:var(--navy-2);
    color:#fff;
    cursor:pointer;
    transition:background var(--transition), transform var(--transition);
}

.btn:hover{
    background:var(--navy);
}

.btn.secondary{
    background:#78889d;
}

.btn.secondary:hover{
    background:#647488;
}

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

.btn.danger:hover{
    background:#be443f;
}

.btn.success{
    background:var(--success);
}

.btn.success:hover{
    background:#198552;
}

.btn.small{
    padding:6px 10px;
    font-size:12px;
}

.round-btn{
    border-radius:999px;
    padding:8px 14px;
}

.pill-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:none;
    border-radius:999px;
    padding:8px 14px;
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
}

.pill-btn.green{background:#11a750}
.pill-btn.blue{background:#4291e4}
.pill-btn.orange{background:#f2a112}
.pill-btn.red{background:#e05a45}
.pill-btn.gray{background:#7d8ea4}

.form-group{
    margin-bottom:14px;
}

.form-group label{
    display:block;
    margin-bottom:7px;
    font-weight:700;
    color:#314154;
}

.form-control{
    width:100%;
    padding:11px 12px;
    border:1px solid #ccd7e5;
    border-radius:10px;
    background:#fff;
    color:var(--text);
}

.form-control:focus{
    outline:none;
    border-color:var(--navy-2);
    box-shadow:0 0 0 3px rgba(45,104,196,.10);
}

.two-col,
.form-grid,
.form-grid-2,
.form-grid-3,
.form-grid-4{
    display:grid;
    gap:16px;
}

.two-col,
.form-grid,
.form-grid-2{
    grid-template-columns:1fr 1fr;
}

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

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

.check-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:10px 0 14px;
}

.check-grid label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:#31465f;
}

.muted,
.placeholder-note{
    color:var(--muted);
}

.muted-helper{
    display:block;
    margin:-4px 0 10px;
    color:#8a98ab;
    font-size:12px;
}

.status-badge{
    padding:5px 10px;
    border-radius:20px;
    color:#fff;
    font-size:12px;
}

.status-active{
    background:var(--success);
}

.status-draft{
    background:var(--warning);
}

.status-mini{
    display:inline-block;
    background:#17a44e;
    color:#fff;
    border-radius:3px;
    padding:3px 7px;
    font-size:11px;
    font-weight:700;
}

.status-mini.orange{
    background:#e56a43;
}

.status-mini.gray{
    background:#8390a3;
}

.small-badge{
    display:inline-block;
    border-radius:3px;
    padding:3px 6px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:#17a44e;
    margin:0 2px 2px 0;
}

.small-badge.red{background:#e15b45}
.small-badge.orange{background:#f0a11a}
.small-badge.blue{background:#3f93e5}

.tag-red{
    display:inline-block;
    background:#df5d49;
    color:#fff;
    border-radius:3px;
    padding:2px 8px;
    font-size:11px;
    font-weight:700;
}

.tag-green{
    display:inline-block;
    background:#17a44e;
    color:#fff;
    border-radius:999px;
    padding:3px 9px;
    font-size:11px;
    font-weight:700;
}

.tag-orange{
    display:inline-block;
    background:#f2a112;
    color:#fff;
    border-radius:999px;
    padding:3px 9px;
    font-size:11px;
    font-weight:700;
}

.alert{
    padding:12px 14px;
    border-radius:10px;
    margin-bottom:15px;
}

.alert.success{
    background:#e7f7ef;
    color:#176640;
}

.alert.error{
    background:#fdeceb;
    color:#8c2b2b;
}

.alert-success-lite{
    margin:0 16px 14px;
    background:#e9f8ef;
    border:1px solid #bfe7cb;
    color:#18794e;
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
}

.alert-error-lite{
    margin:0 16px 14px;
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#be123c;
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
}

.master-inline-note{
    margin:0 0 12px;
    padding:10px 14px;
    border-radius:10px;
    font-size:14px;
    background:#eef4ff;
    color:#23508f;
}

.master-inline-note.warning{
    background:#f2a014;
    color:#fff;
}

.page-section-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    color:#3d6fb3;
    font-size:18px;
    font-weight:500;
}

.page-card-flat{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:18px;
    padding:0;
    box-shadow:none;
    overflow:hidden;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px 10px;
    gap:10px;
    flex-wrap:wrap;
}

.section-head h2{
    margin:0;
    color:#3d6fb3;
    font-size:18px;
    font-weight:500;
}

.data-toolbar{
    padding:0 16px 10px;
    gap:12px;
}

.data-toolbar .left,
.data-toolbar .right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.data-toolbar label{
    font-size:14px;
    color:#35485f;
}

.data-toolbar input[type="text"],
.data-toolbar select{
    border:1px solid #b7c8e3;
    border-radius:12px;
    padding:7px 10px;
    min-width:120px;
}

.data-toolbar .search-input{
    min-width:180px;
}

.icon-actions,
.table-actions{
    display:flex;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
}

.icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border:1px solid #d8dee9;
    border-radius:4px;
    background:#fff;
    color:#334155;
    font-size:14px;
    transition:background var(--transition), border-color var(--transition);
}

.icon-btn:hover{
    background:#f5f7fb;
}

.icon-btn[data-swal-action="delete"]:hover{
    background:#fff1f2;
    border-color:#fecdd3;
}

.table-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:56px;
    padding:6px 10px;
    border-radius:8px;
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.table-btn-print{
    background:#16a34a;
}

.table-btn-delete{
    background:#dc3545;
}

.thumbnail-mini{
    width:46px;
    height:56px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid #dbe3ef;
    background:#fff;
}

/* =========================
   MODAL
========================= */
.app-modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:16px;
}

.app-modal-backdrop.show{
    display:flex;
}

.app-modal-card{
    width:100%;
    max-width:640px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.24);
}

.app-modal-header{
    background:#2d68c4;
    color:#fff;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.app-modal-header h3{
    margin:0;
    font-size:22px;
    font-weight:700;
}

.app-modal-close{
    color:#fff;
    font-size:28px;
    line-height:1;
}

.app-modal-body{
    padding:18px;
}

.mapel-modal-card{
    max-width:620px;
}

.ujian-edit-modal-card{
    max-width:760px;
}

.modal-actions-right{
    justify-content:flex-end;
    margin-top:8px;
}

.modal-actions-center{
    justify-content:center;
    margin-top:12px;
}

.modal-template-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border:1px solid #dce5f1;
    border-radius:12px;
    background:#f7faff;
    margin-bottom:14px;
}

.template-title{
    font-weight:700;
    color:#233247;
    margin-bottom:4px;
}

.template-note{
    font-size:13px;
    color:#65748a;
}

/* =========================
   LOGIN ADMIN
========================= */
.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(135deg,#2d68c4,#2457a8,#6f7f98);
}

.login-box{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 15px 30px rgba(0,0,0,.20);
}

/* =========================
   LOGIN SISWA
========================= */
.student-login-page{
    min-height:100vh;
    background:#e9edf3;
    overflow-x:hidden;
}

.student-login-topbar{
    height:132px;
    background:#2d68c4;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(45,104,196,.18);
}

.student-login-topbar::before,
.student-login-topbar::after{
    content:"";
    position:absolute;
    top:-30px;
    bottom:-30px;
    width:120px;
    background:rgba(255,255,255,.06);
    transform:skewX(-30deg);
}

.student-login-topbar::before{
    left:42px;
}

.student-login-topbar::after{
    left:150px;
    width:155px;
    background:rgba(255,255,255,.035);
}

.student-brand{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    color:#fff;
}

.student-brand-top{
    max-width:860px;
}

.student-brand-text{
    min-width:0;
}

.student-brand-logo{
    object-fit:contain;
}

.student-brand-logo-left{
    width:46px;
    height:46px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.student-brand-title{
    font-size:20px;
    font-weight:700;
    line-height:1.1;
}

.student-brand-subtitle{
    font-size:12px;
    font-weight:700;
    margin-top:4px;
    color:rgba(255,255,255,.90);
}

.student-login-card-wrap{
    display:flex;
    justify-content:center;
    padding:0 20px;
    margin-top:-26px;
}

.student-login-shell{
    position:relative;
    width:414px;
    max-width:calc(100vw - 30px);
}

.student-floating-logo{
    position:absolute;
    left:50%;
    top:-34px;
    transform:translateX(-50%);
    z-index:3;
    width:74px;
    height:74px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:studentFloatLogo .75s ease-out;
}

.student-floating-logo img{
    width:74px;
    height:74px;
    object-fit:contain;
    filter:drop-shadow(0 10px 14px rgba(45,104,196,.18));
}

.student-login-card{
    background:rgba(255,255,255,.98);
    border-radius:13px;
    box-shadow:0 24px 44px rgba(45,104,196,.14);
    padding:52px 36px 26px;
    backdrop-filter:blur(2px);
}

.student-fade-in{
    animation:studentFloatIn .55s ease-out;
}

.student-login-card h1{
    margin:4px 0 12px;
    font-size:31px;
    line-height:1.15;
    font-weight:800;
    color:#1f2937;
}

.student-login-card p{
    margin:0 0 30px;
    color:#5b6270;
    font-size:15px;
    line-height:1.62;
    max-width:320px;
}

.student-field{
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:2px solid #c7d0dc;
    padding:10px 0 8px;
    margin-bottom:20px;
    transition:border-color .2s ease, transform .2s ease;
}

.student-field:focus-within{
    border-bottom-color:#2d68c4;
    transform:translateY(-1px);
}

.student-field-icon{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1f2937;
    flex:0 0 22px;
}

.student-field-icon svg,
.student-field-eye svg{
    width:22px;
    height:22px;
}

.student-input{
    border:none;
    outline:none;
    flex:1;
    font-size:15px;
    padding:4px 0;
    background:transparent;
    color:#394252;
}

.student-input::placeholder{
    color:#98a4b4;
}

.student-field-eye{
    border:none;
    background:none;
    padding:0;
    color:#6f7a88;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.student-login-btn{
    width:100%;
    border:none;
    border-radius:28px;
    padding:13px 22px;
    background:#2d68c4;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(45,104,196,.28);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.student-login-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 22px rgba(45,104,196,.34);
    background:#2457a8;
}

.student-demo-note,
.student-alt-link{
    text-align:center;
    font-size:13px;
    color:#7e8792;
    margin-top:14px;
    line-height:1.4;
}

.student-alt-link a{
    color:#2d68c4;
    font-weight:600;
}

/* =========================
   STUDENT APP
========================= */
.student-app-page{
    min-height:100vh;
    background:#eef2f6;
}

.student-app-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 22px;
    background:#fff;
    box-shadow:var(--shadow);
}

.student-app-content{
    padding:18px;
    display:grid;
    gap:16px;
}

/* =========================
   SETTINGS
========================= */
.settings-layout{
    display:grid;
    grid-template-columns:1.4fr .9fr;
    gap:22px;
    align-items:start;
}

.settings-panel{
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 34px rgba(23,38,71,.08);
    border:1px solid #dfe7f3;
    overflow:hidden;
}

.settings-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid #e8edf6;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.settings-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:800;
    color:#305fb0;
}

.settings-tabs{
    display:flex;
    gap:2px;
    flex-wrap:wrap;
    padding:0 16px;
    border-bottom:1px solid #e8edf6;
    background:#fff;
}

.settings-tab{
    padding:12px 14px;
    font-size:13px;
    color:#60708f;
    border-bottom:3px solid transparent;
    font-weight:700;
}

.settings-tab.active{
    color:#305fb0;
    border-color:#305fb0;
    background:#f8fbff;
}

.settings-body{
    padding:22px;
}

.settings-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 22px;
}

.settings-grid .full{
    grid-column:1 / -1;
}

.settings-preview{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.logo-preview-card{
    background:linear-gradient(135deg,#346cc7 0%,#244f94 100%);
    border-radius:18px;
    padding:22px;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height:150px;
}

.logo-preview-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,.12) 0 22%,
        transparent 22% 33%,
        rgba(255,255,255,.08) 33% 56%,
        transparent 56% 100%
    );
}

.logo-preview-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:16px;
}

.logo-preview-badge{
    width:68px;
    height:68px;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.logo-preview-badge img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.logo-upload-box{
    border:2px dashed #c8d8ef;
    border-radius:16px;
    padding:16px;
    background:#fbfdff;
}

.logo-upload-box p{
    margin:0 0 10px;
    color:#637492;
    font-size:13px;
}

.logo-meta{
    display:grid;
    gap:12px;
}

.logo-help{
    font-size:12px;
    color:#7a88a4;
    line-height:1.6;
}

.form-actions-inline{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

/* =========================
   UJIAN / TOKEN / DETAIL
========================= */
.token-card{
    background:#1cb5dc;
    color:#fff;
    border-radius:18px;
    padding:16px 18px;
    min-width:320px;
    box-shadow:0 10px 22px rgba(24,84,132,.24);
    position:relative;
    overflow:hidden;
}

.token-card::after{
    content:'||||||||||||';
    position:absolute;
    right:18px;
    top:14px;
    font-size:56px;
    line-height:1;
    letter-spacing:-5px;
    opacity:.18;
}

.token-card .code{
    font-size:38px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:10px;
}

.token-card .label{
    font-size:16px;
}

.token-meta{
    font-size:14px;
    color:#617292;
    margin-top:12px;
}

.exam-top-grid{
    display:grid;
    grid-template-columns:1.3fr .9fr;
    gap:18px;
    padding:0 16px 16px;
}

.exam-top-grid .left-panel{
    padding-top:6px;
}

.exam-top-grid .form-group{
    margin-bottom:10px;
}

.exam-top-grid .form-group label{
    margin-bottom:6px;
}

.exam-summary{
    font-size:13px;
    color:#222;
    margin-top:6px;
}

.compact-gap{
    gap:10px;
}

.col-stack{
    line-height:1.5;
}

.exam-detail-wrap{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.exam-detail-hero-grid{
    display:grid;
    grid-template-columns:1.4fr .7fr;
    gap:26px;
    align-items:stretch;
}

.exam-main-card,
.exam-status-card{
    border-radius:18px;
    padding:14px 18px;
    color:#fff;
    box-shadow:0 8px 22px rgba(32,80,140,.18);
}

.exam-main-card{
    background:#3c7fc2;
}

.exam-status-card.orange{
    background:#f3a112;
}

.exam-card-label{
    font-size:14px;
    font-weight:600;
    opacity:.95;
    margin-bottom:4px;
}

.exam-card-title{
    font-size:34px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:12px;
}

.exam-status-title{
    font-size:28px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:12px;
}

.exam-card-subtitle{
    font-size:18px;
    font-weight:600;
}

.exam-mini-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px;
}

.mini-stat-card{
    border-radius:16px;
    padding:12px 16px;
    color:#fff;
    box-shadow:0 8px 18px rgba(23,56,94,.14);
}

.mini-stat-card.green{background:#10aa57}
.mini-stat-card.red{background:#e24f3d}
.mini-stat-card.blue{background:#3d86ca}
.mini-stat-card.purple{background:#6b63b6}

.mini-stat-label{
    font-size:15px;
    margin-bottom:8px;
}

.mini-stat-value{
    font-size:22px;
    font-weight:800;
}

.ujian-warning-box{
    margin-top:8px;
    padding:18px 14px;
    border-radius:12px;
    background:#fff;
    text-align:center;
    border:1px solid #e3e7ef;
}

.ujian-warning-box .warn-title{
    font-size:28px;
    font-weight:800;
    color:#111;
    margin-bottom:8px;
}

.action-round{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f2a112;
    color:#fff;
    font-weight:700;
    margin-right:6px;
}

.action-round.red{
    background:#e05a45;
}

.answer-badges .small-badge{
    min-width:34px;
    text-align:center;
}

.right-buttons{
    display:flex;
    justify-content:flex-end;
    gap:0;
}

.right-buttons .square{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:30px;
    color:#fff;
    text-decoration:none;
}

.right-buttons .print{
    background:#de5a45;
}

.right-buttons .download{
    background:#17a44e;
}

.right-buttons .back{
    background:#f4f4f4;
    color:#444;
    width:auto;
    padding:0 12px;
    border:1px solid #e1e6ef;
}

/* =========================
   SWEETALERT
========================= */
.swal2-container{
    z-index:20050 !important;
}

.swal2-popup{
    z-index:20051 !important;
}

.cbt-swal-popup{
    border-radius:22px !important;
    padding:22px 22px 18px !important;
    box-shadow:0 22px 70px rgba(15,23,42,.22) !important;
}

.cbt-swal-title{
    font-size:28px !important;
    font-weight:800 !important;
    color:#0f172a !important;
}

.cbt-swal-text{
    font-size:15px !important;
    color:#475569 !important;
    line-height:1.65 !important;
}

.cbt-swal-confirm,
.cbt-swal-cancel{
    border:none !important;
    border-radius:999px !important;
    padding:12px 22px !important;
    font-weight:700 !important;
    min-width:140px !important;
    box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

.cbt-swal-confirm{
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    color:#fff !important;
}

.cbt-swal-cancel{
    background:#e2e8f0 !important;
    color:#334155 !important;
}

.cbt-swal-toast{
    border-radius:16px !important;
    box-shadow:0 18px 48px rgba(15,23,42,.16) !important;
}

/* =========================
   ANIMATION
========================= */
@keyframes studentFloatIn{
    0%{
        opacity:0;
        transform:translateY(18px) scale(.985);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes studentFloatLogo{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(-10px) scale(.92);
    }
    100%{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1180px){
    .topbar{
        padding-left:16px;
    }

    .sidebar{
        position:fixed;
        left:0;
        top:44px;
        bottom:0;
        z-index:1200;
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:0 10px 30px rgba(0,0,0,.18);
    }

    .sidebar.show{
        transform:translateX(0);
    }

    .app-body{
        display:block;
    }

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

    .dashboard-grid,
    .two-col,
    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4,
    .check-grid,
    .settings-layout,
    .settings-grid,
    .exam-top-grid,
    .exam-detail-hero-grid,
    .exam-mini-cards{
        grid-template-columns:1fr;
    }

    .token-card{
        min-width:0;
    }
}

@media (max-width:991px){
    .topbar{
        padding:0 12px !important;
    }

    .topbar-right{
        gap:10px;
    }

    .top-link b{
        display:none;
    }
}

@media (max-width:720px){
    .cards{
        grid-template-columns:1fr;
    }

    .header-badges{
        flex-wrap:wrap;
    }

    .content-header{
        flex-direction:column;
        gap:10px;
    }

    .student-login-topbar{
        height:126px;
    }

    .student-brand{
        padding:12px;
    }

    .student-brand-logo-left{
        width:40px;
        height:40px;
    }

    .student-brand-title{
        font-size:17px;
    }

    .student-login-card-wrap{
        margin-top:-20px;
        padding:0 12px;
    }

    .student-login-shell{
        width:100%;
    }

    .student-floating-logo{
        top:-30px;
        width:66px;
        height:66px;
    }

    .student-floating-logo img{
        width:66px;
        height:66px;
    }

    .student-login-card{
        padding:46px 22px 22px;
    }

    .student-login-card h1{
        font-size:24px;
    }

    .student-login-card p{
        font-size:14px;
        margin-bottom:22px;
    }

    .modal-template-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .app-modal-header h3{
        font-size:18px;
    }
}

@media (min-width:992px){
    .sidebar{
        position:static !important;
        transform:none !important;
        left:auto !important;
        top:auto !important;
        bottom:auto !important;
        box-shadow:none !important;
    }
}

/* =========================
   DESKTOP COLLAPSE SIDEBAR
========================= */
body.desktop-sidebar-collapsed .sidebar{
    width:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-right:none !important;
}

body.desktop-sidebar-collapsed .topbar{
    padding-left:16px !important;
}
/* =========================================
   GREEN PREMIUM THEME OVERRIDE
   Tempel di paling bawah style.css
   Tidak mengubah layout, hanya upgrade visual
========================================= */

:root{
    --navy:#166534;
    --navy-2:#15803d;
    --navy-3:#16a34a;
    --navy-soft:#eaf8ef;

    --blue:#15803d;
    --blue-2:#16a34a;
    --blue-soft:#eaf8ef;

    --orange:#f59e0b;
    --orange-2:#d97706;

    --sidebar:#f7fbf8;
    --page:#edf3ee;
    --card:#ffffff;

    --line:#dbe8de;
    --text:#1f2937;
    --muted:#6b7280;

    --danger:#dc3545;
    --success:#15803d;
    --warning:#d79a18;

    --shadow:0 8px 24px rgba(21,128,61,.10);
    --shadow-lg:0 18px 40px rgba(21,128,61,.16);
}

/* background dasar halaman */
body{
    background:
        radial-gradient(circle at top left, rgba(22,163,74,.07), transparent 24%),
        linear-gradient(180deg, #f7fbf8 0%, #edf3ee 100%);
    color:var(--text);
}

/* =========================
   TOPBAR / SIDEBAR PREMIUM GREEN
========================= */
.topbar,
.sidebar-topbar,
.quick-menu{
    background:
        linear-gradient(rgba(7,84,38,.68), rgba(7,84,38,.68)),
        url('../img/bg-hijau.png') center/cover no-repeat !important;
    color:#fff;
}

.topbar{
    box-shadow:0 10px 30px rgba(21,128,61,.18);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar{
    background:linear-gradient(180deg,#f9fcfa 0%, #f3f8f4 100%);
    border-right:1px solid var(--line);
}

.sidebar-label{
    color:var(--navy-2);
}

.logo-circle,
.logo-circle-image{
    background:rgba(255,255,255,.14);
    box-shadow:
        0 10px 24px rgba(0,0,0,.12),
        inset 0 0 0 1px rgba(255,255,255,.16);
}

.logo-title-main,
.logo-title-sub,
.top-link,
.user-toggle,
.topbar,
.sidebar-topbar{
    color:#fff !important;
}

.top-circle,
.user-badge{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(4px);
}

/* =========================
   SIDEBAR MENU HIJAU
========================= */
.nav-icon,
.submenu-icon{
    color:var(--navy-2);
}

.nav-single,
.nav-parent{
    color:#557164;
    transition:all .22s ease;
}

.nav-single:hover,
.nav-parent:hover,
.submenu-link:hover{
    background:#edf8f0;
    color:var(--navy-2);
}

.nav-single.active,
.nav-group.active > .nav-parent{
    background:linear-gradient(90deg, rgba(21,128,61,.12), rgba(21,128,61,.05));
    color:var(--navy-2);
    font-weight:700;
    box-shadow:inset 3px 0 0 var(--navy-2);
}

.submenu-link{
    color:#5f7b6d;
}

.submenu-link.active{
    background:#edf8f0;
    color:var(--navy-2);
    box-shadow:inset 3px 0 0 var(--navy-3);
}

.submenu-link.active::after{
    background:var(--navy-2);
}

/* =========================
   CONTENT HEADER
========================= */
.content-header h1,
.page-title,
.dark-title{
    color:#173224;
}

.date-badge{
    background:linear-gradient(135deg,#15803d,#16a34a);
    box-shadow:0 8px 18px rgba(21,128,61,.18);
}

.time-badge{
    background:linear-gradient(135deg,#d97706,#f59e0b);
    box-shadow:0 8px 18px rgba(217,119,6,.18);
}

/* =========================
   CARD PREMIUM
========================= */
.card,
.page-card-flat,
.settings-panel,
.student-app-header,
.login-box,
.student-login-card,
.app-modal-card{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(21,128,61,.08);
    box-shadow:
        0 16px 34px rgba(16,24,40,.05),
        0 8px 24px rgba(21,128,61,.08);
}

.card,
.page-card-flat,
.settings-panel,
.student-login-card,
.login-box{
    border-radius:18px;
}

.card-title,
.section-head h2,
.page-section-title,
.settings-title,
.settings-tab.active{
    color:var(--navy-2);
}

.label-mini{
    background:linear-gradient(135deg,#15803d,#16a34a);
    color:#fff;
    border-radius:999px;
    padding:6px 12px;
    box-shadow:0 6px 14px rgba(21,128,61,.16);
}

/* =========================
   DASHBOARD STAT CARD
========================= */
.stat-card{
    box-shadow:0 16px 32px rgba(15,23,42,.10);
    border:1px solid rgba(255,255,255,.12);
}

.stat-card::after{
    background:rgba(0,0,0,.12);
}

.green{background:linear-gradient(135deg,#15803d,#22c55e)}
.cyan{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.orange{background:linear-gradient(135deg,#d97706,#f59e0b)}
.violet{background:linear-gradient(135deg,#2f7a45,#16a34a)}
.purple{background:linear-gradient(135deg,#3f6f47,#22c55e)}
.blue{background:linear-gradient(135deg,#166534,#16a34a)}

/* =========================
   TABLE PREMIUM
========================= */
.table,
.big-table,
.announcement-box{
    border-radius:16px;
    overflow:hidden;
}

.table th{
    background:#edf8f0;
    color:var(--navy-2);
}

.table td{
    border-bottom:1px solid #edf2ee;
}

.table tbody tr:hover{
    background:rgba(21,128,61,.035);
}

.striped-table thead th,
.big-table thead th{
    background:linear-gradient(135deg,#15803d,#16a34a);
    color:#fff;
    border-right:1px solid rgba(255,255,255,.16);
}

.striped-table tbody tr:nth-child(odd),
.big-table tbody tr:nth-child(odd){
    background:#f5fbf6;
}

.striped-table tbody tr:nth-child(even),
.big-table tbody tr:nth-child(even){
    background:#ffffff;
}

.striped-table tbody td,
.big-table tbody td{
    border-bottom:1px solid #e7f0e9;
}

/* =========================
   BUTTON PREMIUM
========================= */
.btn,
.student-login-btn,
.pill-btn,
.user-action-btn{
    transition:all .22s ease;
}

.btn{
    background:linear-gradient(135deg,#15803d,#16a34a);
    color:#fff;
    border:none;
    box-shadow:0 10px 20px rgba(21,128,61,.16);
}

.btn:hover{
    background:linear-gradient(135deg,#166534,#15803d);
    transform:translateY(-1px);
    box-shadow:0 14px 24px rgba(21,128,61,.22);
}

.btn.secondary{
    background:linear-gradient(135deg,#64748b,#7c8ca0);
}

.btn.secondary:hover{
    background:linear-gradient(135deg,#556476,#64748b);
}

.btn.success{
    background:linear-gradient(135deg,#15803d,#22c55e);
}

.btn.success:hover{
    background:linear-gradient(135deg,#166534,#16a34a);
}

.btn.danger{
    background:linear-gradient(135deg,#dc3545,#ef4444);
}

.btn.danger:hover{
    background:linear-gradient(135deg,#c92d3c,#dc3545);
}

.pill-btn.green{background:linear-gradient(135deg,#15803d,#22c55e)}
.pill-btn.blue{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.pill-btn.orange{background:linear-gradient(135deg,#d97706,#f59e0b)}
.pill-btn.red{background:linear-gradient(135deg,#dc3545,#ef4444)}
.pill-btn.gray{background:linear-gradient(135deg,#64748b,#94a3b8)}

.student-login-btn{
    background:linear-gradient(135deg,#166534 0%, #15803d 55%, #16a34a 100%);
    box-shadow:0 12px 24px rgba(21,128,61,.22);
    font-weight:700;
}

.student-login-btn:hover{
    background:linear-gradient(135deg,#14532d 0%, #166534 55%, #15803d 100%);
    box-shadow:0 16px 28px rgba(21,128,61,.28);
}

/* =========================
   FORM PREMIUM
========================= */
.form-control,
.data-toolbar input[type="text"],
.data-toolbar select,
.small-select,
.compact-input{
    border:1px solid #cfe0d2;
    background:#fff;
    color:#1f2937;
}

.form-control:focus,
.data-toolbar input[type="text"]:focus,
.data-toolbar select:focus,
.small-select:focus,
.compact-input:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 4px rgba(34,197,94,.10);
}

.form-group label{
    color:#274435;
}

/* =========================
   ALERT / BADGE / STATUS
========================= */
.alert.success,
.alert-success-lite{
    background:#ecfdf3;
    color:#166534;
    border:1px solid #b7ebc8;
}

.alert.error,
.alert-error-lite{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

.master-inline-note{
    background:#edf8f0;
    color:#166534;
    border:1px solid #cfead8;
}

.master-inline-note.warning{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
    color:#fff;
    border:none;
}

.status-active,
.status-mini,
.small-badge,
.tag-green{
    background:linear-gradient(135deg,#15803d,#22c55e);
}

.status-draft,
.tag-orange{
    background:linear-gradient(135deg,#d97706,#f59e0b);
}

.small-badge.red,
.tag-red{
    background:linear-gradient(135deg,#dc3545,#ef4444);
}

.small-badge.blue{
    background:linear-gradient(135deg,#0f766e,#14b8a6);
}

.status-mini.gray{
    background:linear-gradient(135deg,#64748b,#94a3b8);
}

/* =========================
   LOGIN SISWA AREA HIJAU PREMIUM
========================= */
.student-login-page{
    background:
        radial-gradient(circle at top center, rgba(34,197,94,.08), transparent 24%),
        linear-gradient(180deg,#f5faf6 0%, #edf3ee 100%);
}

.student-login-topbar{
    background:
        linear-gradient(rgba(7,84,38,.62), rgba(7,84,38,.62)),
        url('../img/bg-hijau.png') center/cover no-repeat !important;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.06),
        0 8px 24px rgba(21,128,61,.18);
}

.student-login-topbar::before,
.student-login-topbar::after{
    background:rgba(255,255,255,.07);
}

.student-brand-title,
.student-brand-subtitle{
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.16);
}

.student-floating-logo img{
    filter:drop-shadow(0 12px 18px rgba(21,128,61,.18));
}

.student-login-card{
    background:rgba(255,255,255,.97);
    border:1px solid rgba(21,128,61,.08);
    box-shadow:
        0 28px 48px rgba(15,23,42,.08),
        0 14px 30px rgba(21,128,61,.10);
}

.student-login-card h1{
    color:#1f2937;
}

.student-login-card p{
    color:#5f6b63;
}

.student-field{
    border-bottom:2px solid #cad9ce;
}

.student-field:focus-within{
    border-bottom-color:#16a34a;
}

.student-field-icon,
.student-field-eye{
    color:#325543;
}

.student-input{
    color:#243142;
}

.student-input::placeholder{
    color:#93a39a;
}

.student-alt-link a{
    color:#15803d;
}

/* =========================
   ANNOUNCEMENT / TIMELINE / ACTIVITY
========================= */
.announcement-head{
    background:#edf8f0;
    color:var(--navy-2);
}

.timeline-icon{
    background:linear-gradient(135deg,#15803d,#16a34a);
    box-shadow:0 6px 14px rgba(21,128,61,.16);
}

.timeline-line{
    background:#d7e7da;
}

.activity-strip{
    background:#eef6f0;
    color:#4c6254;
}

.avatar{
    background:linear-gradient(180deg,#d8f0df,#4ca96a);
}

/* =========================
   ICON BUTTON / ACTION
========================= */
.icon-btn{
    border:1px solid #d7e4da;
    background:#fff;
    color:#355041;
}

.icon-btn:hover{
    background:#eff8f1;
    border-color:#bfd6c5;
}

.action-round{
    background:linear-gradient(135deg,#d97706,#f59e0b);
}

.action-round.red{
    background:linear-gradient(135deg,#dc3545,#ef4444);
}

.table-btn-print{
    background:linear-gradient(135deg,#15803d,#22c55e);
}

.table-btn-delete{
    background:linear-gradient(135deg,#dc3545,#ef4444);
}

/* =========================
   MODAL / SETTINGS
========================= */
.app-modal-header{
    background:
        linear-gradient(rgba(7,84,38,.90), rgba(7,84,38,.90)),
        url('../img/bg-hijau.png') center/cover no-repeat !important;
}

.modal-template-box,
.logo-upload-box{
    background:#f7fcf8;
    border-color:#d7e7da;
}

.settings-head{
    background:linear-gradient(180deg,#ffffff 0%, #f7fcf8 100%);
}

.settings-tab.active{
    background:#f4fbf6;
    border-color:#15803d;
    color:#15803d;
}

.logo-preview-card{
    background:linear-gradient(135deg,#15803d 0%, #166534 100%);
}

/* =========================
   SWEETALERT GREEN
========================= */
.cbt-swal-popup{
    border:1px solid rgba(21,128,61,.08) !important;
}

.cbt-swal-confirm{
    background:linear-gradient(135deg,#15803d,#16a34a) !important;
}

.cbt-swal-cancel{
    background:#e5efe8 !important;
    color:#355041 !important;
}

.cbt-swal-title{
    color:#173224 !important;
}

.cbt-swal-text{
    color:#52635a !important;
}

/* =========================
   SCROLLBAR HALUS
========================= */
.sidebar-nav::-webkit-scrollbar,
.big-table-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar{
    width:10px;
    height:10px;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.big-table-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb{
    background:#c7d9cb;
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover,
.big-table-wrap::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover{
    background:#a8c6b0;
    border:2px solid transparent;
    background-clip:padding-box;
}

/* =========================
   RESPONSIVE TETAP AMAN
========================= */
@media (max-width:1180px){
    .topbar{
        box-shadow:0 8px 24px rgba(21,128,61,.16);
    }

    .sidebar{
        box-shadow:0 18px 34px rgba(15,23,42,.12);
    }
}

@media (max-width:720px){
    .student-login-card,
    .card,
    .settings-panel,
    .page-card-flat{
        border-radius:16px;
    }

    .student-login-btn,
    .btn{
        box-shadow:0 10px 20px rgba(21,128,61,.16);
    }
}
/* =========================================
   FINAL LOGIN SISWA - PREMIUM GREEN
   SIAP PAKAI
========================================= */

.student-login-page{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    background:
        radial-gradient(circle at top center, rgba(31,122,69,.08), transparent 24%),
        linear-gradient(180deg,#f6fbf7 0%, #edf3ef 100%);
}

/* =========================
   TOP HEADER
========================= */
.student-login-topbar{
    height:132px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(rgba(10,56,31,.74), rgba(10,56,31,.74)),
        url('../img/bg-hijau.png') center/cover no-repeat;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.06),
        0 10px 28px rgba(15,77,44,.16);
}

.student-login-topbar::before,
.student-login-topbar::after{
    content:"";
    position:absolute;
    top:-30px;
    bottom:-30px;
    transform:skewX(-30deg);
    background:rgba(255,255,255,.06);
    pointer-events:none;
}

.student-login-topbar::before{
    left:42px;
    width:120px;
}

.student-login-topbar::after{
    left:150px;
    width:155px;
    background:rgba(255,255,255,.035);
}

.student-brand{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    color:#fff;
}

.student-brand-top{
    max-width:860px;
}

.student-brand-text{
    min-width:0;
}

.student-brand-logo{
    display:block;
    object-fit:contain;
}

.student-brand-logo-left{
    width:46px;
    height:46px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.student-brand-title{
    font-size:20px;
    font-weight:700;
    line-height:1.1;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.18);
}

.student-brand-subtitle{
    margin-top:4px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.92);
    text-shadow:0 2px 8px rgba(0,0,0,.14);
}

/* =========================
   LOGIN STAGE
========================= */
.student-login-stage{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding-bottom:120px;
}

/* glow halus bawah */
.student-network-glow{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(1200px, 95vw);
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(circle at center,
            rgba(31,122,69,.11) 0%,
            rgba(31,122,69,.06) 34%,
            rgba(31,122,69,.025) 52%,
            transparent 72%);
    filter:blur(6px);
    z-index:1;
    pointer-events:none;
}

/* =========================
   BACKGROUND JARINGAN
========================= */
.student-network{
    position:absolute;
    bottom:10px;
    width:min(560px, 36vw);
    opacity:.18;
    z-index:2;
    pointer-events:none;
}

.student-network img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:
        drop-shadow(0 16px 24px rgba(15,77,44,.08))
        saturate(1.03);
}

.student-network-left{
    left:max(8px, 1vw);
    clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.student-network-left img{
    transform:scaleX(-1);
}

.student-network-right{
    right:max(8px, 1vw);
    clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* =========================
   LOGIN CARD WRAP
========================= */
.student-login-card-wrap{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:center;
    padding:0 20px;
    margin-top:-26px;
}

.student-login-shell{
    position:relative;
    z-index:6;
    width:414px;
    max-width:calc(100vw - 30px);
}

.student-login-shell::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-16px;
    transform:translateX(-50%);
    width:560px;
    max-width:88vw;
    height:100px;
    background:radial-gradient(circle at center, rgba(20,90,50,.08), transparent 70%);
    filter:blur(14px);
    z-index:1;
    pointer-events:none;
}

/* =========================
   FLOATING LOGO
========================= */
.student-floating-logo{
    position:absolute;
    left:50%;
    top:-34px;
    transform:translateX(-50%);
    z-index:8;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    animation:studentFloatLogo .75s ease-out;
}

.student-floating-logo img{
    width:74px;
    height:74px;
    object-fit:contain;
    filter:drop-shadow(0 14px 20px rgba(15,77,44,.18));
}

/* =========================
   LOGIN CARD
========================= */
.student-login-card{
    position:relative;
    z-index:7;
    padding:52px 34px 24px;
    border-radius:20px;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(20,90,50,.08);
    box-shadow:
        0 30px 60px rgba(15,23,42,.08),
        0 16px 34px rgba(15,77,44,.10),
        inset 0 0 0 1px rgba(255,255,255,.20);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    animation:studentFloatIn .55s ease-out;
}

.student-login-card h1{
    margin:4px 0 12px;
    font-size:31px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.4px;
    color:#1f2937;
}

.student-login-card p{
    margin:0 0 28px;
    max-width:320px;
    color:#627066;
    font-size:15px;
    line-height:1.62;
}

/* =========================
   ALERT
========================= */
.student-login-card .alert{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
}

.student-login-card .alert.error{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

/* =========================
   FORM
========================= */
.student-login-card form{
    position:relative;
    z-index:2;
}

.student-field{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding:10px 0 8px;
    border-bottom:2px solid #cfddd3;
    transition:
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.student-field:focus-within{
    border-bottom-color:#1f7a45;
    transform:translateY(-1px);
    box-shadow:0 8px 16px rgba(31,122,69,.06);
}

.student-field-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#355442;
}

.student-field-icon svg,
.student-field-eye svg{
    width:22px;
    height:22px;
}

.student-input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    padding:4px 0;
    font-size:15px;
    color:#243142;
}

.student-input::placeholder{
    color:#99a89f;
}

.student-field-eye{
    border:none;
    background:none;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#355442;
    cursor:pointer;
    transition:opacity .2s ease, transform .2s ease;
}

.student-field-eye:hover{
    opacity:.85;
    transform:scale(1.04);
}

/* =========================
   BUTTON
========================= */
.student-login-btn{
    width:100%;
    border:none;
    border-radius:28px;
    padding:13px 22px;
    background:linear-gradient(135deg,#0f4d2c 0%, #145a32 52%, #1f7a45 100%);
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:
        0 14px 28px rgba(20,90,50,.22),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.student-login-btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,#0c4025 0%, #0f4d2c 52%, #145a32 100%);
    box-shadow:
        0 18px 32px rgba(20,90,50,.28),
        inset 0 1px 0 rgba(255,255,255,.10);
}

/* =========================
   FOOTER NOTE
========================= */
.student-demo-note,
.student-alt-link{
    margin-top:14px;
    text-align:center;
    font-size:13px;
    line-height:1.4;
    color:#6c7a70;
}

.student-alt-link a{
    color:#145a32;
    font-weight:700;
}

.student-bottom-ornament{
    display:none;
}

/* =========================
   ANIMATION
========================= */
.student-fade-in{
    animation:studentFloatIn .55s ease-out;
}

@keyframes studentFloatIn{
    0%{
        opacity:0;
        transform:translateY(18px) scale(.985);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes studentFloatLogo{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(-10px) scale(.92);
    }
    100%{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }
}

/* =========================
   TABLET
========================= */
@media (max-width: 991px){
    .student-login-stage{
        padding-bottom:90px;
    }

    .student-login-card-wrap{
        padding:0 16px;
    }

    .student-login-shell{
        width:414px;
        max-width:calc(100vw - 28px);
    }

    .student-network{
        width:min(400px, 34vw);
        bottom:6px;
        opacity:.15;
    }

    .student-network-glow{
        height:130px;
    }

    .student-login-shell::after{
        width:520px;
        height:90px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 720px){
    .student-login-topbar{
        height:126px;
    }

    .student-brand{
        padding:12px;
    }

    .student-brand-logo-left{
        width:40px;
        height:40px;
    }

    .student-brand-title{
        font-size:17px;
    }

    .student-login-stage{
        padding-bottom:60px;
    }

    .student-login-card-wrap{
        padding:0 12px;
        margin-top:-20px;
    }

    .student-login-shell{
        width:100%;
        max-width:100%;
    }

    .student-login-shell::after{
        width:88vw;
        height:70px;
        bottom:-10px;
    }

    .student-floating-logo{
        top:-30px;
        width:66px;
        height:66px;
    }

    .student-floating-logo img{
        width:66px;
        height:66px;
    }

    .student-login-card{
        padding:46px 22px 22px;
        border-radius:18px;
    }

    .student-login-card h1{
        font-size:24px;
    }

    .student-login-card p{
        margin-bottom:22px;
        font-size:14px;
    }

    .student-network{
        width:34vw;
        min-width:110px;
        max-width:180px;
        bottom:0;
        opacity:.10;
    }

    .student-network-left{
        left:-10px;
        clip-path:polygon(0 0, 100% 0, 74% 100%, 0 100%);
    }

    .student-network-right{
        right:-10px;
        clip-path:polygon(26% 0, 100% 0, 100% 100%, 0 100%);
    }

    .student-network-glow{
        width:100%;
        height:90px;
    }
}