/* CommonRetail admin theme — navy + blue, matching the /home/ dashboard
 * shell (templates/home.html) so the admin reads as part of the same app.
 *
 * Django's admin (4.0+) exposes its whole palette as CSS custom
 * properties on :root; this file overrides those, so every built-in page
 * (changelist, change form, login, popups) follows. Loaded after
 * admin/css/base.css via the extrastyle block in
 * templates/admin/base_site.html.
 *
 * Palette: navy #1B2240 / #252D4D, blue #3B82F6 (hover #2563EB),
 * ink #16283D, ink-soft #5B6B7A, line #E3E8F0; selection = liquid glass.
 */
:root {
  --primary: #1B2240;
  --secondary: #252D4D;
  --accent: #3B82F6;
  --primary-fg: #ffffff;

  --body-fg: #16283D;
  --body-bg: #ffffff;
  --body-quiet-color: #5B6B7A;
  --body-loud-color: #16283D;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #1B2240;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #5B6B7A;
  --breadcrumbs-link-fg: #2563EB;
  --breadcrumbs-bg: #F6F8FB;

  --link-fg: #2563EB;
  --link-hover-color: #1D4ED8;
  --link-selected-fg: #2563EB;

  --hairline-color: #E9EDF3;
  --head-line: #C4CCD3;
  --border-color: #E9EDF3;

  --error-fg: #B4402F;

  --message-success-bg: #EAF1FE;
  --message-warning-bg: #F2F0E9;
  --message-error-bg: #FBEBE8;

  --darkened-bg: #F6F8FB;
  --selected-bg: rgba(150, 175, 225, .30);
  --selected-row: rgba(150, 175, 225, .30);

  /* Quiet neutral for ordinary buttons; blue for the primary action. */
  --button-fg: #16283D;
  --button-bg: #EEF2F8;
  --button-hover-bg: #E3E8F0;

  --default-button-bg: #3B82F6;
  --default-button-hover-bg: #2563EB;

  --close-button-bg: #6B7A87;
  --close-button-hover-bg: #5B6B7A;
  --delete-button-bg: #B4402F;
  --delete-button-hover-bg: #9A3527;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #3B82F6;
  --object-tools-hover-bg: #2563EB;

  --font-family-primary: Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Rounded (not pill) buttons, like the ERP-style shell. */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a {
  border-radius: 0 !important;
}

/* Primary actions: blue fill with white text. */
.button.default,
input[type="submit"].default,
.submit-row input.default,
.login .submit-row input[type="submit"] {
  background: var(--default-button-bg) !important;
  color: #fff !important;
}
.button.default:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover,
.login .submit-row input[type="submit"]:hover {
  background: var(--default-button-hover-bg) !important;
}

/* Any button with a coloured fill (blue, red, grey) carries white text, never the dark ink. */
.object-tools a, .object-tools a:link, .object-tools a:visited,
.submit-row a.deletelink, .submit-row a.deletelink:link, .submit-row a.deletelink:visited,
.submit-row a.closelink, .submit-row a.closelink:link, .submit-row a.closelink:visited,
.delete-confirmation form .cancel-link, .delete-confirmation form input[type="submit"],
#changelist-form .actions button[type="submit"], #changelist-search input[type="submit"],
.button.default, input[type="submit"].default, .submit-row input.default {
  color: #fff !important;
}
.submit-row a.deletelink { background: var(--delete-button-bg) !important; }
.submit-row a.closelink, .delete-confirmation form .cancel-link { background: var(--close-button-bg) !important; }
.delete-confirmation form input[type="submit"] { background: var(--default-button-bg) !important; }
#changelist-form .actions button[type="submit"], #changelist-search input[type="submit"] { background: var(--default-button-bg) !important; }
.object-tools a { background: var(--object-tools-bg) !important; }
.object-tools a:hover { background: var(--object-tools-hover-bg) !important; }

/* Liquid-glass selection: a translucent, softly lit pane with a bright top rim
   and blurred backdrop. Used for every hover / selected / current state. */
:root {
  --glass: linear-gradient(180deg, rgba(255,255,255,.70), rgba(196,210,236,.34));
  --glass-edge: rgba(150,170,210,.38);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(110,130,170,.16), 0 4px 14px rgba(27,34,64,.10);
  --glass-flat: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(110,130,170,.14);
}
/* only rows ticked for an action are highlighted, not rows the mouse passes over */
#changelist table tbody tr.selected {
  background: var(--glass) !important;
  box-shadow: var(--glass-flat);
}

