/* ==========================================================================
   Esy Prints admin — bridge between the legacy stylesheet and the new
   Figma design system.

   Load order is: dashboard.css  ->  admin-ui/assets/css/app.css  ->  this file.

   WHY THIS EXISTS
   The admin has ~58 Blade pages written against dashboard.css. Rewriting all
   of them at once would be a huge, risky change, and dashboard.css turns out
   to be token-driven (193 var() usages over 36 custom properties). So instead
   of touching those pages, this file re-points those 36 tokens at the new
   palette — every legacy page picks up the new colours, radii and type with no
   markup change at all. Pages then get ported to the new components one at a
   time, and nothing is ever left looking broken in between.

   Only SIX class names collide between the two stylesheets:
     btn, card, sidebar, sidebar-user, tab, tabs
   `.card` is allowed to take the new definition — that is the intended change.
   The other five are restored to their legacy behaviour in the collision guard
   at the bottom of this file, because the pages that exist today depend on
   them. A page opts in to the new versions by wrapping itself in `.ui-new`.
   ========================================================================== */

:root {
  /* --- Brand -------------------------------------------------------------
     The design's primary surface is navy; the old primary was a mid blue.
     Interactive accents stay blue so buttons and links still read as
     actionable against the navy chrome. */
  --brand-primary: #0f2743;
  --brand-dark: #0a1c30;
  --brand-light: #e8f4ff;
  --brand-accent: #e26d12;

  /* --- Neutrals ----------------------------------------------------------
     Mapped onto the design's page/border/ink ramp rather than a generic grey
     scale, so borders and backgrounds match the mockups exactly. */
  --white: #ffffff;
  --off-white: #f7f8fa;
  --grey-50: #f7f8fa;
  --grey-100: #f4f5f6;
  --grey-200: #e6e6e6;
  --grey-300: #e0e4ea;
  --grey-400: #9aa1ab;
  --grey-500: #636674;
  --grey-600: #545454;
  --grey-700: #4d5762;
  --grey-800: #26292c;
  --grey-900: #0a0a0a;

  /* --- Status ------------------------------------------------------------
     The design ships a full status palette; these are its exact values. */
  --success: #099630;
  --success-bg: #dfffe8;
  --error: #ba1942;
  --error-bg: #fff0f4;
  --warning: #e26d12;
  --warning-bg: #fff6eb;
  --info: #095d9e;
  --info-bg: #e8f4ff;
  --star: #c47215;

  /* --- Shell -------------------------------------------------------------
     The new sidebar is 281px and the topbar 76px. Legacy rules that offset
     content by these values stay correct because they read the tokens. */
  --sidebar-bg: #0f2743;
  --sidebar-width: 281px;
  --sidebar-hover: rgba(164, 215, 255, 0.10);
  --sidebar-active: rgba(164, 215, 255, 0.16);
  --header-height: 76px;

  /* --- Type and geometry -------------------------------------------------
     Poppins is the design's typeface; app.css already imports it. Card radius
     is 15px in the design and field radius 8px, so the md/lg tokens are
     re-pointed rather than every rule being edited. */
  --font-primary: "Poppins", "Segoe UI", -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 15px;
  --radius-xl: 18px;
  --radius-full: 100px;

  --shadow-sm: 0 1px 2px rgba(15, 39, 67, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 39, 67, 0.08);
  --shadow-lg: 0 8px 30px rgba(15, 39, 67, 0.10);
}

