/*
 * Friends admin brand overrides -- "candlelight & brass" (see the guest-site
 * rebrand in public/css/menu/ for the palette's origin and rationale).
 *
 * There is no build step for this app's compiled Tailwind bundle
 * (public/css/tailwind/app.css) or the AdminLTE/Bootstrap vendor CSS
 * (public/css/vendor.css) -- both are static, pre-generated files with no
 * tailwind.config.js or package.json to rerun. So this file does NOT add new
 * utility classes; it overrides the exact selectors those bundles already
 * generate, loaded last in layouts/partials/css.blade.php so it wins the
 * cascade. Every rule below is additive and reversible -- nothing here can
 * silently break functionality, only appearance.
 *
 * Scope, deliberately: this reskins the chrome every admin screen shares
 * (header, sidebar, primary buttons/badges via the DaisyUI --p variable),
 * plus a full structural pass -- not just a recolor -- on the two screens
 * named explicitly for this: the dashboard (hero arrangement, background,
 * a shared card accent system) and the POS terminal (background, panel
 * elevation, category/brand drawer). Those two passes are scoped to
 * body.dashboard-page and body.lockscreen respectively (set in
 * layouts/app.blade.php) so nothing here leaks onto any other admin
 * screen's bespoke colors; see docs/HANDOVER.md for what's deliberately
 * out of scope.
 *
 * Semantic colors are left alone on purpose: DaisyUI's --su/--wa/--er
 * (success/warning/error) and the dashboard's green "Net" card keep their
 * conventional meaning (profit up/down) rather than being flattened into
 * the brand accent -- see the artifact-design guidance this was built
 * against: semantic color is separate from brand color and doesn't count
 * as "the accent."
 */

/* ---------------------------------------------------------------------
   1. Self-hosted brand fonts (shared with the guest site -- same files,
      referenced via a relative path into public/fonts/menu/).
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/menu/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Page/box titles get the brand display face -- headings only, never body
   copy or data-table cells, so dense admin screens stay easy to scan. */
.content-header > h1,
.box-title,
.login-box-title,
h1.page-title {
  font-family: 'Fraunces', 'Didot', Georgia, serif;
  font-variation-settings: 'opsz' 40;
}

/* ---------------------------------------------------------------------
   2. DaisyUI theme variables -- the single highest-leverage change here.
      --p/--pc drive every .tw-dw-btn-primary, .tw-dw-badge-primary, focus
      ring, etc. across the whole app from one place. Values are true OKLCH
      conversions of the brand hexes (computed with the same sRGB->OKLab
      math DaisyUI itself uses), not eyeballed:
        gold      #C29A3B -> 70.59% 0.1206 85.57   (primary)
        espresso  #241610 -> 21.68% 0.0257 44.09   (primary-content)
        oxblood   #7E2F1E -> 41.60% 0.1137 33.77   (secondary)
        linen     #F5EEE0 -> 95.08% 0.0200 84.59   (secondary/accent-content)
        bronze    #9A6B3F -> 56.71% 0.0848 62.83   (accent)
      --in/--su/--wa/--er (info/success/warning/error) are untouched --
      semantic, not brand.
   --------------------------------------------------------------------- */
:root {
  --p: 70.59% 0.1206 85.57;
  --pc: 21.68% 0.0257 44.09;
  --s: 41.60% 0.1137 33.77;
  --sc: 95.08% 0.0200 84.59;
  --a: 56.71% 0.0848 62.83;
  --ac: 95.08% 0.0200 84.59;
}

/* ---------------------------------------------------------------------
   3. Bootstrap primitives (.btn-primary/.text-primary/.bg-primary/
      .label-primary/.box-primary) -- the other half of the app's button
      surface, used everywhere Bootstrap rather than DaisyUI classes are
      in play. AdminLTE's stock #337ab7 / #3c8dbc blue replaced with the
      brand pair; !important matches specificity fights already present in
      vendor.css (a later, more specific .text-primary rule was overriding
      the first one there too).
   --------------------------------------------------------------------- */
.btn-primary {
  color: #F5EEE0 !important;
  background-color: #7E2F1E !important;
  border-color: #63241A !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active {
  background-color: #63241A !important;
  border-color: #4E1C13 !important;
}
.text-primary {
  color: #7E2F1E !important;
}
.bg-primary {
  color: #F5EEE0 !important;
  background-color: #7E2F1E !important;
}
.label-primary {
  background-color: #7E2F1E !important;
}
.box-primary {
  border-top-color: #C29A3B !important;
}
.box-primary.box-solid > .box-header {
  color: #241610 !important;
  background-color: #C29A3B !important;
}

