/* =====================================================================
   MAK Overseas — liquid glass layer (1.8.0)

   Loaded after portal.css (and admin.css). It changes how things look and
   nothing about how they work: every rule here restyles a class that
   portal.css already defines.

   Three guards keep it safe:
   - Everything sits inside @media screen, so printed sheets are exactly
     what they were: plain white, with the serial stamp.
   - Browsers without backdrop-filter never see the translucent tokens;
     translucent panels without blur would put text over a busy backdrop.
   - "Reduce transparency" (macOS, iOS, Windows) gets solid panels.
   ===================================================================== */

@media screen {
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

:root{
  /* The scene behind the glass: flax linen, Mediterranean light, a touch of
     the MAK red. Glass only reads as glass when there is colour behind it. */
  --ground-1:#DCEEF8; --ground-2:#F3EADA; --ground-3:#CFE3EE;
  --blob-a:rgba(0,174,239,.42); --blob-b:rgba(243,234,218,.95); --blob-c:rgba(227,31,37,.16);

  /* The material. --glass for panels, --glass-strong where text is dense
     (forms, tables), --glass-edge for the lit rim. */
  --glass:rgba(255,255,255,.52); --glass-strong:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.88); --glass-rim:rgba(10,27,41,.07);
  --sheen:rgba(255,255,255,.8);
  --blur:blur(22px) saturate(175%);

  /* Places that must stay opaque whatever the theme: the inside of the stage
     icons and the tick dots, which paint over the line behind them. */
  --card-solid:#FFFFFF;

  --card:var(--glass);
  --surface:rgba(255,255,255,.34);
  --veil:rgba(255,255,255,.56);
  --bg:transparent;
  --line:rgba(10,27,41,.09); --line-2:rgba(10,27,41,.14);
  --shadow-sm:0 1px 1px rgba(10,27,41,.04), 0 8px 24px -14px rgba(10,27,41,.35);
  --shadow:0 2px 6px rgba(10,27,41,.06), 0 22px 44px -18px rgba(10,27,41,.38);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground-1:#06121C; --ground-2:#0B2233; --ground-3:#081827;
    --blob-a:rgba(0,174,239,.30); --blob-b:rgba(18,49,74,.85); --blob-c:rgba(227,31,37,.20);
    --glass:rgba(18,36,52,.52); --glass-strong:rgba(20,40,58,.74);
    --glass-edge:rgba(255,255,255,.16); --glass-rim:rgba(0,0,0,.4);
    --sheen:rgba(255,255,255,.14);
    --card-solid:#101F2A;
    --surface:rgba(255,255,255,.05); --veil:rgba(16,31,42,.58);
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
    --shadow-sm:0 1px 1px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.7);
    --shadow:0 2px 6px rgba(0,0,0,.35), 0 22px 44px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground-1:#06121C; --ground-2:#0B2233; --ground-3:#081827;
  --blob-a:rgba(0,174,239,.30); --blob-b:rgba(18,49,74,.85); --blob-c:rgba(227,31,37,.20);
  --glass:rgba(18,36,52,.52); --glass-strong:rgba(20,40,58,.74);
  --glass-edge:rgba(255,255,255,.16); --glass-rim:rgba(0,0,0,.4);
  --sheen:rgba(255,255,255,.14);
  --card-solid:#101F2A;
  --surface:rgba(255,255,255,.05); --veil:rgba(16,31,42,.58);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --shadow-sm:0 1px 1px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.7);
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 22px 44px -18px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------- scene */
html{background:linear-gradient(160deg,var(--ground-1),var(--ground-2) 55%,var(--ground-3)) fixed;
     min-height:100%}
body{background:transparent}
body::before{
  content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, var(--blob-a), transparent 70%),
    radial-gradient(34vmax 34vmax at 92% 34%, var(--blob-b), transparent 70%),
    radial-gradient(26vmax 26vmax at 46% 100%, var(--blob-c), transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
  body::before{animation:mak-drift 26s ease-in-out infinite alternate}
  @keyframes mak-drift{to{transform:translate(3vmax,2vmax) scale(1.05)}}
}

/* ------------------------------------------------------------- material
   One recipe, applied by role. The sheen is a gradient border-image-free
   highlight so it follows each element's own radius. */
.card, .order-card, .order-row, .stage, .stat, .ed-stage, .pager,
.notif, .att, .savebar, .tabs, .lang-switch, .viewswitch, .seg, .auth-box{
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-color:var(--glass-edge);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--sheen), inset 0 -1px 0 var(--glass-rim);
}
.card, .order-card, .order-row, .stage, .stat, .ed-stage, .notif, .att{background:var(--glass)}

/* Dense text reads best on the stronger glass. */
.auth-box, .savebar, table.tbl-rows{background:var(--glass-strong)}

