/* Aly Market admin — "comfort light" theme. Loaded LAST from base_site.html so
   it wins over admin_theme.css. Goal: a clean, light, modern, calm look close
   to the staff frontend (Aly Chat) — soft grey-blue canvas, white rounded cards,
   gentle borders, comfortable spacing, calm blue accent. Reversible: remove the
   one <link> in base_site.html to roll back. */

:root, html[data-theme="light"], html[data-theme="dark"], html {
    --aly-bg: #f4f6fb;            /* app canvas */
    --aly-card: #ffffff;          /* cards / modules */
    --aly-ink: #1f2533;           /* main text */
    --aly-ink-soft: #5b6577;      /* secondary text */
    --aly-line: #e7ebf2;          /* hairlines */
    --aly-accent: #2f6bff;        /* calm blue */
    --aly-accent-weak: #eaf1ff;   /* selected/hover tint */

    /* map Django admin's own variables to the light palette */
    --primary: #2f6bff;
    --secondary: #2f6bff;
    --accent: #2f6bff;
    --primary-fg: #ffffff;
    --body-fg: #1f2533;
    --body-bg: #f4f6fb;
    --body-quiet-color: #5b6577;
    --body-loud-color: #0f1626;
    --header-color: #1f2533;
    --header-branding-color: #2f6bff;
    --header-bg: #ffffff;
    --header-link-color: #1f2533;
    --breadcrumbs-fg: #5b6577;
    --breadcrumbs-link-fg: #2f6bff;
    --breadcrumbs-bg: #ffffff;
    --link-fg: #2f6bff;
    --link-hover-color: #1b4fd6;
    --link-selected-fg: #1b4fd6;
    --hairline-color: #e7ebf2;
    --border-color: #e7ebf2;
    --darkened-bg: #eef2f8;
    --selected-bg: #eaf1ff;
    --selected-row: #eaf1ff;
    --button-bg: #2f6bff;
    --button-hover-bg: #1b4fd6;
    --button-fg: #ffffff;
    --default-button-bg: #1b4fd6;
    --default-button-hover-bg: #163fb0;
    --close-button-bg: #8a93a6;
    --close-button-hover-bg: #6b7488;
    --message-success-bg: #e8f7ee;
    --message-warning-bg: #fff5e6;
    --message-error-bg: #fdecec;
}

/* ---- canvas + base text ---- */
html, body,
body.dashboard, #container, #content, .main, .content {
    background: var(--aly-bg) !important;
    color: var(--aly-ink) !important;
}
#content, .colM, .colMS, .colSM { background: var(--aly-bg) !important; }
a:link, a:visited { color: var(--aly-accent); }

/* ---- header: white, clean, subtle shadow ---- */
#header {
    background: var(--aly-card) !important;
    color: var(--aly-ink) !important;
    box-shadow: 0 1px 0 var(--aly-line), 0 2px 10px rgba(20,30,60,.04) !important;
    border-bottom: 1px solid var(--aly-line) !important;
}
#header a, #header #site-name a, #branding a, #user-tools, #user-tools a {
    color: var(--aly-ink) !important;
}
#site-name a, #branding a:first-child { color: var(--aly-accent) !important; font-weight: 700; }
#user-tools a:hover { color: var(--aly-accent) !important; }

/* ---- breadcrumbs ---- */
div.breadcrumbs {
    background: var(--aly-card) !important;
    color: var(--aly-ink-soft) !important;
    border-bottom: 1px solid var(--aly-line) !important;
}
div.breadcrumbs a { color: var(--aly-accent) !important; }

/* ---- sidebar: light to match (overrides the dark sidebar.css) ---- */
#nav-sidebar {
    background: var(--aly-card) !important;
    border-inline-start: 1px solid var(--aly-line) !important;
}
#nav-sidebar a { color: var(--aly-ink) !important; }
#nav-sidebar tbody a, #nav-sidebar tr a { color: var(--aly-ink-soft) !important; }
#nav-sidebar a:hover { background: var(--aly-accent-weak) !important; color: var(--aly-accent) !important; }
#nav-sidebar tbody tr > * { border-bottom: 1px solid var(--aly-line) !important; }
#nav-sidebar .current-model a, #nav-sidebar tr.selected a {
    background: var(--aly-accent-weak) !important; color: var(--aly-accent) !important;
}
#nav-sidebar caption, #nav-sidebar .module > caption { color: var(--aly-ink-soft) !important; }
#nav-sidebar .aly-caret { color: var(--aly-accent) !important; }
#nav-filter {
    background: #f3f6fc !important; color: var(--aly-ink) !important;
    border: 1px solid var(--aly-line) !important;
}
#nav-filter::placeholder { color: #9aa3b4 !important; }

