/* ============================================================================
   TullunPrint · Gelato theme
   An override layer over Orchid / Bootstrap 5. Toggle via
   config('tullunprint.theme') — ADMIN_THEME=gelato. Set =classic to disable.

   Design language: warm cream ground, white surfaces with soft depth and large
   radii, a monochrome near-black "accent" (primary buttons + active nav read as
   black pills), heavy tight grotesque headings, fully-rounded pill buttons and
   badges. Semantic colour (good/warn/crit/info) is kept separate from the
   accent. Only colour / type / radius / shadow / spacing are touched — never
   layout — so it reskins every page without breaking Orchid's structure.
   ============================================================================ */

:root {
  --tp-bg:        #f6f6f4;
  --tp-surface:   #ffffff;
  --tp-surface-2: #f2f2f0;
  --tp-sidebar:   #ffffff;
  --tp-text:      #18181b;
  --tp-text-2:    #52525b;
  --tp-text-3:    #8e8e93;
  --tp-line:      #ebebe8;
  --tp-line-2:    #dededb;
  /* Accent is monochrome black (white in dark mode). --on-accent = text on it. */
  --tp-accent:      #18181b;
  --tp-accent-2:    #000000;
  --tp-on-accent:   #ffffff;
  --tp-accent-soft: rgba(0,0,0,.05);
  --tp-radius:    16px;
  --tp-radius-sm: 11px;
  --tp-radius-xs: 8px;
  --tp-pill:      999px;
  --tp-sidebar-w: 258px;
  --tp-shadow:    0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --tp-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --tp-shadow-pop:0 10px 34px -12px rgba(0,0,0,.22);
  --tp-good:#1a7f4b; --tp-good-bg:#e7f2ec;
  --tp-warn:#9a6a10; --tp-warn-bg:#f3ecd9;
  --tp-crit:#c03a30; --tp-crit-bg:#f7e6e3;
  --tp-info:#2f4bb3; --tp-info-bg:#e8ebf7;
  /* Printful uses Proxima Nova (paid). Figtree is a narrower free stand-in;
     swap the first family for "proxima-nova" if an Adobe Fonts kit is added. */
  --tp-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base --------------------------------------------------------------- */
body {
  background: var(--tp-bg) !important;
  color: var(--tp-text);
  font-family: var(--tp-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  font-size: 14.5px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  letter-spacing: -0.022em; font-weight: 600; color: var(--tp-text);
}
p, .lead { color: var(--tp-text); }
a { color: var(--tp-text); text-decoration: none; }
a:hover { color: var(--tp-text); text-decoration: underline; }
.text-muted, small, .small, figcaption { color: var(--tp-text-2) !important; }
hr { border-color: var(--tp-line); opacity: 1; }
code, kbd, pre, samp { font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { color: var(--tp-text); background: var(--tp-accent-soft); padding: .12em .4em; border-radius: 6px; }
pre { background: var(--tp-surface-2); border: 1px solid var(--tp-line); border-radius: var(--tp-radius-sm); padding: 14px 16px; }
::selection { background: rgba(0,0,0,.08); }

/* Warm, thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--tp-line-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--tp-line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--tp-text-3); background-clip: content-box; }

/* Focus visibility (accessibility) */
:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* ---- Surfaces: cards / blocks ------------------------------------------ */
.card, .rounded, .bg-white {
  background: var(--tp-surface);
  border: 1px solid var(--tp-line) !important;
  border-radius: var(--tp-radius) !important;
  box-shadow: var(--tp-shadow);
}
.card-header, .card-footer { background: transparent; border-color: var(--tp-line); }
.card-header { font-weight: 600; letter-spacing: -0.02em; padding: 1.05rem 1.35rem; }
.card-body { padding: 1.35rem 1.45rem; }
.list-group-item { background: var(--tp-surface); border-color: var(--tp-line); }

/* ---- Buttons — pill shaped -------------------------------------------- */
.btn {
  border-radius: var(--tp-pill);
  font-weight: 600; letter-spacing: -0.01em;
  padding: .52rem 1.15rem; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-sm { padding: .34rem .85rem; }
.btn-lg { padding: .72rem 1.5rem; }
/* Primary / default = solid black pill with cream text */
.btn-primary, .btn-default { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-on-accent); }
.btn-primary:hover, .btn-default:hover, .btn-primary:focus, .btn-default:focus { background: var(--tp-accent-2); border-color: var(--tp-accent-2); color: var(--tp-on-accent); }
/* Secondary = white/outline pill */
.btn-secondary { background: var(--tp-surface); border-color: var(--tp-line-2); color: var(--tp-text); }
.btn-secondary:hover { background: var(--tp-surface-2); border-color: var(--tp-text-3); color: var(--tp-text); }
.btn-success { background: var(--tp-good); border-color: var(--tp-good); color:#fff; }
.btn-success:hover { filter: brightness(.94); }
.btn-danger  { background: var(--tp-crit); border-color: var(--tp-crit); color:#fff; }
.btn-danger:hover { filter: brightness(.94); }
.btn-warning { background: var(--tp-warn); border-color: var(--tp-warn); color:#fff; }
.btn-warning:hover { filter: brightness(.94); }
.btn-link { color: var(--tp-text); text-decoration: none; box-shadow:none; }
.btn-link:hover { color: var(--tp-text); text-decoration: underline; }
.btn-outline-primary { color: var(--tp-text); border-color: var(--tp-line-2); background: transparent; }
.btn-outline-primary:hover { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-on-accent); }
.btn-outline-secondary { color: var(--tp-text-2); border-color: var(--tp-line-2); }
.btn-outline-secondary:hover { background: var(--tp-surface-2); color: var(--tp-text); border-color: var(--tp-text-3); }
.btn-group > .btn { box-shadow: none; }

/* ---- Forms ------------------------------------------------------------- */
.form-control, .form-select, .input-group-text, textarea, select, .custom-select {
  border-radius: var(--tp-radius-sm) !important;
  border: 1px solid var(--tp-line-2);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control, .form-select, textarea, select { padding: .55rem .85rem; }
.form-control:focus, .form-select:focus, textarea:focus, select:focus, .custom-select:focus {
  border-color: var(--tp-accent);
  background: var(--tp-surface);
  box-shadow: 0 0 0 3px var(--tp-accent-soft);
}
.form-control::placeholder { color: var(--tp-text-3); }
.form-label, label, .col-form-label { font-weight: 600; color: var(--tp-text-2); }
.form-text { color: var(--tp-text-3); }
.input-group-text { background: var(--tp-surface-2); color: var(--tp-text-2); }
.is-invalid, .form-control.is-invalid { border-color: var(--tp-crit) !important; background: var(--tp-crit-bg); }
.invalid-feedback { color: var(--tp-crit); font-weight: 600; }

/* Checkboxes / radios / switches use the accent */
.form-check-input { border-color: var(--tp-line-2); }
.form-check-input:checked { background-color: var(--tp-accent); border-color: var(--tp-accent); }
.form-check-input:focus { border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-soft); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tp-accent); }

/* ---- Tables ------------------------------------------------------------ */
.table { color: var(--tp-text); --bs-table-bg: transparent; }
.table > thead th, .table > thead td {
  border-top: none; border-bottom: 1px solid var(--tp-line-2);
  color: var(--tp-text-3); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em; padding: .8rem .9rem; white-space: nowrap;
  position: sticky; top: 0; z-index: 3; background: var(--tp-surface);
}
.table > tbody td, .table > tbody th {
  border-color: var(--tp-line); padding: .85rem .9rem; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--tp-surface-2); }
.table-hover > tbody > tr:hover > * { background: var(--tp-surface-2); }
.table-responsive { border-radius: var(--tp-radius); overflow-x: auto; width: 100%; }

/* A wide table must scroll inside its own box, not stretch the whole page. */
.container-fluid > .row > .col.min-vh-100 { min-width: 0 !important; max-width: 100%; }
.d-flex.flex-column-fluid,
.container-md.pff-container-xl { min-width: 0 !important; max-width: 100%; }

/* ---- Badges / pills ---------------------------------------------------- */
.badge { border-radius: var(--tp-pill); font-weight: 600; padding: .42em .8em; letter-spacing: 0; font-size: .7rem; }
.badge.bg-primary { background: var(--tp-accent) !important; color: var(--tp-on-accent) !important; }
.badge.bg-secondary { background: var(--tp-line) !important; color: var(--tp-text-2) !important; }
.badge.bg-success { background: var(--tp-good-bg) !important; color: var(--tp-good) !important; }
.badge.bg-warning { background: var(--tp-warn-bg) !important; color: var(--tp-warn) !important; }
.badge.bg-danger  { background: var(--tp-crit-bg) !important; color: var(--tp-crit) !important; }
.badge.bg-info    { background: var(--tp-info-bg) !important; color: var(--tp-info) !important; }

/* ---- Alerts ------------------------------------------------------------ */
.alert { border: 1px solid transparent; border-radius: var(--tp-radius-sm); font-size: .95rem; }
.alert-success { background: var(--tp-good-bg); border-color: transparent; color: var(--tp-good); }
.alert-danger  { background: var(--tp-crit-bg); border-color: transparent; color: var(--tp-crit); }
.alert-warning { background: var(--tp-warn-bg); border-color: transparent; color: var(--tp-warn); }
.alert-info    { background: var(--tp-info-bg); border-color: transparent; color: var(--tp-info); }

/* ---- Sidebar & navigation --------------------------------------------- */
/* Orchid renders the sidebar as <div class="aside … bg-dark">, so Bootstrap's
   .bg-dark forces it dark and its nav text white. Scope-override the whole
   sidebar to the cream ground; !important is needed to beat .bg-dark + the
   .bg-dark .nav descendant rules and the hard-coded .text-white on the name. */
.aside.bg-dark, .aside { background-color: var(--tp-sidebar) !important; color: var(--tp-text) !important; }
/* Fixed sidebar width (Orchid ships a conflicting min/max) so the collapse
   handle can sit exactly on the right edge. Desktop only — phones stack it. */
@media (min-width: 768px) {
  .aside.bg-dark, .aside {
    flex: 0 0 var(--tp-sidebar-w) !important; width: var(--tp-sidebar-w) !important;
    min-width: var(--tp-sidebar-w) !important; max-width: var(--tp-sidebar-w) !important;
  }
}
.aside a, .aside .nav-link, .aside .text-white, .aside .header-brand { color: var(--tp-text-2) !important; }
.aside .text-muted, .aside small { color: var(--tp-text-3) !important; }
.aside .header-brand { font-weight: 700; letter-spacing: -.03em; }
.aside .nav-link { border-radius: var(--tp-radius-sm); font-weight: 500; background-color: transparent !important; transition: background-color .12s ease, color .12s ease; }
.aside .nav-link:hover, .aside .nav-item:hover > .nav-link { color: var(--tp-text) !important; background: rgba(0,0,0,.045) !important; }
/* Active = a soft grey highlight with bold text, not an aggressive black bar. */
.aside .nav-item.active > .nav-link,
.aside .nav-link[aria-expanded="true"],
.bg-dark .nav > li.active > a,
.bg-dark .nav .open > a {
  background-color: var(--tp-surface-2) !important; color: var(--tp-text) !important;
  font-weight: 500; border-radius: var(--tp-radius-sm);
}
.aside .nav-item.active > .nav-link svg,
.aside .nav-item.active > .nav-link i,
.aside .nav-item.active > .nav-link .text-white,
.aside .nav-link[aria-expanded="true"] svg,
.aside .nav-link[aria-expanded="true"] i,
.aside .nav-link[aria-expanded="true"] .text-white { color: var(--tp-text) !important; opacity: 1; }
.aside .nav-link svg, .aside .nav-link i { opacity: .8; }
.aside .divider { border-top: 1px solid var(--tp-line) !important; opacity: 1; }
/* Count badges: quiet outlined chips with a clearly-readable dark number. */
.aside .badge {
  background: transparent !important; color: var(--tp-text) !important;
  font-weight: 600; border: 1px solid var(--tp-line-2);
}

/* Expandable parent items (Orchid sets data-bs-toggle="collapse") get a chevron
   that points down when closed and flips up when the submenu is open. */
.aside .nav-link[data-bs-toggle="collapse"] { display: flex; align-items: center; }
.aside .nav-link[data-bs-toggle="collapse"]::after {
  content: ""; margin-left: auto; margin-right: 3px; flex: none;
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .4; transition: transform .18s ease, opacity .15s ease;
}
.aside .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px,-2px); opacity: .65;
}

/* Generic nav-links elsewhere (tabs, top nav) */
.nav-link { border-radius: var(--tp-radius-sm); font-weight: 500; }
.navbar, .topbar { background: transparent; box-shadow: none; }

/* ---- Collapsible sidebar (desktop) ------------------------------------ */
/* A floating toggle hides the .aside; the content .col then flex-grows to
   fill. State is persisted in localStorage and restored before paint. */
#pff-nav-toggle {
  position: fixed; top: 50%; transform: translateY(-50%);
  left: calc(var(--tp-sidebar-w) - 14px); z-index: 1050;
  width: 28px; height: 28px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--tp-surface); border: 1px solid var(--tp-line-2); color: var(--tp-text-2);
  box-shadow: var(--tp-shadow-sm);
  transition: left .2s ease, background .15s ease, color .15s ease;
}
#pff-nav-toggle:hover { background: var(--tp-surface-2); color: var(--tp-text); }
#pff-nav-toggle svg { width: 15px; height: 15px; transition: transform .2s ease; }
@media (min-width: 768px) {
  html.pff-nav-collapsed .aside { display: none !important; }
  html.pff-nav-collapsed #pff-nav-toggle { left: 6px; }          /* handle stays reachable */
  html.pff-nav-collapsed #pff-nav-toggle svg { transform: rotate(180deg); } /* chevron flips to "open" */
}
/* On phones Orchid already has its own hamburger; leave that alone. */
@media (max-width: 767.98px) { #pff-nav-toggle { display: none; } }

/* ---- Tabs / breadcrumbs / pagination ---------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--tp-line); }
.nav-tabs .nav-link { border: none; color: var(--tp-text-2); border-radius: 0; padding: .6rem .9rem; }
.nav-tabs .nav-link.active { color: var(--tp-text); background: transparent; box-shadow: inset 0 -2px 0 var(--tp-accent); }
.breadcrumb { background: transparent; padding: 0; font-size: .9rem; }
.breadcrumb-item, .breadcrumb-item a { color: var(--tp-text-2); }
.breadcrumb-item.active { color: var(--tp-text); }
.page-link { color: var(--tp-text); border-color: var(--tp-line); border-radius: var(--tp-radius-xs) !important; margin: 0 2px; }
.page-item.active .page-link { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-on-accent); }
.page-item.disabled .page-link { color: var(--tp-text-3); }

/* ---- Dropdowns / menus ------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--tp-line); border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-pop); padding: .35rem; background: var(--tp-surface);
}
.dropdown-item { border-radius: var(--tp-radius-xs); padding: .5rem .75rem; color: var(--tp-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--tp-accent-soft); color: var(--tp-text); }
.dropdown-item.active { background: var(--tp-accent); color: var(--tp-on-accent); }
.dropdown-divider { border-color: var(--tp-line); }

/* ---- Modals / offcanvas / toasts -------------------------------------- */
.modal-content, .offcanvas { border: none; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(24,20,14,.55); background: var(--tp-surface); }
.modal-header, .modal-footer { border-color: var(--tp-line); }
.modal-backdrop.show { opacity: .28; }
.toast { border-radius: var(--tp-radius); border: 1px solid var(--tp-line); box-shadow: var(--tp-shadow); background: var(--tp-surface); }

/* ---- Progress / spinners ---------------------------------------------- */
.progress { background: var(--tp-line); border-radius: 99px; height: .5rem; }
.progress-bar { background: var(--tp-accent); }

/* ---- Orchid metrics cards --------------------------------------------- */
.metric, .metrics .card { border-radius: var(--tp-radius) !important; }
.metric .h2, .metric h2 { font-weight: 700; letter-spacing: -0.04em; }

/* ---- select2 (variant pickers) ---------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
  border-radius: var(--tp-radius-sm) !important; border-color: var(--tp-line-2) !important; background: var(--tp-surface);
}
.select2-container--default .select2-selection--single { height: 40px; padding: 4px 6px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--tp-accent) !important; box-shadow: 0 0 0 3px var(--tp-accent-soft);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tp-accent); color: var(--tp-on-accent); }
.select2-search__field { border-radius: var(--tp-radius-xs) !important; border-color: var(--tp-line-2) !important; }

/* ---- Auth / login page ------------------------------------------------- */
.auth, .login, body.platform-auth { background: var(--tp-bg); }

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ======================================================================= */
/*  Dark mode — warm charcoal. Respects OS preference + Bootstrap 5.3 attr  */
/* ======================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --tp-bg:#0e0e10; --tp-surface:#1a1a1d; --tp-surface-2:#232327; --tp-sidebar:#151517;
    --tp-text:#f4f4f5; --tp-text-2:#b3b3ba; --tp-text-3:#88888f;
    --tp-line:#2a2a2e; --tp-line-2:#3a3a40;
    --tp-accent:#f4f4f5; --tp-accent-2:#ffffff; --tp-on-accent:#141416; --tp-accent-soft:rgba(255,255,255,.08);
    --tp-shadow:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
    --tp-shadow-sm:0 1px 2px rgba(0,0,0,.5); --tp-shadow-pop:0 12px 40px -12px rgba(0,0,0,.8);
    --tp-good:#56c98a; --tp-good-bg:#132a1e; --tp-warn:#d8a24b; --tp-warn-bg:#2c2412;
    --tp-crit:#e57a70; --tp-crit-bg:#301a17; --tp-info:#8aa0e8; --tp-info-bg:#1a1f38;
  }
  :root:not([data-bs-theme="light"]) .nav-link:hover { background: rgba(255,255,255,.06); }
}
[data-bs-theme="dark"] {
  --tp-bg:#0e0e10; --tp-surface:#1a1a1d; --tp-surface-2:#232327; --tp-sidebar:#151517;
  --tp-text:#f4f4f5; --tp-text-2:#b3b3ba; --tp-text-3:#88888f;
  --tp-line:#2a2a2e; --tp-line-2:#3a3a40;
  --tp-accent:#f4f4f5; --tp-accent-2:#ffffff; --tp-on-accent:#141416; --tp-accent-soft:rgba(255,255,255,.08);
  --tp-shadow:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
  --tp-shadow-sm:0 1px 2px rgba(0,0,0,.5); --tp-shadow-pop:0 12px 40px -12px rgba(0,0,0,.8);
  --tp-good:#56c98a; --tp-good-bg:#132a1e; --tp-warn:#d8a24b; --tp-warn-bg:#2c2412;
  --tp-crit:#e57a70; --tp-crit-bg:#301a17; --tp-info:#8aa0e8; --tp-info-bg:#1a1f38;
}
[data-bs-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.06); }