/* ============================================================
   Concept Communications UI standard — concept-ui.css  (v2)
   One stylesheet for every app in the concept.bz ecosystem.
   Sizes:   .sz-sm / .sz-md / .sz-lg on any component (default md)
   Mobile:  every size steps up automatically under 768px (44px min touch)
   States:  .is-on / .is-off (active / inactive), :disabled, .is-loading
   Blanks:  .btn-blank / .tile-blank / .icon-blank templates for new services
   Dynamic: <cc-button>, <cc-icon>, <cc-tile> in concept-ui.js accept
            label / icon / img / variant / size / state as attributes
   ============================================================ */
:root{
  --cc-red:#E30613; --cc-red-dark:#B00010; --cc-red-light:#FF4A4A;
  --cc-navy:#0D2233; --cc-navy2:#123A54; --cc-navy-light:#1E4A6B; --cc-blue:#1C7ED6;
  --cc-teal:#0CA678; --cc-ok:#2F9E44; --cc-warn:#F76707; --cc-err:#C92A2A;
  --cc-line:#DFE3E8; --cc-ink:#1A2B3C; --cc-mut:#6B7785; --cc-bg:#F4F6F8; --cc-card:#FFFFFF;
  --cc-focus:#A5D8FF; --cc-radius:6px; --cc-radius-tile:25%;
  --cc-on:#2F9E44; --cc-off:#A0AAB4;
  --font-heading:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Source Code Pro",Consolas,monospace;
  /* size scale — DESKTOP */
  --btn-h-sm:30px; --btn-h-md:36px; --btn-h-lg:44px;
  --btn-px-sm:12px; --btn-px-md:16px; --btn-px-lg:22px;
  --btn-fs-sm:13px; --btn-fs-md:14px; --btn-fs-lg:16px;
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --tile-sm:40px; --tile-md:56px; --tile-lg:72px;
  --badge-fs-sm:10px; --badge-fs-md:11px; --badge-fs-lg:13px;
  --nav-h-sm:32px; --nav-h-md:38px; --nav-h-lg:46px;
}
@media (max-width:768px){ :root{
  /* size scale — MOBILE: every step meets the 44px touch minimum */
  --btn-h-sm:40px; --btn-h-md:44px; --btn-h-lg:52px;
  --btn-px-sm:14px; --btn-px-md:18px; --btn-px-lg:24px;
  --btn-fs-sm:14px; --btn-fs-md:16px; --btn-fs-lg:17px;
  --icon-sm:20px; --icon-md:24px; --icon-lg:28px;
  --tile-sm:48px; --tile-md:64px; --tile-lg:80px;
  --badge-fs-sm:11px; --badge-fs-md:12px; --badge-fs-lg:14px;
  --nav-h-sm:44px; --nav-h-md:48px; --nav-h-lg:56px;
}}
/* force a scale regardless of viewport (previews, kiosks, TV) */
.cc-mobile{ --btn-h-sm:40px;--btn-h-md:44px;--btn-h-lg:52px;--btn-px-sm:14px;--btn-px-md:18px;--btn-px-lg:24px;--btn-fs-sm:14px;--btn-fs-md:16px;--btn-fs-lg:17px;--icon-sm:20px;--icon-md:24px;--icon-lg:28px;--tile-sm:48px;--tile-md:64px;--tile-lg:80px;--badge-fs-sm:11px;--badge-fs-md:12px;--badge-fs-lg:14px;--nav-h-sm:44px;--nav-h-md:48px;--nav-h-lg:56px }
.cc-desktop{ --btn-h-sm:30px;--btn-h-md:36px;--btn-h-lg:44px;--btn-px-sm:12px;--btn-px-md:16px;--btn-px-lg:22px;--btn-fs-sm:13px;--btn-fs-md:14px;--btn-fs-lg:16px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--tile-sm:40px;--tile-md:56px;--tile-lg:72px;--badge-fs-sm:10px;--badge-fs-md:11px;--badge-fs-lg:13px;--nav-h-sm:32px;--nav-h-md:38px;--nav-h-lg:46px }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;box-sizing:border-box;
  height:var(--btn-h-md);padding:0 var(--btn-px-md);font:600 var(--btn-fs-md)/1 var(--font-body);
  border-radius:var(--cc-radius);border:1px solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:filter .12s,background .12s,opacity .12s;position:relative;-webkit-tap-highlight-color:transparent}
