/* ===========================================================================
   The Service Crew — operations console
   ---------------------------------------------------------------------------
   Two brand colours carry the interface: the deep teal from the logo and its
   yellow. Everything structural is built from them.

   WHAT IS DELIBERATELY NOT BRANDED
   Green, red and amber stay exactly as they were. They are not decoration --
   they mean Paid, Overdue and Pending, and staff read them at a glance across
   a table without stopping to read the words. Recolouring those to brand teal
   would look tidier and destroy information.

   So: teal and yellow for chrome and actions, the traffic-light set for
   status, and nothing else.

   CONTRAST NOTE
   #F6C500 on white is far too weak for text. Yellow is used as a BACKGROUND
   with dark teal on top of it, never as type on a light ground.
   =========================================================================== */
:root{
  --tsc-teal:        #1C3742;   /* the logo's ground */
  --tsc-teal-deep:   #12262E;   /* pressed / darker chrome */
  --tsc-teal-lift:   #27454F;   /* hover on dark chrome */
  --tsc-teal-line:   #2E4E59;
  --tsc-yellow:      #F6C500;   /* the logo's mark */
  --tsc-yellow-hi:   #FFD529;
  --tsc-yellow-deep: #C99F00;   /* the shadow under a yellow button */

  --ink:    #16232A;
  --muted:  #64747E;
  --line:   #DCE3E8;
  --page:   #EEF1F4;
  --tint:   #EAF0F2;   /* row hover: a teal-leaning tint, not the old blue */

  /* Status. Meaning, not branding — do not fold these into the palette. */
  --ok:     #2e7d32;
  --bad:    #c62828;
  --warn:   #f57c00;
  --info:   #7a4dff;
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:"Segoe UI", Tahoma, sans-serif;
  background:var(--page); color:var(--ink);
}

/* ------------------------------------------------------------- masthead --- */
.header{
  background:linear-gradient(135deg, var(--tsc-teal), var(--tsc-teal-deep));
  color:#fff; padding:12px 30px;
  border-bottom:3px solid var(--tsc-yellow);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  display:flex; justify-content:space-between; align-items:center;
}
.header h1{ font-size:22px; font-weight:600; }
.header .subtitle{ font-size:12px; opacity:.8; }
.header-right{ text-align:right; }
.user-info strong{ font-size:14px; }
.role-badge{
  display:inline-block; background:rgba(246,197,0,.18); color:var(--tsc-yellow);
  padding:2px 10px; border-radius:10px; font-size:11px; margin-left:8px; font-weight:700;
}
.btn-logout{
  margin-top:6px; display:inline-block; padding:5px 14px;
  background:rgba(255,255,255,.12); color:#fff; border-radius:4px;
  text-decoration:none; font-size:12px; border:1px solid rgba(255,255,255,.28);
  transition:background .15s, border-color .15s, color .15s;
}
.btn-logout:hover{
  background:var(--tsc-yellow); border-color:var(--tsc-yellow); color:var(--tsc-teal-deep);
}

/* ------------------------------------------------------------------ nav --- */
.nav-bar{ background:var(--tsc-teal-deep); }
.nav-bar ul{ list-style:none; display:flex; flex-wrap:wrap; }
.nav-bar ul li a{
  display:block; color:#CFDBE0; padding:12px 18px;
  text-decoration:none; font-size:13px; font-weight:500;
  border-bottom:3px solid transparent; transition:background .15s, color .15s, border-color .15s;
}
.nav-bar ul li a:hover{
  background:var(--tsc-teal-lift); color:#fff; border-bottom-color:var(--tsc-yellow);
}

.main-content{ padding:25px 30px; max-width:1400px; margin:0 auto; }

/* The rule under a page title is yellow: one small piece of the brand on every
   screen, without colouring the text itself. */
.page-title{
  font-size:20px; color:var(--tsc-teal); margin-bottom:20px;
  padding-bottom:10px; border-bottom:3px solid var(--tsc-yellow);
}