/* No breadcrumb trail: the tab bar shows where you are. Hidden in CSS because
   several admin pages (changelist, change form) define their own breadcrumbs block. */
.breadcrumbs { display: none !important; }

/* ---- Top tab bar (replaces the left side pane) ---------------------- */
.cr-tabs {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  padding: 0 20px; background: #F2F0E9; border-bottom: var(--bw) solid var(--head-line);
}
/* Tabs are plain text links like a website menu: an underline on hover, and the current one is bold with a thick underline (no box). */
.cr-tabs { gap: 2px; }
.cr-tabs a.cr-tab {
  display: flex; align-items: center; gap: 5px; height: 36px; margin: 8px 0; padding: 0 14px;
  color: #16283D; background: transparent; font-size: 15px; font-weight: 400; text-decoration: none;
  border: 0; border-radius: 0; box-sizing: border-box;
}
.cr-tabs a.cr-tab:hover,
.cr-tab-wrap:hover > a.cr-tab,
.cr-tab-wrap:focus-within > a.cr-tab {
  color: #16283D; background: transparent; box-shadow: none;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.cr-tabs a.cr-tab.active,
.cr-tab-wrap.active > a.cr-tab,
.cr-tab-wrap.active:hover > a.cr-tab {
  color: #16283D; background: transparent; font-weight: 700; box-shadow: none;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: #16283D;
}
.cr-chev { flex: none; transition: transform .15s; }
.cr-tab-wrap:hover .cr-chev,
.cr-tab-wrap:focus-within .cr-chev { transform: rotate(180deg); }
.cr-tab-wrap { position: relative; display: flex; }

/* Dropdowns — same look as the /home/ "+" menu: white card, pale-yellow highlight. */
.cr-pop {
  display: none; position: absolute; top: calc(100% - 4px); left: 0; z-index: 100;
  min-width: 210px; max-height: 70vh; overflow-y: auto; padding: 6px;
  background: #fff; border: var(--bw) solid var(--hairline-color); border-radius: 0;
  box-shadow: 0 8px 24px rgba(27, 34, 64, .18);
}
.cr-tab-wrap:hover .cr-pop,
.cr-tab-wrap:focus-within .cr-pop { display: block; }
.cr-tabs a.cr-item {
  display: block; padding: 9px 12px; border-radius: 0; font-size: 14px;
  color: #16283D; text-decoration: none; white-space: nowrap;
}
.cr-tabs a.cr-item:hover,
.cr-tabs a.cr-item.current {
  background: #F2F0E9; color: #16283D; box-shadow: none;
}

/* The page itself is a lighter warm off-white (#F8F7F3) so the #F2F0E9 bars above it stand out; the boxes drawn on it (forms, tables, panels) keep their white. */
body, #container, #content { background: #F8F7F3; }
#content .module, #content #changelist .results, #content #changelist-form .results table, #content fieldset.module { background: #fff; }

/* Sub-header under the tab bar: page title. */
.cr-subbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 0 24px; background: #F2F0E9; border-bottom: var(--bw) solid var(--head-line);
}
.cr-subtitle { font-size: 22px; font-weight: 700; color: #16283D; }

.cr-hint { margin: 28px 0; color: #5B6B7A; font-size: 15px; }

/* Use the full width of the page — no side gutters or centred column. */
#container #content { padding: 16px 24px 24px; }
#container .main > .content { width: 100%; max-width: none; }
#container .module { margin-bottom: 16px; }
#container #content-main { max-width: none; }
.cr-hint { margin: 8px 0; }
td, th, input[type=number] { font-variant-numeric: tabular-nums; }

/* Hairline borders: 1px on standard screens, half a pixel on high-density
   ones, so lines look crisp instead of heavy. */
:root { --bw: 1px; }
@media (min-resolution: 1.5dppx) { :root { --bw: .5px; } }
#container :is(td, th, .module, fieldset, input, select, textarea, .results, .paginator, .submit-row) {
  border-width: var(--bw);
}

/* Entry boxes across the admin: square corners, crisp 1px edge, inset focus line
   (same as the rest of MAMI). */
#container :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea),
.vTextField, .vLargeTextField, .vIntegerField, .vDateField, .vTimeField, .vURLField, .vBigIntegerField, .vUUIDField {
  border: 1px solid #BFC9D6 !important; border-radius: 0 !important; box-shadow: none;
}
#container :is(input, select, textarea):focus {
  border-color: #2563EB !important; box-shadow: inset 0 0 0 1px #2563EB !important; outline: none;
}

