/* Admin theme for the Capital School Bahrain back office (Django 4.2 admin has three modes: Light, Dark, and Auto = follow
   the OS). Light = branded light theme; Dark = deep navy + gold. Every text/background pair was checked for WCAG AA
   (>= 4.5:1). Linked from admin/base_site.html - bump the ?v= there when you edit this file. */
:root,
html[data-theme="light"] {
    /* Capital School Bahrain light theme: navy header, gold accent, soft blue-grey page, white cards */
    --primary: #272555;
    --secondary: #272555;
    --accent: #E3A81F;
    --primary-fg: #ffffff;

    --body-fg: #23233a;
    --body-bg: #ffffff;
    --body-quiet-color: #5b6070;
    --body-loud-color: #14142b;

    --header-color: #ffffff;
    --header-branding-color: #E3A81F;
    --header-bg: #272555;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #d7d6ee;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #34316b;

    --link-fg: #2d2a6e;
    --link-hover-color: #8a5f00;
    --link-selected-fg: #8a5f00;

    --hairline-color: #e6e7f0;
    --border-color: #d3d5e3;

    --error-fg: #b42318;
    --message-success-bg: #e3f6e9;
    --message-warning-bg: #fdf3d3;
    --message-error-bg: #fde8e6;

    --darkened-bg: #f4f5fa;
    --selected-bg: #e9eaf6;
    --selected-row: #fff6dc;

    --button-fg: #ffffff;
    --button-bg: #34316b;
    --button-hover-bg: #4743a0;
    --default-button-bg: #E3A81F;
    --default-button-hover-bg: #f0bb3d;
    --close-button-bg: #6b6f86;
    --close-button-hover-bg: #4a4d63;
    --delete-button-bg: #b42318;
    --delete-button-hover-bg: #8f1c12;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #5a5d7a;
    --object-tools-hover-bg: #34316b;

    /* helpers used by the enquiry-portal screens */
    --csb-page-bg: #eceef7;
    --csb-surface: #ffffff;
    --csb-surface-2: #f4f5fa;
    --csb-brand: #272555;
    --csb-on-accent: #1b1a38;
    --csb-success: #15803D;
    --csb-success-hover: #166534;
    --csb-warn-bg: #FEF3C7;
    --csb-warn-border: #F5D77A;
    --csb-warn-fg: #5c4300;
    --csb-warn-text: #92620f;
    --csb-danger-text: #B91C1C;
    --csb-ok-text: #15803D;
    --csb-shadow: 0 1px 2px rgba(39, 37, 85, .08), 0 4px 14px rgba(39, 37, 85, .06);
    --csb-ring: rgba(227, 168, 31, .35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    /* Capital School Bahrain dark theme: deep navy surfaces, gold accents */
      --primary: #2f2d63;
      --secondary: #1a1940;
      --accent: #E3A81F;
      --primary-fg: #ffffff;

      --body-fg: #e9eaf4;
      --body-bg: #0f0e24;
      --body-quiet-color: #aeb0cc;
      --body-loud-color: #ffffff;

      --header-color: #ffffff;
      --header-branding-color: #E3A81F;
      --header-bg: #1a1940;
      --header-link-color: #ffffff;

      --breadcrumbs-fg: #f0c14b;
      --breadcrumbs-link-fg: #ffffff;
      --breadcrumbs-bg: #2f2d63;

      --link-fg: #f0c14b;
      --link-hover-color: #ffd978;
      --link-selected-fg: #ffd978;

      --hairline-color: #26254d;
      --border-color: #3a3868;

      --error-fg: #ff9b92;
      --message-success-bg: #12351f;
      --message-warning-bg: #3a3012;
      --message-error-bg: #3d1717;

      --darkened-bg: #17163a;
      --selected-bg: #262452;
      --selected-row: #3a3320;

      --button-fg: #ffffff;
      --button-bg: #4a46b0;
      --button-hover-bg: #5d58c7;
      --default-button-bg: #E3A81F;
      --default-button-hover-bg: #f0bb3d;
      --close-button-bg: #4a4880;
      --close-button-hover-bg: #5d5a9c;
      --delete-button-bg: #b42318;
      --delete-button-hover-bg: #d03a2d;

      --object-tools-fg: #ffffff;
      --object-tools-bg: #4a4880;
      --object-tools-hover-bg: #5d5a9c;

      --csb-page-bg: #0a0a1c;
      --csb-surface: #17163a;
      --csb-surface-2: #1e1d48;
      --csb-brand: #8f8cf0;
      --csb-on-accent: #1b1a38;
      --csb-success: #15803D;
      --csb-success-hover: #1a9a4a;
      --csb-warn-bg: #3d3314;
      --csb-warn-border: #6b5a1f;
      --csb-warn-fg: #fde9b0;
      --csb-warn-text: #f0c14b;
      --csb-danger-text: #ff9b92;
      --csb-ok-text: #5ad08a;
      --csb-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
      --csb-ring: rgba(227, 168, 31, .45);
      color-scheme: dark;
  }
}

