:root {
    --ag-page-bg: #dbeaf6;
    --ag-page-bg-2: #c9deef;
    --ag-surface: rgba(248, 251, 255, 0.96);
    --ag-surface-solid: #f8fbff;
    --ag-card: #ffffff;
    --ag-primary: #005a9e;
    --ag-primary-2: #0078d4;
    --ag-primary-dark: #003f73;
    --ag-text: #102a43;
    --ag-muted: #50677d;
    --ag-border: rgba(0, 90, 158, 0.28);
    --ag-shadow: 0 16px 34px rgba(16, 42, 67, 0.16);
    --ag-danger: #c9353d;
    --ag-success: #0f7b31;
    --ag-radius: 22px;
}

* { box-sizing: border-box; }
html { background: var(--ag-page-bg); }
body,
body.login-page {
    background:
        radial-gradient(circle at 18% 0%, rgba(0,120,212,.18), transparent 32%),
        linear-gradient(135deg, var(--ag-page-bg) 0%, var(--ag-page-bg-2) 100%) !important;
    color: var(--ag-text) !important;
}
body, input, textarea, select, button { font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important; }

a { color: var(--ag-primary) !important; }
.site-shell, .container, .dashboard-container, .admin-container, .page-container {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.top-header {
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(0,90,158,.16) !important;
    border-radius: 28px !important;
    padding: 16px 12px 14px !important;
    box-shadow: 0 14px 35px rgba(16,42,67,.12) !important;
}
.site-logo {
    display: block !important;
    width: min(430px, 82vw) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 8px !important;
    border-radius: 18px !important;
    background: #fff !important;
}
.site-title, h1, h2, h3,
.page-title h1, .dashboard-title, .section-title,
.message-board h2, .login-box h2,
.filter-section h2, .list-section h2,
.form-section h2, .users-list h2 {
    color: var(--ag-primary) !important;
    text-shadow: none !important;
}
.today-line, p, .hint, .summary-note, .char-note, .tiny-counter, .site-footer,
.message-date, .meta, .small, .subtitle {
    color: var(--ag-muted) !important;
}

.message-board, .login-box, .dashboard-header, .dashboard-card, .card,
.page-header, .panel, .admin-card, .map-panel, .products-table,
.form-section, .list-section, .filter-section, .users-container,
.login-container, .box, table {
    background: var(--ag-surface) !important;
    color: var(--ag-text) !important;
    border-color: var(--ag-border) !important;
    box-shadow: var(--ag-shadow) !important;
}
.message-compose, .message-card, .reply-card, .reply-form-box,
.empty-messages, .user-details, .product-card, tbody tr,
.stats-card, .stat-card {
    background: var(--ag-card) !important;
    color: var(--ag-text) !important;
    border-color: var(--ag-border) !important;
}
.message-board::before { display: none !important; }

label, .message-compose-title, .reply-form-title, .sender-name,
.message-body, th, td, .user-name, .product-name, .form-label {
    color: var(--ag-text) !important;
}
input, textarea, select {
    background: #fff !important;
    color: var(--ag-text) !important;
    border: 1px solid var(--ag-border) !important;
}
input::placeholder, textarea::placeholder { color: #7b8fa3 !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--ag-primary-2) !important;
    box-shadow: 0 0 0 4px rgba(0,120,212,.18) !important;
    outline: none !important;
}

button, .btn, .btn-login, .btn-message-submit, .btn-reply-submit,
.admin-link, .game-btn, .btn-submit, .btn-filter, .btn-back,
.btn-print, .btn-reset, .quick-price, .action-btn, input[type="submit"] {
    background: var(--ag-primary-2) !important;
    color: #fff !important;
    border-color: var(--ag-primary-2) !important;
}
button:hover, .btn:hover, .btn-login:hover, .btn-message-submit:hover,
.btn-reply-submit:hover, .admin-link:hover, .game-btn:hover,
.btn-submit:hover, .btn-filter:hover, .btn-back:hover, .btn-print:hover,
.btn-reset:hover, .quick-price:hover, .action-btn:hover {
    background: var(--ag-primary-dark) !important;
    color: #fff !important;
}
.logout-btn, .btn-delete, .action-btn.danger, .danger, .delete-btn {
    background: var(--ag-danger) !important;
    color: #fff !important;
    border-color: var(--ag-danger) !important;
}
.message-badge, .badge {
    background: rgba(0,120,212,.10) !important;
    color: var(--ag-primary-dark) !important;
    border-color: var(--ag-border) !important;
}
.message-alert.success, .message.success { background: rgba(15,123,49,.12) !important; color: var(--ag-success) !important; border-color: rgba(15,123,49,.3) !important; }
.message-alert.error, .message.error, .error-message { background: rgba(201,53,61,.12) !important; color: var(--ag-danger) !important; border-color: rgba(201,53,61,.3) !important; }

.ag-intro {
    grid-column: 1 / -1 !important;
    background: rgba(255,255,255,.90) !important;
    color: var(--ag-text) !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: var(--ag-radius) !important;
    padding: 22px !important;
    margin: 0 !important;
    box-shadow: var(--ag-shadow) !important;
    overflow: hidden !important;
}
.ag-intro h2 {
    color: var(--ag-primary) !important;
    font-size: clamp(1.25rem, 3vw, 2rem) !important;
    line-height: 1.7 !important;
    margin: 0 0 10px !important;
    border-right: 4px solid var(--ag-primary-2) !important;
    padding-right: 14px !important;
}
.ag-intro p { color: var(--ag-muted) !important; line-height: 2 !important; margin: 0 0 14px !important; }
.ag-image-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 12px !important; }
.ag-image-grid img { width: 100% !important; aspect-ratio: 1.45/1 !important; object-fit: cover !important; border-radius: 16px !important; border: 1px solid var(--ag-border) !important; background: #fff !important; padding: 3px !important; }

@media (min-width: 851px) {
    .main-layout { grid-template-columns: minmax(0, 1fr) 340px !important; align-items: start !important; }
}
@media (max-width: 850px) {
    body.login-page { padding: 8px !important; }
    .top-header { border-radius: 22px !important; padding: 10px 8px !important; }
    .site-logo { width: min(360px, 78vw) !important; }
    .main-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; }
    .ag-intro { order: 0 !important; padding: 15px 12px !important; border-radius: 18px !important; }
    .message-board { order: 1 !important; width: 100% !important; }
    .login-area { order: 2 !important; width: 100% !important; }
    .ag-image-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
}
@media (max-width: 420px) {
    .ag-image-grid { grid-template-columns: 1fr 1fr !important; }
    .ag-intro h2 { font-size: 1.08rem !important; }
}

