/* ==========================================================================
   PCCU COMMAND - interface refresh (Concept 1: Clean & Modern)
   Built to Joe's mockup. Loaded last, after Bootstrap 3 / AdminLTE, so it
   restyles every existing page without any view being rewritten.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --bg:#F4F6F7;          --surface:#FFFFFF;      --surface-2:#EDF1F3;
  --ink:#121A34;         --ink-2:#526571;        --ink-3:#596A75;
  --line:#E7ECF2;        --line-2:#D6DEE8;
  --brand:#00A4EF;       --brand-dark:#0077A8;   --brand-soft:#E1F4FE;
  --nav:#3C3950;         --nav-2:#4A4763;        --nav-ink:#C5C1D2;  --nav-ink-hi:#FFFFFF;
  --blue:#2563EB;        --blue-soft:#E8F1FE;
  --red:#C62828;         --red-soft:#FEECEC;
  --amber:#8A5800;       --amber-soft:#FEF4E2;
  --green:#2E9E5B;       --green-soft:#E6F5EC;
  --purple:#8B5CF6;      --purple-soft:#F1EBFE;
  --cyan:#06B6D4;        --cyan-soft:#E4F8FC;
  --pink:#EC4899;        --pink-soft:#FDECF5;
  --slate:#334155;       --slate-soft:#EAEEF3;
  --r:12px; --r-sm:8px;
  --sh:0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
  --sh-hi:0 2px 6px rgba(15,23,42,.06), 0 10px 26px rgba(15,23,42,.09);
  --sans:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Montserrat',var(--sans);
  color-scheme: light;
}

/* ---------- base ---------- */
body,.content-wrapper,.right-side{
  background:var(--bg) !important; color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.box-title{ font-family:var(--display) !important; font-weight:600 !important; color:var(--ink); text-wrap:balance; }
a{ color:var(--blue); } a:hover,a:focus{ color:var(--brand-dark); }
:focus-visible{ outline:2px solid var(--brand-dark); outline-offset:2px; }
td,.glp-kpi-value{ font-variant-numeric:tabular-nums; }

/* ---------- sidebar ---------- */
.skin-blue .main-sidebar,.main-sidebar,.left-side{ background:var(--nav) !important; }
.main-header .logo{
  background:var(--nav) !important; border-right:0 !important;
  display:flex; align-items:center; gap:9px; padding:0 16px; overflow:hidden;
}
.main-header .logo img{ max-height:30px; width:auto; }
.glp-brand{ display:flex; align-items:center; gap:9px; }
.glp-brand-mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,#0077A8,#00618F);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;
}
.glp-brand-text{ line-height:1.05; }
.glp-brand-text b{ display:block;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em; }
.glp-brand-text span{ display:block;color:var(--brand);font-size:9.5px;font-weight:600;letter-spacing:.19em; }