/* ---------------------------------------------------------------------
   4. Header + sidebar chrome. This app's header/sidebar were rebuilt in
      Tailwind at some point (AppSidebarMenu.php / header.blade.php) --
      the classic AdminLTE .main-header/.skin-blue-light selectors are
      dead code for these two components now, so those are NOT what's
      targeted here. The header's gradient and the sidebar's active-item
      indicator both key off a custom "primary" color (tw-*-primary-NNN,
      falling back from session('business.theme_color')) -- overriding
      those specific generated classes reskins both surfaces from one
      place. Sidebar keeps its light, legible ground on purpose (a
      data-dense admin tool used for hours benefits from a light working
      surface); only the accent moves.
   --------------------------------------------------------------------- */
.tw-from-primary-800 {
  --tw-gradient-from: #1C120C var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(28, 18, 12, 0) var(--tw-gradient-to-position) !important;
}
.tw-to-primary-900 {
  --tw-gradient-to: #241610 var(--tw-gradient-to-position) !important;
}
.tw-bg-primary-800 {
  background-color: #241610 !important;
}
.tw-border-primary-500\/30 {
  border-color: rgba(194, 154, 59, 0.3) !important;
}
.tw-text-primary-700,
.tw-text-primary-800 {
  /* Deliberately no !important: the header's "Welcome" heading carries
     both this class AND a bare .text-white (itself !important in
     vendor.css) at once -- forcing this color would beat that and
     turn white heading text illegible-dark on the espresso header.
     Loading after the Tailwind bundle is enough to win this selector
     wherever .text-white isn't also present (e.g. the sidebar's
     active-item text, which has no competing color class). */
  color: #7E2F1E;
}


/* ---------------------------------------------------------------------
   5. Dashboard -- only the "Total Sales" hero stat card moves (sky ->
      gold). "Net" keeps its green: that's a genuine positive/negative
      profit signal, not decoration, so it stays semantic rather than
      being pulled into the brand accent.
   --------------------------------------------------------------------- */
.tw-ring-sky-200 {
  --tw-ring-color: rgba(194, 154, 59, 0.35) !important;
}
.tw-bg-sky-100 {
  background-color: rgba(194, 154, 59, 0.16) !important;
}
.tw-text-sky-500 {
  color: #9A7B2E !important;
}

/* ---------------------------------------------------------------------
   6. POS terminal payment row -- the action buttons previously used seven
      unrelated arbitrary-value colors (blue, amber, orange, red, purple,
      pink, navy) for no semantic reason; unified onto the brand ramp.
      Cash stays green and Cancel stays a clear red -- both are genuine
      semantic signals (money received / destructive action) worth
      keeping legible and universally recognizable at a glance during a
      live transaction, not brand real estate to reclaim.
   --------------------------------------------------------------------- */
