/*!
 * SignMate / Nister Quotation - Clean White Modern UI Theme (CodeIgniter 4 Migration)
 *
 * Scoped strictly to `@media screen` and `body:not(.legacy-ui)`.
 * To roll back to the original CI3 style:
 *   1. Click the floating "Rollback Style เดิม (CI3)" button at the bottom-right, OR
 *   2. Set `$default_ui_theme = 'legacy'` in `app/Config/CustomApp.php`.
 */

@media print {
    .ci4-theme-switcher-floating {
        display: none !important;
    }
}

@media screen {
    /* ==========================================================================
       1. Global Typography & Clean Light Surface
       ========================================================================== */
    body:not(.legacy-ui) {
        font-family: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background-color: #ffffff;
        color: #1e293b;
        font-size: 14px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

    body:not(.legacy-ui) #wrapper {
        background-color: #ffffff;
    }

    body:not(.legacy-ui) h1,
    body:not(.legacy-ui) h2,
    body:not(.legacy-ui) h3,
    body:not(.legacy-ui) h4,
    body:not(.legacy-ui) h5,
    body:not(.legacy-ui) h6 {
        font-family: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        color: #0f172a;
    }

    body:not(.legacy-ui) .page-header {
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 14px;
        margin: 24px 0 20px;
        font-weight: 700;
        color: #0f172a;
    }

    /* ==========================================================================
       2. Clean White Top Navbar & Light Sidebar
       ========================================================================== */
    body:not(.legacy-ui) .navbar-default.navbar-static-top {
        background-color: #ffffff;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
        min-height: 50px;
    }

    body:not(.legacy-ui) .navbar-default .navbar-brand {
        color: #1e293b !important;
        font-weight: 700;
        font-size: 17px;
        letter-spacing: -0.01em;
    }

    body:not(.legacy-ui) .navbar-default.sidebar {
        background-color: #ffffff;
        left: 0;
    }

    @media (min-width: 768px) {
        body:not(.legacy-ui) .sidebar {
            width: 250px;
            margin-top: 51px;
            left: 0;
        }

        body:not(.legacy-ui) #page-wrapper {
            margin: 0 0 0 250px;
            padding: 12px 30px 48px;
            background-color: #f8fafc;
            border-left: 1px solid #e2e8f0;
        }
    }

    body:not(.legacy-ui) .sidebar ul li {
        border-bottom: 1px solid #f1f5f9;
    }

    body:not(.legacy-ui) .sidebar ul li a {
        color: #334155;
        padding: 10px 15px;
        font-size: 13.5px;
        font-weight: 500;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    body:not(.legacy-ui) .sidebar ul li a i.fa {
        color: #64748b;
        margin-right: 6px;
        transition: color 0.15s ease;
    }

    body:not(.legacy-ui) .sidebar ul li a:hover,
    body:not(.legacy-ui) .sidebar ul li a:focus {
        background-color: #f1f5f9;
        color: #0f172a;
        text-decoration: none;
    }

    body:not(.legacy-ui) .sidebar ul li a:hover i.fa {
        color: #2563eb;
    }

    body:not(.legacy-ui) .sidebar ul li a.active {
        background-color: #eff6ff;
        color: #2563eb !important;
        font-weight: 600;
        border-left: 3px solid #2563eb;
    }

    body:not(.legacy-ui) .sidebar ul li a.active i.fa {
        color: #2563eb;
    }

    /* Section Headers in Sidebar (which had inline color: black in CI3) */
    body:not(.legacy-ui) #side-menu > li > a[style*="color: black"] {
        color: #475569 !important;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding-top: 14px;
        padding-bottom: 6px;
        background-color: #f8fafc;
    }

    body:not(.legacy-ui) #side-menu > li[style*="border-bottom: 0px"] {
        height: 8px;
        overflow: hidden;
        line-height: 8px;
    }

    /* ==========================================================================
       3. Panels & Cards (Scoped to #page-wrapper so printable forms are untouched)
       ========================================================================== */
    body:not(.legacy-ui) #page-wrapper .panel {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
        background-color: #ffffff;
    }

    body:not(.legacy-ui) #page-wrapper .panel-default > .panel-heading {
        background-color: #ffffff;
        border-bottom: 1px solid #e2e8f0;
        color: #0f172a;
        font-weight: 600;
        padding: 12px 18px;
    }

    body:not(.legacy-ui) #page-wrapper .panel-primary {
        border-color: #bfdbfe;
    }

    body:not(.legacy-ui) #page-wrapper .panel-primary > .panel-heading {
        background-color: #eff6ff;
        border-bottom: 1px solid #bfdbfe;
        color: #1d4ed8;
        font-weight: 600;
    }

    body:not(.legacy-ui) #page-wrapper .panel-green > .panel-heading {
        background: linear-gradient(135deg, #10b981, #059669);
        border-color: #059669;
    }

    body:not(.legacy-ui) #page-wrapper .panel-yellow > .panel-heading {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        border-color: #d97706;
    }

    body:not(.legacy-ui) #page-wrapper .panel-red > .panel-heading {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        border-color: #dc2626;
    }

    /* ==========================================================================
       4. Tables & Data Grids (Scoped to #page-wrapper)
       ========================================================================== */
    body:not(.legacy-ui) #page-wrapper .table > thead > tr > th {
        background-color: #f8fafc;
        color: #334155;
        font-weight: 600;
        border-bottom: 2px solid #e2e8f0;
        vertical-align: middle;
    }

    body:not(.legacy-ui) #page-wrapper .table > tbody > tr > td {
        vertical-align: middle;
        border-top: 1px solid #e2e8f0;
        color: #1e293b;
    }

    body:not(.legacy-ui) #page-wrapper .table-hover > tbody > tr:hover {
        background-color: #f8fafc;
    }

    /* ==========================================================================
       5. Buttons & Forms
       ========================================================================== */
    body:not(.legacy-ui) .btn {
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.15s ease-in-out;
    }

    body:not(.legacy-ui) .btn-primary {
        background-color: #2563eb;
        border-color: #2563eb;
    }

    body:not(.legacy-ui) .btn-primary:hover,
    body:not(.legacy-ui) .btn-primary:focus {
        background-color: #1d4ed8;
        border-color: #1e40af;
    }

    body:not(.legacy-ui) .btn-success {
        background-color: #10b981;
        border-color: #10b981;
    }

    body:not(.legacy-ui) .btn-success:hover,
    body:not(.legacy-ui) .btn-success:focus {
        background-color: #059669;
        border-color: #047857;
    }

    body:not(.legacy-ui) .form-control {
        border-radius: 6px;
        border: 1px solid #cbd5e1;
        color: #1e293b;
        background-color: #ffffff;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    }

    body:not(.legacy-ui) .form-control:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        outline: 0;
    }

    /* ==========================================================================
       6. Login Page (Clean White Card)
       ========================================================================== */
    body:not(.legacy-ui) .login-panel {
        margin-top: 22%;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background-color: #ffffff;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -4px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    body:not(.legacy-ui) .login-panel > .panel-heading {
        background-color: #ffffff;
        color: #0f172a;
        padding: 18px 22px 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    body:not(.legacy-ui) .login-panel > .panel-heading .panel-title {
        color: #0f172a;
        font-size: 17px;
        font-weight: 700;
    }

    body:not(.legacy-ui) .login-panel .panel-body {
        padding: 22px;
    }

    /* ==========================================================================
       7. Floating Theme Switcher Pill (Clean White Pill at Bottom-Right)
       ========================================================================== */
    .ci4-theme-switcher-floating {
        position: fixed;
        bottom: 18px;
        right: 18px;
        z-index: 9999;
    }

    .ci4-theme-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 9999px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #334155;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        line-height: 1.3;
    }

    .ci4-theme-toggle-btn:hover {
        background: #f8fafc;
        color: #2563eb;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }
}