html[data-theme="dark"] {
    /* Capital School Bahrain dark theme: deep navy surfaces, gold accents */
    --primary: #2f2d63;
    --secondary: #1a1940;
    --accent: #E3A81F;
    --primary-fg: #ffffff;

    --body-fg: #e9eaf4;
    --body-bg: #0f0e24;
    --body-quiet-color: #aeb0cc;
    --body-loud-color: #ffffff;

    --header-color: #ffffff;
    --header-branding-color: #E3A81F;
    --header-bg: #1a1940;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #f0c14b;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #2f2d63;

    --link-fg: #f0c14b;
    --link-hover-color: #ffd978;
    --link-selected-fg: #ffd978;

    --hairline-color: #26254d;
    --border-color: #3a3868;

    --error-fg: #ff9b92;
    --message-success-bg: #12351f;
    --message-warning-bg: #3a3012;
    --message-error-bg: #3d1717;

    --darkened-bg: #17163a;
    --selected-bg: #262452;
    --selected-row: #3a3320;

    --button-fg: #ffffff;
    --button-bg: #4a46b0;
    --button-hover-bg: #5d58c7;
    --default-button-bg: #E3A81F;
    --default-button-hover-bg: #f0bb3d;
    --close-button-bg: #4a4880;
    --close-button-hover-bg: #5d5a9c;
    --delete-button-bg: #b42318;
    --delete-button-hover-bg: #d03a2d;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #4a4880;
    --object-tools-hover-bg: #5d5a9c;

    --csb-page-bg: #0a0a1c;
    --csb-surface: #17163a;
    --csb-surface-2: #1e1d48;
    --csb-brand: #8f8cf0;
    --csb-on-accent: #1b1a38;
    --csb-success: #15803D;
    --csb-success-hover: #1a9a4a;
    --csb-warn-bg: #3d3314;
    --csb-warn-border: #6b5a1f;
    --csb-warn-fg: #fde9b0;
    --csb-warn-text: #f0c14b;
    --csb-danger-text: #ff9b92;
    --csb-ok-text: #5ad08a;
    --csb-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
    --csb-ring: rgba(227, 168, 31, .45);
    color-scheme: dark;
}

/* ====================================================================================================================
   Shared look (both themes). Everything below reads the variables above, so a colour is changed in ONE place.
   ==================================================================================================================== */
html, body { background: var(--csb-page-bg); }
body { color: var(--body-fg); }

#header { border-bottom: 3px solid var(--accent); }
div.breadcrumbs { border-bottom: 1px solid rgba(0, 0, 0, .12); }
#content { background: transparent; }

/* cards */
.module, .inline-group .tabular, #changelist .paginator, #changelist-filter {
    background: var(--body-bg);
}
.module { border: 1px solid var(--hairline-color); border-radius: 8px; box-shadow: var(--csb-shadow); overflow: hidden; }
.module h2, .module caption, .inline-group h2 {
    background: var(--primary); color: var(--primary-fg); letter-spacing: .04em; font-weight: 600;
}
.module h2 a, .module caption a { color: var(--primary-fg); }
#changelist-filter { border: 1px solid var(--hairline-color); border-radius: 8px; box-shadow: var(--csb-shadow); }
#changelist-filter h2 { background: var(--primary); color: var(--primary-fg); }
#changelist .paginator, .actions { background: var(--darkened-bg); border-color: var(--hairline-color); }
.results { border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline-color); }
thead th { background: var(--darkened-bg); color: var(--body-quiet-color); }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: var(--selected-bg); }
fieldset.module { background: var(--body-bg); }
.form-row { border-bottom-color: var(--hairline-color); }
.aligned label { color: var(--body-fg); font-weight: 600; }
.help, .timezonewarning, form .form-row p.help { color: var(--body-quiet-color); }
ul.messagelist li { border-radius: 6px; margin: 0 0 6px; }

/* form controls */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel],
input[type=search], input[type=date], input[type=time], textarea, select, .vTextField {
    background: var(--body-bg); color: var(--body-fg); border: 1px solid var(--border-color); border-radius: 6px;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 3px var(--csb-ring);
}

