/* Modern visual theme, layered on top of the original grid/box CSS.
   Loaded last in header.php so it wins the cascade without needing to
   touch every legacy rule directly. */

:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
}

body {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5 {
    font-family: inherit !important;
    color: var(--color-text) !important;
}

/* Header bar */
#branding {
    background: #111827 !important;
    padding: 16px 24px !important;
    border-radius: var(--radius) var(--radius) 0 0;
}
#branding a { color: #cbd5e1 !important; }
#branding a:hover { color: #fff !important; }
#branding a:before { color: #4b5563 !important; }

/* Cards */
.box {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 20px !important;
}

.box.sidemenu {
    box-shadow: var(--shadow-sm) !important;
    border-right: none !important;
}
.section.menu .menuitem { color: var(--color-text) !important; font-weight: 600 !important; }
.submenu a { color: var(--color-text-muted) !important; }
.submenu a:hover, .submenu a.active { color: var(--color-primary) !important; }

/* Buttons - flat, no legacy sprite */
.btn, a.btn, button.btn, input.btn, input[type="submit"] {
    background: var(--color-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 16px !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease;
}
.btn:hover, a.btn:hover, button.btn:hover { background: var(--color-primary-dark) !important; }

.quick-links .current {
    background: #e5e7eb !important;
    color: var(--color-text-muted) !important;
    border: none !important;
}

/* Forms */
.appform .field input[type="text"],
.appform .field input[type="password"],
.appform .field select,
.appform textarea,
.login-wrap input[type="text"],
.login-wrap input[type="password"] {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
}
.appform .field input:focus,
.appform .field select:focus,
.login-wrap input:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Tables */
table.data {
    border-collapse: collapse !important;
    width: 100% !important;
}
table.data th,
table.data th.sorting,
table.data th.sorting_asc,
table.data th.sorting_desc,
table.data th.sorting_asc_disabled,
table.data th.sorting_desc_disabled {
    background: #f9fafb !important;
    background-image: none !important;
    color: var(--color-text) !important;
    border-bottom: 2px solid var(--color-border) !important;
    text-align: left !important;
    padding: 10px 8px !important;
}
table.data td {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 8px !important;
}
table.data tbody tr:hover { background: #f9fafb !important; }

/* Messages */
.message { border-radius: 6px !important; box-shadow: var(--shadow-sm) !important; }

/* Login card */
.login-wrap .box { box-shadow: var(--shadow-md) !important; }