/* ============================================================================
   PORTALS — distributor and customer

   Loaded after admin.css, which supplies the design tokens. Nothing here
   invents a colour: every value is a var() off the same palette the staff
   system uses, so the two stay in the same family when the brand moves.

   What differs is the shape, and that is on purpose. A distributor is standing
   in a chemist's shop holding a phone, and a chemist is checking a balance
   between customers. Neither is at a desk with a 1400px window and a dense
   table. So the portals get a top bar instead of the dark sidebar, one column
   instead of three, cards instead of rows, and touch-sized controls. Anyone
   looking at a screenshot can tell in a second which system they are in, which
   is the point: these are outside logins reaching the same books.

   --accent carries the difference between the two portals. Distributors sell,
   so they get the green the staff system uses for actions. Chemists are looking
   at their account, so they get the navy the statements are printed in.
   ============================================================================ */

body[data-portal]{
  background:var(--porcelain);
  padding-bottom:40px;
}
body[data-portal="distributor"]{--accent:var(--green);--accent-deep:var(--green-deep);--accent-lt:var(--green-lt)}
body[data-portal="customer"]{--accent:var(--navy);--accent-deep:var(--navy-deep);--accent-lt:var(--navy-2)}

/* ---- Top bar ------------------------------------------------------------- */
.p-top{
  background:var(--accent-deep);color:#fff;
  padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.p-top .p-brand{font-family:var(--serif);font-size:1.16rem;color:#fff;line-height:1.1}
.p-top .p-brand b{color:var(--accent-lt)}
.p-top .p-brand small{
  display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--platinum);margin-top:3px;font-weight:600;
}
.p-top .spacer{margin-left:auto}
.p-who{font-size:.82rem;color:var(--platinum-lt);text-align:right;line-height:1.3}
.p-who b{display:block;color:#fff;font-weight:600;font-size:.9rem}
.p-out{
  font-size:.78rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:.45em 1em;border-radius:3px;white-space:nowrap;
}
.p-out:hover{background:rgba(255,255,255,.12)}

/* Horizontal nav. Scrolls sideways on a phone rather than wrapping into a
   stack that pushes the content off the first screen. */
.p-nav{
  background:var(--accent);display:flex;gap:2px;padding:0 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.p-nav::-webkit-scrollbar{display:none}
.p-nav a{
  color:rgba(255,255,255,.82);font-size:.86rem;font-weight:600;
  padding:12px 15px;white-space:nowrap;border-bottom:3px solid transparent;
}
.p-nav a:hover{color:#fff}
.p-nav a.on{color:#fff;border-bottom-color:#fff}
.p-nav .count{
  display:inline-block;background:rgba(255,255,255,.22);color:#fff;
  font-size:.68rem;padding:1px 7px;border-radius:9px;margin-left:6px;vertical-align:1px;
}

.p-wrap{max-width:1080px;margin:0 auto;padding:22px 20px}
.p-wrap h2{font-size:1.32rem;color:var(--ink);margin-bottom:4px}
.p-lead{font-size:.9rem;color:var(--mist);margin-bottom:20px}

/* ---- Cards and panels ---------------------------------------------------- */
.p-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.p-card{
  background:#fff;border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-sm);
  border:1px solid var(--porcelain-2);
}
.p-card .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:700}
.p-card .v{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin-top:6px;line-height:1.1;font-variant-numeric:tabular-nums}
.p-card .v.pos{color:var(--green)}
.p-card .v.neg{color:var(--danger)}
.p-card .v.accent{color:var(--accent)}
.p-card .sub{font-size:.76rem;color:var(--mist);margin-top:4px}

.p-panel{
  background:#fff;border-radius:12px;box-shadow:var(--shadow-sm);
  border:1px solid var(--porcelain-2);margin-bottom:20px;overflow:hidden;
}
.p-panel-head{
  padding:15px 20px;border-bottom:1px solid var(--porcelain-2);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.p-panel-head h3{font-size:1.05rem;color:var(--ink)}
.p-panel-head .note{font-size:.78rem;color:var(--mist)}
.p-panel-head .spacer{margin-left:auto}
.p-panel-body{padding:20px}
.p-foot{padding:13px 20px;border-top:1px solid var(--porcelain-2);background:#FBFCFE;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p-foot .spacer{margin-left:auto}
.p-note{padding:12px 20px;border-top:1px solid var(--porcelain-2);font-size:.79rem;color:var(--mist)}

/* Tables scroll inside their own panel. The page itself never scrolls sideways. */
.p-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-panel table{font-size:.86rem}
.p-panel th{padding:11px 20px}
.p-panel td{padding:11px 20px}

/* ---- Buttons and forms --------------------------------------------------- */
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-lt)}
.btn-block{width:100%;justify-content:center}

.p-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px;padding:20px}
.p-form .field{display:flex;flex-direction:column;min-width:0}
.p-form .field.wide{grid-column:1/-1}
.p-form .hint{font-size:.74rem;color:var(--mist);margin:-11px 0 16px}
/* 16px on the inputs: anything smaller makes iOS zoom the whole page on focus. */
.p-form input,.p-form select,.p-form textarea{font-size:16px;padding:12px 13px}
.p-form input:focus,.p-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,38,82,.1)}

/* A field the portal shows but cannot change. Reads as information, not as a
   disabled control somebody will try to click. */
.p-fixed{
  background:var(--porcelain);border:1px dashed var(--platinum);border-radius:5px;
  padding:11px 13px;margin-bottom:16px;font-size:.9rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.p-fixed .why{display:block;font-size:.73rem;color:var(--mist);margin-top:3px;font-variant-numeric:normal}

/* ---- Line entry ---------------------------------------------------------- */
.p-lines{width:100%;border-collapse:collapse}
.p-lines th{
  text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);font-weight:700;padding:10px 20px;border-bottom:1px solid var(--porcelain-2);
  background:#FBFCFE;
}
.p-lines td{padding:9px 20px;border-bottom:1px solid var(--porcelain-2);vertical-align:middle}
.p-lines tr:last-child td{border-bottom:none}
.p-lines input,.p-lines select{margin:0;font-size:16px;padding:10px 11px}
.p-lines input[type=number]{text-align:right;font-variant-numeric:tabular-nums;max-width:120px}
.p-lines .prod{min-width:170px}
.p-lines .meta{display:block;font-size:.74rem;color:var(--mist);margin-top:2px}

/* ---- Feedback ------------------------------------------------------------ */
.p-ok,.p-err{border-radius:10px;padding:15px 18px;font-size:.9rem;margin-bottom:20px}
.p-ok{background:var(--ok-bg);border:1px solid rgba(14,138,42,.3);color:var(--green-deep)}
.p-err{background:var(--danger-bg);border:1px solid rgba(179,38,30,.3);color:var(--danger);white-space:pre-line}
.p-ok b,.p-err b{font-weight:700}
.p-ok .links{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.p-ok .links a{color:var(--green-deep);font-weight:600;text-decoration:underline}

.p-empty{padding:36px 20px;text-align:center;color:var(--mist);font-size:.9rem}

/* Expiry runs from fine, through watch it, to do not ship it. Days are printed
   in the pill beside the colour, so the reading never depends on hue alone. */
.p-days{font-variant-numeric:tabular-nums;font-weight:600}
.p-days.warn{color:var(--warn)}
.p-days.bad{color:var(--danger)}

.p-bar{background:var(--porcelain-2);border-radius:3px;height:7px;overflow:hidden;min-width:70px}
.p-bar span{display:block;height:100%;background:var(--accent);border-radius:3px}

/* ---- Sign in ------------------------------------------------------------- */
.p-login{min-height:100vh;display:grid;place-items:center;background:var(--navy-deep);padding:20px}
.p-login-card{
  background:#fff;border-radius:14px;padding:34px 30px;width:100%;max-width:400px;
  box-shadow:var(--shadow);
}
.p-login-card .p-brand{font-family:var(--serif);font-size:1.5rem;color:var(--navy);text-align:center}
.p-login-card .p-brand b{color:var(--green)}
.p-login-card .sub{
  text-align:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin:4px 0 24px;font-weight:600;
}
.p-login-card input{font-size:16px;padding:12px 13px}
.p-login-card .who-for{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--porcelain-2);
  font-size:.79rem;color:var(--mist);text-align:center;line-height:1.6;
}

@media(max-width:640px){
  .p-wrap{padding:18px 14px}
  .p-top{padding:12px 14px}
  .p-cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .p-card{padding:14px 16px}
  .p-card .v{font-size:1.4rem}
  .p-form{grid-template-columns:1fr;padding:16px}
  .p-panel th,.p-panel td,.p-lines th,.p-lines td{padding-left:14px;padding-right:14px}
  .p-panel-body,.p-foot{padding-left:16px;padding-right:16px}
}

@media print{
  .p-top,.p-nav,.p-foot,.btn{display:none !important}
  .p-panel{box-shadow:none;border:1px solid var(--platinum-lt);break-inside:avoid}
}