.form-panel{
  background:#fff; border-radius:8px; padding:25px;
  box-shadow:0 2px 8px rgba(22,35,42,.09); margin-bottom:20px;
}
.form-panel h3{ color:var(--tsc-teal); margin-bottom:15px; font-size:16px; }

.form-row{ display:flex; flex-wrap:wrap; gap:15px; margin-bottom:12px; }
.form-group{ flex:1; min-width:180px; }
.form-group label{
  display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin-bottom:4px; text-transform:uppercase;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:8px 12px; border:1px solid var(--line);
  border-radius:4px; font-size:14px; font-family:inherit; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:var(--tsc-yellow); outline:none;
  box-shadow:0 0 0 3px rgba(246,197,0,.25);
}

/* --------------------------------------------------------------- buttons --- */
.btn{
  padding:10px 24px; border:none; border-radius:4px; font-size:13px; font-weight:700;
  cursor:pointer; text-transform:uppercase; text-decoration:none; display:inline-block;
  transition:background .15s, transform .08s, box-shadow .15s;
}
/* The main action is yellow with teal type -- the logo's own pairing, and the
   only combination of the two that holds its contrast. */
.btn-primary{
  background:var(--tsc-yellow); color:var(--tsc-teal-deep);
  box-shadow:0 2px 0 var(--tsc-yellow-deep);
}
.btn-primary:hover{ background:var(--tsc-yellow-hi); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 0 0 var(--tsc-yellow-deep); }