/* Console header: "commretail Console" in the same wordmark style as the public page
   (Montserrat, uppercase, letter-spaced). */
#site-name a.cr-brand { display: inline-flex; align-items: center; gap: 10px; font-family: Montserrat, Inter, system-ui, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: #fff; text-decoration: none; }
#site-name a.cr-brand img { height: 22px; width: auto; display: block; }
#site-name a.cr-brand .cr-sub { color: #9DB6DD; font-weight: 500; }

/* Edit / Delete buttons on a list row (discount slabs). */
.cr-rowbtns { display: inline-flex; gap: 8px; justify-content: flex-end; }
#container a.cr-rowbtn { display: inline-block; padding: 3px 12px; border: 1px solid #BFC9D6; color: #2563EB; font-size: 12px; font-weight: 600; text-decoration: none; background: #fff; }
#container a.cr-rowbtn:hover { border-color: #2563EB; background: #EFF5FF; }
#container a.cr-rowbtn-del { color: #B42318; }
#container a.cr-rowbtn-del:hover { border-color: #B42318; background: #FEF3F2; }

/* Pharmacy-side admin: "Administration" and its tabs on one line, like the Inventory and Reports
   headers; no separate site header. */
body.cr-simple #header { display: none; }
/* The admin page box grows with its content (it was exactly one screen tall), so the pinned bar below keeps sticking all the way down. */
body.cr-simple #container { height: auto; min-height: 100%; }
.cr-tabs.cr-inline { align-items: center; gap: 8px; padding: 6px 24px; position: sticky; top: 0; z-index: 25; }      /* stays at the top while the page scrolls */
.cr-tabs.cr-inline h2.cr-head { margin: 0 10px 0 0; padding-right: 18px; border-right: 3px solid #16283D; line-height: 1.1; font-size: 20px; font-weight: 700; color: #16283D; }

/* Console: the second bar inside an application (its sections), under the main tab bar. */
.cr-tabs.cr-sections { background: #F2F0E9; padding: 0 20px; gap: 6px; align-items: center; }
.cr-tabs.cr-sections .cr-secname { margin-right: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5B6B7A; }
.cr-tabs.cr-sections a.cr-tab { height: 32px; margin: 6px 0; padding: 0 13px; font-size: 13px; }

/* ---- Console buttons: black with white lettering --------------------------------------------------
   One style for every action in the Console: page buttons (a.op-btn), form submits, Add / Upload / Download,
   search and action-bar buttons. On purpose different: back links are outlined (a.op-back), Delete stays red,
   Close / Cancel stay grey, and buttons marked .cr-keep (the PICKINZ on / off switch) keep their own colour.
   Scoped to the Console (body.cr-console); the pharmacy-side admin is not touched. */
body.cr-console a.op-btn,
body.cr-console .co-open,
body.cr-console .object-tools a,
body.cr-console .object-tools a:link,
body.cr-console .object-tools a:visited,
body.cr-console #content button:not(.cr-keep),
body.cr-console #content input[type="submit"],
body.cr-console #content input[type="button"],
body.cr-console #content a.button,
body.cr-console #changelist-form .actions button[type="submit"],
body.cr-console #changelist-search input[type="submit"],
body.cr-console .submit-row input {
  display: inline-block; padding: 4px 13px; background: #111 !important; color: #fff !important;
  border: 1px solid #111 !important; border-radius: 8px !important; font-size: 13px; font-weight: 600;
  line-height: 1.35; text-decoration: none; text-align: center; cursor: pointer; box-shadow: none;
}
body.cr-console a.op-btn:hover,
body.cr-console .co-open:hover,
body.cr-console .object-tools a:hover,
body.cr-console #content button:not(.cr-keep):hover,
body.cr-console #content input[type="submit"]:hover,
body.cr-console #content input[type="button"]:hover,
body.cr-console #content a.button:hover,
body.cr-console #changelist-form .actions button[type="submit"]:hover,
body.cr-console #changelist-search input[type="submit"]:hover,
body.cr-console .submit-row input:hover { background: #333 !important; border-color: #333 !important; }
body.cr-console #content button:not(.cr-keep):disabled,
body.cr-console #content input[type="submit"]:disabled { opacity: .55; cursor: default; }
/* a way back is not an action: outlined */
body.cr-console a.op-btn.op-back { background: #fff !important; color: #111 !important; }
body.cr-console a.op-btn.op-back:hover { background: #F0F2F5 !important; border-color: #111 !important; }
/* the "Yes, I'm sure" button of a delete confirmation is a delete */
body.cr-console .delete-confirmation form input[type="submit"] { background: var(--delete-button-bg) !important; border-color: var(--delete-button-bg) !important; }

/* Console page layout: a panel of rows, each a button with its explanation beside it. */
.op-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.op-tools { max-width: 900px; margin: 12px 0 20px; border: 1px solid #D9E1EC; border-radius: 10px; background: #fff; color: #16283D; }
.op-tool { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid #E3E8EE; }
.op-tool:first-child { border-top: 0; }
.op-tool .op-go { flex: 0 0 250px; display: flex; gap: 6px; flex-wrap: wrap; }
.op-tool .op-why { font-size: 13.5px; line-height: 1.45; color: #3C4A5A; }
.op-tool .op-why b { color: #16283D; }
.op-step { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #E3E8EE; color: #16283D; font-weight: 700; font-size: 13px; text-align: center; line-height: 26px; }
@media (max-width: 700px) { .op-tool { flex-direction: column; align-items: flex-start; gap: 8px; } .op-tool .op-go { flex-basis: auto; } }

/* ---- Console switches ------------------------------------------------------------------------------
   A checkbox in the Console is a choice the person makes, so it looks like one: an ON / OFF switch
   (black when on, grey when off), not a bare tick. The row-selection boxes of the admin lists stay ticks. */
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle) {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; box-sizing: border-box;
  width: 50px; height: 24px; margin: 0 8px 0 0; vertical-align: middle; border-radius: 12px;
  border: 1px solid #9AA5B1; background: #E5E9EE; cursor: pointer; transition: background .15s, border-color .15s;
}
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle)::before {
  content: "OFF"; position: absolute; right: 8px; top: 0; line-height: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #5B6B7A;
}
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle)::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: left .15s;
}
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle):checked { background: #111; border-color: #111; }
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle):checked::before { content: "ON"; left: 9px; right: auto; color: #fff; }
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle):checked::after { left: 28px; }
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle):focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
body.cr-console #content input[type="checkbox"]:not(.action-select):not(#action-toggle):disabled { opacity: .5; cursor: default; }

/* ---- Browse / Choose file button of every file box: its own teal, apart from the black action buttons ---------- */
input[type="file"]::file-selector-button {
  background: #0E8A8F; color: #fff; border: 0; border-radius: 8px; padding: 5px 14px; margin-right: 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #0A6E72; }