/* Rubik, self-hosted, is the Arabic face.
 *
 * It is named after the Latin faces in every stack, never before them: Jost and
 * Cormorant carry no Arabic glyphs, so Arabic falls through to Rubik while Latin
 * never reaches it. Subset to Arabic plus basic Latin — 68 KB rather than 345 —
 * with the init/medi/fina joining features kept, because Arabic without them is
 * a row of unconnected letters.
 *
 * Self-hosted on purpose: a font that fails to load does not announce itself,
 * it just renders in a fallback that looks nearly right. */
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/rubik-arabic-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Lilia — atelier console.
 *
 * Reproduces the Lilia Admin.dc.html canvas, recoloured onto the house magenta.
 * As with the storefront, app.js keeps the design's inline styles verbatim and
 * this sheet carries only what inline styles cannot express. */

html, body { margin: 0; padding: 0; background: #F9F4F7; }
* { box-sizing: border-box; }

a { color: #A94F8C; text-decoration: none; }
a:hover { color: #72325D; }

input, select, textarea, button { font-family: 'Jost', sans-serif; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #A94F8C; }
::placeholder { color: #BEABB6; }

:focus-visible { outline: 2px solid #A94F8C; outline-offset: 2px; }

@keyframes liliaUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- boot / sign-in ----------------------------------------------------- */

.boot {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: #F9F4F7;
}
.boot-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; letter-spacing: 0.3em; color: #D5BACA;
  animation: liliaUp 0.6s ease both;
}

/* --- hover states ------------------------------------------------------- */
/* The canvas expresses these as style-hover attributes. */

.row:hover { background: #FEF9FC !important; }
.card-hover:hover { border-color: #D988BC !important; }
.ghost:hover { border-color: #A94F8C !important; color: #72325D !important; }
.nav-item:hover { background: #FBF2F7 !important; }
.nav-item.on:hover { background: linear-gradient(120deg, #FCE9F5, #FDF4F9) !important; }
.cta { transition: filter 0.15s ease; }
.cta:hover { filter: brightness(1.06); }
button:disabled { opacity: 0.5; cursor: not-allowed !important; }

/* --- toast -------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 300;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 22px; border-radius: 999px;
  background: #20131B; color: #fff;
  font: 300 13.5px/1.5 'Jost', sans-serif; text-align: center;
  box-shadow: 0 18px 44px -18px rgba(32, 19, 27, 0.6);
  animation: liliaUp 0.3s ease both;
}
.toast[data-kind="error"] { background: #8C2733; }
.toast[data-kind="ok"] { background: #5E2A50; }

/* --- layout ------------------------------------------------------------- */

/* The sidebar is fixed-width on desktop and becomes a scrolling strip across
   the top on narrow screens, so the console is usable on a tablet at the
   fitting table rather than desktop-only. */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #E9D4E1 !important;
  }
  .sidebar-nav {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
    padding: 10px 14px !important;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav button { width: auto !important; white-space: nowrap; }
  .sidebar-foot { display: none !important; }
  .console-header { height: auto !important; padding: 14px 20px !important; flex-wrap: wrap !important; }
  .pad { padding-left: 20px !important; padding-right: 20px !important; }
  .split { grid-template-columns: 1fr !important; }
  .split .sticky { position: static !important; }
}

@media (max-width: 620px) {
  .console-header .head-actions { width: 100%; }
  .console-header input { max-width: none !important; }
}

/* --- print -------------------------------------------------------------- */
/* The order sheet goes to the cutting table on paper. */
@media print {
  .sidebar, .console-header, .noprint { display: none !important; }
  .shell { grid-template-columns: 1fr !important; }
  body { background: #fff; }
}

/* --- right-to-left ------------------------------------------------------ */
/* The console mirrors wholesale via dir="rtl". These rules cover the few
   places a physical direction was baked in and cannot flip on its own. */

[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid #E9D4E1; }

/* Arabic sets better a shade larger and with more line room than Jost. */
[dir="rtl"] { font-family: 'Rubik', 'Jost', sans-serif; }
[dir="rtl"] .pad, [dir="rtl"] .sidebar { line-height: 1.65; }

/* Arabic is cursive, and letter-spacing pulls the joins apart: a word set with
   tracking stops being a word and becomes a row of separate letters. The
   design's tracking is a Latin device, so it goes wherever Arabic is set.

   !important is required, not lazy: the tracking arrives as an inline style on
   each element, and nothing weaker can beat that. */
[dir="rtl"] * { letter-spacing: normal !important; word-spacing: normal !important; }

/* The wordmark is Latin on both sides of the console, and the tracking is what
   makes it a wordmark. */
[dir="rtl"] .boot-mark { letter-spacing: 0.3em !important; }

/* Uppercase is the other Latin device Arabic has no use for. Spacing is handled
   above; this is only about the case. */
[dir="rtl"] [style*="text-transform: uppercase"] { text-transform: none !important; }

/* An order number, phone number or price stays left-to-right inside an
   otherwise right-to-left line. */
[dir="rtl"] [style*="ui-monospace"] { unicode-bidi: isolate; }

@media (max-width: 900px) {
  [dir="rtl"] .sidebar { border-left: none; border-bottom: 1px solid #E9D4E1; }
}