.tw-text-\[\#009ce4\] { color: #9A7B2E !important; } /* Draft */
.tw-text-\[\#E7A500\] { color: #C29A3B !important; } /* Quotation -- already close to gold */
.tw-text-\[\#FF6B35\] { color: #7E2F1E !important; } /* Post order (kitchen) */
.tw-text-\[\#EF4B51\] { color: #7E2F1E !important; } /* Captain Order / Suspend */
.tw-text-\[\#5E5CA8\] { color: #9A6B3F !important; } /* Credit Sale */
.tw-text-\[\#D61B60\] { color: #9A6B3F !important; } /* Card */
.tw-bg-\[\#001F3E\] { background-color: #241610 !important; } /* Multiple Pay */
.hover\:tw-bg-\[\#002d5a\]:hover { background-color: #1C120C !important; }
.tw-bg-\[\#646EE4\] { background-color: #7E2F1E !important; } /* Recent Transactions pill */
.hover\:tw-bg-\[\#414aac\]:hover { background-color: #63241A !important; }

/* ---------------------------------------------------------------------
   7. POS sidebar category/brand panel titles -- "Categories"/"Brands"
      used a hardcoded indigo-to-blue gradient text effect with no
      relation to anything else in the app; replaced with the same
      gold-to-oxblood gradient the guest site's headline gold-candle
      accent uses, so the phrase "this is Friends" reads consistently
      whether staff are on the till or a guest is on the menu site.
   --------------------------------------------------------------------- */
.tw-from-indigo-600 {
  --tw-gradient-from: #C29A3B var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(194, 154, 59, 0) var(--tw-gradient-to-position) !important;
}
.tw-to-blue-500 {
  --tw-gradient-to: #7E2F1E var(--tw-gradient-to-position) !important;
}
/* The same drawer triggers also carry hover/focus/active-state blue
   utilities the base-state override above doesn't touch. */
.hover\:tw-from-indigo-600:hover {
  --tw-gradient-from: #C29A3B var(--tw-gradient-from-position) !important;
}
.hover\:tw-to-blue-600:hover {
  --tw-gradient-to: #63241A var(--tw-gradient-to-position) !important;
}
.focus\:tw-ring-blue-500:focus {
  --tw-ring-color: rgba(194, 154, 59, 0.5) !important;
}
.active\:tw-from-indigo-700:active {
  --tw-gradient-from: #9A7B2E var(--tw-gradient-from-position) !important;
}
.active\:tw-to-blue-700:active {
  --tw-gradient-to: #4E1C13 var(--tw-gradient-to-position) !important;
}

/* ---------------------------------------------------------------------
   8. Dashboard -- structural pass, not just recolor. Scoped to
      body.dashboard-page (set on the home route in layouts/app.blade.php)
      so none of this leaks onto other admin screens that happen to reuse
      the same .tw-rounded-xl.tw-bg-white card pattern or .js-dw-card hook.
   --------------------------------------------------------------------- */
body.dashboard-page {
  background:
    radial-gradient(circle at 4% 0%, rgba(194, 154, 59, 0.07), transparent 38%),
    #F3EEE3;
}
.dashboard-page .dashboard-hero {
  position: relative;
  overflow: hidden;
}
.dashboard-page .dashboard-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 0%, rgba(227, 200, 120, 0.18), transparent 55%);
  pointer-events: none;
}
.dashboard-page .dashboard-hero-inner {
  position: relative;
}
.dashboard-page .dashboard-hero-kicker {
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 238, 224, 0.65);
  margin: 0 0 0.15rem;
}
.dashboard-page .dashboard-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40;
}
/* One shared accent so the whole page reads as a system: every card
   already carries this exact class pair (hero stats above the fold, the
   js-dw-card report widgets below) -- a thin gold rule along the top edge
   ties them together. The Net card's ring-green-200 stays green: that's
   the same genuine profit signal section 5 above already protects. */
.dashboard-page .tw-rounded-xl.tw-bg-white {
  border-top: 3px solid #C29A3B;
}
.dashboard-page .tw-bg-white.tw-ring-green-200 {
  border-top-color: #3F7A4C;
}
/* vendor.css sets a blanket `h1,h2,h3,h4,h5,h6{color:#32325d}` (a stock
   dashboard-template navy left over from before this rebrand) -- every
   widget heading on this page ("Sales Last 30 Days" etc.) was rendering
   in that navy with no relation to the brand. The "Welcome Owner" h1 is
   unaffected: it carries its own !important .text-white, which still
   wins over this. */
.dashboard-page h2,
.dashboard-page h3,
.dashboard-page h4,
.dashboard-page h5,
.dashboard-page h6 {
  color: #241610;
}

/* ---------------------------------------------------------------------
   9. POS terminal -- structural pass. Scoped to body.lockscreen, the
      class app.blade.php already applies whenever $pos_layout is true, so
      this never touches the dashboard or any other admin screen.
   --------------------------------------------------------------------- */
body.lockscreen main.tw-bg-gray-100 {
  background:
    radial-gradient(circle at 100% 0%, rgba(194, 154, 59, 0.06), transparent 45%),
    #F3EEE3;
}
/* The product-list panel and its edit.blade.php twin are the only two
   .tw-rounded-2xl.tw-bg-white cards in the POS views -- safe to target
   directly without a wrapper class. */
body.lockscreen .tw-rounded-2xl.tw-bg-white {
  border-top: 3px solid #C29A3B;
}
/* AdminLTE .box (category/brand product list, recent transactions) already
   has a colored top accent bar and a light header band built in -- just
   repoint both from stock AdminLTE blue-gray to the brand ramp instead of
   inventing a new card treatment. */
body.lockscreen .box {
  border-top-color: #C29A3B;
}
body.lockscreen .box-header {
  background: #F5EEE0;
  color: #241610;
}
body.lockscreen .box-header.with-border {
  border-bottom-color: rgba(194, 154, 59, 0.3);
}
/* .box-title is an h3 -- vendor.css's blanket h1-h6 navy rule (see the
   dashboard section above) beats inheriting color from .box-header, so it
   needs the same explicit override here. */
body.lockscreen .box-title {
  color: #241610;
}
/* Same blanket vendor.css navy (h1-h6{color:#32325d}) shows up on the POS
   screen too -- e.g. the "No Products to display" placeholder heading. */
body.lockscreen h2,
body.lockscreen h3,
body.lockscreen h4,
body.lockscreen h5,
body.lockscreen h6 {
  color: #241610;
}
/* Cart table header (#pos_table's <thead>) used a cool gray gradient with
   no relation to the rest of the now-warm screen. The #pos_table ID gives
   this enough specificity to win over the .tw-from-gray-50/.tw-to-gray-100
   utility classes already on the element without needing !important. */
body.lockscreen #pos_table thead {
  --tw-gradient-from: #F5EEE0 var(--tw-gradient-from-position);
  --tw-gradient-to: #EAE0CB var(--tw-gradient-to-position);
}
/* Product-tile grid (mobile suggestions / featured products) -- a plain
   .product_box with no accent of its own before this. */
body.lockscreen .product_box {
  border-radius: 12px;
  border: 1px solid rgba(36, 22, 16, 0.08);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.lockscreen .product_box:hover {
  box-shadow: 0 8px 20px -8px rgba(36, 22, 16, 0.25);
  transform: translateY(-2px);
}