/* ============================================================================
   CHANDAN STEEL LIMITED — QR CODE BASED BOX TRACKING
   File    : css/shell.css
   Purpose : The one shared shell. Brand bar, navigation, and the responsive
             rules that make every screen work on a handset and on a desktop.

   WHY THIS FILE EXISTS
   --------------------
   Every page used to carry its own header, its own colours and its own idea
   of a layout, and none of them carried navigation at all — the only way from
   one screen to another was to type the URL. This file is the single place
   those decisions now live.

   THE RESPONSIVE RULE, STATED ONCE
   --------------------------------
   Below 900px the navigation is a fixed BOTTOM bar. Above it, a top bar.
   That is not a stylistic preference. On a handset held one-handed in a
   glove, the bottom third of the screen is the only comfortable reach; on a
   desktop there is no thumb and a bottom bar wastes the most valuable row on
   the screen. Same markup, same links, laid out for the hand that is holding
   the device.

   Everything is sized in rem and relative units, and every touch target is at
   least 48px, so it holds from a 320px phone up to a 4K desk monitor without
   a per-device rule anywhere.
   ========================================================================= */

:root{
  /* Brand. Sampled from the supplied artwork; img/logo.svg uses the same two. */
  --brand-blue:#2A4B9B;
  --brand-blue-dk:#1D3670;
  --brand-blue-lt:#EAEFF9;
  --brand-grey:#8C8C8C;

  --ink:#16202B;
  --ink-2:#3D4C5A;
  --muted:#61707E;
  --bg:#F3F5F8;
  --panel:#FFFFFF;
  --panel-2:#E9EDF2;
  --rule:#D2DAE3;
  --rule-soft:#E4E9EF;

  --ok:#1B8A5A;
  --warn:#B7791F;
  --stop:#C0392B;

  --shadow-1:0 1px 2px rgba(22,32,43,.06), 0 1px 10px rgba(22,32,43,.05);
  --shadow-2:0 4px 22px rgba(22,32,43,.14);

  --nav-h:60px;          /* bottom bar height on mobile          */
  --top-h:56px;          /* brand bar height                     */
  /* What a second sticky bar must clear. The brand bar is --top-h tall
     PLUS the notch inset it pads itself with, so a page that hard-codes
     56px tucks its own bar under the brand bar on an iPhone. */
  --top-total:calc(56px + env(safe-area-inset-top,0px));
  --tap:48px;            /* minimum touch target, never smaller  */
  --maxw:1180px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;              /* never below 16 — iOS zooms on focus otherwise */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

/* ---------------------------------------------------------------------------
   BRAND BAR — the logo is the home link, on every screen
--------------------------------------------------------------------------- */
.cs-top{
  position:sticky; top:0; z-index:60;
  background:var(--panel);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0);
}
.cs-top-in{
  max-width:var(--maxw); margin:0 auto;
  height:var(--top-h);
  display:flex; align-items:center; gap:12px;
  padding:0 14px;
}
.cs-brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; flex:0 0 auto}
.cs-brand img,.cs-brand .cs-logo{height:32px; width:auto; display:block}
.cs-brand .cs-name{
  font-size:14px; font-weight:700; color:var(--brand-blue);
  letter-spacing:.01em; white-space:nowrap;
}
.cs-brand .cs-sub{
  display:block; font-size:10.5px; font-weight:600; color:var(--brand-grey);
  letter-spacing:.09em; text-transform:uppercase; margin-top:-2px;
}
/* On a narrow phone the wordmark is already in the logo; the text would wrap. */
@media (max-width:479px){ .cs-brand .cs-name,.cs-brand .cs-sub{display:none} }

.cs-spacer{flex:1 1 auto}