/* ---- modules / cards: white, rounded, soft shadow ---- */
.module, .dashboard .module, fieldset.module, .inline-related, .card,
.aly-kpi-card, .aly-chart-card, #content-related .module {
    background: var(--aly-card) !important;
    color: var(--aly-ink) !important;
    border: 1px solid var(--aly-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(20,30,60,.05) !important;
    overflow: hidden;
}
.module > h2, .module caption, fieldset > h2, .inline-related h3 {
    background: #fbfcfe !important;
    color: var(--aly-ink) !important;
    border-bottom: 1px solid var(--aly-line) !important;
    font-weight: 700 !important;
}

/* ---- tables: comfortable, soft, gentle zebra + hover ---- */
table { background: var(--aly-card) !important; color: var(--aly-ink) !important; border-color: var(--aly-line) !important; }
thead th, #changelist table thead th {
    background: #f6f8fc !important;
    color: var(--aly-ink-soft) !important;
    border-bottom: 1px solid var(--aly-line) !important;
    font-weight: 600 !important;
}
#result_list tbody td, #result_list tbody th, td, th {
    border-bottom: 1px solid var(--aly-line) !important;
    padding: 11px 12px !important;
    color: var(--aly-ink) !important;
}
#result_list tbody tr:nth-child(even) { background: #fafbfe !important; }
#result_list tbody tr:hover { background: var(--aly-accent-weak) !important; }

/* ---- inputs: white, rounded, soft ---- */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=search], textarea, select,
.vTextField {
    background: #ffffff !important;
    color: var(--aly-ink) !important;
    border: 1px solid var(--aly-line) !important;
    border-radius: 9px !important;
    padding: 9px 11px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--aly-accent) !important;
    box-shadow: 0 0 0 3px var(--aly-accent-weak) !important;
    outline: none !important;
}

/* ---- buttons ---- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 9px !important;
    box-shadow: none !important;
}
.button.default, input[type=submit].default, .submit-row input.default {
    background: var(--aly-accent) !important;
}
.object-tools a, .object-tools a:link, .addlink, .object-tools a:visited {
    border-radius: 9px !important;
}

/* ---- filter panel ---- */
#changelist-filter { background: var(--aly-card) !important; border: 1px solid var(--aly-line) !important; border-radius: 12px !important; }
#changelist-filter h2 { background: #fbfcfe !important; color: var(--aly-ink) !important; }
#changelist-filter li.selected a { color: var(--aly-accent) !important; }

/* ---- messages ---- */
ul.messagelist li { border-radius: 10px !important; }

