/* =========================================
   1. GLOBAL RESET & BASE STYLES
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

:root {
    --bg: #fff6de;
    --panel: #f2e0aa;
    --card-bg: #ffffff;
    --text-main: #1e1a1a;
    --text-muted: #636e72;
    --border: #e6d6a3;
    --btn-bg: #f4a417;
    --btn-text: #1e1a1a;
    --accent: #623017;
    --pill-bg: #ffffff;
}

body {
    font-family: system-ui, -apple-system, Arial, sans-serif;
    font-variant-ligatures: none;
    background-color: var(--bg);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    align-items: center;
}

/* =========================================
   2. LAYOUT & STANDARD WIDTH (FIXED)
   ========================================= */

/* Class standard untuk pastikan lebar 90% */
/* Class standard untuk pastikan lebar 95% */
.standard-width,
.tabs-wrapper,
.main-content,
#latest-notice-area {
    width: 95% !important;        /* KUNCI UTAMA: Ubah 90% -> 95% */
    max-width: 1200px !important; /* Limit di PC */
    margin-left: auto !important; 
    margin-right: auto !important; 
    box-sizing: border-box;
}

/* =========================================
   3. COMPONENTS: TABS
   ========================================= */
.tabs-wrapper {
    /* Style Kotak Tab */
    padding: 10px;
    border: 1px solid #e6d6a3;
    border-radius: 12px;
    background-color: #fff7e6;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    
    /* Layout */
    display: flex;
    justify-content: center;
}

.tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px;
    width: 100%; /* Paksa isi penuh kotak bapa (90% skrin) */
    justify-content: center; /* Centerkan butang */
    align-items: center;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-button {
    flex: 0 0 auto;
    min-width: 88px;
    padding: clamp(8px, 2.4vw, 12px) clamp(12px, 4vw, 20px);
    background: var(--pill-bg);
    border: 2px solid rgba(60,40,20,0.18);
    border-radius: 999px;
    font-size: clamp(12px, 2.4vw, 15px);
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.tab-button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.06); }
.tab-button.active {
    background: var(--accent);
    border-color: rgba(0,0,0,0.22);
    color: #ffffff;
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* =========================================
   4. COMPONENTS: MAIN CONTENT & GRID
   ========================================= */
.main-content {
    padding: 0 !important;
    background-color: transparent;
    box-shadow: none;
    min-height: 300px; /* Supaya tak nampak kosong sangat kalau loading */
}

/* Paksa semua elemen dalam main content jadi lebar penuh */
#content-area, 
#content-area > div,
.main-content > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Grid System */
.custom-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    width: 100%;
}

/* =========================================
   5. COMPONENTS: HEADER & NAVIGATION
   ========================================= */
.header {
    width: 100%;
    background-color: var(--panel);
    padding-top: max(12px, env(safe-area-inset-top)); 
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between; 
    position: relative;
    z-index: 500;
}
.header-brand, .header-actions { display: flex; align-items: center; gap: 10px; }
.header-logo { height: 50px; width: auto; object-fit: contain; }
.header-logo[src=""] { display: none; }
.header-title { font-size: 1.25rem; font-weight: 700; color: var(--text-muted); }

/* Sticky Tabs Container */
.tabs-container {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding-top: 10px;
    width: 100%; /* Pastikan container sticky pun full width */
}

body.dark-mode span[style*="color:#623017"] {
  color: #f5d08c !important;
}

body.dark-mode .filter-btn {
  color: #f5f5f5 !important;
}

body.dark-mode .filter-btn.active {
  color: #000 !important; /* sebab background kuning */
}

body.dark-mode .forgot-password,
body.dark-mode .forgot-link {
  color: #f4a417 !important;
}

:root {
  --text-main: #1e1a1a;
  --text-muted: #6b6b6b;
}

body.dark-mode {
  --text-main: #f5f5f5;
  --text-muted: #cccccc;
}

.filter-btn {
  color: var(--text-main);
}

/* =========================================
   6. COMPONENTS: EXTRA (Login, Footer, Etc)
   ========================================= */
.warning-ribbon {
    position: relative;
    width: 100%;
    background-color: #FF0000;
    color: #FFFFFF;
    padding: 8px 12px;
    text-align: center;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    z-index: 9999;
}

.footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: #623017;
    color: #FFFFFF;
    padding: 8px 12px;
    text-align: center;
    font-size: clamp(8px, 1.8vw, 11px);
    margin-top: auto;
}

