/* =========================================================
   FINAL UI ELEGAN - SMKN 1 WAY BUNGUR
   File ini hanya mempercantik tampilan global tanpa mengubah logic aplikasi.
   ========================================================= */

:root{
    --elegant-navy:#071b52;
    --elegant-blue:#2563eb;
    --elegant-sky:#38bdf8;
    --elegant-gold:#facc15;
    --elegant-green:#16a34a;
    --elegant-red:#dc2626;
    --elegant-text:#0f172a;
    --elegant-muted:#64748b;
    --elegant-border:rgba(226,232,240,.86);
    --elegant-card:rgba(255,255,255,.86);
    --elegant-shadow:0 22px 55px rgba(15,23,42,.12);
    --elegant-shadow-hover:0 28px 70px rgba(15,23,42,.17);
}

html{scroll-padding-top:110px;}

body{
    background:
        radial-gradient(circle at 8% 5%,rgba(56,189,248,.18),transparent 28%),
        radial-gradient(circle at 92% 14%,rgba(37,99,235,.18),transparent 30%),
        linear-gradient(180deg,#eaf2ff 0%,#f8fbff 46%,#eef5ff 100%) !important;
    color:var(--elegant-text);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(180deg,rgba(239,246,255,.92),rgba(248,250,252,.94)),
        url('/images/bg-gerbang-smkn1-waybungur.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    opacity:.96;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 75%);
}

/* Header lebih mewah */
.app-header{
    background:
        radial-gradient(circle at 18% 14%,rgba(250,204,21,.24),transparent 26%),
        radial-gradient(circle at 88% 0%,rgba(56,189,248,.30),transparent 26%),
        linear-gradient(135deg,#061645 0%,#143ea7 52%,#2f6dff 100%) !important;
    border-bottom:1px solid rgba(255,255,255,.18);
    box-shadow:0 18px 45px rgba(7,27,82,.24) !important;
}

.brand-logo{
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.brand-main{letter-spacing:-.55px;}
.brand-sub{letter-spacing:.1px;}

.desktop-nav .nav-pill{
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 22px rgba(0,0,0,.08) !important;
}

.desktop-nav .nav-pill:hover,
.desktop-nav .nav-pill.active,
.desktop-nav .nav-dropdown:focus-within > .nav-pill{
    background:#ffffff !important;
    color:#1d4ed8 !important;
    box-shadow:0 15px 28px rgba(15,23,42,.17) !important;
}

.nav-dropdown-menu,
.profile-menu,
.side-menu{
    border:1px solid rgba(226,232,240,.92) !important;
    background:rgba(255,255,255,.94) !important;
    backdrop-filter:blur(18px);
}

/* Area halaman */
.page-content{
    padding-top:8px;
}

.app-page,
.admin-absen-page,
.spmb-page,
.dashboard-page{
    background:transparent !important;
}

.page-content > *:not(.sag-dashboard-hero){
    max-width:1240px !important;
}

.page-title,
.hero-title,
.section-title,
.top-title-row h2,
.card h1,
.card h2,
.card h3{
    letter-spacing:-.55px;
}

.page-title{
    position:relative;
    display:inline-block;
    margin-bottom:12px !important;
}

.page-title::after{
    content:"";
    display:block;
    width:76px;
    height:5px;
    margin-top:10px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--elegant-blue),var(--elegant-sky),var(--elegant-gold));
}

.page-subtitle,
.section-subtitle,
.help,
.small-help{
    color:var(--elegant-muted) !important;
}

/* Card dan panel */
.card,
.filter-card,
.table-card,
.student-card,
.empty-card,
.report-card,
.data-card,
.content-card,
.dokumen-card,
.stat-card,
.summary-card,
form.card{
    background:var(--elegant-card) !important;
    border:1px solid rgba(255,255,255,.74) !important;
    box-shadow:var(--elegant-shadow) !important;
    backdrop-filter:blur(16px);
}

.card,
.filter-card,
.table-card,
.student-card,
.empty-card,
.report-card,
.data-card,
.content-card,
.dokumen-card,
.stat-card,
form.card{
    border-radius:26px !important;
}

.card:hover,
.report-card:hover,
.data-card:hover,
.student-card:hover,
.stat-card:hover,
.summary-card:hover{
    box-shadow:var(--elegant-shadow-hover) !important;
}

/* Hero/card besar */
.hero-absen,
.sag-dashboard-hero,
.spmb-hero{
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 30px 80px rgba(7,27,82,.25) !important;
}

/* Form */
label{
    color:#1e293b !important;
    letter-spacing:-.15px;
}

input,
select,
textarea,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
    border:1px solid rgba(203,213,225,.94) !important;
    background:rgba(255,255,255,.94) !important;
    border-radius:16px !important;
    box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
}

input:hover,
select:hover,
textarea:hover,
.select2-container .select2-selection--single:hover,
.select2-container .select2-selection--multiple:hover{
    border-color:#93c5fd !important;
}

input:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single{
    border-color:#2563eb !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.14),0 14px 28px rgba(15,23,42,.07) !important;
}

.select2-container .select2-selection--single{
    height:48px !important;
    display:flex !important;
    align-items:center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:48px !important;
    color:#0f172a !important;
    padding-left:14px !important;
    font-weight:700;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:48px !important;
    right:10px !important;
}

.select2-dropdown{
    border:1px solid rgba(203,213,225,.95) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 22px 52px rgba(15,23,42,.18) !important;
}

/* Tombol */
.btn,
.btn-app,
.btnx,
.button,
button.btn-app,
a.btn,
a.btn-app,
button[type="submit"]:not([class*="select2"]){
    border-radius:16px !important;
    font-weight:950 !important;
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}

.btn:hover,
.btn-app:hover,
.btnx:hover,
.button:hover,
button.btn-app:hover,
a.btn:hover,
a.btn-app:hover,
button[type="submit"]:hover{
    transform:translateY(-1px);
    filter:saturate(1.05);
    box-shadow:0 16px 30px rgba(15,23,42,.14) !important;
}

.btn-blue,
.btn-primary,
.btn-primaryx,
button[type="submit"]:not([class*="btn-"]){
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    color:#fff !important;
}

.btn-greenx,
.btn-success,
.btn-add,
.btn-create,
.btn-new{
    background:linear-gradient(135deg,#16a34a,#22c55e) !important;
    color:#fff !important;
}

.btn-yellowx,
.btn-warning,
.btn-edit{
    background:linear-gradient(135deg,#facc15,#f59e0b) !important;
    color:#111827 !important;
}

.btn-red,
.btn-danger,
.btn-delete{
    background:linear-gradient(135deg,#dc2626,#b91c1c) !important;
    color:#fff !important;
}

.btn-gray,
.btn-secondary,
.btn-back,
.btn-light{
    background:linear-gradient(135deg,#f1f5f9,#e2e8f0) !important;
    color:#111827 !important;
}

/* Tabel */
.table-wrap,
.table-responsive,
div[style*="overflow-x:auto"]{
    border-radius:22px;
}

table{
    border-collapse:separate !important;
    border-spacing:0 !important;
}

table th{
    background:linear-gradient(180deg,#f8fbff,#eef4ff) !important;
    color:#1e293b !important;
    border-color:#e2e8f0 !important;
}

table td{
    border-color:#e2e8f0 !important;
}

table tbody tr{
    transition:background .16s ease;
}

table tbody tr:hover{
    background:rgba(239,246,255,.72) !important;
}

/* Badge/status */
.badge,
.status-badge,
.user-role,
.kategori-tab,
.nav-pill,
.mini-card,
.summary-card{
    letter-spacing:-.1px;
}

.badge,
.status-badge{
    border:1px solid rgba(255,255,255,.64);
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}

/* Alert */
.alert,
.alert-ok,
.alert-success,
.alert-error{
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 14px 30px rgba(15,23,42,.08) !important;
}

.alert-ok,
.alert-success{
    background:linear-gradient(135deg,#dcfce7,#bbf7d0) !important;
    color:#14532d !important;
}

.alert-error{
    background:linear-gradient(135deg,#fee2e2,#fecaca) !important;
    color:#7f1d1d !important;
}

/* Bottom nav */
.bottom-nav{
    background:rgba(255,255,255,.88) !important;
    border-top:1px solid rgba(255,255,255,.72) !important;
    box-shadow:0 -18px 45px rgba(15,23,42,.13) !important;
}

.fab{
    box-shadow:0 22px 48px rgba(22,163,74,.38) !important;
}

/* Foto profil/avatar */
.avatar-wrap{
    align-items:center;
}

.avatar,
.profile-top-avatar{
    object-fit:cover;
    object-position:center top;
}

/* Perbaikan spacing halaman */
@media(min-width:861px){
    .page-content{
        padding-bottom:34px;
    }
}

@media(max-width:860px){
    body::before{background-attachment:scroll;}
    .page-title{font-size:28px !important;}
    .card,
    .filter-card,
    .table-card,
    .student-card,
    .empty-card,
    .report-card,
    .data-card,
    .content-card,
    .dokumen-card,
    form.card{
        border-radius:22px !important;
    }
    .side-menu{
        background:rgba(255,255,255,.96) !important;
    }
}