.btn.sz-sm{height:var(--btn-h-sm);padding:0 var(--btn-px-sm);font-size:var(--btn-fs-sm)}
.btn.sz-lg{height:var(--btn-h-lg);padding:0 var(--btn-px-lg);font-size:var(--btn-fs-lg)}
.btn .icon,.btn cc-icon,.btn img{width:var(--icon-md);height:var(--icon-md);flex:0 0 auto}
.btn.sz-sm .icon,.btn.sz-sm cc-icon,.btn.sz-sm img{width:var(--icon-sm);height:var(--icon-sm)}
.btn.sz-lg .icon,.btn.sz-lg cc-icon,.btn.sz-lg img{width:var(--icon-lg);height:var(--icon-lg)}
.btn-icon{padding:0;width:var(--btn-h-md)} .btn-icon.sz-sm{width:var(--btn-h-sm)} .btn-icon.sz-lg{width:var(--btn-h-lg)}
.btn-block{display:flex;width:100%}
.btn:focus-visible{outline:2px solid var(--cc-focus);outline-offset:2px}
.btn-primary{background:linear-gradient(180deg,var(--cc-navy-light),var(--cc-navy));color:#fff;border-color:#0A1A28;box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-accent{background:linear-gradient(180deg,var(--cc-red-light),var(--cc-red) 55%,var(--cc-red-dark));color:#fff;border-color:var(--cc-red-dark);box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-blue{background:linear-gradient(180deg,#339AF0,var(--cc-blue));color:#fff;border-color:#1864AB;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-teal{background:linear-gradient(180deg,#20C997,var(--cc-teal));color:#fff;border-color:#099268;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-success{background:linear-gradient(180deg,#40C057,var(--cc-ok));color:#fff;border-color:#2B8A3E;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-warning{background:linear-gradient(180deg,#FFA94D,var(--cc-warn));color:#fff;border-color:#D9480F;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-danger{background:linear-gradient(180deg,#F03E3E,var(--cc-err));color:#fff;border-color:#A61E1E;box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-secondary{background:linear-gradient(180deg,#FFFFFF,#EDF0F3);color:var(--cc-ink);border-color:#C9D1DA;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.btn-tint-navy{background:#DEE7EF;color:var(--cc-navy);border-color:#C3D1DD}
.btn-tint-red{background:#FFE3E3;color:#B00010;border-color:#FFC1C1}
.btn-tint-blue{background:#D0EBFF;color:#1547A0;border-color:#A5D8FF}
.btn-tint-green{background:#D3F9D8;color:#1B6E2E;border-color:#B2F2BB}
.btn-tint-amber{background:#FFF3BF;color:#8A5A00;border-color:#FFE08A}
.btn-outline-red{background:#fff;color:var(--cc-red);border:1.5px solid var(--cc-red)}
.btn-ghost{background:transparent;color:var(--cc-navy)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn:hover{filter:brightness(1.08)} .btn:active{filter:brightness(.92);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}
.btn-ghost:hover{background:rgba(13,34,51,.06);filter:none} .btn-ghost-light:hover{background:rgba(255,255,255,.12);filter:none}
.btn:disabled,.btn.is-disabled{background:#F1F3F5;color:#A0AAB4;border-color:#E5E9ED;cursor:not-allowed;filter:none;box-shadow:none}
/* ON / OFF (toggle buttons, filters, feature switches) */
.btn.is-on::before,.btn.is-off::before{content:"";width:.55em;height:.55em;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.btn.is-on::before{background:var(--cc-on)}
.btn.is-off{opacity:.55;filter:grayscale(.6)} .btn.is-off::before{background:var(--cc-off)}
.btn.is-off:hover{opacity:.8}
.btn[aria-pressed="true"]{box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:1em;height:1em;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:ccspin .7s linear infinite}
@keyframes ccspin{to{transform:rotate(360deg)}}
/* blank template — dashed slot for a service that doesn't exist yet */
.btn-blank{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#F4F6F8 6px,#F4F6F8 12px);color:var(--cc-mut);border:1.5px dashed #B8C2CC}
.btn-blank .slot{font-style:italic}
.btn-group{display:inline-flex} .btn-group .btn{border-radius:0} .btn-group .btn:first-child{border-radius:var(--cc-radius) 0 0 var(--cc-radius)} .btn-group .btn:last-child{border-radius:0 var(--cc-radius) var(--cc-radius) 0;border-left-color:rgba(255,255,255,.3)}
.btn-group cc-button:first-child .btn{border-radius:var(--cc-radius) 0 0 var(--cc-radius)} .btn-group cc-button:last-child .btn{border-radius:0 var(--cc-radius) var(--cc-radius) 0;border-left-color:rgba(255,255,255,.3)}

/* ---------- icons ---------- */
.icon{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:0 0 auto}
.icon.sz-sm{width:var(--icon-sm);height:var(--icon-sm)} .icon.sz-lg{width:var(--icon-lg);height:var(--icon-lg);stroke-width:1.5}
.icon.is-on{color:var(--cc-navy)} .icon.is-off{color:var(--cc-off);opacity:.6}
.icon-wrap{position:relative;display:inline-flex}
.icon-wrap.is-on::after,.icon-wrap.is-off::after{content:"";position:absolute;right:-2px;top:-2px;width:8px;height:8px;border-radius:50%;border:2px solid #fff}
.icon-wrap.is-on::after{background:var(--cc-on)} .icon-wrap.is-off::after{background:var(--cc-off)}
.icon-blank{stroke-dasharray:3 2;color:#B8C2CC}

/* ---------- app tiles ---------- */
.tile{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative;
  width:var(--tile-md);height:var(--tile-md);border-radius:var(--cc-radius-tile);color:#fff;border:1.5px solid #fff;
  background:linear-gradient(180deg,var(--cc-red-light),var(--cc-red) 50%,var(--cc-red-dark));box-shadow:0 3px 6px rgba(0,0,0,.28);cursor:pointer}
.tile.sz-sm{width:var(--tile-sm);height:var(--tile-sm)} .tile.sz-lg{width:var(--tile-lg);height:var(--tile-lg)}
.tile .icon,.tile img,.tile cc-icon{width:54%;height:54%;stroke-width:1.85}
.tile-navy{background:linear-gradient(180deg,var(--cc-navy-light),var(--cc-navy))}
.tile-blue{background:linear-gradient(180deg,#339AF0,var(--cc-blue))} .tile-teal{background:linear-gradient(180deg,#20C997,var(--cc-teal))}
.tile-green{background:linear-gradient(180deg,#40C057,var(--cc-ok))} .tile-amber{background:linear-gradient(180deg,#FFA94D,var(--cc-warn))}
.tile-purple{background:linear-gradient(180deg,#9775FA,#7048E8)} .tile-grey{background:linear-gradient(180deg,#ADB5BD,#868E96)}
.tile.is-off{background:linear-gradient(180deg,#D5DAE0,#B8C2CC);box-shadow:none;color:#F4F6F8}
.tile.is-on::after,.tile.is-off::after{content:"";position:absolute;right:-3px;top:-3px;width:22%;height:22%;min-width:10px;min-height:10px;border-radius:50%;border:2px solid #fff}
.tile.is-on::after{background:var(--cc-on)} .tile.is-off::after{background:var(--cc-off)}
.tile-blank{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#F4F6F8 6px,#F4F6F8 12px);border:2px dashed #B8C2CC;color:#B8C2CC;box-shadow:none}
.tile-label{display:flex;flex-direction:column;align-items:center;gap:6px;width:calc(var(--tile-md) + 16px);font:12px/1.2 var(--font-body);color:var(--cc-ink);text-align:center}
.tile-label.is-off{color:var(--cc-mut)}
.tile-badge{position:absolute;left:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cc-red);color:#fff;font:700 11px/18px var(--font-body);border:2px solid #fff}

/* ---------- badges, chips, ids ---------- */
.badge{display:inline-block;padding:.3em .9em;border-radius:20px;font:700 var(--badge-fs-md)/1.4 var(--font-body)}
.badge.sz-sm{font-size:var(--badge-fs-sm)} .badge.sz-lg{font-size:var(--badge-fs-lg)}
.badge-proposal{background:#FFE8CC;color:#A04000} .badge-approved{background:#D3F9D8;color:#1B6E2E} .badge-ordered{background:#D0EBFF;color:#1547A0}
.badge-installed{background:#E5DBFF;color:#5A3FB0} .badge-closed{background:#E9ECEF;color:#495057} .badge-overdue{background:#FFE3E3;color:#C92A2A}
.badge-on{background:#D3F9D8;color:#1B6E2E} .badge-off{background:#E9ECEF;color:#868E96}
.chip{display:inline-flex;align-items:center;gap:6px;height:calc(var(--btn-h-sm) - 2px);padding:0 10px 0 8px;border-radius:20px;background:#fff;border:1px solid var(--cc-line);font:var(--btn-fs-sm) var(--font-body);color:var(--cc-ink);cursor:pointer}
.chip.is-on{background:#DEE7EF;border-color:var(--cc-navy);color:var(--cc-navy);font-weight:600} .chip.is-off{opacity:.55}
.jobid{font:500 12px var(--font-mono);color:var(--cc-navy);background:var(--cc-bg);padding:3px 8px;border-radius:4px}

/* ---------- switch ---------- */
.switch{position:relative;display:inline-block;width:2.6em;height:1.5em;font-size:var(--btn-fs-md);flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:#B8C2CC;border-radius:1em;transition:.15s;cursor:pointer}
.switch .track::before{content:"";position:absolute;width:1.1em;height:1.1em;left:.2em;top:.2em;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked+.track{background:var(--cc-on)} .switch input:checked+.track::before{transform:translateX(1.1em)}
.switch input:focus-visible+.track{outline:2px solid var(--cc-focus)}

/* ---------- header, sidebar, tabs, bottom nav (mobile) ---------- */
.cc-header{display:flex;align-items:center;gap:12px;min-height:var(--nav-h-lg);padding:8px 16px;background:linear-gradient(180deg,var(--cc-navy),var(--cc-navy2));color:#fff;font-family:var(--font-body)}
.cc-sidebar{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--cc-navy)}
.cc-sidebar a{display:flex;align-items:center;gap:10px;min-height:var(--nav-h-md);padding:0 10px;border-radius:6px;font:var(--btn-fs-md) var(--font-body);color:rgba(255,255,255,.85);text-decoration:none}
.cc-sidebar a:hover{background:rgba(255,255,255,.08);color:#fff} .cc-sidebar a.active,.cc-sidebar a.is-on{background:rgba(255,255,255,.12);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--cc-red)}
.cc-sidebar a.is-off{opacity:.4}
.cc-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--cc-line);font:var(--btn-fs-md) var(--font-body)}
.cc-tabs a{flex:0 0 auto;min-height:var(--nav-h-md);display:inline-flex;align-items:center;padding:0 14px;color:var(--cc-mut);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.cc-tabs a.active,.cc-tabs a.is-on{color:var(--cc-ink);font-weight:600;border-bottom-color:var(--cc-red)}
.cc-bottomnav{display:none}
@media (max-width:768px){
  .cc-sidebar{display:none}
  .cc-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;background:#fff;border-top:1px solid var(--cc-line);z-index:50;padding-bottom:env(safe-area-inset-bottom)}
  .btn-mobile-block{display:flex;width:100%}
}
.cc-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:11px var(--font-body);color:var(--cc-mut);text-decoration:none}
.cc-bottomnav a.active,.cc-bottomnav a.is-on{color:var(--cc-red)}
.cc-bottomnav .icon{width:24px;height:24px}
/* ---------- layout helpers ---------- */
.cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cc-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 8px;justify-items:center}
@media (max-width:768px){ .cc-tile-grid{grid-template-columns:repeat(4,1fr)} }