.order-card:hover, .order-row:hover{
  border-color:var(--glass-edge);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen), inset 0 -1px 0 var(--glass-rim);
}

/* ------------------------------------------------------------- pager
   portal.css draws the pager as a bare row, so it has no edge of its own to
   carry the glass. Give it the rounded bar the mockup showed. */
.pager{background:var(--glass); border:1px solid var(--glass-edge);
  border-radius:22px; padding:8px 8px 8px 18px}
.pager-per select{border-radius:100px; padding:5px 12px}
@media (max-width:560px){.pager{padding:10px 12px}}

/* ------------------------------------------------------------- top bar
   Floats as a rounded pane instead of spanning the window edge to edge. */
.topbar{
  top:10px; margin:10px clamp(10px,2vw,22px) 0;
  border:1px solid var(--glass-edge); border-radius:22px;
  background:var(--veil);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--sheen), inset 0 -1px 0 var(--glass-rim);
}
.topbar-in{padding-inline:clamp(12px,2vw,20px)}
.tb-nav button:hover{background:var(--glass-strong)}

/* ------------------------------------------------------------- controls */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px -10px rgba(0,121,168,.9)}
.btn:not(.btn-soft):not(.btn-ghost):not(.btn-danger){
  background:linear-gradient(180deg,#2BC3F6,var(--brand-700));
}
.btn:not(.btn-soft):not(.btn-ghost):not(.btn-danger):hover:not(:disabled){
  background:linear-gradient(180deg,#46CDF8,var(--brand-600));
}
.btn-soft{background:var(--glass-strong); border-color:var(--glass-edge);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--sheen)}
.btn-soft:hover:not(:disabled){background:var(--glass-strong)}
.btn-ghost{box-shadow:none; border-color:var(--glass-edge); background:var(--surface)}
.btn-danger{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -10px rgba(227,31,37,.9)}

.input, input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea{
  background:var(--glass-strong); border-color:var(--glass-edge);
  box-shadow:inset 0 1px 2px var(--glass-rim);
}

.viewswitch button[aria-pressed="true"], .seg button[aria-pressed="true"]{
  background:var(--glass-strong); box-shadow:var(--shadow-sm), inset 0 1px 0 var(--sheen);
}
.pill{border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}

/* ------------------------------------------------------------- tables */
table.tbl thead th{background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
table.tbl tbody tr:hover{background:var(--surface)}

/* ------------------------------------------------------------- modals
   A dialog is a solid sheet with the glass rim, over a blurred page. Making
   it translucent too was tried: its sticky header and footer then sample the
   backdrop differently from the body between them, and the dialog bands. */
.modal{background:var(--card-solid); border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--sheen)}
.modal-head, .modal-foot{background:var(--card-solid)}
.modal-back{-webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%)}

/* ------------------------------------------------------------- stage rail
   The track becomes a lit glass tube; a slow gleam travels the filled part. */
.stop{--ic-n:var(--card-solid)}
.track-ticks span::before{background:var(--card-solid)}
.track-line{background:var(--line-2); box-shadow:inset 0 1px 2px var(--glass-rim); overflow:hidden}
.track-line > i{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.track-line > i::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);
}
@media (prefers-reduced-motion:no-preference){
  .track-line > i::after{animation:mak-gleam 3.8s ease-in-out infinite}
  @keyframes mak-gleam{60%,100%{transform:translateX(100%)}}
}
/* The tick row sits on the line; keep it visible now the line clips. */
.track-strip{overflow:visible}

/* ------------------------------------------------------------- sign in */
.auth-panel{background:transparent}
.auth-box{border:1px solid var(--glass-edge); border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,34px)}
.auth-brand{box-shadow:inset -1px 0 0 rgba(255,255,255,.12)}
.auth-brand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 40%);
}

/* ------------------------------------------------------------- misc */
.stage-panel{background:var(--surface)}
.drop{background:var(--surface)}
.toast{box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.2)}

/* ------------------------------------------------ reduce transparency
   Put the solid panels back. The scene stays: it is only a background. */
@media (prefers-reduced-transparency:reduce){
  /* Matched in every theme state, and specific enough to outrank the dark
     token blocks above, which would otherwise put the translucency back. */
  :root:is([data-theme], :not([data-theme])){
    --card:var(--card-solid); --glass:var(--card-solid); --glass-strong:var(--card-solid);
    --veil:var(--card-solid)}
  .card, .order-card, .order-row, .stage, .stat, .ed-stage, .pager, .modal, .notif, .att,
  .savebar, .tabs, .lang-switch, .viewswitch, .seg, .auth-box, .topbar, .btn-soft, .pill,
  .modal-head, .modal-foot, .modal-back, table.tbl thead th{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

} /* @supports */
} /* @media screen */