/* queue badge + user chip */
.cs-chip{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 12px; border-radius:18px;
  background:var(--panel-2); border:1px solid var(--rule);
  font-size:13px; font-weight:600; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
}
.cs-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.cs-chip.pending{background:#FDF6E7;border-color:#EBCF92;color:#7A5410}
.cs-chip.pending .dot{background:var(--warn)}
.cs-chip.offline{background:#FCEDEC;border-color:#EDB4AE;color:#8C2A20}
.cs-chip.offline .dot{background:var(--stop)}
.cs-chip.user{max-width:44vw;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:34px}

/* ---------------------------------------------------------------------------
   NAVIGATION
   One list of links, two layouts. Nothing is duplicated in the markup.
--------------------------------------------------------------------------- */
.cs-nav{background:var(--panel)}
.cs-nav ul{list-style:none;margin:0;padding:0;display:flex}
.cs-nav a{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--muted); font-weight:600;
  min-height:var(--tap);
}
.cs-nav a:focus-visible{outline:2px solid var(--brand-blue); outline-offset:-3px}
.cs-nav .ic{flex:0 0 auto; display:block}
.cs-nav .ic svg{display:block; width:22px; height:22px; fill:none;
  stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ---- MOBILE: fixed bottom bar ------------------------------------------- */
@media (max-width:899px){
  .cs-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    border-top:1px solid var(--rule);
    box-shadow:0 -2px 14px rgba(22,32,43,.07);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .cs-nav ul{height:var(--nav-h)}
  .cs-nav li{flex:1 1 0; min-width:0}
  .cs-nav a{
    flex-direction:column; gap:3px; height:100%;
    font-size:10.5px; letter-spacing:.01em; padding:6px 2px 4px;
  }
  .cs-nav a .lb{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cs-nav a[aria-current="page"]{color:var(--brand-blue)}
  /* the active pip — the only ornament, and it carries information */
  .cs-nav a[aria-current="page"] .ic::after{
    content:""; display:block; width:4px; height:4px; border-radius:50%;
    background:var(--brand-blue); margin:3px auto -7px;
  }
  /* Room for the bar, plus whatever the OS puts below it. Held by a spacer
     element (see nav.js) rather than body padding, which a page stylesheet
     loading after this one can reset without noticing. */
  .cs-navspace{height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
}

/* ---- DESKTOP: horizontal bar in the header ------------------------------ */
@media (min-width:900px){
  .cs-navspace{display:none}
  .cs-nav{background:transparent}
  .cs-nav ul{gap:2px}
  .cs-nav a{
    flex-direction:row; gap:8px; padding:0 13px; height:40px;
    border-radius:8px; font-size:14px; white-space:nowrap;
  }
  /* Below 1180px the labels are the first thing to go, not the icons: an
     icon row still navigates, a wrapped word row just looks broken. */
  @media (max-width:1179px){ .cs-nav a .lb{display:none} .cs-nav a{padding:0 10px} }
  .cs-nav a:hover{background:var(--brand-blue-lt); color:var(--brand-blue)}
  .cs-nav a[aria-current="page"]{background:var(--brand-blue); color:#fff}
  .cs-nav a[aria-current="page"]:hover{background:var(--brand-blue-dk); color:#fff}
  .cs-more{display:none !important}
}

/* ---------------------------------------------------------------------------
   ANIMATED ICONS
   Hand-drawn inline SVG with CSS transitions rather than an icon library.

   Two reasons, and the second is the real one. A library is another megabyte
   on a handset over shop-floor WiFi; and the CSP on this application blocks
   external hosts, while the plant network may have no internet egress at all —
   the camera scanner already fails for exactly that reason. An icon set that
   cannot load leaves a navigation bar of empty squares.

   Motion is short, purposeful, and disabled for anyone who asks for less.
--------------------------------------------------------------------------- */
.cs-nav .ic svg{
  transition:transform .22s cubic-bezier(.34,1.4,.5,1);
  transform-origin:50% 50%;
}
.cs-nav a:hover .ic svg{transform:translateY(-1px) scale(1.06)}
.cs-nav a:active .ic svg{transform:scale(.92)}
.cs-nav a[aria-current="page"] .ic svg{transform:scale(1.08)}

/* the scan icon's reticle sweeps while its tab is current */
.cs-nav a[aria-current="page"] .ic .sweep{
  animation:cs-sweep 2.1s ease-in-out infinite;
}
@keyframes cs-sweep{
  0%,100%{transform:translateY(-3.5px);opacity:.35}
  50%    {transform:translateY(3.5px); opacity:1}
}
/* the loading icon's arrow nudges in */
.cs-nav a[aria-current="page"] .ic .nudge{animation:cs-nudge 1.9s ease-in-out infinite}
@keyframes cs-nudge{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}}
/* the plus on New Box rotates a quarter turn on hover */
.cs-nav a:hover .ic .spin{transform:rotate(90deg); transform-origin:12px 12px}
.cs-nav .ic .spin{transition:transform .3s cubic-bezier(.34,1.4,.5,1); transform-origin:12px 12px}

@media (prefers-reduced-motion:reduce){
  .cs-nav .ic svg,.cs-nav .ic .spin{transition:none}
  .cs-nav a:hover .ic svg,.cs-nav a:active .ic svg,
  .cs-nav a[aria-current="page"] .ic svg{transform:none}
  .cs-nav a[aria-current="page"] .ic .sweep,
  .cs-nav a[aria-current="page"] .ic .nudge{animation:none}
}

/* ---- the "More" sheet, mobile only -------------------------------------- */
.cs-sheet{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(16,24,33,.45);
}
.cs-sheet.open{display:block}
.cs-sheet-in{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--panel); border-radius:16px 16px 0 0;
  padding:8px 10px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-2);
  animation:cs-rise .2s ease-out;
}
@keyframes cs-rise{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cs-sheet-in{animation:none}}
.cs-sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--rule);margin:6px auto 12px}
.cs-sheet a{
  display:flex; align-items:center; gap:14px; min-height:var(--tap);
  padding:0 12px; border-radius:10px; text-decoration:none;
  color:var(--ink); font-size:16px; font-weight:600;
}
.cs-sheet a:active{background:var(--panel-2)}
.cs-sheet a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:var(--brand-blue);flex:0 0 auto}
.cs-sheet a .sub{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:-2px}

