/* 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;
  --border-color: #E9EDF3;

  --error-fg: #B4402F;

  --message-success-bg: #EAF1FE;
  --message-warning-bg: #FFF6D6;
  --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;
}

/* 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: #fff; border-bottom: var(--bw) solid var(--hairline-color);
}
/* Tabs are buttons: white with an edge, glass on hover, blue when current. */
.cr-tabs a.cr-tab {
  display: flex; align-items: center; gap: 5px; height: 36px; margin: 8px 0; padding: 0 16px;
  color: #16283D; background: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  border: 1px solid #BFC9D6; 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: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
}
.cr-tabs a.cr-tab.active,
.cr-tab-wrap.active > a.cr-tab,
.cr-tab-wrap.active:hover > a.cr-tab {
  color: #fff; background: #2563EB; border-color: #2563EB; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.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: var(--glass); color: #16283D; box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* 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: #fff; border-bottom: var(--bw) solid var(--hairline-color);
}
.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; }
body { -webkit-font-smoothing: antialiased; }

/* 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; }
.cr-tabs.cr-inline { align-items: center; gap: 8px; padding: 6px 24px; }
.cr-tabs.cr-inline h2.cr-head { margin: 0 20px 0 0; 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: #F6F8FB; 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; }