/* ==================================================================
   HSECompass - the finish.

   The application underneath this file is correct and plain. Plain is
   not a virtue on a screen somebody looks at for eight hours: a register
   that reads as one flat grey sheet makes every row feel the same, and
   when everything looks the same nothing stands out - least of all the
   overdue action that needed to.

   So this layer does three things, and nothing else:

     it gives the surfaces depth, so a card reads as a card and the page
     has a foreground and a background;

     it gives the icons colour, one tone per module, so a person finds
     Permits by its shape and its colour rather than by reading every
     label in the rail;

     it gives the numbers and the states weight, so a critical badge, an
     overdue date and a headline figure are seen before they are read.

   Every colour here comes from the custom properties the company set, so
   a client who chooses burgundy gets a burgundy application rather than
   a teal one with burgundy buttons.

   Loaded after hsecompass.css. Nothing in that file is edited, which
   means this whole layer can be removed by deleting one <link>.
   ================================================================== */

:root{
  --sidebar-from:var(--primary);
  --sidebar-to:var(--primary-dark);
  --primary-glow:rgba(0,107,107,.28);
  --primary-soft:rgba(0,107,107,.10);
  --secondary-soft:rgba(201,101,74,.12);
  --ring:rgba(0,107,107,.22);

  --elev-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --elev-2:0 2px 4px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.07);
  --elev-3:0 10px 36px rgba(16,24,40,.13);
  --ease:cubic-bezier(.2,.7,.3,1);
}

body{
  background:
    radial-gradient(1200px 520px at 100% -8%, var(--primary-soft), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, var(--secondary-soft), transparent 62%),
    var(--background);
  background-attachment:fixed;
}

/* ------------------------------------------------------------------
   The rail
   ------------------------------------------------------------------ */
.sidebar{
  background:linear-gradient(170deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.06), 8px 0 28px rgba(16,24,40,.10);
  border-right:none;
}
/* A faint sheen down the rail stops a large flat block of one colour from
   looking like a painted wall. */
.sidebar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 240px at 0% 0%, rgba(255,255,255,.10), transparent 70%);
}
.sidebar-brand{
  border-bottom:1px solid rgba(255,255,255,.12);
  position:relative; z-index:1;
}
.sidebar-brand .mark{
  background:linear-gradient(145deg, var(--secondary), var(--secondary-dark));
  box-shadow:0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  border-radius:9px;
}
.sidebar-nav{position:relative; z-index:1}
.nav-section{
  color:rgba(255,255,255,.52); letter-spacing:1.1px; font-size:.65rem;
  padding-top:1.1rem;
}
.nav-item{
  margin:1px .6rem; padding:.52rem .7rem; border-radius:9px;
  border-left:none; position:relative;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,.10); transform:translateX(2px)}
.nav-item.active{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 10px rgba(0,0,0,.14);
}
/* The marker that says "you are here" - a bar, not a border, so it can be
   the accent colour whatever the rail is painted. */