/* --------------------------------------------------------------------------
   Legacy component nudges

   dashboard.css hard-codes 36 colours that no token can reach. These are the
   ones that read as "old palette" once everything around them has moved.
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-primary);
  background: var(--page, #f7f8fa);
}

/* Legacy page header -> the design's .page-head rhythm. */
.page-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #0a0a0a);
}
.page-header p {
  color: var(--muted, #545454);
  font-size: 13px;
}

/* Legacy tables -> the design's zebra + navy header treatment. */
.data-table thead th {
  background: var(--navy, #0f2743);
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  border: none;
}
.data-table tbody tr:nth-child(even) {
  background: var(--row-alt, #eef6ff);
}
.data-table tbody td {
  border-bottom: 1px solid var(--border-soft, #eef0f3);
  font-size: 13px;
}
.table-wrapper {
  border-radius: var(--r-card, 15px);
  overflow: hidden;
  border: 1px solid var(--border, #e6e6e6);
  background: #fff;
}

/* Legacy fields -> the design's filled input. */
.form-input,
.filter-bar .search-input,
select.form-input {
  background: var(--field-bg, #f5f6f9);
  border: 1px solid var(--field-border, #e0e4ea);
  border-radius: var(--r-field, 8px);
  font-family: inherit;
}
.form-input:focus,
.filter-bar .search-input:focus {
  border-color: var(--navy, #0f2743);
  background: #fff;
}

/* Legacy badges -> the design's pill. */
.badge {
  border-radius: var(--r-pill, 100px);
  font-weight: 500;
  font-size: 11px;
  padding: 4px 12px;
}

/* Legacy stat cards -> the design's tile. */
.stat-card {
  border-radius: var(--r-card, 15px);
  border: 1px solid var(--border, #e6e6e6);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(15, 39, 67, 0.04));
}

/* --------------------------------------------------------------------------
   The shell

   The layout keeps its existing markup — .dashboard-wrapper / .sidebar /
   .sidebar-link / .top-bar / .page-content — and is restyled here instead of
   being rebuilt. That matters: the sidebar is 26 role-gated nav items, and
   re-typing them to match a 25-item mockup is exactly how a nav entry goes
   missing. Not one line of that markup changes; only how it looks.

   The navy, the 281px width and the 76px topbar already arrive through the
   token re-map above. What is added here is the design's distinctive shell
   treatment: pill nav items with the sky active state, and the wordmark.
   -------------------------------------------------------------------------- */

.sidebar-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(229, 229, 229, 0.1);
}

/* The design sets the wordmark in Purple Purse with a sky-to-white gradient.
   The markup is two spans (.esy + .prints), so the gradient is applied to the
   whole logo and the per-span colours are cleared. */
.sidebar-logo {
  font-family: "Purple Purse", "Poppins", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  background: linear-gradient(74.46deg, #66bcff 19.6%, #ffffff 95.06%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sidebar-logo .esy,
.sidebar-logo .prints {
  color: transparent;
}

.sidebar-badge {
  background: rgba(164, 215, 255, 0.16) !important;
  color: #a4d7ff !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sidebar-nav,
.sidebar-scroll {
  padding: 0 14px 12px;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #dcebf6;
  padding: 14px 14px 6px;
}

.sidebar-link {
  height: 39px;
  padding: 0 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.sidebar-link:hover {
  background: rgba(164, 215, 255, 0.10);
}
/* Active item: 10% sky tint pill with a sky label, straight from the design. */
.sidebar-link.active {
  background: rgba(164, 215, 255, 0.16);
  color: #a4d7ff;
  font-weight: 500;
}
.sidebar-link.active svg {
  color: #a4d7ff;
}

.sidebar-footer {
  border-top: 1px solid rgba(229, 229, 229, 0.1);
}

/* Topbar: the design's search pill and round icon buttons. */
.top-bar {
  padding: 0 24px;
  border-bottom: 1px solid var(--border, #e6e6e6);
}
.top-bar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #0a0a0a);
}
.top-bar-search input {
  background: var(--search-bg, #f4f5f6);
  border: none;
  border-radius: 100px;
  height: 40px;
  font-family: inherit;
  font-size: 13px;
}
.top-bar-icon {
  border-radius: 100px;
}
.top-bar-avatar {
  background: var(--navy, #0f2743);
  border-radius: 100px;
  font-weight: 600;
}

.page-content {
  padding: 24px;
}

/* ==========================================================================
   Collision guard

   app.css brings 154 components, and exactly SIX of their names already exist
   in dashboard.css: btn, card, sidebar, sidebar-user, tab, tabs. Because
   app.css loads second it would win — silently. Three of those are actively
   destructive to the pages that exist today:

     .btn     app.css sets background:navy, which beats .btn-outline /
              .btn-ghost / .btn-danger from dashboard.css (same specificity,
              declared earlier) — every button variant turns navy.
     .sidebar app.css expects a CSS-grid shell (grid-row, position:sticky).
              The real shell is a flex wrapper with a fixed sidebar; applying
              the grid rules tears the layout apart.
     .tab(s)  app.css uses an underline-on-::after treatment; the real tabs
              use border-bottom on .tab.active, so both would show at once.

   `.card` is left to the new definition on purpose — a 15px radius card with
   the design's border is exactly the intended change, and the legacy markup
   (.card > .card-header + .card-body) nests inside it unharmed.

   The other 148 component classes do not collide and are available to any page
   immediately. A page that wants the new .btn / .tab / .sidebar-user opts in by
   wrapping its markup in .ui-new (below).
   ========================================================================== */

/* --- Restore the legacy shell ------------------------------------------- */
.dashboard-wrapper > .sidebar {
  grid-row: auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  align-self: auto;
  width: var(--sidebar-width);
  height: auto;
  z-index: 100;
}

.sidebar-footer .sidebar-user {
  flex: initial;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
}

/* --- Restore the legacy button ------------------------------------------
   The base reset has to neutralise app.css's `background: navy; color: #fff`,
   otherwise every .btn-outline and .btn-ghost turns into a navy block. But
   that reset then out-ranks the variant rules in dashboard.css, which were
   declared EARLIER at the same specificity — the first pass left
   .btn-primary navy-on-black and unreadable. So each colour-bearing variant is
   re-asserted here, after the reset, in the new palette. */
.btn {
  height: auto;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-primary { background: var(--navy, #0f2743); color: #fff; border-color: var(--navy, #0f2743); }
.btn-primary:hover { background: var(--navy-soft, #1b3a5c); border-color: var(--navy-soft, #1b3a5c); }
.btn-dark { background: var(--ink, #0a0a0a); color: #fff; border-color: var(--ink, #0a0a0a); }
.btn-accent { background: var(--orange, #e26d12); color: #fff; border-color: var(--orange, #e26d12); }
.btn-success { background: var(--green, #099630); color: #fff; border-color: var(--green, #099630); }
.btn-danger { background: var(--red, #ba1942); color: #fff; border-color: var(--red, #ba1942); }
.btn-outline { background: #fff; color: var(--muted-3, #4d5762); border-color: var(--field-border, #e0e4ea); }
.btn-outline:hover { border-color: var(--navy, #0f2743); color: var(--navy, #0f2743); }
.btn-ghost { background: none; color: var(--muted, #545454); border: none; padding: 8px 12px; }
.btn-ghost:hover { background: var(--grey-100); color: var(--ink, #0a0a0a); }

/* --- Restore the legacy tabs -------------------------------------------- */
.tabs {
  gap: 0;
  border-bottom: 2px solid var(--grey-200);
  margin-bottom: 24px;
}
.tab {
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--grey-500);
  font-weight: 600;
}
.tab::after { display: none; }
.ui-new .tab::after { display: block; }

/* --------------------------------------------------------------------------
   Opting in to the new components

   A ported page wraps its content in .ui-new and gets the design's own button,
   tabs and user block. Everything else — .page-head, .table-wrap, table.data,
   .field, .pill, .act, .stat, .tile-*, .chip and the rest — needs no opt-in,
   because those names are new.
   -------------------------------------------------------------------------- */
.ui-new .btn {
  height: 39px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-field);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

/* ==========================================================================
   Classes that were used but never defined

   Found by extracting every class name out of the 64 admin Blade files and
   diffing against everything dashboard.css and the page-local <style> blocks
   actually define. These four are written in the markup, reach the browser,
   and match no rule anywhere — so today they render as unstyled defaults.
   Verified by grepping the whole backend: no project stylesheet defines them.

   They are styled here rather than in dashboard.css because that file is
   shared with the Service Provider portal, and these are admin-only screens.
   ========================================================================== */

/* reports/sales.blade.php (3x) and reports/service-providers.blade.php (5x).
   The KPI numbers were rendering at body size with no hierarchy at all. */
.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-2, #636674);
  margin-bottom: 4px;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #0a0a0a);
}

/* service-providers/documents.blade.php:72 — a rejected document showed as
   plain text where every sibling status is a coloured pill. The rest of the
   file uses the badge-error / badge-success vocabulary; this one name was
   never added. */
.badge-red {
  background: var(--red-bg, #fff0f4);
  color: var(--red, #ba1942);
}

/* orders/index.blade.php:200 — the "View flagged" action for orders auto-
   routing could not place. It read as an unstyled link next to real buttons,
   which badly under-sells an action that needs attention. */
.btn-warning {
  background: var(--orange, #e26d12);
  color: #fff;
  border-color: var(--orange, #e26d12);
}
.btn-warning:hover {
  background: var(--amber, #c47215);
  border-color: var(--amber, #c47215);
}

/* --------------------------------------------------------------------------
   Narrower opt-ins

   `.ui-new` switches BOTH .btn and .tab to the design versions, which is too
   blunt for a page that wants the design's tab strip but still has
   .btn-outline / .btn-ghost / .btn-warning buttons on it — those would all
   turn navy. `.tabs--ui` adopts just the tab treatment.
   -------------------------------------------------------------------------- */
.tabs.tabs--ui {
  gap: 28px;
  border-bottom: 1px solid var(--border, #e6e6e6);
  margin-bottom: 17px;
}
.tabs--ui .tab {
  position: relative;
  padding: 0 0 9px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 0;
  background: none;
  color: var(--muted-3, #4d5762);
  font-size: 13px;
  font-weight: 500;
}
.tabs--ui .tab:hover { color: var(--navy, #0f2743); }
.tabs--ui .tab.active { color: var(--navy, #0f2743); }
.tabs--ui .tab.active::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy, #0f2743);
}

/* The design shows a count beside a tab label in orange. */
.tabs--ui .tab em,
.tabs--ui .tab .tab-count {
  font-style: normal;
  font-weight: 600;
  color: var(--orange, #e26d12);
  font-size: 12px;
  background: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Extending the design's status vocabulary

   The Figma screens only ever show six order states (confirmed, assigned,
   quality, delivery, cancelled, visible) because the mockup rows were hand-
   picked. The real system has eleven. Rather than squeeze two real states into
   a wrong colour, the two genuinely missing ones are added here using the
   design's OWN palette tokens, so they sit in the same family.
   -------------------------------------------------------------------------- */
.status--pending { color: var(--amber, #c47215); }
.status--production { color: var(--violet, #7f49d3); }
.status--refunded { color: var(--rose, #ca4b6b); }
.status--delivered { color: var(--green, #099630); font-weight: 500; }

/* ==========================================================================
   Components the Figma kit does not ship

   The 16 mockups never show an alert, a modal, a form error, a subtitle or an
   avatar fallback — but the real admin needs all of them on nearly every
   screen. They are built here from the design's own tokens so they read as
   part of the same system rather than as leftovers from the old one.
   ========================================================================== */

/* .page-head has no subtitle slot; several screens carry one. */
.page-head .sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-2, #636674);
  margin-top: 2px;
}

/* Alerts — flash messages and inline warnings. */
.alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-card, 15px);
  font-size: 13px;
}
.alert .spacer { margin-left: auto; }
.alert--warn { background: var(--orange-bg, #fff6eb); border-color: var(--orange, #e26d12); color: var(--amber, #c47215); }
.alert--err  { background: var(--red-bg, #fff0f4);    border-color: var(--red, #ba1942);    color: var(--red, #ba1942); }
.alert--ok   { background: var(--green-bg, #dfffe8);  border-color: var(--green, #099630);  color: var(--green, #099630); }
.alert--info { background: var(--blue-bg, #e8f4ff);   border-color: var(--blue, #095d9e);   color: var(--blue, #095d9e); }

/* The mockups show photo avatars in the customer column. Real customers have
   no photo, so .cell-user falls back to initials on the brand navy. */
.cell-user .avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--navy, #0f2743);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* A smaller inline pill for row tags (reprint, notification failed). */
.pill--tag { font-size: 11px; padding: 2px 9px; }

/* --------------------------------------------------------------------------
   Pill and button variants the kit never needed

   The mockups only ever show happy-path rows, so the kit has no neutral pill
   (Suspended, Draft, voided all have nowhere to live) and no success/danger
   button (Approve / Reject on the SP screens). Added in the design's palette.
   -------------------------------------------------------------------------- */
.pill--muted {
  background: var(--search-bg, #f4f5f6);
  color: var(--muted-2, #636674);
}
.pill--amber { background: var(--orange-bg, #fff6eb); color: var(--amber, #c47215); }

.status--draft { color: var(--muted-2, #636674); }
.status--suspended { color: var(--red, #ba1942); }
.status--voided { color: var(--muted-2, #636674); }

/* Approve / Reject. The kit's .btn is navy-only; these keep the same
   geometry so a row of mixed actions still lines up. */
.ui-new .btn--success { background: var(--green, #099630); border-color: var(--green, #099630); color: #fff; }
.ui-new .btn--danger  { background: var(--red, #ba1942);   border-color: var(--red, #ba1942);   color: #fff; }

/* ===================== 2026-10 admin refresh (esyadmin designs) ===================== */
/* Sidebar wordmark: yellow "esyprints" cut from the brand sprite */
.sidebar-logo { display: flex; align-items: center; gap: 6px; }
.adm-logo { position: relative; overflow: hidden; flex: none; display: block; }
.adm-logo img { position: absolute; max-width: none; }
.adm-logo--a { width: 66px; height: 20px; }
.adm-logo--a img { width: 107.62%; height: 350.28%; left: 0; top: -89.11%; }
.adm-logo--b { width: 118px; height: 21px; }
.adm-logo--b img { width: 119.09%; height: 679.77%; left: -9.91%; top: -402.16%; }
.sidebar-header .sidebar-badge { display: none; }
/* Header: settings + user name/email (design header) */
.top-bar-right { gap: 15px; }
.top-bar-icon { display: inline-grid; place-items: center; color: #0f2743; }
a.top-bar-icon svg { width: 22px; height: 22px; }
.top-bar-user { display: flex; align-items: center; gap: 12px; margin-left: 4px; }
.top-bar-user-text { display: flex; flex-direction: column; line-height: 1.25; }
.top-bar-user-name { font-size: 14px; font-weight: 500; color: #1c1c21; }
.top-bar-user-mail { font-size: 13px; font-weight: 300; color: #1c1c21; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .top-bar-user-text { display: none; } }
/* Filled white nav icons from the design */
.sidebar-link .nav-ic { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* A wide table must scroll inside its card, never widen the whole page. */
.main-content { min-width: 0; }
.page-content { min-width: 0; max-width: 100%; }
.top-bar-search { flex: 0 1 320px; min-width: 160px; }
html, body { overflow-x: clip; }

/* ===== Design-wide navy section headers (esyadmin) ===== */
.page-content .card > .card-header { background: #0f2743; border-bottom: 0; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.page-content .card > .card-header h3, .page-content .card > .card-header h2, .page-content .card > .card-header .card-title { color: #fff !important; font-weight: 500; font-size: 15px; }
.page-content .card > .card-header > p, .page-content .card > .card-header .sub, .page-content .card > .card-header small { color: rgba(255,255,255,.75) !important; }
.page-content .card > .card-header .btn-ghost, .page-content .card > .card-header .btn-outline { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: transparent !important; border-radius: 100px; }
.page-content .card > .card-header .tip-q { color: #fff; border-color: rgba(255,255,255,.5); }
.page-content .card { border-radius: 15px; overflow: hidden; }