/* FILE: theme/dts-theme.css
 *
 * Uniform DepEd NIR look, using the Operator portal (Website Manager) as the
 * template, shared with Operator and Task Monitoring:
 *   - Full-width green top bar: seal | system name ... TODAY clock | WELCOME pill | red LOGOUT
 *   - Emerald gradient sidebar below it, white pill for the current page
 *   - Plain footer text (no background bar)
 *   - Dashboard: colorful stat tiles (same palette as the Operator dashboard)
 *
 * STYLE ONLY. Every link, button, id and script hook in the pages is
 * unchanged; this file only re-colors and re-shapes them. Loaded after
 * Tailwind's classes, and uses !important where a Tailwind utility class
 * on the existing markup would otherwise win.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    --dts-green: #2D893E;
    --dts-green-dark: #1a5c28;
    --dts-sidebar-top: #14532d;
    --dts-sidebar-bottom: #1f6e30;
    --dts-mint: #a7f3d0;
    --dts-mint-text: #d1fae5;
    --dts-bg: #f1f5f9;
}

/* Same typeface as the other DepEd NIR systems */
body,
button, input, select, textarea {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.bg-gray-100,
.flex.h-screen.bg-gray-100,
main.bg-gray-100 {
    background-color: var(--dts-bg) !important;
}

/* =====================================================================
   LAYOUT: top bar on top, sidebar + content filling the rest
   ===================================================================== */
.dts-shell { height: calc(100vh - 80px) !important; }

/* =====================================================================
   TOP BAR (Operator template)
   ===================================================================== */
.dts-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 80px;
    padding: 0 20px;
    background: linear-gradient(90deg, #2D893E 0%, #23733a 55%, #1a5c28 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    color: #fff;
    position: relative;
    z-index: 30;
}
.dts-brand { display: flex; align-items: center; gap: 16px; min-width: 0; color: #fff; text-decoration: none; }
.dts-brand-logo {
    height: 52px;
    width: 52px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.dts-brand-divider { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.35); flex-shrink: 0; }
.dts-brand-title {
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dts-topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.dts-topbar-sep { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.25); }
.dts-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fcd34d;
    line-height: 1.2;
}
.dts-datetime { text-align: right; line-height: 1.3; }
.dts-datetime .dts-value { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dts-welcome {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.dts-welcome:hover { background: rgba(255, 255, 255, 0.22); }
.dts-welcome-text { text-align: right; line-height: 1.25; }
.dts-welcome-name { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dts-welcome-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--dts-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dts-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}
.dts-logout:hover { background: #b91c1c; color: #fff; }
.dts-logout svg { width: 16px; height: 16px; }

@media (max-width: 1399px) { .dts-brand-title { font-size: 24px; } }
@media (max-width: 1199px) { .dts-datetime, .dts-topbar-sep { display: none; } }
@media (max-width: 991px) {
    .dts-brand-title { font-size: 18px; }
    .dts-welcome-text { display: none; }
    .dts-welcome { padding: 4px; }
}
@media (max-width: 767px) {
    .dts-topbar { padding: 0 12px; }
    .dts-brand-title, .dts-brand-divider, .dts-logout .dts-logout-text { display: none; }
    .dts-topbar-right { gap: 10px; }
}

/* =====================================================================
   SIDEBAR (emerald, same as Operator and Task Monitoring)
   ===================================================================== */
.dts-sidebar {
    width: 250px !important;
    background: linear-gradient(180deg, var(--dts-sidebar-top) 0%, var(--dts-sidebar-bottom) 100%) !important;
    border-right: none !important;
    color: var(--dts-mint-text);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    position: relative;
    z-index: 20;
}

/* Nav links: the existing <a> tags, re-styled as rounded pills */
.dts-sidebar .dts-nav {
    padding: 16px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dts-sidebar .dts-nav > a {
    display: flex !important;
    align-items: center;
    padding: 11px 14px !important;
    border-radius: 10px;
    color: var(--dts-mint-text) !important;
    background: transparent !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.dts-sidebar .dts-nav > a svg { width: 20px !important; height: 20px !important; flex-shrink: 0; }
.dts-sidebar .dts-nav > a span { font-weight: 600 !important; }
.dts-sidebar .dts-nav > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
/* The page's current link already carries "text-blue-600 bg-blue-50": make it the white active pill */
.dts-sidebar .dts-nav > a.bg-blue-50 {
    background: #fff !important;
    color: var(--dts-green-dark) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* profile.php's "Set a new password..." note (forced password change) */
.dts-sidebar .dts-nav > div { color: var(--dts-mint) !important; }

/* =====================================================================
   FOOTER: plain text, no background bar
   ===================================================================== */
.dts-footer {
    text-align: center;
    padding: 24px 20px 4px;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.4;
    background: transparent;
}

/* =====================================================================
   DASHBOARD TILES (Operator dashboard palette)
   ===================================================================== */
.dts-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 18px 20px 16px;
    min-height: 132px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dts-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18); }
.dts-tile-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.92; }
.dts-tile .dts-tile-value {
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.1;
    margin: 6px 0 4px;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}
.dts-tile-sub { font-size: 12px; font-weight: 600; opacity: 0.88; }
.dts-tile-icon {
    position: absolute;
    right: -6px;
    bottom: -14px;
    width: 96px;
    height: 96px;
    opacity: 0.16;
    transform: rotate(-12deg);
    pointer-events: none;
}
.dts-tile-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.dts-tile-green  { background: linear-gradient(135deg, #34a853, #1a5c28); }
.dts-tile-orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.dts-tile-slate  { background: linear-gradient(135deg, #334155, #0f172a); }

/* Softer, rounder white cards everywhere in the main area (tables, forms, panels) */
main .bg-white.rounded-lg.shadow-md {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid #eef2f7;
}

/* =====================================================================
   DARK MODE TOGGLE (same round moon/sun button as the Operator portal)
   ===================================================================== */
.dts-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.dts-theme-toggle:hover, .dts-theme-toggle:focus { background: rgba(255, 255, 255, 0.3); outline: none; }
.dts-theme-toggle svg { width: 18px; height: 18px; }
.dts-theme-toggle .dts-icon-sun { display: none; color: #fcd34d; }
html.dark-mode .dts-theme-toggle .dts-icon-sun { display: block; }
html.dark-mode .dts-theme-toggle .dts-icon-moon { display: none; }

/* =====================================================================
   DARK MODE
   Re-colors the Tailwind classes the pages (and the rows their scripts
   build) already use, under <html class="dark-mode">. Same slate palette
   as the Operator portal's dark mode. Sidebar, top bar and tiles keep
   their colors.
   ===================================================================== */
html.dark-mode body.bg-gray-100,
html.dark-mode .dts-shell,
html.dark-mode main.bg-gray-100 { background-color: #0f172a !important; color: #cbd5e1; }

/* Surfaces */
html.dark-mode .bg-white { background-color: #1e293b !important; }
html.dark-mode .bg-gray-50 { background-color: #223047 !important; }
html.dark-mode .bg-gray-100 { background-color: #334155 !important; }
html.dark-mode .bg-gray-200 { background-color: #334155 !important; }
html.dark-mode main .bg-white.rounded-lg.shadow-md { border-color: #334155; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; }

/* Text */
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800 { color: #f1f5f9 !important; }
html.dark-mode .text-gray-700 { color: #e2e8f0 !important; }
html.dark-mode .text-gray-600 { color: #cbd5e1 !important; }
html.dark-mode .text-gray-500 { color: #94a3b8 !important; }
html.dark-mode .text-gray-400 { color: #64748b !important; }
html.dark-mode .text-blue-600 { color: #60a5fa !important; }
html.dark-mode .text-blue-700,
html.dark-mode .text-blue-800 { color: #93c5fd !important; }
html.dark-mode .text-green-600 { color: #4ade80 !important; }
html.dark-mode .text-red-500,
html.dark-mode .text-red-600 { color: #f87171 !important; }
html.dark-mode .text-yellow-600,
html.dark-mode .text-yellow-700 { color: #fbbf24 !important; }
html.dark-mode .text-indigo-600 { color: #818cf8 !important; }
html.dark-mode .text-orange-600 { color: #fb923c !important; }

/* Borders and dividers (incl. plain "border-b" / "border-t" with no color class) */
html.dark-mode .border,
html.dark-mode .border-b,
html.dark-mode .border-t,
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 { border-color: #334155 !important; }
html.dark-mode .divide-gray-200 > * + * { border-color: #334155 !important; }

/* Hovers */
html.dark-mode .hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
html.dark-mode .hover\:bg-gray-200:hover,
html.dark-mode .hover\:bg-gray-300:hover { background-color: #475569 !important; }
html.dark-mode .hover\:text-gray-900:hover,
html.dark-mode .hover\:text-gray-800:hover { color: #ffffff !important; }

/* Status pills (light tint backgrounds -> translucent tints) */
html.dark-mode .bg-blue-50,
html.dark-mode .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; }
html.dark-mode .bg-green-50,
html.dark-mode .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
html.dark-mode .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
html.dark-mode .bg-yellow-100,
html.dark-mode .bg-amber-50 { background-color: rgba(245, 158, 11, 0.18) !important; }
html.dark-mode .text-green-800 { color: #86efac !important; }
html.dark-mode .text-red-800 { color: #fca5a5 !important; }
html.dark-mode .text-yellow-800,
html.dark-mode .text-amber-800 { color: #fcd34d !important; }
html.dark-mode .border-green-200 { border-color: rgba(34, 197, 94, 0.35) !important; }
html.dark-mode .border-amber-300 { border-color: rgba(245, 158, 11, 0.4) !important; }

/* Form fields */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select,
html.dark-mode textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
    color-scheme: dark; /* dark date pickers / dropdown arrows */
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: #64748b !important; }

/* SweetAlert popups follow the theme (some contain the gray buttons above) */
html.dark-mode .swal2-popup { background: #1e293b !important; color: #e2e8f0 !important; }
html.dark-mode .swal2-title,
html.dark-mode .swal2-html-container { color: #e2e8f0 !important; }

html.dark-mode .dts-footer { color: #64748b; }