.nav-item.active::before{
  content:""; position:absolute; left:-.35rem; top:50%; transform:translateY(-50%);
  width:3px; height:58%; border-radius:3px; background:var(--secondary);
  box-shadow:0 0 10px var(--secondary);
}
.nav-item svg{
  width:18px; height:18px; opacity:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.nav-item.active svg{transform:scale(1.06)}
.nav-item .count{
  background:var(--secondary); box-shadow:0 1px 4px rgba(0,0,0,.25);
  font-variant-numeric:tabular-nums;
}

/* A light rail is a different animal: dark text, and the accents have to
   carry the weight the white text used to. */
body.sb-light .sidebar{color:var(--text); box-shadow:1px 0 0 var(--border), 8px 0 24px rgba(16,24,40,.06)}
body.sb-light .sidebar::before{display:none}
body.sb-light .sidebar-brand{border-bottom:1px solid var(--border)}
body.sb-light .sidebar-brand .name{color:var(--text)}
body.sb-light .nav-section{color:var(--muted)}
body.sb-light .nav-item{color:#4A5260}
body.sb-light .nav-item:hover{background:var(--primary-light); color:var(--primary-dark)}
body.sb-light .nav-item.active{
  background:var(--primary-light); color:var(--primary-dark);
  box-shadow:inset 0 0 0 1px var(--ring);
}
body.sb-light .nav-item svg{filter:none}
body.sb-light .sidebar-nav::-webkit-scrollbar-thumb{background:var(--border)}

/* ------------------------------------------------------------------
   The top bar
   ------------------------------------------------------------------ */
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.topbar .search input{
  background:var(--background); border-radius:999px; padding-left:2.4rem;
  transition:box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.topbar .search input:focus{
  outline:none; background:#fff; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring);
}
.topbar .icon-btn{border-radius:10px; transition:background .16s var(--ease), color .16s var(--ease)}
.topbar .icon-btn:hover{background:var(--primary-light); color:var(--primary-dark)}
.topbar .user-chip .avatar{
  background:linear-gradient(145deg, var(--primary), var(--primary-dark));
  box-shadow:0 2px 8px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ------------------------------------------------------------------
   Cards and surfaces
   ------------------------------------------------------------------ */
.card{
  border-color:rgba(16,24,40,.07);
  box-shadow:var(--elev-1);
  border-radius:calc(var(--radius) + 2px);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  overflow:hidden;
}
.card:hover{box-shadow:var(--elev-2); border-color:rgba(16,24,40,.10)}
.card-head{
  background:linear-gradient(180deg, rgba(255,255,255,.9), var(--background));
  border-bottom:1px solid var(--border);
  position:relative;
}
/* A hairline of the house colour across the top of every panel. It is two
   pixels; it is also the difference between a form and a document. */
.card-head::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--secondary) 70%, transparent);
  opacity:.5;
}
.card-head h3{
  font-size:1rem; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:.5rem;
}
.card-foot{background:linear-gradient(180deg, var(--background), rgba(255,255,255,.6))}

/* ------------------------------------------------------------------
   Icons that pop

   One tinted chip per module. The glyph takes the module's own tone and
   the chip a wash of it, so the eye learns the colour long before it
   reads the word.
   ------------------------------------------------------------------ */
.page-head-icon{
  width:46px; height:46px; border-radius:14px;
  display:inline-grid; place-items:center; flex:none;
  background:linear-gradient(145deg, var(--primary-light), #fff);
  box-shadow:inset 0 0 0 1px var(--ring), 0 6px 18px rgba(16,24,40,.08);
  margin-right:.9rem;
}
.page-head-icon svg{width:23px; height:23px; fill:var(--primary)}

/* Each module gets its own tone. Semantic where it can be - red for
   incidents, green for environment - and distinct where it cannot. */
.tone-incidents,.tone-investigations{--tone:#B53B3B}
.tone-observations{--tone:#4A7B9D}
.tone-risk,.tone-jsa{--tone:#D48C2C}
.tone-permits,.tone-assurance,.tone-inspections{--tone:#7A5AA8}
.tone-capa{--tone:#2F7D6B}
.tone-assets,.tone-asset_registers{--tone:#8A6A3B}
.tone-ohs,.tone-training,.tone-health{--tone:#2E6FB7}
.tone-environment{--tone:#3A7D5C}
.tone-emergency{--tone:#C04A2B}
.tone-reports,.tone-control{--tone:#5B6472}
.tone-standards,.tone-co_standards,.tone-protocols,.tone-co_protocols{--tone:#1E5F7A}
.tone-templates,.tone-co_templates{--tone:#6B5BA8}
.tone-users,.tone-roles,.tone-platform_users,.tone-companies{--tone:#2C6E7F}
.tone-settings,.tone-audit,.tone-audit_logs,.tone-enquiries{--tone:#5B6472}
.tone-notifications{--tone:#C9654A}

.page-head-icon[class*="tone-"]{
  background:linear-gradient(145deg, color-mix(in srgb, var(--tone) 16%, #fff), #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent),
             0 6px 18px color-mix(in srgb, var(--tone) 18%, transparent);
}
.page-head-icon[class*="tone-"] svg{fill:var(--tone)}

/* Browsers without colour-mix fall back to the house colour, which is
   correct rather than merely acceptable. */
@supports not (color: color-mix(in srgb, red 10%, white)){
  .page-head-icon[class*="tone-"]{background:linear-gradient(145deg, var(--primary-light), #fff)}
}

.page-head{align-items:center}
.page-head h1{font-size:1.5rem; letter-spacing:-.02em}
.page-head .sub{margin-top:.1rem}

/* A small chip anywhere else that wants an icon to carry colour. */
.ico-chip{
  width:38px;height:38px;border-radius:11px;display:inline-grid;place-items:center;flex:none;
  background:var(--primary-light); box-shadow:inset 0 0 0 1px var(--ring);
}
.ico-chip svg{width:19px;height:19px;fill:var(--primary)}

/* ------------------------------------------------------------------
   The numbers
   ------------------------------------------------------------------ */
.kpi{
  border-color:rgba(16,24,40,.07);
  box-shadow:var(--elev-1);
  background:linear-gradient(180deg, #fff, var(--background));
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--elev-2)}
.kpi::after{
  width:100%; height:3px; bottom:auto;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}
.kpi .value{
  font-size:2rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.kpi .label{letter-spacing:.8px; color:var(--muted)}
.kpi.is-critical::after{background:linear-gradient(90deg, var(--critical), #E07A6B)}
.kpi.is-warning::after{background:linear-gradient(90deg, var(--warning), #EFC083)}
.kpi.is-success::after{background:linear-gradient(90deg, var(--success), #7FC2A2)}

/* ------------------------------------------------------------------
   Tables - the thing people actually stare at
   ------------------------------------------------------------------ */
table.data th{
  background:linear-gradient(180deg, var(--background), rgba(248,246,240,.6));
  color:#5B6472; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:2;
}
table.data tbody tr{transition:background .14s var(--ease), box-shadow .14s var(--ease)}
table.data tbody tr:nth-child(even){background:rgba(16,24,40,.015)}
table.data tbody tr:hover{
  background:var(--primary-light);
  box-shadow:inset 3px 0 0 var(--primary);
}
table.data td{border-bottom:1px solid rgba(16,24,40,.06)}
table.data td.mono,table.data td .mono{font-variant-numeric:tabular-nums}
.table-wrap{border-radius:var(--radius)}

/* ------------------------------------------------------------------
   Badges and state
   ------------------------------------------------------------------ */
.badge{
  padding:.2rem .6rem; letter-spacing:.2px;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);
  display:inline-flex; align-items:center; gap:.35rem;
}
/* The dot carries the status at a glance, before the word is read. */
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  flex:none; opacity:.85;
}
.badge-muted::before{opacity:.5}
.badge-primary{background:var(--primary-light); color:var(--primary-dark)}
.badge-info{background:rgba(74,123,157,.13); color:#2F5B77}
.badge-secondary{background:var(--secondary-light); color:var(--secondary-dark)}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn{
  border-radius:9px; letter-spacing:.1px;
  transition:transform .14s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), border-color .16s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 4px var(--ring)}
.btn-primary{
  background:linear-gradient(145deg, var(--secondary), var(--secondary-dark));
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 6px 16px var(--secondary-soft);
}
.btn-primary:hover{
  background:linear-gradient(145deg, var(--secondary-dark), var(--secondary-dark));
  box-shadow:0 2px 4px rgba(16,24,40,.12), 0 10px 22px var(--secondary-soft);
}
.btn-secondary{background:#fff; box-shadow:var(--elev-1)}
.btn-secondary:hover{background:var(--primary-light); border-color:var(--primary-dark)}
.btn-ghost{box-shadow:var(--elev-1)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary-dark)}

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=tel],input[type=search],input[type=url],select,textarea{
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring);
}
.form-section{
  display:flex; align-items:center; gap:.6rem;
  color:var(--text); font-weight:700;
}
/* A rule that runs out from the heading, so sections read as sections. */
.form-section::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
}
label{color:#3C4350}

/* ------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------ */
.alert{
  border-radius:var(--radius); box-shadow:var(--elev-1);
  border-left-width:4px; border-left-style:solid;
}
.alert-success{border-left-color:var(--success)}
.alert-error{border-left-color:var(--critical)}
.alert-info{border-left-color:var(--info)}
.alert-warning{border-left-color:var(--warning)}

/* ------------------------------------------------------------------
   Density
   ------------------------------------------------------------------ */
body.dn-compact table.data th{padding:.45rem .65rem}
body.dn-compact table.data td{padding:.42rem .65rem}
body.dn-compact .card-body{padding:.85rem}
body.dn-compact .card-head{padding:.6rem .85rem}
body.dn-compact .kpi{padding:.75rem}
body.dn-compact .kpi .value{font-size:1.6rem}
body.dn-compact .nav-item{padding:.42rem .7rem}

/* ------------------------------------------------------------------
   Movement, and the people who would rather not have any
   ------------------------------------------------------------------ */
.card,.kpi{animation:hsec-rise .28s var(--ease) both}
@keyframes hsec-rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .card,.kpi{animation:none}
  .nav-item:hover{transform:none}
}

/* Paper does not need any of this. */
@media print{
  body{background:#fff!important}
  .card,.kpi{animation:none!important; box-shadow:none!important}
  .card-head::after{display:none}
  table.data th{position:static; background:#fff!important}
}

/* ==================================================================
   The appearance picker and its preview.

   A colour is chosen by looking at it, so the preview below is a small
   working copy of the application - rail, header, figures, rows - that
   repaints as the colour changes.
   ================================================================== */
.theme-presets{display:flex;flex-wrap:wrap;gap:.6rem}
.theme-swatch{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.55rem .6rem .5rem;border:1px solid var(--border);border-radius:12px;
  background:#fff;cursor:pointer;font:inherit;min-width:92px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.theme-swatch:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}
.theme-swatch.is-on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.theme-swatch .sw{display:flex;border-radius:8px;overflow:hidden;width:60px;height:26px;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.10)}
.theme-swatch .sw i{flex:1}
.theme-swatch .nm{font-size:.74rem;font-weight:600;color:#4A5260}

.theme-preview{
  --p:#006B6B;--pd:#00504F;--pl:#E6F0F0;--s:#C9654A;--sd:#A94F38;--from:#006B6B;--to:#004F4F;
  display:grid;grid-template-columns:150px 1fr;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--elev-2);background:#fff;
  min-height:218px;
}
.theme-preview .tp-rail{background:linear-gradient(170deg,var(--from),var(--to));padding:.7rem .6rem}
.theme-preview[data-rail="light"] .tp-rail{border-right:1px solid var(--border)}
.theme-preview .tp-brand{display:flex;align-items:center;gap:.45rem;margin-bottom:.9rem}
.theme-preview .tp-brand i{width:22px;height:22px;border-radius:7px;background:var(--s);flex:none}
.theme-preview .tp-brand span{color:#fff;font-size:.78rem;font-weight:700}
.theme-preview[data-rail="light"] .tp-brand span{color:var(--text)}
.theme-preview .tp-nav{display:flex;flex-direction:column;gap:.38rem}
.theme-preview .tp-nav span{height:11px;border-radius:5px;background:rgba(255,255,255,.22)}
.theme-preview .tp-nav span.on{background:rgba(255,255,255,.5);position:relative}
.theme-preview .tp-nav span.on::before{content:"";position:absolute;left:-.6rem;top:0;bottom:0;
  width:3px;border-radius:0 3px 3px 0;background:var(--s)}
.theme-preview[data-rail="light"] .tp-nav span{background:rgba(16,24,40,.10)}
.theme-preview[data-rail="light"] .tp-nav span.on{background:var(--pl)}

.theme-preview .tp-body{padding:.9rem 1rem;background:
  radial-gradient(420px 180px at 100% -20%, var(--pl), transparent 70%), #fff}
.theme-preview .tp-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.theme-preview .tp-head i{width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(145deg,var(--pl),#fff);box-shadow:inset 0 0 0 1px var(--pl)}
.theme-preview .tp-head b{display:block;font-size:.88rem}
.theme-preview .tp-head em{font-style:normal;font-size:.72rem;color:var(--muted)}
.theme-preview .tp-btn{margin-left:auto;border:none;border-radius:8px;color:#fff;cursor:default;
  background:linear-gradient(145deg,var(--s),var(--sd));padding:.4rem .75rem;
  font:600 .76rem/1 inherit;font-family:inherit}
.theme-preview .tp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.theme-preview .tp-kpis div{border:1px solid var(--border);border-radius:9px;padding:.45rem .55rem;
  background:linear-gradient(180deg,#fff,var(--background));position:relative;overflow:hidden}
.theme-preview .tp-kpis div::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--p),var(--s))}
.theme-preview .tp-kpis b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.theme-preview .tp-kpis span{font-size:.62rem;color:var(--muted)}
.theme-preview .tp-rows{display:flex;flex-direction:column}
.theme-preview .tp-rows span{display:flex;align-items:center;gap:.5rem;font-size:.74rem;
  padding:.36rem .4rem;border-top:1px solid rgba(16,24,40,.07)}
.theme-preview .tp-rows span:first-child{border-top:none}
.theme-preview .tp-rows em{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:700;
  padding:.1rem .45rem;border-radius:999px;color:#fff}
.theme-preview .tp-rows em.c{background:var(--critical)}
.theme-preview .tp-rows em.w{background:var(--warning)}
.theme-preview .tp-rows em.o{background:var(--success)}
.theme-preview[data-density="compact"] .tp-rows span{padding:.22rem .4rem}
.theme-preview[data-density="compact"] .tp-kpis div{padding:.3rem .5rem}

@media (max-width:760px){
  .theme-preview{grid-template-columns:1fr}
  .theme-preview .tp-rail{display:flex;align-items:center;gap:.8rem}
  .theme-preview .tp-nav{flex-direction:row;flex:1}
  .theme-preview .tp-nav span{flex:1}
  .theme-preview .tp-nav span.on::before{display:none}
}

/* ==================================================================
   The brand.

   The logo is a compass: a forest-green ring, an orange east-west
   needle and a teal north. Those three colours are the application's,
   not a decoration applied to it, so the rail, the marks and the
   accents below all read from the same variables the logo does.
   ================================================================== */
:root{
  --brand-ink:#013624;      /* the wordmark green, exactly */
  --brand-teal:#07827C;     /* the north needle */
  --brand-orange:#E2611B;   /* the east-west needle and the rule */
}

/* --- the rail ----------------------------------------------------- */
.sidebar-brand{padding:0 .9rem}
.sidebar-brand .brand-link{
  display:flex; align-items:center; gap:.6rem; min-width:0;
  color:#fff; text-decoration:none; width:100%;
}
.sidebar-brand .brand-link:hover{text-decoration:none}
.sidebar-brand .mark{
  width:34px; height:34px; flex:none; background:none; box-shadow:none;
  display:grid; place-items:center; color:#fff;
}
.sidebar-brand .mark svg{width:34px; height:34px; display:block}
.sidebar-brand .name{
  display:flex; align-items:center; min-width:0; overflow:hidden;
  font-size:0;  /* the wordmark is artwork, not type */
}
.sidebar-brand .name img{height:17px; width:auto; display:block}

/* Collapsed to icons, the compass carries the brand on its own. */
body.nav-collapsed .sidebar-brand{padding:0; justify-content:center}
body.nav-collapsed .sidebar-brand .name{display:none}

/* A light rail needs the ring in ink rather than white. */
body.sb-light .sidebar-brand .mark{color:var(--brand-ink)}
body.sb-light .sidebar-brand .name img{
  content:url("../img/logo-word.png");   /* the dark wordmark */
}

/* --- sign in, register, and anything on the blank layout ---------- */
.auth-brand{display:flex; justify-content:center; margin-bottom:1.3rem}
.auth-logo{height:62px; width:auto; display:block}
@media (max-width:480px){ .auth-logo{height:50px} }

/* --- the compass as a loading mark -------------------------------- */
.brand-mark{display:inline-block; color:var(--primary)}
.brand-mark svg{width:100%; height:100%; display:block}