/* ---- the tabbed shell (admin_tabs.js) bar ---- */
.aly-tab-bar, #aly-tabbar, .aly-tabbar { background: var(--aly-card) !important; border-bottom: 1px solid var(--aly-line) !important; }
.aly-tab { background: #f3f6fc !important; color: var(--aly-ink-soft) !important; border: 1px solid var(--aly-line) !important; border-radius: 9px 9px 0 0 !important; }
.aly-tab.active, .aly-tab[aria-selected="true"] { background: var(--aly-card) !important; color: var(--aly-ink) !important; }

/* ======================================================================
   DARK MODE — readable dark palette. Owner «الدارك عايز يتظبط»: the faint
   low-contrast rows were the problem. This block redefines the palette for
   data-theme="dark" (and OS auto-dark) + overrides the few hardcoded light
   backgrounds, so text is high-contrast and rows are clearly separated.
   Wins over the light vars above via higher/equal specificity + source order.
   ====================================================================== */
html[data-theme="dark"] {
    --aly-bg: #0f1722;
    --aly-card: #16202e;
    --aly-ink: #e9eef5;            /* main text — high contrast */
    --aly-ink-soft: #a9b8cb;       /* secondary — still readable */
    --aly-line: #27384c;
    --aly-accent: #5b95ff;
    --aly-accent-weak: #1d2d46;

    --primary: #5b95ff; --secondary: #5b95ff; --accent: #5b95ff; --primary-fg: #ffffff;
    --body-fg: #e9eef5; --body-bg: #0f1722; --body-quiet-color: #a9b8cb; --body-loud-color: #ffffff;
    --header-color: #e9eef5; --header-branding-color: #5b95ff; --header-bg: #16202e; --header-link-color: #e9eef5;
    --breadcrumbs-fg: #a9b8cb; --breadcrumbs-link-fg: #5b95ff; --breadcrumbs-bg: #16202e;
    --link-fg: #5b95ff; --link-hover-color: #87b2ff; --link-selected-fg: #87b2ff;
    --hairline-color: #27384c; --border-color: #27384c; --darkened-bg: #131c28;
    --selected-bg: #1d2d46; --selected-row: #1d2d46;
    --button-bg: #5b95ff; --button-hover-bg: #3f7ae6; --button-fg: #ffffff;
    --default-button-bg: #3f7ae6; --default-button-hover-bg: #2f63c4;
}
/* override the hardcoded LIGHT backgrounds from the rules above */
html[data-theme="dark"] .module > h2,
html[data-theme="dark"] .module caption,
html[data-theme="dark"] fieldset > h2,
html[data-theme="dark"] .inline-related h3,
html[data-theme="dark"] thead th,
html[data-theme="dark"] #changelist table thead th,
html[data-theme="dark"] #changelist-filter h2 {
    background: #1b2736 !important; color: var(--aly-ink) !important;
}
html[data-theme="dark"] thead th, html[data-theme="dark"] #changelist table thead th { color: var(--aly-ink-soft) !important; }
html[data-theme="dark"] #result_list tbody tr:nth-child(even) { background: #131d2a !important; }
html[data-theme="dark"] #result_list tbody tr:hover { background: var(--aly-accent-weak) !important; }
html[data-theme="dark"] #result_list tbody td,
html[data-theme="dark"] #result_list tbody th,
html[data-theme="dark"] td, html[data-theme="dark"] th { color: var(--aly-ink) !important; }
/* faded/secondary cells stay readable, not near-invisible */
html[data-theme="dark"] .help, html[data-theme="dark"] small,
html[data-theme="dark"] .quiet, html[data-theme="dark"] td .quiet,
html[data-theme="dark"] #result_list tbody td a:not(.button) { color: var(--aly-ink) !important; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=search],
html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .vTextField,
html[data-theme="dark"] #nav-filter {
    background: #1b2736 !important; color: var(--aly-ink) !important; border-color: var(--aly-line) !important;
}
html[data-theme="dark"] .aly-tab { background: #1b2736 !important; color: var(--aly-ink-soft) !important; }

/* RESULTS TABLE — kill the faint odd-row look: force readable text + full
   opacity on BOTH zebra rows (owner: «الوسط بين الاثنين ظبطه»). High specificity
   + > * so nothing underneath dims the cells. Status badges keep their own
   inline colours (we only set bg + base text, not inline-styled spans). */
html[data-theme="dark"] #result_list tbody tr:nth-child(odd),
html[data-theme="dark"] #result_list tbody tr:nth-child(odd) > th,
html[data-theme="dark"] #result_list tbody tr:nth-child(odd) > td { background: #16212f !important; }
html[data-theme="dark"] #result_list tbody tr:nth-child(even),
html[data-theme="dark"] #result_list tbody tr:nth-child(even) > th,
html[data-theme="dark"] #result_list tbody tr:nth-child(even) > td { background: #111a26 !important; }
html[data-theme="dark"] #result_list tbody tr,
html[data-theme="dark"] #result_list tbody tr > th,
html[data-theme="dark"] #result_list tbody tr > td { opacity: 1 !important; }
html[data-theme="dark"] #result_list tbody tr > th,
html[data-theme="dark"] #result_list tbody tr > td,
html[data-theme="dark"] #result_list tbody tr > td a:not([style*="color"]),
html[data-theme="dark"] #result_list tbody tr > td p,
html[data-theme="dark"] #result_list tbody tr > td span:not([style*="color"]):not([class*="badge"]) {
    color: #eef2f8 !important;
}
html[data-theme="dark"] #result_list tbody tr:hover > th,
html[data-theme="dark"] #result_list tbody tr:hover > td { background: #1d2d46 !important; }