/* Django's own buttons: same shape, hover and focus everywhere */
.button, input[type=submit], input[type=button], .submit-row input, a.button, .object-tools a, button.default {
    border-radius: 6px; font-weight: 600; letter-spacing: .01em; transition: background .15s, box-shadow .15s, transform .05s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.button:active, input[type=submit]:active, input[type=button]:active { transform: translateY(1px); }
.button:focus-visible, input[type=submit]:focus-visible, a.button:focus-visible, .csb-btn:focus-visible, .object-tools a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
/* the "primary action" button (Save, Start sending, ...) is gold with dark text in both themes */
.button.default, input[type=submit].default, .submit-row input.default, button.default {
    background: var(--default-button-bg); color: var(--csb-on-accent); border: none; padding: 10px 15px; cursor: pointer;
}
.button.default:hover, input[type=submit].default:hover, .submit-row input.default:hover, button.default:hover {
    background: var(--default-button-hover-bg); color: var(--csb-on-accent);
}
.button[disabled], input[type=submit][disabled], button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.object-tools a { border-radius: 6px 6px 0 0; }

/* ---- enquiry-portal components --------------------------------------------------------------------------------- */
.csb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px;
    border: 1px solid transparent; background: var(--button-bg); color: var(--button-fg); font-size: 13px; line-height: 1.2;
    font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.csb-btn:hover { background: var(--button-hover-bg); color: var(--button-fg); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.csb-btn:active { transform: translateY(1px); box-shadow: none; }
.csb-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.csb-btn--accent { background: var(--default-button-bg); color: var(--csb-on-accent); }
.csb-btn--accent:hover { background: var(--default-button-hover-bg); color: var(--csb-on-accent); }
.csb-btn--success { background: var(--csb-success); color: #fff; }
.csb-btn--success:hover { background: var(--csb-success-hover); color: #fff; }
.csb-btn--ghost { background: transparent; color: var(--body-fg); border-color: var(--border-color); box-shadow: none; }
.csb-btn--ghost:hover { background: var(--darkened-bg); color: var(--body-fg); border-color: var(--csb-brand); box-shadow: none; }
.csb-btn--danger { background: transparent; color: var(--csb-danger-text); border-color: var(--border-color); box-shadow: none; }
.csb-btn--danger:hover { background: var(--message-error-bg); color: var(--csb-danger-text); border-color: var(--csb-danger-text); box-shadow: none; }
.csb-btn--sm { padding: 5px 10px; font-size: 12px; }

.csb-panel { margin: 0 0 18px; clear: both; }
.csb-panel__body { padding: 14px 16px; }
.csb-muted { color: var(--body-quiet-color); }
.csb-note { margin: 8px 0 0; color: var(--body-quiet-color); font-size: 12px; line-height: 1.5; }
.csb-alert { padding: 9px 12px; border-radius: 6px; margin: 0 0 10px; background: var(--csb-warn-bg); border: 1px solid var(--csb-warn-border); color: var(--csb-warn-fg); }
.csb-alert--danger { background: var(--message-error-bg); border-color: var(--csb-danger-text); color: var(--body-fg); }
.csb-toolbar { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.csb-toolbar form { margin: 0; }

.csb-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin: 12px 0 0; }
.csb-group { border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px 12px; background: var(--csb-surface-2); margin: 0; min-width: 0; }
.csb-group legend { padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--body-quiet-color); }
.csb-group legend::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--csb-brand); }
.csb-group--email legend::before { background: #3b82f6; }
.csb-group--whatsapp legend::before { background: #22c55e; }
.csb-group--draft legend::before { background: var(--body-quiet-color); }
.csb-group__buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

table.csb-history { width: 100%; border-collapse: collapse; }
table.csb-history th, table.csb-history td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline-color); font-size: 13px; }
table.csb-history thead th { background: var(--darkened-bg); color: var(--body-quiet-color); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Buttons that are <a> links must not take the link colour */
a.csb-btn, a.csb-btn:link, a.csb-btn:visited { color: var(--button-fg); text-decoration: none; }
a.csb-btn:hover { color: var(--button-fg); }
a.csb-btn.csb-btn--accent, a.csb-btn.csb-btn--accent:link, a.csb-btn.csb-btn--accent:visited, a.csb-btn.csb-btn--accent:hover { color: var(--csb-on-accent); }
a.csb-btn.csb-btn--success, a.csb-btn.csb-btn--success:link, a.csb-btn.csb-btn--success:visited { color: #fff; }
a.csb-btn.csb-btn--ghost, a.csb-btn.csb-btn--ghost:link, a.csb-btn.csb-btn--ghost:visited, a.csb-btn.csb-btn--ghost:hover { color: var(--body-fg); }
a.csb-btn.csb-btn--danger, a.csb-btn.csb-btn--danger:link, a.csb-btn.csb-btn--danger:visited { color: var(--csb-danger-text); }