/* =========================================
   IMPORT LIBRARY IKON PROFESIONAL (FONTAWESOME)
========================================= */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================
   TEMA MODERN, SELARAS & SIMPLICITY
========================================= */
:root {
    --primary-red: #D32F2F;
    --primary-hover: #B71C1C;     
    --bg-color: #F8FAFC;
    --card-bg: #FFFFFF;
    --text-dark: #1E293B;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05);
    
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* BASE RESET */
* { box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-dark); font-size: 13px; -webkit-font-smoothing: antialiased; }
a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* =========================================
   STANDARISASI TOMBOL (SELARAS SEMUA MENU)
========================================= */
button, .btn-submit, .btn-primary, .btn-batal, .btn-cancel, .btn-outline, .page-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; font-size: 13px; font-weight: 600; border-radius: var(--radius-md);
    border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: 0.2s ease;
}
.btn-submit, .btn-primary { background: var(--primary-red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-submit:hover, .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff !important; }
.btn-batal, .btn-cancel { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.btn-batal:hover, .btn-cancel:hover { background: #E2E8F0; color: var(--primary-red); border-color: #94A3B8; }

.btn-icon { padding: 8px; border-radius: 8px; background: #F1F5F9; color: #475569; border: 1px solid var(--border-color); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; }
.btn-icon:hover { background: #E2E8F0; color: var(--primary-red); transform: translateY(-1px); }

/* =========================================
   STANDARISASI JUDUL
========================================= */
.main-title { font-size: 18px; font-weight: 800; margin: 0 0 5px 0; color: var(--text-dark); display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; }
.welcome-text { color: var(--text-muted); font-size: 13px; margin: 0 0 25px 0; font-weight: 500; }

/* =========================================
   STANDARISASI TABEL (FIT 100% TANPA GESER HORIZONTAL)
========================================= */
.table-responsive { 
    width: 100%; max-width: 100%; display: block; overflow-x: hidden; 
    background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); margin-top: 15px; 
}
table, .table { width: 100%; border-collapse: collapse; font-size: 12.5px; text-align: left; table-layout: auto; word-wrap: break-word; }
th { background: #F8FAFC; color: var(--text-muted); font-weight: 700; font-size: 11.5px; padding: 14px 12px; border-bottom: 2px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; white-space: normal; }
td { padding: 14px 12px; border-bottom: 1px dashed var(--border-color); color: var(--text-dark); vertical-align: middle; line-height: 1.5; white-space: normal; word-break: break-word; }
tr:last-child td { border-bottom: none; }
tr:hover td { background-color: #F8FAFC; }

/* =========================================
   STANDARISASI INPUT FORM
========================================= */
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 12px; color: var(--text-dark); }
.form-group input, .form-group select, .form-group textarea, .form-control { width: 100%; padding: 11px 14px; border: 1px solid #CBD5E1; border-radius: var(--radius-md); font-size: 13px; box-sizing: border-box; background: #fff; transition: 0.2s; color: var(--text-dark); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus { border-color: var(--primary-red); outline: none; box-shadow: 0 0 0 3px rgba(211,47,47,0.1); }


/* =========================================
   RESPONSIVE: PC / DESKTOP (HEADER ATAS)
========================================= */
@media (min-width: 1025px) {
    body { padding-top: 75px; padding-left: 0; }
    .hide-on-pc { display: none !important; }
    
    .dashboard-container {
        width: 100%; max-width: 100% !important; padding: 25px 45px; min-height: calc(100vh - 75px); margin: 0; box-sizing: border-box;
    }

    /* TOP NAVBAR STYLING */
    .top-navbar {
        position: fixed; top: 0; left: 0; width: 100%; height: 75px;
        background: #ffffff; border-bottom: 1px solid var(--border-color);
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 45px; box-shadow: var(--shadow-sm); z-index: 1000; box-sizing: border-box;
    }
    
    .topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
    .topbar-brand { font-size: 18px; font-weight: 900; color: var(--primary-red); display: flex; align-items: center; gap: 10px; }
    
    .topbar-menu { display: flex; gap: 10px; margin-left: 20px; border-left: 2px solid var(--border-color); padding-left: 20px; }
    .topbar-menu .nav-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; text-decoration: none; transition: 0.2s; color: var(--text-dark); }
    .topbar-menu .btn-back { background: #F1F5F9; border: 1px solid var(--border-color); }
    .topbar-menu .btn-back:hover { background: #E2E8F0; color: var(--text-dark) !important; }
    .topbar-menu .btn-home { background: #FEF2F2; color: var(--primary-red); border: 1px solid #FECACA; }
    .topbar-menu .btn-home:hover { background: var(--primary-red); color: white; border-color: var(--primary-hover); }

    /* BAR INFORMASI AKUN & DROPDOWN MENU */
    .user-dropdown-wrapper { position: relative; }
    
    .user-profile-top {
        display: flex; align-items: center; gap: 12px;
        background: #F8FAFC; border: 1px solid var(--border-color);
        padding: 6px 14px; border-radius: 30px; transition: 0.2s ease;
        cursor: pointer; user-select: none;
    }
    .user-profile-top:hover { border-color: #CBD5E1; background: #F1F5F9; }
    .user-profile-top.active { background: #E2E8F0; border-color: #CBD5E1; }
    
    .u-avatar-top {
        width: 36px; height: 36px; background: var(--primary-red); color: white;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 800; flex-shrink: 0;
    }
    .u-info-top { text-align: left; }
    .u-name-top { font-size: 13px; font-weight: 800; color: var(--text-dark); line-height: 1.2; white-space: nowrap; }
    .u-role-top { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; margin-top: 2px; }
    
    .u-chevron { color: var(--text-muted); font-size: 12px; margin-left: 5px; transition: transform 0.3s ease; }
    .user-profile-top.active .u-chevron { transform: rotate(180deg); }

    /* DROPDOWN POPUP */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .user-dropdown-menu {
        display: none; position: absolute; top: calc(100% + 12px); right: 0;
        width: 240px; background: #fff; box-shadow: var(--shadow-lg);
        border-radius: var(--radius-md); border: 1px solid var(--border-color);
        padding: 8px; flex-direction: column; gap: 4px; z-index: 1001;
    }
    .user-dropdown-menu.show { display: flex; animation: slideDown 0.2s ease forwards; }
    
    .dropdown-item {
        display: flex; align-items: center; gap: 12px; padding: 12px 14px;
        border-radius: 6px; color: var(--text-dark); font-size: 13px; font-weight: 600;
        text-decoration: none !important; transition: 0.2s ease;
    }
    .dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); font-size: 14px;}
    .dropdown-item:hover { background: #F8FAFC; color: var(--primary-red); }
    .dropdown-item:hover i { color: var(--primary-red); }
    
    .dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
    
    .logout-item { color: var(--primary-red) !important; }
    .logout-item i { color: var(--primary-red) !important; }
    .logout-item:hover { background: #FEF2F2 !important; }


    /* GRID MENU KOTAK SAMA SISI */
    .menu-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 20px !important; }
    .menu-wrapper { display: contents !important; } 
    .menu-card { 
        display: flex !important; flex-direction: column !important; align-items: center !important; 
        justify-content: center !important; text-align: center !important; color: var(--text-dark);
        aspect-ratio: 1 / 1 !important; height: auto !important; padding: 20px !important; 
        background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); 
        transition: all 0.2s ease; box-shadow: var(--shadow-sm); text-decoration: none !important;
    }
    .menu-card:hover { border-color: var(--primary-red); box-shadow: 0 8px 20px rgba(211,47,47,0.08); transform: translateY(-3px) !important; }
    .menu-card i { font-size: 46px !important; color: var(--primary-red); margin: 0 0 16px 0 !important; display: block !important;}
    .menu-card h3 { font-size: 14.5px !important; font-weight: 700 !important; margin: 0 !important; color: var(--text-dark); line-height: 1.4 !important; }
    .menu-card p { display: none !important; }
}

/* =========================================
   RESPONSIVE: TABLET & SMARTPHONE LANDSCAPE
========================================= */
@media (min-width: 600px) and (max-width: 1024px) {
    body { padding-top: 70px; padding-left: 0; }
    .hide-on-pc { display: none !important; }
    
    .dashboard-container { width: 100%; max-width: 100% !important; margin: 0; padding: 25px; min-height: calc(100vh - 70px); box-sizing: border-box;}

    .top-navbar {
        position: fixed; top: 0; left: 0; width: 100%; height: 70px;
        background: #ffffff; border-bottom: 1px solid var(--border-color);
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 20px; box-shadow: var(--shadow-sm); z-index: 1000; box-sizing: border-box;
    }
    
    .topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
    .topbar-brand { font-size: 15px; font-weight: 900; color: var(--primary-red); display: flex; align-items: center; gap: 8px; }
    
    .topbar-menu { display: flex; gap: 8px; margin-left: 10px; border-left: 2px solid var(--border-color); padding-left: 10px; }
    .topbar-menu .nav-item { padding: 8px 12px; font-size: 12px; text-decoration: none; color: var(--text-dark); }
    .topbar-menu .btn-back { background: #F1F5F9; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-weight:bold; }
    .topbar-menu .btn-home { background: #FEF2F2; color: var(--primary-red) !important; border: 1px solid #FECACA; border-radius: var(--radius-md); font-weight:bold; }

    .user-dropdown-wrapper { position: relative; }
    
    .user-profile-top {
        display: flex; align-items: center; gap: 10px; background: #F8FAFC;
        border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 25px;
        cursor: pointer; user-select: none;
    }
    .user-profile-top:hover { border-color: #CBD5E1; background: #F1F5F9; }
    .user-profile-top.active { background: #E2E8F0; border-color: #CBD5E1; }
    
    .u-info-top { text-align: left; }
    .u-name-top { font-size: 12px; font-weight: 800; color: var(--text-dark); }
    .u-role-top { font-size: 9.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
    .u-avatar-top { width: 32px; height: 32px; font-size: 12px; background: var(--primary-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
    
    .u-chevron { color: var(--text-muted); font-size: 11px; margin-left: 3px; transition: transform 0.3s ease; }
    .user-profile-top.active .u-chevron { transform: rotate(180deg); }

    /* DROPDOWN POPUP TABLET */
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .user-dropdown-menu {
        display: none; position: absolute; top: calc(100% + 12px); right: 0;
        width: 220px; background: #fff; box-shadow: var(--shadow-lg);
        border-radius: var(--radius-md); border: 1px solid var(--border-color);
        padding: 8px; flex-direction: column; gap: 4px; z-index: 1001;
    }
    .user-dropdown-menu.show { display: flex; animation: slideDown 0.2s ease forwards; }
    
    .dropdown-item {
        display: flex; align-items: center; gap: 12px; padding: 10px 12px;
        border-radius: 6px; color: var(--text-dark); font-size: 12px; font-weight: 600;
        text-decoration: none !important; transition: 0.2s ease;
    }
    .dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); font-size: 13px;}
    .dropdown-item:hover { background: #F8FAFC; color: var(--primary-red); }
    .dropdown-item:hover i { color: var(--primary-red); }
    
    .dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
    .logout-item { color: var(--primary-red) !important; }
    .logout-item i { color: var(--primary-red) !important; }
    .logout-item:hover { background: #FEF2F2 !important; }

    .menu-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; gap: 15px !important; }
    .menu-wrapper { display: contents !important; }
    .menu-card { 
        display: flex !important; flex-direction: column !important; align-items: center !important; 
        justify-content: center !important; text-align: center !important; color: var(--text-dark);
        aspect-ratio: 1 / 1 !important; height: auto !important; padding: 15px !important; 
        background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); 
        transition: all 0.2s ease; box-shadow: var(--shadow-sm); text-decoration: none !important;
    }
    
    /* PERBAIKAN: Memastikan ikon berwarna merah saat mode tablet/landscape */
    .menu-card i { font-size: 38px !important; color: var(--primary-red) !important; margin: 0 0 12px 0 !important; display: block !important;}
    .menu-card h3 { font-size: 13px !important; margin: 0 !important; line-height: 1.4 !important; color: var(--text-dark) !important;}
    .menu-card p { display: none !important; }
}

/* =========================================
   RESPONSIVE: SMARTPHONE POTRAIT
========================================= */
@media (max-width: 599px) {
    body { padding-left: 0; padding-top: 65px; } 
    .hide-on-mobile { display: none !important; }
    
    .mobile-topbar { 
        position: fixed; top: 0; left: 0; width: 100%; height: 65px; 
        background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); 
        border-bottom: 1px solid var(--border-color); display: flex; 
        align-items: center; justify-content: space-between; padding: 0 15px; z-index: 1000; 
    }
    
    .dashboard-container { padding: 15px; padding-bottom: 85px; max-width: 100% !important; }

    .mobile-submenu-brand { display: flex; align-items: center; gap: 12px; }
    .mobile-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #F1F5F9; border-radius: 8px; color: var(--text-dark); text-decoration: none; border: 1px solid var(--border-color); }
    .mobile-home-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #FEF2F2; border-radius: 8px; color: var(--primary-red); text-decoration: none; border: 1px solid #FECACA; }
    .mobile-only-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
    
    .mobile-user-trigger .u-avatar { width: 32px; height: 32px; background: var(--primary-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; cursor: pointer; }
    .user-action-menu { display: none; position: absolute; top: 60px; right: 15px; width: 220px; background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 10px; flex-direction: column; gap: 5px; z-index: 1001;}
    .user-action-menu.show { display: flex; }
    
    .s-link { padding: 12px; font-size: 13px; color: var(--text-dark); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 12px; border-radius: var(--radius-md); }
    .s-link i { width: 20px; text-align: center; color: var(--text-muted); }
    .s-logout { background: #FEF2F2; color: var(--primary-red); border: 1px solid #FECACA; justify-content: center; margin-top: 5px;}
    .s-logout i { color: var(--primary-red); }

    /* NAVBAR BAWAH (CLEAN MINIMALIST BOTTOM NAVIGATION) */
    .bottom-nav {
        display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
        background: #FFFFFF !important; border-top: 1px solid #E2E8F0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05) !important;
        align-items: center !important; justify-content: space-around !important;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px !important;
        z-index: 1000 !important; box-sizing: border-box !important; height: 70px !important;
    }

    .bottom-nav .nav-item {
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
        flex: 1 !important; text-decoration: none !important; gap: 5px !important; padding: 4px 0 !important;
    }

    .bottom-nav .nav-item i {
        font-size: 20px !important; color: #94A3B8 !important; transition: color 0.2s ease, transform 0.2s ease !important;
    }

    .bottom-nav .nav-item span {
        font-size: 10px !important; font-weight: 600 !important; color: #64748B !important;
        letter-spacing: 0.2px !important; transition: color 0.2s ease !important; white-space: nowrap !important;
    }

    .bottom-nav .nav-item.active i {
        color: var(--primary-red, #D32F2F) !important; transform: translateY(-2px) !important;
    }

    .bottom-nav .nav-item.active span {
        color: var(--primary-red, #D32F2F) !important; font-weight: 700 !important;
    }

    /* KOTAK MENU APLIKASI (GRID 2 KOLOM RAPI & PROPORSIONAL) */
    .menu-grid {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important; margin-top: 10px !important;
    }

    .menu-wrapper { display: contents !important; }

    .menu-card {
        display: flex !important; flex-direction: column !important; align-items: center !important;
        justify-content: center !important; text-align: center !important; padding: 22px 14px !important;
        background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 18px !important;
        min-height: 135px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; text-decoration: none !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important; box-sizing: border-box !important; margin: 0 !important;
        width: 100% !important; color: var(--text-dark);
    }

    .menu-card:active {
        transform: scale(0.97) !important; background: #F8FAFC !important;
    }

    .menu-card i {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 52px !important; height: 52px !important; font-size: 24px !important;
        color: var(--primary-red, #D32F2F) !important; background: rgba(211, 47, 47, 0.08) !important;
        border-radius: 14px !important; margin: 0 0 12px 0 !important; flex-shrink: 0 !important; text-align: center !important;
    }

    .menu-card h3 {
        font-size: 13px !important; font-weight: 700 !important; color: #1E293B !important; line-height: 1.4 !important;
        margin: 0 !important; padding: 0 !important; letter-spacing: -0.2px !important; display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
    }

    .menu-card p {
        display: none !important;
    }

    .table-responsive { border: 0; box-shadow: none; background: transparent; overflow: visible; display: block; margin-top: 10px; }
    table, .table { min-width: 0; border: 0; }
    table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    table tr { background: #fff; border: 1px solid var(--border-color); display: block; margin-bottom: 15px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px; }
    table td { border-bottom: 1px dashed #E2E8F0; display: block; font-size: 12px; text-align: right; padding: 10px 5px; }
    table td::before { content: attr(data-label); float: left; font-weight: 800; color: var(--text-muted); font-size: 11px; }
    table td:last-child { border-bottom: 0; }
}

/* =========================================
   HALAMAN LOGIN KHUSUS (TANPA SIDEBAR)
========================================= */
body.login-page {
    padding: 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg-color);
}

.login-box {
    width: 100%;
    max-width: 450px;
    background: var(--card-bg);
    padding: 40px 35px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    box-sizing: border-box;
}

.login-box .main-title { justify-content: center; margin-bottom: 25px; font-size: 18px; }
.login-box .alert-danger { background-color: #FEF2F2; color: #B71C1C; border: 1px solid #FECACA; padding: 12px; border-radius: var(--radius-md); font-size: 12px; margin-bottom: 20px; font-weight: 600; text-align: left; }
.input-wrap { position: relative; display: flex; align-items: center; }
.toggle-pwd { position: absolute; right: 12px; cursor: pointer; user-select: none; padding: 5px; display: flex; align-items: center; justify-content: center; }
.toggle-pwd svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: 0.3s; }
.toggle-pwd:hover svg { stroke: var(--primary-red); } 
.footer-text { margin-top: 30px; font-size: 11px; color: var(--text-muted); line-height: 1.6; text-align: center; }

@media (max-width: 599px) {
    .login-box { max-width: 90%; padding: 30px 20px; }
}