/* readability patch: stronger Windows-blue theme with high contrast on admin pages */
:root {
    --ag-bg-start: #d7e9f8;
    --ag-bg-end: #b9d5ea;
    --ag-page-bg: #cfe3f4;
    --ag-page-bg-2: #aac9df;
    --ag-surface: rgba(244, 249, 253, 0.98);
    --ag-surface-solid: #f4f9fd;
    --ag-card: #ffffff;
    --ag-primary: #005a9e;
    --ag-primary-2: #0078d4;
    --ag-primary-dark: #003f73;
    --ag-text: #0b2239;
    --ag-muted: #304d66;
    --ag-border: rgba(0, 90, 158, 0.34);
}

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.72), transparent 30%),
        linear-gradient(135deg, var(--ag-page-bg) 0%, var(--ag-page-bg-2) 100%) !important;
    color: var(--ag-text) !important;
}

/* make every old dark/yellow component readable even when page has inline styles */
.card, .box, .panel, .admin-card, .filter-section, .list-section,
.form-section, .users-container, .message-board, .login-box,
.dashboard-card, .stats-card, .stat, .table-wrap {
    background: rgba(248, 251, 255, .98) !important;
    color: var(--ag-text) !important;
    border-color: var(--ag-border) !important;
}
.subtitle, .stat span, .check-row, .muted, .empty,
.msg-preview, .card p, .box p, .panel p {
    color: var(--ag-muted) !important;
}

/* sms_admin and wide admin tables */
.table-wrap {
    overflow-x: auto !important;
    border: 1px solid var(--ag-border) !important;
    background: #ffffff !important;
}
table {
    background: #ffffff !important;
    color: var(--ag-text) !important;
    border-collapse: collapse !important;
}
thead, tbody, tr, th, td {
    color: var(--ag-text) !important;
}
th {
    background: #d5e7f6 !important;
    color: #083a63 !important;
    border-bottom: 1px solid rgba(0,90,158,.25) !important;
}
td {
    background: #ffffff !important;
    color: var(--ag-text) !important;
    border-bottom: 1px solid rgba(0,90,158,.14) !important;
}
tbody tr:nth-child(even) td {
    background: #f0f6fb !important;
}
.msg-preview {
    color: #0b2239 !important;
    background: transparent !important;
    opacity: 1 !important;
}
.muted {
    color: #38566f !important;
    opacity: 1 !important;
}
.id-cell, td.id-cell, .stat strong {
    color: var(--ag-primary) !important;
}

input, textarea, select {
    background: #ffffff !important;
    color: #0b2239 !important;
    border-color: rgba(0,90,158,.32) !important;
}
label {
    color: #0b2239 !important;
}

/* keep the title/logo block visually merged with page background */
.top-header, .site-logo {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.site-logo {
    mix-blend-mode: normal;
}

@media (max-width: 760px) {
    .card, .filter-section, .list-section, .form-section, .users-container {
        margin-left: 12px !important;
        margin-right: 12px !important;
        border-radius: 20px !important;
    }
    th, td { font-size: .82rem !important; }
}

/* final readability fix: product kind/type badges and pale legacy yellow text */
.badge-kind,
td .badge-kind,
.col-kind .badge-kind,
.products-table .badge-kind,
span.badge-kind {
    background: #e7f2fb !important;
    color: #003f73 !important;
    border: 1px solid rgba(0, 90, 158, .34) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important;
}
.products-table td,
.products-table th,
.products-table .price-cell,
.products-table .col-name,
.products-table .col-date,
.products-table .col-kind,
.products-table .summary-note,
.products-table label {
    color: #0b2239 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.products-table tbody tr:nth-child(even) td { background: #edf5fb !important; }
.products-table tbody tr:nth-child(odd) td { background: #ffffff !important; }
.products-table tr:hover td { background: #dcecf8 !important; }
.total-row td,
.products-table .total-row td {
    background: #cfe3f4 !important;
    color: #003f73 !important;
    font-weight: 800 !important;
}
/* override any remaining old cream/yellow text on light backgrounds */
[style*="ffe9"], [style*="fff4"], [style*="255, 217"], [style*="244, 197"] {
    color: #0b2239 !important;
}
@media (max-width: 760px) {
    .badge-kind, .products-table .badge-kind {
        background: #e7f2fb !important;
        color: #003f73 !important;
        font-size: 12px !important;
        padding: 5px 8px !important;
        line-height: 1.5 !important;
    }
}