/* ==========================================================================
   NEXT skin — the live portal, redesigned.

   Loaded AFTER portal.css on next.kaartdijin.ae only. Nothing here is served by
   k-oasis.ae, and portal.css itself is untouched: every screen keeps the views,
   forms, permissions and services it already has, and only its surface changes.
   That is the whole point — the function must stay identical while the look is
   judged, so a rewrite of 2,700 lines would prove nothing except that a rewrite
   can introduce bugs.

   Two jobs:

   1. REDEFINE THE TOKENS. portal.css keys off --bg/--surface/--line/--radius,
      so palette and curvature move from one place.

   2. RE-ROUND WHAT WAS HARD-ZEROED. 43 selectors carry a literal
      `border-radius:0` from the squared-corners pass, and a literal does not
      listen to a token. Those are restored BY ROLE below — pills for controls,
      small for inputs, medium for panels — because one radius on everything is
      what makes a design look defaulted.
   ========================================================================== */

body.portal{
  --radius-xs:7px; --radius-sm:10px; --radius:14px;
  --radius-lg:20px; --radius-xl:24px;
  --r-pill:999px;

  /* Greys biased a few degrees toward the navy so none reads as stock mid-grey. */
  --bg:#f2f4f7; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f8fafc;
  --line:#e4e8ee; --line-strong:#ccd4de;
  --text:#141e2c; --muted:#566273;

  --nshadow:0 1px 2px rgba(16,28,45,.05),0 2px 8px rgba(16,28,45,.045);
  --nshadow-lift:0 2px 6px rgba(16,28,45,.07),0 14px 34px rgba(16,28,45,.11);
}
@media (prefers-color-scheme:dark){
  body.portal:not([data-theme="light"]){
    --bg:#0a1018; --bg-2:#101925; --surface:#131d29; --surface-2:#19232f;
    --line:#243244; --line-strong:#35455d;
    --text:#e8edf3; --muted:#9cabbc;
    --nshadow:0 1px 2px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.3);
    --nshadow-lift:0 2px 8px rgba(0,0,0,.5),0 16px 38px rgba(0,0,0,.5);
  }
}
body.portal[data-theme="dark"]{
  --bg:#0a1018; --bg-2:#101925; --surface:#131d29; --surface-2:#19232f;
  --line:#243244; --line-strong:#35455d;
  --text:#e8edf3; --muted:#9cabbc;
  --nshadow:0 1px 2px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.3);
  --nshadow-lift:0 2px 8px rgba(0,0,0,.5),0 16px 38px rgba(0,0,0,.5);
}

/* ---------- panels and surfaces: medium ---------- */
body.portal .pcard,
body.portal .pdetail,
body.portal .pdesk,
body.portal .pnotes,
body.portal .phandover,
body.portal .pregister,
body.portal .pflash,
body.portal .pbell__panel,
body.portal .pquote,
body.portal .pvoid,
body.portal .plogin,
body.portal .ptable-wrap,
body.portal .pempty{
  border-radius:var(--radius);
}
body.portal .pcard,
body.portal .pdetail,
body.portal .pdesk{ box-shadow:var(--nshadow) }
body.portal .pquote{ border-radius:0 var(--radius) var(--radius) 0 }

/* A table inside a rounded wrapper has to be clipped or its corners poke out. */
body.portal .ptable-wrap{ overflow:hidden }

/* ---------- controls: pills ---------- */
body.portal .pmain .btn,
body.portal .pnav .btn,
body.portal .plogin .btn,
body.portal .pwa-quick__chip,
body.portal .pmock-preset,
body.portal .pboard__bulk button,
body.portal .pchip,
body.portal .pflag{
  border-radius:var(--r-pill);
}
body.portal .pmain .btn{ transition:background .16s,border-color .16s,color .16s,box-shadow .16s }
body.portal .pmain .btn:hover{ box-shadow:var(--nshadow) }

/* Round things that are genuinely round. */
body.portal .pnav .icon-btn,
body.portal .pmodal__close,
body.portal .pwho__av,
body.portal .plead__av,
body.portal .pavatar{
  border-radius:50%;
}

/* ---------- fields: small ---------- */
body.portal .pfilters,
body.portal .pfilters input,
body.portal .pfilters select,
body.portal .pform select,
body.portal .pform textarea,
body.portal .pform input[type="file"],
body.portal .pform input[type="date"],
body.portal .pfield input,
body.portal .pfield select,
body.portal .pfield textarea,
body.portal .pfield input[type="file"],
body.portal .pfield--image .pfield__preview,
body.portal .plogin__form .pfield input,
body.portal .pledger__pay input,
body.portal .pledger__pay select,
body.portal .plead-move__fields textarea,
body.portal .pwa-compose__form textarea,
body.portal .pwa-form .pfield textarea,
body.portal .pwa-form .pfield input[type="password"],
body.portal .pmock-custom input,
body.portal .pmock-gapin,
body.portal .pmock-para__pos select,
body.portal .pmock-text,
body.portal .phandover code{
  border-radius:var(--radius-sm);
}

/* ---------- the rail ---------- */
body.portal .pside{ box-shadow:0 8px 30px rgba(10,20,34,.3) }
body.portal .pside__link{
  /* Rounded on the open side only: the left edge carries the active accent bar,
     and a radius there would cut through it. */
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  margin-right:10px;
  transition:background .14s,color .14s;
}
body.portal .pside::-webkit-scrollbar-thumb{ border-radius:var(--r-pill) }
body.portal .pnav__mark{ border-radius:var(--radius-xs) }
body.portal a.pnav__who{ border-radius:var(--r-pill) }

/* ---------- profile tile: a rounded square, not a circle ---------- */
/* CLAUDE.md records the square avatar as a deliberate choice against the
   client's old panel. Softening it keeps that decision while matching the new
   language; a circle here would be a different decision, not a restyle. */
body.portal .pprofile__photo{ border-radius:var(--radius) }

/* ---------- dialogs ---------- */
body.portal .pmodal__box{ box-shadow:var(--nshadow-lift) }
@media (max-width:640px){
  body.portal .pmodal__box{ border-radius:var(--radius) var(--radius) 0 0 }
}

/* ---------- board ---------- */
body.portal .pboard__col{ border-radius:var(--radius-sm); overflow:hidden }
body.portal .plead{ border-radius:var(--radius-xs); transition:box-shadow .15s,transform .15s }
body.portal .plead:hover{ box-shadow:var(--nshadow-lift); transform:translateY(-1px) }

/* ---------- a focus ring should follow the shape it is on ---------- */
body.portal .pmain :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  border-radius:inherit;
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){ body.portal *{ transition:none!important } }

/* It reads and writes the live database. Say so on every screen. */
body.portal .nextbar{
  display:flex;align-items:center;gap:9px;background:#003366;color:#fff;
  padding:7px 20px;font-size:12px;
}
body.portal .nextbar b{ font-weight:700 }
body.portal .nextbar .x{ margin-left:auto;opacity:.75;font-size:11.5px }