.glp-usercard{
  margin:12px 12px 6px; padding:11px 12px; border-radius:var(--r);
  background:var(--nav-2); display:flex; align-items:center; gap:10px;
}
.glp-usercard .av{
  width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,#00A4EF,#0071B8);
  color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;
}
.glp-usercard .nm{ color:#fff;font-weight:600;font-size:13px;line-height:1.25; }
.glp-usercard .rl{ color:var(--nav-ink);font-size:11px; }
.glp-usercard .dot{ color:var(--brand);font-size:8px;vertical-align:middle;margin-right:3px; }

.sidebar-menu .header{
  background:transparent !important; color:var(--nav-ink) !important;
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:18px 20px 7px;
}
.skin-blue .sidebar-menu>li>a,.sidebar-menu>li>a{
  color:var(--nav-ink) !important; font-weight:500; font-size:13.5px;
  padding:9px 14px; margin:1px 10px; border-radius:var(--r-sm); border-left:0 !important;
}
.skin-blue .sidebar-menu>li:hover>a,.sidebar-menu>li:hover>a{ background:var(--nav-2) !important; color:#fff !important; }
.skin-blue .sidebar-menu>li.active>a,.sidebar-menu>li.active>a{
  background:var(--brand-dark) !important; color:#fff !important; font-weight:600;
}
.sidebar-menu>li>a>.fa{ width:19px;text-align:center;font-size:14px; }
.sidebar-menu .treeview-menu{ background:transparent !important; padding-left:8px; }
.sidebar-menu .treeview-menu>li>a{ color:#8DA0B8 !important; font-size:13px; padding:7px 12px 7px 34px; }
.sidebar-menu .treeview-menu>li>a:hover{ color:#fff !important; }
.sidebar-menu .treeview-menu>li.active>a{ color:#fff !important; font-weight:600; }
.glp-help{
  margin:14px 12px 18px; padding:12px 13px; border-radius:var(--r);
  background:var(--nav-2); display:flex; align-items:center; gap:10px; color:var(--nav-ink);
}
.glp-help i{ color:var(--brand); font-size:16px; }
.glp-help b{ color:#fff; display:block; font-size:12.5px; }
.glp-help span{ font-size:11px; }

/* ---------- top bar ---------- */
.main-header .navbar,.skin-blue .main-header .navbar{
  background:var(--surface) !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important;
}
.main-header,.main-header .navbar,.main-header .logo{ height:64px;min-height:64px; }
.main-header .navbar{ margin-left:240px; }
.sidebar-mini.sidebar-collapse .main-header .navbar{ margin-left:50px; }
.main-sidebar,.left-side{ width:240px; padding-top:64px; }
.content-wrapper,.right-side,.main-footer{ margin-left:240px; }
@media (max-width:767px){ .content-wrapper,.right-side,.main-footer,.main-header .navbar{ margin-left:0; } }
.content-wrapper,.right-side{ padding-top:8px; }
.content{ padding:0 22px 26px; }
.main-header .navbar .nav>li>a{ color:var(--ink-2) !important; padding:21px 14px; }
.main-header .navbar .nav>li>a:hover{ background:var(--surface-2) !important; color:var(--ink) !important; }

.glp-search{ position:relative; float:left; margin:14px 0 0 18px; }
.glp-search input{
  width:330px;max-width:38vw;height:36px;border:1px solid var(--line-2);border-radius:9px;
  padding:0 12px 0 34px;font-size:13px;background:var(--surface-2);color:var(--ink);
}
.glp-search input:focus{ outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft); }
.glp-search .fa{ position:absolute;left:12px;top:11px;color:var(--ink-3);font-size:13px; }
.glp-bell{ position:relative; }
.glp-bell .n{
  position:absolute;top:12px;right:6px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;
  min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.glp-datechip{
  display:inline-flex;align-items:center;gap:8px;margin:14px 6px 0 0;padding:0 13px;height:36px;
  border:1px solid var(--line-2);border-radius:9px;color:var(--ink-2);font-size:13px;font-weight:500;background:var(--surface);
}
.glp-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#0077A8,#00618F);
  color:#fff;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;
}

/* ---------- cards / panels ---------- */
.box,.panel,.nav-tabs-custom{
  background:var(--surface); border:1px solid var(--line) !important; border-top-width:1px !important;
  border-radius:var(--r) !important; box-shadow:var(--sh) !important;
}
.box-header{ border-bottom:1px solid var(--line); padding:16px 18px; }
.box-body{ padding:18px; }

/* ---------- tables ---------- */
.table{ background:var(--surface); font-size:13px; }
.table>thead>tr>th{
  background:var(--surface-2); border-bottom:1px solid var(--line) !important; color:var(--ink-2);
  font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 12px; white-space:nowrap;
}
.table>tbody>tr>td{ border-top:1px solid var(--line) !important; padding:11px 12px; vertical-align:middle; color:var(--ink-2); }
.table-hover>tbody>tr:hover{ background:var(--surface-2) !important; }
.table-striped>tbody>tr:nth-of-type(odd){ background:#FBFCFE; }
.table-responsive{ border:0 !important; overflow-x:auto; }

/* ---------- buttons ---------- */
.btn{ border-radius:var(--r-sm); font-weight:600; font-size:13px; padding:7px 14px; border:1px solid transparent; }
.btn-primary,.btn-info,.btn-success{ background:var(--brand-dark) !important; border-color:var(--brand-dark) !important; color:#fff !important; }
.btn-primary:hover,.btn-info:hover,.btn-success:hover{ background:#006C9C !important; border-color:#006C9C !important; }
.btn-danger{ background:var(--red) !important; border-color:var(--red) !important; }
.btn-warning{ background:var(--amber) !important; border-color:var(--amber) !important; color:#fff !important; }
.btn-default{ background:var(--surface) !important; border-color:var(--line-2) !important; color:var(--ink-2) !important; }

/* ---------- forms ---------- */
.form-control,select,input[type=text],input[type=date],input[type=number],.chosen-single{
  border:1px solid var(--line-2) !important; border-radius:var(--r-sm) !important;
  box-shadow:none !important; color:var(--ink); min-height:36px;
}
.form-control:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-soft) !important; }
label{ font-weight:600; color:var(--ink-2); font-size:12.5px; }

/* ---------- pills ---------- */
.label,.badge{ border-radius:999px; font-weight:600; font-size:11px; padding:.34em .78em; }
.label-success,.bg-green{ background:var(--green-soft) !important; color:#176B3A !important; }
.label-warning,.bg-yellow{ background:var(--amber-soft) !important; color:#92400E !important; }
.label-danger,.bg-red{ background:var(--red-soft) !important; color:#B91C1C !important; }
.label-info,.bg-aqua,.bg-blue{ background:var(--blue-soft) !important; color:#1D4ED8 !important; }

.pagination>li>a,.pagination>li>span{ color:var(--ink-2); border-color:var(--line); }
.pagination>.active>a,.pagination>.active>span{ background:var(--brand-dark) !important; border-color:var(--brand-dark) !important; color:#fff !important; }

/* ---------- flatten the old rainbow tiles + neon filter strips ---------- */
.small-box,.info-box{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh);
}
.small-box h3,.info-box-number{ color:var(--ink) !important; font-weight:700; }
.small-box p,.info-box-text{ color:var(--ink-3) !important; }
.small-box .icon{ color:rgba(15,23,42,.05) !important; }
.column1,.column2,.column3,.column4,.column5,.column6,.column7,.column8{
  background:var(--surface-2) !important; border:1px solid var(--line) !important;
  border-radius:var(--r) !important; padding:13px 15px !important; margin-bottom:10px;
}
.main-footer{ background:var(--surface) !important; border-top:1px solid var(--line) !important; color:var(--ink-3) !important; }
.main-footer a{ color:var(--ink-3) !important; }

/* ==========================================================================
   Driver / field screens - phone first
   These run on a phone in a truck cab, often one-handed and often in gloves.
   Controls get real tap targets (Apple's 44px minimum), text stays large
   enough to read at arm's length, and nothing depends on hover.
   ========================================================================== */
@media (max-width:820px){
  body{ font-size:16px; }                       /* 16px also stops iOS zoom-on-focus */
  .content{ padding:0 14px 22px; }
  .box-body{ padding:14px; }

  .btn{ min-height:48px; padding:13px 18px; font-size:16px; border-radius:10px; }
  .btn-xs,.btn-sm{ min-height:42px; padding:10px 14px; font-size:15px; }
  .btn-block{ width:100%; }

  .form-control,select,input[type=text],input[type=number],input[type=date],
  input[type=password],input[type=tel],textarea{
    min-height:48px !important; font-size:16px !important; border-radius:10px !important;
  }
  input[type=checkbox],input[type=radio]{ width:24px; height:24px; }
  label{ font-size:14px; }

  /* DVIR-style pass/fail lists: full-width, thumb-sized, clearly separated */
  .radio,.checkbox{ padding:12px 0; border-bottom:1px solid var(--line); }
  .radio label,.checkbox label{ padding-left:32px; min-height:26px; display:block; }

  /* wide tables scroll rather than squashing the page */
  .table-responsive{ -webkit-overflow-scrolling:touch; }
  .table>tbody>tr>td,.table>thead>tr>th{ padding:13px 11px; }

  /* the sidebar is a desktop idea; on a phone the content owns the width */
  .content-wrapper,.right-side,.main-footer{ margin-left:0 !important; }
  .main-header .navbar{ margin-left:0 !important; }
  .glp-search{ display:none; }
  .glp-datechip{ display:none; }

  .glp-kpis{ grid-template-columns:1fr 1fr; gap:12px; }
  .glp-kpi{ padding:13px 14px; }
  .glp-kpi-value{ font-size:22px; }
  .glp-chip{ width:36px;height:36px;font-size:15px;border-radius:10px; }
  .glp-hello{ font-size:19px; }
}
@media (max-width:420px){
  .glp-kpis{ grid-template-columns:1fr; }
}
/* never let a tap target be smaller than the thumb that has to hit it */
@media (pointer:coarse){
  a.btn,button,input[type=submit],.pagination>li>a{ min-height:44px; }
}

/* ---------- footer ----------
   The old theme painted the footer neon green (#96E82E) on every page. It is
   a copyright line, not a call to action.                                    */
footer.footer,.footer.hor-footer,.main-footer{
  background:var(--surface) !important;
  border-top:1px solid var(--line) !important;
  color:var(--ink-3) !important;
  font-size:12.5px;
  padding:12px 18px !important;
}
footer.footer a,.footer.hor-footer a,.main-footer a{ color:var(--ink-2) !important; }

/* ---------- row action buttons ----------
   Eye/edit/delete buttons were stacking vertically and doubling row height.  */
td .btn+.btn{ margin-left:5px; }
td .btn{ display:inline-flex !important; align-items:center; justify-content:center;
         width:auto; min-width:32px; padding:6px 9px; }
.table td .btn-group{ white-space:nowrap; }

/* ==========================================================================
   Legacy markup patterns.

   These shapes are copied across dozens of views (many of them partials with
   no layout of their own), so they are corrected here by pattern rather than
   edited file by file.
   ========================================================================== */

/* "Nothing here" empty states: a centred cell holding <font color="white">,
   which rendered as white text on a grey slab. */
.RequestTable{ background:transparent !important; border:0 !important; width:100%; }
.RequestTable > tbody,
.RequestTable > tbody > tr,
.RequestTable > tbody > tr > td{ background:transparent !important; }
.RequestTable > tbody > tr > td > center{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh);
  padding:32px 24px !important; margin:4px 0 12px;
  font-size:16px !important; font-weight:600 !important; color:var(--ink-2);
}
.RequestTable center p{ margin:0; }

/* <font color="white"> is unreadable on every light surface in the refresh */
font[color="white"],
font[color="#ffffff"],
font[color="#FFFFFF"]{ color:var(--ink-2) !important; }

/* relative img/*.png header icons 404 everywhere they appear */
img[src^="img/"]{ display:none; }