/**
 * Sistem Dapur Siswa MADANI USM
 * Stylesheet Utama v1.0.0
 */

/* ============================================================
   VARIABLE & THEME
   ============================================================ */
:root {
    --dsm-navy:      #1e3a5f;
    --dsm-navy-dark: #162d4a;
    --dsm-teal:      #0d9488;
    --dsm-teal-light:#ccfbf1;
    --dsm-gold:      #f59e0b;
    --dsm-sidebar-w: 250px;
    --dsm-topbar-h:  56px;
    --dsm-sidebar-bg:#1e3a5f;
    --dsm-body-bg:   #f3f4f8;
    --dsm-card-r:    12px;
    --dsm-transition: 0.25s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ============================================================
   AUTH LAYOUT
   ============================================================ */
.dsm-auth-body {
    background: linear-gradient(135deg, var(--dsm-navy) 0%, #0d9488 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsm-auth-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

@media (min-width: 992px) {
    .dsm-auth-container { min-height: auto; border-radius: 16px; }
    .dsm-auth-body { padding: 2rem; }
}

.dsm-auth-brand {
    background: linear-gradient(160deg, var(--dsm-navy) 0%, #0d6efd 100%);
    color: #fff;
    width: 45%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo { font-size: 4rem; margin-bottom: 1.5rem; }
.auth-title { font-size: 1.8rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.auth-desc { opacity: 0.8; line-height: 1.6; margin-bottom: 2rem; }

.auth-features { display: flex; flex-direction: column; gap: 0.75rem; }
.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
}

.dsm-auth-form {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-title { font-weight: 700; color: var(--dsm-navy); margin-bottom: 0.25rem; }
.auth-logo-mobile { font-size: 2rem; color: var(--dsm-navy); }

/* ============================================================
   MAIN APP LAYOUT (Sidebar + Content)
   ============================================================ */
.dsm-body { background: var(--dsm-body-bg); display: flex; min-height: 100vh; }

/* Sidebar */
.dsm-sidebar {
    width: var(--dsm-sidebar-w);
    background: var(--dsm-sidebar-bg);
    color: #fff;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform var(--dsm-transition);
    overflow-y: auto;
    overflow-x: hidden;
}

.dsm-sidebar.collapsed { transform: translateX(-100%); }

@media (max-width: 991.98px) {
    .dsm-sidebar { transform: translateX(-100%); }
    .dsm-sidebar.open { transform: translateX(0); }
    .dsm-main { margin-left: 0 !important; }
}

/* Sidebar Brand */
.dsm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand-logo {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}

.brand-name { font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1; }
.brand-sub { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* Sidebar Nav */
.dsm-nav { flex: 1; padding: 0.75rem 0; }

.nav-label {
    padding: 0.6rem 1rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

.dsm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-radius: 8px;
    margin: 1px 0.5rem;
    font-size: 0.875rem;
    transition: all var(--dsm-transition);
}

.dsm-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.dsm-nav-item.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
}

.dsm-nav-item i { font-size: 1rem; min-width: 20px; }

/* Sidebar Footer */
.dsm-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.user-avatar { font-size: 1.5rem; color: rgba(255,255,255,0.7); }
.user-name { font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.65rem; color: rgba(255,255,255,0.5); }

.btn-logout {
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.7);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1rem;
    transition: all var(--dsm-transition);
    flex-shrink: 0;
}
.btn-logout:hover { background: rgba(220,53,69,0.7); color: #fff; }

/* Main Content */
.dsm-main {
    margin-left: var(--dsm-sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin var(--dsm-transition);
}

/* Top Bar */
.dsm-topbar {
    height: var(--dsm-topbar-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

.btn-toggle-sidebar {
    background: none; border: none;
    font-size: 1.25rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: background var(--dsm-transition);
}
.btn-toggle-sidebar:hover { background: #f3f4f6; }

.topbar-title { font-weight: 600; font-size: 1rem; color: #111827; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }

/* Alerts Container */
.dsm-alerts { padding: 0.75rem 1.25rem 0; }

/* Content Area */
.dsm-content { flex: 1; padding: 1.25rem; }

/* Footer */
.dsm-footer {
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================================
   CARDS
   ============================================================ */
.dsm-card {
    background: #fff;
    border-radius: var(--dsm-card-r);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.dsm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.dsm-card-header h6 { margin: 0; font-weight: 600; font-size: 0.875rem; }

.dsm-card-body { padding: 1rem; }

/* Stat Cards */
.stat-card {
    background: #fff;
    border-radius: var(--dsm-card-r);
    padding: 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}

.stat-card-blue::before   { background: #3b82f6; }
.stat-card-green::before  { background: #10b981; }
.stat-card-orange::before { background: #f59e0b; }
.stat-card-red::before    { background: #ef4444; }

.stat-icon { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.6; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #111827; line-height: 1; }
.stat-label { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }

.stat-card-blue   .stat-value { color: #2563eb; }
.stat-card-green  .stat-value { color: #059669; }
.stat-card-orange .stat-value { color: #d97706; }
.stat-card-red    .stat-value { color: #dc2626; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-dsm-primary {
    background: var(--dsm-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background var(--dsm-transition);
}
.btn-dsm-primary:hover { background: var(--dsm-navy-dark); color: #fff; }

/* ============================================================
   TABLE
   ============================================================ */
.table th { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.table td { font-size: 0.875rem; vertical-align: middle; }

/* ============================================================
   FORM
   ============================================================ */
.form-label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
.form-control:focus, .form-select:focus { border-color: var(--dsm-navy); box-shadow: 0 0 0 0.2rem rgba(30,58,95,0.15); }

/* ============================================================
   BADGE TAMBAHAN
   ============================================================ */
.bg-purple { background-color: #7c3aed !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .stat-value { font-size: 1.4rem; }
    .dsm-content { padding: 0.875rem; }
    .dsm-card-body { padding: 0.75rem; }
}

/* ============================================================
   FASA 2 — TAMBAHAN GAYA
   ============================================================ */

/* Mini stat dalam dashboard */
.mini-stat { transition: transform 0.15s; }
.mini-stat:hover { transform: scale(1.03); }

/* List group hover smooth */
.list-group-item-action { transition: background 0.15s; }

/* Table zebra subtle */
.table-hover tbody tr:hover { background-color: rgba(30,58,95,0.04); }

/* Print: sembunyikan sidebar */
@media print {
    .dsm-sidebar, .dsm-topbar, .dsm-footer,
    .btn, form[method=POST] { display: none !important; }
    .dsm-main { margin-left: 0 !important; }
    .dsm-content { padding: 0 !important; }
}

/* Badge tambahan */
.badge.bg-purple { background: #7c3aed; }

/* Borang focus ring DSM */
.form-control:focus,
.form-select:focus {
    border-color: var(--dsm-navy);
    box-shadow: 0 0 0 0.2rem rgba(30,58,95,0.12);
}

/* Semakan Kuota — warna baris */
#tableSemakan .select-disahkan { background-color: #f0fdf4; }
#tableSemakan .select-menunggu { background-color: #fffbeb; }

/* Keselamatan: mask IC dalam paparan */
.mask-ic { letter-spacing: 0.08em; font-family: monospace; }

/* Responsive table card pada mobile */
@media (max-width: 576px) {
    .table-responsive { font-size: 0.8rem; }
    .btn-group .btn { padding: 0.2rem 0.4rem; }
    .stat-value { font-size: 1.2rem; }
}

/* Loading overlay */
.dsm-loading {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem;
}


.dsm-sidebar-brand {
    border-bottom: 2px solid #C9A84C !important;
}
.brand-logo {
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}
.brand-logo img {
    filter: brightness(1.2);
}


.brand-logo {
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.brand-logo img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    filter: brightness(1.3) !important;
}


.dsm-sidebar-brand {
    border-bottom: 2px solid #C9A84C !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.brand-logo {
    width: 80px !important;
    height: auto !important;
    min-width: unset !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}
.brand-logo img {
    width: 80px !important;
    height: auto !important;
    display: block !important;
    filter: brightness(1.3) !important;
    object-fit: contain !important;
}



/* ── Logo Sidebar ── */
.dsm-sidebar-brand { border-bottom: 2px solid #C9A84C !important; padding: 10px 16px !important; flex-wrap: nowrap !important; }
.brand-logo { width:110px !important; height:auto !important; background:transparent !important; border-radius:0 !important; flex-shrink:0 !important; }
.brand-logo img { width:110px !important; height:auto !important; display:block !important; filter: brightness(2) saturate(0.3) !important; }
.brand-text { flex-shrink:0 !important; }
.brand-name { white-space:nowrap !important; font-size:0.9rem !important; }

/* ── Brand Text Fix ── */
.brand-text { overflow: hidden; min-width: 0; }
.brand-name { font-size: 0.82rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.brand-sub { font-size: 0.72rem !important; white-space: nowrap; }

/* ── Brand Text Fix ── */
.brand-text { overflow: hidden; min-width: 0; }
.brand-name { font-size: 0.82rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.brand-sub { font-size: 0.72rem !important; white-space: nowrap; }

/* ── Sidebar Brand Vertical ── */
.dsm-sidebar-brand { flex-direction: column !important; align-items: flex-start !important; padding: 12px 16px !important; gap: 6px !important; }
.brand-logo { width: 100% !important; }
.brand-logo div { width: 100% !important; }
.brand-logo img { height: 32px !important; width: auto !important; }
.brand-text { width: 100% !important; }
.brand-name { font-size: 0.85rem !important; white-space: nowrap !important; }
.brand-sub { font-size: 0.72rem !important; }

/* ── Sidebar Brand Centre ── */
.dsm-sidebar-brand { align-items: center !important; text-align: center !important; }
.brand-logo div { margin: 0 auto !important; }
.brand-logo img { filter: none !important; }
.brand-text { text-align: center !important; width: 100% !important; }