.btn-info{ background:var(--tsc-teal); color:#fff; }
.btn-info:hover{ background:var(--tsc-teal-lift); }
.btn:focus-visible{ outline:3px solid var(--tsc-teal); outline-offset:2px; }

/* ---------------------------------------------------------------- tables --- */
.grid{
  width:100%; border-collapse:collapse; margin-top:15px;
  background:#fff; border-radius:8px; overflow:hidden;
}
.grid th{
  background:var(--tsc-teal); color:#fff; padding:12px 15px;
  font-size:12px; text-transform:uppercase; text-align:left; letter-spacing:.04em;
}
.grid td{ padding:10px 15px; border-bottom:1px solid #EDF1F3; font-size:13px; }
.grid tr:nth-child(even) td{ background:#FAFBFC; }
.grid tr:hover td{ background:var(--tint); }
.grid a{ color:var(--tsc-teal); font-weight:600; text-decoration:none; }
.grid a:hover{ text-decoration:underline; }

.pill{
  display:inline-block; padding:3px 10px; border-radius:10px;
  font-size:11px; font-weight:700; color:#fff;
}
.pill-red{ background:var(--bad); }

/* ------------------------------------------------------------ stat cards --- */
.summary-cards{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.summary-card{
  flex:1; min-width:170px; background:#fff;
  border-left:4px solid var(--tsc-yellow); padding:14px 18px;
  border-radius:6px; box-shadow:0 1px 3px rgba(22,35,42,.08);
}
.summary-card .card-value{ font-size:22px; font-weight:700; color:var(--tsc-teal); }
.summary-card .card-label{ font-size:12px; color:var(--muted); margin-top:4px; }
/* Status cards keep their meaning. */
.summary-card.red{    border-left-color:var(--bad);  }
.summary-card.red    .card-value{ color:var(--bad);  }
.summary-card.green{  border-left-color:var(--ok);   }
.summary-card.green  .card-value{ color:var(--ok);   }
.summary-card.purple{ border-left-color:var(--info); }
.summary-card.purple .card-value{ color:var(--info); }

.msg-success{
  background:#e8f5e9; color:var(--ok); padding:12px 20px;
  border-left:4px solid var(--ok); margin-bottom:15px; border-radius:4px;
}
.msg-error{
  background:#ffebee; color:var(--bad); padding:12px 20px;
  border-left:4px solid var(--bad); margin-bottom:15px; border-radius:4px;
}

/* ===========================================================================
   SMALL SCREENS
   ---------------------------------------------------------------------------
   This is an operations console, not a brochure. The job on a phone is to let
   somebody check a work order, look up a technician or approve a payment from
   a van or a corridor -- not to reproduce the desktop layout in miniature.

   Three decisions run through everything below.

   1. DATA TABLES SCROLL, THEY DO NOT RESTACK. A twelve-column grid folded into
      stacked cards turns one screenful into twelve, and reading a money column
      down the page is the whole point of the grid. So the tables keep their
      shape and get a scrolling frame of their own; the PAGE never scrolls
      sideways, only the table does.

   2. CONTROLS GET BIGGER, NOT SMALLER. Anything meant to be tapped is at least
      44px tall -- Apple's own floor, and about the width of an adult thumb.
      Shrinking the chrome to fit more in is how you get mis-taps on a screen
      that approves payments.

   3. TEXT INPUTS STAY AT 16px. Below that, iOS Safari zooms the page in when
      the field takes focus and does not zoom back out. That single rule is the
      difference between a form that behaves and one that appears to jump.
   =========================================================================== */

/* The menu button exists in the markup on every page but belongs to small
   screens only. Hidden here and switched on in the 860px block below, so a
   desktop never shows a stray button next to the logo. */
.nav-toggle{ display:none; }
.header-brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:52px; display:block; }
/* Safety net, keyed off the masthead rather than the class: whatever image
   ends up in the header, it can never render at its natural size and push the
   chrome down the page. The logo file itself is several hundred pixels tall. */
.header img{ max-height:52px; width:auto; }
.header-actions{ display:inline-flex; gap:6px; }

/* The frame added around every .grid (see render_footer). On a desktop it is
   invisible; on a phone it is the thing that scrolls. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;   /* momentum scrolling on iOS */
  border-radius:8px;
}

/* --------------------------------------------------------------------------
   Tablets and small laptops. The nav is still a strip, just tighter.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .main-content{ padding:20px; }
  .nav-bar ul li a{ padding:12px 13px; }
}

/* --------------------------------------------------------------------------
   Phones and small tablets: the nav becomes a menu.
   -------------------------------------------------------------------------- */
@media (max-width:860px){

  /* ---- masthead ---- */
  .header{ padding:10px 14px; gap:10px; }
  .brand-logo{ height:38px; }
  .header-right{ text-align:right; }
  .user-info strong{ font-size:13px; }
  .header-actions{ margin-top:5px; justify-content:flex-end; }
  /* Sign Out sits next to Change Password. Both stay a real tap target --
     40px rather than the 44 used elsewhere, because the masthead is fixed
     height and these are secondary, but nowhere near the 31px they collapsed
     to when only the padding was reduced. */
  .btn-logout{
    margin-top:0; padding:0 12px; min-height:40px;
    display:inline-flex; align-items:center;
  }

  /* ---- the menu button ---- */
  /* Drawn rather than typed: a hamburger glyph in a font is a lottery across
     Android keyboards and webviews, three borders are not. */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
    border-radius:6px; cursor:pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    content:""; display:block; width:20px; height:2px;
    background:var(--tsc-yellow); border-radius:2px;
  }
  .nav-toggle-bars{ position:relative; }
  .nav-toggle-bars::before{ position:absolute; top:-6px; }
  .nav-toggle-bars::after{  position:absolute; top:6px; }
  .nav-toggle[aria-expanded="true"]{ background:var(--tsc-yellow); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars,
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before,
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{
    background:var(--tsc-teal-deep);
  }

  /* ---- the menu itself ---- */
  /* Collapsed to nothing rather than display:none, so it is still in the
     document for a screen reader and the toggle has something to announce. */
  .nav-bar ul{
    display:block; max-height:0; overflow:hidden;
    transition:max-height .22s ease;
  }
  .nav-bar ul.is-open{ max-height:80vh; overflow-y:auto; }
  .nav-bar ul li a{
    padding:14px 18px; font-size:15px;
    border-bottom:1px solid var(--tsc-teal-line);
    border-left:3px solid transparent;
  }
  .nav-bar ul li a:hover{
    border-bottom-color:var(--tsc-teal-line);
    border-left-color:var(--tsc-yellow);
  }

  /* ---- page body ---- */
  .main-content{ padding:14px; }
  .page-title{ font-size:17px; margin-bottom:14px; }
  .form-panel{ padding:16px 14px; border-radius:6px; }

  /* One field per row. At 380px two fields side by side leaves neither of them
     wide enough to read what you typed. */
  .form-row{ gap:10px; margin-bottom:10px; }
  .form-group{ flex:1 1 100%; min-width:0; }
  .form-group input,
  .form-group select,
  .form-group textarea{
    font-size:16px;      /* see note 3 at the top -- do not lower this */
    padding:11px 12px;
    min-height:44px;
  }

  /* Buttons go full width and stack. A row of three uppercase buttons at
     380px produces three unreadable stubs. */
  .btn{
    display:block; width:100%; padding:13px 18px;
    min-height:44px; margin-bottom:8px; font-size:14px;
  }
  /* ...unless they are deliberately grouped inline, e.g. a table's row actions. */
  .btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .btn-row .btn{ width:auto; flex:1 1 auto; margin-bottom:0; }
  /* A button that sits INSIDE a field group -- a search or filter button next
     to its input, like Job Costing's magnifier -- keeps its natural width, so
     it can't stretch to 100% and spill out of the row. Standalone action
     buttons (Save, etc.) are never inside a .form-group, so they stay full
     width. */
  .form-group .btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; min-width:44px; margin-bottom:0;
  }
  .form-group > div{ flex-wrap:wrap; }
  td .btn, .grid .btn{
    display:inline-block; width:auto; margin-bottom:0;
    padding:8px 12px; min-height:36px;
  }

  /* Stat cards: two across. One per row wastes a screen; three is too narrow
     for a dollar figure. */
  .summary-cards{ gap:10px; }
  .summary-card{
    flex:1 1 calc(50% - 5px); min-width:0; padding:12px 14px;
  }
  .summary-card .card-value{ font-size:18px; }
  .summary-card .card-label{ font-size:11px; }

  /* Tables keep their columns and scroll inside their frame. Tighter padding
     and a slightly smaller face buy about two more columns per screen. */
  .table-scroll{ margin-top:12px; }
  .grid{ margin-top:0; }
  .grid th{ padding:10px 10px; font-size:11px; white-space:nowrap; }
  .grid td{ padding:9px 10px; font-size:12.5px; }
  /* Money and dates look after themselves -- "$1,234.56" and "09/14/2026"
     contain no spaces, so they cannot break across lines. What does need
     handling is the opposite case: one long scope-of-work cell dragging the
     table out to 3,000px and making the sideways scroll useless. So cells are
     capped and wrap inside that cap. */
  .grid td{ max-width:250px; }
  .grid td.nowrap{ white-space:nowrap; max-width:none; }

  .msg-success, .msg-error{ padding:11px 14px; font-size:13px; }
}

/* --------------------------------------------------------------------------
   Narrow phones (iPhone SE / mini and anything at 380px or less).
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .main-content{ padding:11px; }
  .brand-logo{ height:32px; }
  .user-info strong{ font-size:12px; }
  .btn-logout{ font-size:11px; padding:0 9px; min-height:40px; }
  /* Cards go one per row here -- two no longer fit a figure like $866,516.73. */
  .summary-card{ flex:1 1 100%; }
  .form-panel{ padding:14px 12px; }
}

/* --------------------------------------------------------------------------
   Printing. The console's chrome is never part of a printed page.
   -------------------------------------------------------------------------- */
@media print{
  .header, .nav-bar, .btn, .nav-toggle{ display:none !important; }
  .main-content{ padding:0; max-width:none; }
  .form-panel{ box-shadow:none; padding:0; }
  .table-scroll{ overflow:visible; }
  .grid th{ background:#1C3742 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}