/* ---------------------------------------------------------------------------
   LIVING WITH A PAGE THAT HAS ITS OWN FURNITURE

   The two scanner screens were built as standalone documents before the shell
   existed, and they carry their own sticky tab strip and their own toast. Both
   assumed they owned the top and the bottom of the viewport. These rules hand
   the edges back to the shell without rewriting either page.
--------------------------------------------------------------------------- */
.cs-substick{position:sticky; top:var(--top-total); z-index:40}

/* A fixed toast must clear the bottom bar, or it covers the navigation on the
   one screen where the operator most needs both. */
@media (max-width:899px){
  .cs-abovenav{bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px)) !important}
}

/* ---------------------------------------------------------------------------
   PAGE FRAME + COMMON CONTROLS
   Shared so a new screen inherits the right look without inventing one.
--------------------------------------------------------------------------- */
.cs-main{max-width:var(--maxw); margin:0 auto; padding:16px 14px 28px}
.cs-h1{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px}
.cs-sub{color:var(--muted); font-size:14.5px; margin:0 0 18px}

.cs-card{
  background:var(--panel); border:1px solid var(--rule); border-radius:12px;
  padding:16px; margin-bottom:14px; box-shadow:var(--shadow-1);
}
.cs-card > h2{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 12px;
}

.cs-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:700px){ .cs-grid.two{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .cs-grid.three{grid-template-columns:repeat(3,1fr)} }

label.cs-l{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:12px 0 5px;
}
.cs-in,input[type=text].cs-in,input[type=number].cs-in,select.cs-in,textarea.cs-in{
  width:100%; min-height:var(--tap); font-size:16px; font-family:inherit;
  padding:10px 13px; border:1.5px solid var(--rule); border-radius:9px;
  background:var(--panel); color:var(--ink);
}
textarea.cs-in{min-height:88px; line-height:1.5}
.cs-in:focus{outline:0; border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-lt)}
.cs-in.mono{font-family:var(--mono)}

.cs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 20px; width:100%;
  border:0; border-radius:10px; font-family:inherit; font-size:16px; font-weight:700;
  color:#fff; background:var(--brand-blue); cursor:pointer; margin-top:12px;
  transition:transform .12s ease, background .15s ease;
}
.cs-btn:hover{background:var(--brand-blue-dk)}
.cs-btn:active{transform:scale(.985)}
.cs-btn.ghost{background:var(--panel); color:var(--brand-blue); border:2px solid var(--brand-blue)}
.cs-btn.ghost:hover{background:var(--brand-blue-lt)}
.cs-btn.ok{background:var(--ok)} .cs-btn.warn{background:var(--warn)}
/* DISABLED LAST, AND IT MUST STAY LAST.
   .cs-btn:disabled and .cs-btn.ok have the same specificity, so source order
   decides. Written first, a disabled .ok button kept its GREEN background and
   took only the pale grey text - a label that reads as swallowed, on a button
   the operator cannot tell is disabled. !important as well as order, because
   the next colour variant will be added at the bottom of this list. */
.cs-btn:disabled,
.cs-btn[disabled],
.cs-btn:disabled:hover,
.cs-btn[disabled]:hover{
  background:var(--rule) !important;
  color:#5B6875 !important;
  border-color:var(--rule) !important;
  cursor:not-allowed;
  transform:none;
}
.cs-btn.auto{width:auto}
@media (min-width:700px){ .cs-btn{width:auto; min-width:180px} }

.cs-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cs-row .cs-btn{margin-top:0}

.cs-kv{display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--rule-soft); font-size:15px}
.cs-kv:last-child{border-bottom:0}
.cs-kv span{color:var(--muted)}
.cs-kv b{text-align:right; font-weight:700}

.cs-pill{display:inline-block; padding:4px 11px; border-radius:14px; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.03em}

.cs-note{border-radius:10px; padding:12px 14px; font-size:14.5px; margin:12px 0}
.cs-note.info{background:var(--brand-blue-lt); border:1px solid #B9CCEC; color:#1B3568}
.cs-note.warn{background:#FDF6E7; border:1px solid #EBCF92; color:#7A5410}
.cs-note.stop{background:#FCEDEC; border:1px solid #EDB4AE; color:#8C2A20}
.cs-note.ok  {background:#E7F4EE; border:1px solid #A8D8C1; color:#155F3F}

/* tables that must survive a 320px screen */
.cs-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:12px; background:var(--panel)}
.cs-scroll table{border-collapse:collapse; width:100%; font-size:14.5px}
.cs-scroll th{position:sticky; top:0; background:var(--panel-2); text-align:left;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--rule)}
.cs-scroll td{padding:10px 12px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
.cs-scroll tr:last-child td{border-bottom:0}

.cs-mono{font-family:var(--mono)}
.cs-hide{display:none !important}
@media (max-width:899px){ .cs-only-wide{display:none !important} }
@media (min-width:900px){ .cs-only-narrow{display:none !important} }

/* Printing: the shell is furniture, not content. */
@media print{
  .cs-top,.cs-nav,.cs-sheet,.cs-btn{display:none !important}
  body{padding-bottom:0; background:#fff}
  .cs-card{border:0; box-shadow:none; padding:0}
}