.login-box {
    max-width: 360px;
    width: 90%;
    margin: 60px auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    text-align: center;
}
.login-box input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 10px;
    font-size: 0.95rem;
}
.login-box button {
    width: 100%;
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: 8px;
    border: none;
    background: var(--btn-bg);
    color: #111;
    font-weight: 700;
    cursor: pointer;
}
.forgot-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}
.hidden { display: none !important; }

/* Loading Spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(244, 164, 23, 0.3);
    border-radius: 50%;
    border-top-color: #f4a417;
    animation: spin 1s ease-in-out infinite;
    margin: 0 auto 15px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hide-when-loading { display: none !important; }

/* =========================================
   7. DARK MODE SYSTEM
   ========================================= */
body.dark-mode {
    --bg: #121212;
    --panel: #1e1e1e;
    --card-bg: #252525;
    --text-main: #ffffff;
    --text-muted: #b0b0b0;
    --border: #333333;
    --btn-bg: #f4a417;
    --btn-text: #000000;
    --pill-bg: #333333; /* Tambahan untuk tab button */
}

/* Dark Mode Overrides */
body.dark-mode, 
body.dark-mode .app-wrapper,
body.dark-mode .main-content, 
body.dark-mode .tabs-wrapper {
    background-color: var(--bg) !important;
    color: var(--text-main) !important;
}

body.dark-mode input {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

body.dark-mode .header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333;
}

/* Card Styling in Dark Mode */
body.dark-mode .custom-grid > div {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
}
/* Fix inner white boxes in cards */
body.dark-mode .custom-grid > div > div:first-child,
body.dark-mode .custom-grid > div div[style*="background:#fff"] {
    background-color: transparent !important;
    border-color: var(--border) !important;
}
body.dark-mode .custom-grid h4 { color: #fff !important; }
body.dark-mode .custom-grid p { color: #b0b0b0 !important; }

/* Tab Buttons in Dark Mode */
body.dark-mode .tab-button {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}
body.dark-mode .tab-button.active {
    background-color: var(--btn-bg) !important;
    color: #000 !important;
}

/* Fix Filter Buttons */
body.dark-mode .filter-btn {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}
body.dark-mode .filter-btn.active {
    background-color: #f4a417 !important;
    color: #000 !important;
}

/* Fix Instruction Boxes (Yellow) */
body.dark-mode div[style*="background:#fff3cd"], 
body.dark-mode div[style*="background: #fff3cd"] {
    background-color: #262626 !important;
    border-left-color: #f4a417 !important;
    border: 1px solid #444 !important;
    color: #ddd !important;
}
body.dark-mode .instruction-text,
body.dark-mode p[style*="color:#856404"] { color: #ccc !important; }

/* Fix Status Bar / Last Update */
body.dark-mode div[style*="background:#fff;padding:8px"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background-color: #fffdf7"] {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}
body.dark-mode strong { color: #fff !important; }

/* Login Box Dark */
body.dark-mode .login-box {
    background-color: #1e1e1e !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    color: #fff !important;
}
body.dark-mode .login-box h2 { color: #f4a417 !important; }

/* Buttons Dark Mode */
body.dark-mode a[style*="background:#f4a417"], 
body.dark-mode button[id="loginBtn"],
body.dark-mode .page-btn.active {
    background-color: #4a2c0f !important;
    color: #ffcc80 !important;
    border: 1px solid #6d4c41 !important;
}

/* Fix Kotak Perhatian (Kuning) */
body.dark-mode div[style*="background-color: #fffbf0"],
body.dark-mode div[style*="background-color: #FFF6DE"] {
    background-color: #2d2010 !important;
    border-color: #623017 !important;
    color: #fff !important;
}
body.dark-mode div[style*="background-color: #fffbf0"] h2 { color: #ff6b6b !important; }
body.dark-mode ul li span { color: #ddd !important; }

/* =========================================
   8. FORCED WIDTH OVERRIDES (ANTI-SHRINK)
   ========================================= */
/* Ini memastikan elemen dalaman mengikut lebar 90% ibu bapa mereka */
#last-update-text {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left;
}

.search-input-tab {
    width: 100% !important;
}

div[style*="background:#fff3cd"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* =========================================
   9. MOBILE TWEAKS (RESPONSIVE)
   ========================================= */
@media (max-width: 600px) {
    .tabs {
        justify-content: flex-start; 
        padding-left: 0;
    }
    .tabs-wrapper {
        padding: 5px;
        border-radius: 8px;
        /* Mobile mungkin nak lebar sikit lagi dari 90% */
        width: 95% !important; 
    }
    .main-content, #latest-notice-area {
        width: 95% !important;
    }
    .custom-grid {
        grid-template-columns: 1fr; 
        gap: 12px;
    }
    .header {
        padding-left: 10px;
        padding-right: 10px;
    }
}