/* 
 * MEEM Modern SaaS Theme (Inspired by Rawaa, Qoyod, Marn)
 * Light Mode Content Area + Slate-900 Dark Sidebar + Indigo/Blue Accents
 */

:root {
    --bg-main: #f8fafc;        /* slate-50 */
    --bg-sidebar: #0f172a;     /* slate-900 */
    --bg-card: #ffffff;        /* White cards */
    --bg-input: #ffffff;       /* White input */
    --text-primary: #0f172a;   /* slate-900 */
    --text-secondary: #475569; /* slate-600 */
    --border-color: #e2e8f0;   /* slate-200 */
    --accent: #4f46e5;         /* indigo-600 */
    --accent-hover: #4338ca;   /* indigo-700 */
    --accent-light: rgba(79, 70, 229, 0.08);
}

/* ========================================================
   GLOBAL BASE OVERRIDES (Forcing Light SaaS Theme)
   ======================================================== */
body, 
body[class*="skin-"], 
.wrapper, 
.content-wrapper, 
.main-footer,
main,
[id="scrollable-container"],
.tw-bg-gray-100 {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* Base text overrides */
.tw-text-gray-900, 
.tw-text-gray-800, 
.tw-text-gray-700, 
.tw-text-black, 
h1, h2, h3, h4, h5, h6, 
.content-header h1,
.box-title {
    color: var(--text-primary) !important;
}

.tw-text-gray-600, 
.tw-text-gray-500,
.tw-text-gray-400 {
    color: var(--text-secondary) !important;
}

/* Primary text classes overrides (pointing to accent or dark gray) */
.tw-text-primary-800,
.tw-text-primary-700,
.tw-text-primary-900,
.tw-text-primary-600 {
    color: var(--accent) !important;
}

/* ========================================================
   TAILWIND SIDEBAR OVERRIDES (.side-bar & [id="side-bar"])
   ======================================================== */
.side-bar, 
[id="side-bar"],
.side-bar .tw-bg-white,
[id="side-bar"] .tw-bg-white {
    background-color: var(--bg-sidebar) !important;
    border-color: transparent !important;
}

/* Sidebar heading link / logo */
.side-bar a[href*="home"] {
    background-color: var(--bg-sidebar) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Sidebar Links */
.side-bar a, 
[id="side-bar"] a {
    color: #94a3b8 !important; /* slate-400 */
    background-color: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.side-bar a:hover, 
[id="side-bar"] a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Active sidebar item */
.side-bar .tw-bg-gray-200, 
[id="side-bar"] .tw-bg-gray-200,
.side-bar a.tw-text-primary-700,
[id="side-bar"] a.tw-text-primary-700 {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Child item container vertical indicator line */
.chiled .tw-bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sub-items */
.chiled a {
    color: #94a3b8 !important;
}
.chiled a:hover, 
.chiled a.tw-text-primary-700 {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ========================================================
   TAILWIND CARDS & WIDGETS
   ======================================================== */
main .tw-bg-white, 
[id="scrollable-container"] .tw-bg-white,
.tw-bg-white {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important;
}

.tw-ring-gray-200 {
    --tw-ring-color: var(--border-color) !important;
}

/* Components and elements inside components */
.tw-border-gray-200 {
    border-color: var(--border-color) !important;
}

.tw-bg-gray-50 {
    background-color: #f8fafc !important;
    border-color: var(--border-color) !important;
}

/* ========================================================
   HEADER / NAVBAR & GRADIENT OVERRIDES
   ======================================================== */
body[class*="skin-"] .main-header .navbar, 
body[class*="skin-"] .main-header .logo,
.main-header,
.main-header .navbar {
    background-image: none !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Top header navbar - force white theme */
.no-print.tw-bg-gradient-to-r,
div.no-print.tw-bg-gradient-to-r,
div[class*="no-print"] {
    background-image: none !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Top header buttons and elements - force light/white style */
.no-print button,
.no-print a,
.no-print summary,
.no-print span,
.no-print #dashboard_date_filter {
    background-color: #f1f5f9 !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.no-print svg,
.no-print i {
    color: var(--text-secondary) !important;
}

/* Hover effects for top header buttons */
.no-print button:hover,
.no-print a:hover,
.no-print summary:hover {
    background-color: #e2e8f0 !important;
    color: var(--text-primary) !important;
}

/* Welcome banner on dashboard - change to beautiful light slate card */
main div[class*="tw-bg-gradient-to-r"]:not(.no-print),
[id="scrollable-container"] div[class*="tw-bg-gradient-to-r"]:not(.no-print),
.tw-bg-gradient-to-r:not(.no-print) {
    background-image: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
    background-color: #f1f5f9 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

/* Force banner text to be dark slate for readability */
main div[class*="tw-bg-gradient-to-r"]:not(.no-print) h1,
[id="scrollable-container"] div[class*="tw-bg-gradient-to-r"]:not(.no-print) h1,
main div[class*="tw-bg-gradient-to-r"]:not(.no-print) p,
[id="scrollable-container"] div[class*="tw-bg-gradient-to-r"]:not(.no-print) p {
    color: var(--text-primary) !important;
}

/* Restore normal text colors for white cards/boxes inside gradient banners */
div[class*="tw-bg-gradient-to-r"] .tw-bg-white,
div[class*="tw-bg-gradient-to-r"] .tw-bg-white * {
    color: var(--text-primary) !important;
}
div[class*="tw-bg-gradient-to-r"] .tw-bg-white .tw-text-gray-500,
div[class*="tw-bg-gradient-to-r"] .tw-bg-white .tw-text-gray-600 {
    color: var(--text-secondary) !important;
}

.main-header .navbar .nav>li>a {
    color: var(--text-secondary) !important;
}
.main-header .navbar .nav>li>a:hover {
    color: var(--text-primary) !important;
    background-color: #f1f5f9 !important;
}

/* Header buttons */
main > div.no-print button,
main > div.no-print a,
.main-header button,
.main-header a {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

/* ========================================================
   BOXES (AdminLTE legacy boxes fallback)
   ======================================================== */
.box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.box-header {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.box-body {
    color: var(--text-secondary) !important;
}

/* ========================================================
   TABLES
   ======================================================== */
table.dataTable, .table, table {
    color: var(--text-primary) !important;
}
.table>thead>tr>th, table>thead>tr>th {
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    background-color: #f8fafc !important;
}
.table>tbody>tr>td, table>tbody>tr>td {
    border-top: 1px solid var(--border-color) !important;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f8fafc !important;
}
.table-hover>tbody>tr:hover {
    background-color: #f1f5f9 !important;
}

/* ========================================================
   FORMS & INPUTS
   ======================================================== */
.form-control, .input-group-addon, input, select, textarea {
    background-color: var(--bg-input) !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-light) !important;
}
.input-group-addon {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* ========================================================
   STAT BOXES (Legacy Small Boxes)
   ======================================================== */
.small-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.small-box .inner h3, .small-box .inner p {
    color: var(--text-primary) !important;
}
.small-box .icon {
    color: rgba(0,0,0,0.05) !important;
}

/* ========================================================
   MODALS & DROPDOWNS
   ======================================================== */
.modal-content, .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}
.dropdown-menu>li>a {
    color: var(--text-primary) !important;
}
.dropdown-menu>li>a:hover {
    background-color: #f1f5f9 !important;
    color: var(--accent) !important;
}

/* ========================================================
   iCHECK FALLBACK — pure-CSS checkboxes (no PNG sprite needed)
   Overrides the blue.png background-image that is missing on production
   ======================================================== */
.icheckbox_square-blue,
.iradio_square-blue {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 5px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
.iradio_square-blue {
    border-radius: 50% !important;
}
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
    border-color: var(--accent) !important;
    background-color: var(--accent-light) !important;
}
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.icheckbox_square-blue.checked::after {
    content: '' !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    top: 1px !important;
}
.iradio_square-blue.checked::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    position: absolute !important;
}
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    opacity: 0.45 !important;
    cursor: default !important;
}