/* Avisence intranet, same design system as avisence.com / contact / verify (navy / sky / red, Montserrat) */
:root {
  --navy: #07131f; --navy-mid: #0b1e30; --navy-dark: #050e18;
  --red: #C8102E; --sky: #5BC8E8; --white: #fff;
  --ok: #2fbf71; --warn: #f2a33a; --bad: #e8435a;
  --border-dark: rgba(91,200,232,0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--navy); }
body {
  font-family: 'Montserrat', sans-serif; background: var(--navy); color: var(--white);
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }
a { color: var(--sky); }
svg { flex: none; }

/* ═══ Texture + glows ═══ */
.tex-dark {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(91,200,232,0.22) 1.5px, transparent 1.5px),
    repeating-linear-gradient(-50deg, transparent, transparent 35px, rgba(91,200,232,0.06) 35px, rgba(91,200,232,0.06) 36px);
  background-size: 26px 26px, 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 100%);
}
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow-1 { top: -220px; right: -160px; width: 750px; height: 750px; background: radial-gradient(circle, rgba(91,200,232,0.09) 0%, transparent 65%); }
.glow-2 { bottom: -220px; left: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(200,16,46,0.08) 0%, transparent 65%); }

/* ═══ Navbar ═══ */
.topbar {
  position: sticky; top: 0; z-index: 50; height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 44px; background: rgba(5,14,24,0.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-dark);
}
.brand-link { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.nav-logo { height: 40px; width: auto; flex: none; display: block; }
.nav-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); padding-left: 14px; border-left: 1px solid var(--border-dark); white-space: nowrap;
}
.btn-account {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
  border: 2px solid var(--sky); border-radius: 5px; color: var(--sky); background: transparent; text-decoration: none;
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background .2s, color .2s;
}
.btn-account:hover { background: var(--sky); color: var(--navy); }
.btn-account svg { width: 15px; height: 15px; }
.userbar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who-chip { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.who-chip:hover .who-name { color: var(--sky); }
.who-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.mini-av {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #163a66, #0b1e30); border: 1.5px solid rgba(91,200,232,0.45);
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: #fff;
}
.mini-av.lg { width: 48px; height: 48px; font-size: 16px; }

/* ═══ Shared type + buttons ═══ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--sky); }
.sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 12px;
}
.sec-label::before { content: ''; width: 22px; height: 2px; background: var(--sky); }
h1 em { font-style: italic; color: var(--sky); }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px; background: var(--red); color: #fff; border: 0; border-radius: 5px;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: background .2s, transform .2s;
}
.btn-primary:hover { background: #a50d25; transform: translateY(-1px); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3); border-radius: 5px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--sky); color: var(--sky); }
.btn-mini {
  padding: 7px 11px; border-radius: 5px; border: 1.5px solid rgba(91,200,232,0.4); background: transparent; color: var(--sky);
  font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.btn-mini:hover { background: rgba(91,200,232,0.12); }
.btn-mini.danger { border-color: rgba(232,67,90,0.5); color: #ff9aa8; }
.btn-mini.danger:hover { background: rgba(232,67,90,0.14); }

/* ═══ Hero / page section ═══ */
.hero {
  /* clip, not hidden: hidden would make this a scroll container, so sticky panels inside wouldn't stick */
  position: relative; overflow: hidden; overflow: clip; flex: 1;
  padding: 72px 44px 88px;
  background: linear-gradient(140deg, #030c15 0%, #07131f 50%, #0a1a2e 100%);
}
.hero-grid, .wrap, .solo { position: relative; z-index: 2; }
.hero-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start;
}
.hero-copy { padding-top: 24px; }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 62px); font-weight: 900; font-style: italic;
  line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px;
}
.hero-slogan { font-size: 15px; font-weight: 700; font-style: italic; color: rgba(91,200,232,0.75); letter-spacing: 0.04em; margin-bottom: 20px; }
.hero-desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.78; max-width: 560px; margin-bottom: 32px; }

.hero-page { padding-top: 48px; }
.hero-page h1 { font-size: clamp(30px, 3.8vw, 48px); }
.wrap { max-width: 1200px; margin: 0 auto; }
.crumb { display: table; margin-bottom: 22px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: rgba(255,255,255,0.55); }
.crumb:hover { color: var(--sky); }

.client-note {
  display: flex; gap: 14px; align-items: flex-start; max-width: 540px; padding: 18px 20px;
  border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(7,19,31,0.75);
}
.client-note svg { width: 22px; height: 22px; color: var(--sky); margin-top: 2px; }
.client-note p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.62); }
.client-note b { color: #fff; }

.panel {
  position: relative; background: rgba(11,30,48,0.86); border: 1px solid var(--border-dark);
  border-radius: 12px; padding: 38px 34px 30px; backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.38);
}
.panel::before { content: ''; position: absolute; top: 0; left: 34px; right: 34px; height: 3px; background: linear-gradient(90deg, var(--red) 0 46%, var(--sky) 46% 100%); }
.panel h2 { font-size: 28px; font-weight: 900; margin-bottom: 18px; }
.panel-narrow { max-width: 520px; }
.panel-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; }
.panel-note svg { width: 15px; height: 15px; margin-top: 1px; color: rgba(91,200,232,0.7); }

/* ═══ Forms ═══ */
.form { display: flex; flex-direction: column; gap: 6px; }
.form label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 12px; }
.form label:first-of-type { margin-top: 0; }
.form .opt { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: rgba(255,255,255,0.38); }
/* Text boxes only: checkboxes and radios keep the browser's own drawing (or they can't be ticked visibly). */
.form input:not([type=checkbox]):not([type=radio]):not([type=range]), .form select, .form textarea {
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  padding: 14px 16px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.25);
  background: rgba(5,14,24,0.72); color: #fff; width: 100%; -webkit-appearance: none; appearance: none;
}
.form select {
  background: rgba(5,14,24,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BC8E8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.form select option { background: var(--navy-mid); }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,0.3); font-weight: 500; }
.form textarea { resize: vertical; font-weight: 500; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(91,200,232,0.16); }
.form .btn-primary { margin-top: 24px; width: 100%; }
.hint { font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.55; }

.alert { margin-bottom: 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.alert-error { background: rgba(232,67,90,0.12); border: 1px solid rgba(232,67,90,0.35); color: #ff9aa8; }
.alert-ok { background: rgba(47,191,113,0.1); border: 1px solid rgba(47,191,113,0.35); color: #9fe6bf; }
.alert-ok b { color: #fff; }
.temp {
  display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 5px; background: rgba(5,14,24,0.8);
  border: 1px solid rgba(47,191,113,0.4); color: #fff; font-size: 15px; letter-spacing: 0.06em; user-select: all;
}

/* ═══ Home tiles ═══ */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tile {
  position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 24px 22px;
  background: rgba(11,30,48,0.82); border: 1px solid var(--border-dark); border-radius: 12px;
  color: #fff; text-decoration: none; transition: border-color .2s, transform .2s, background .2s;
}
a.tile:hover { border-color: rgba(91,200,232,0.55); background: rgba(14,38,60,0.9); transform: translateY(-2px); }
.tile-icon {
  flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border-dark); background: rgba(91,200,232,0.08); color: var(--sky);
}
.tile-icon svg { width: 22px; height: 22px; }
.tile-body { flex: 1; min-width: 0; }
.tile-body b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.tile-body span { display: block; font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.55; }
.tile-go { font-size: 18px; font-weight: 700; color: var(--sky); opacity: .7; transition: transform .2s, opacity .2s; }
a.tile:hover .tile-go { opacity: 1; transform: translateX(3px); }
.tile .tag {
  position: absolute; top: 12px; right: 44px; padding: 2px 8px; border-radius: 20px; background: rgba(200,16,46,0.18);
  border: 1px solid rgba(200,16,46,0.45); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ff9aa8;
}
.tile-soon { border-style: dashed; background: transparent; }
.tile-soon .tile-icon { color: rgba(255,255,255,0.4); background: transparent; }

/* ═══ Tables ═══ */
.split { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.82); }
.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data th {
  text-align: left; padding: 14px 16px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); border-bottom: 1px solid var(--border-dark); white-space: nowrap;
}
.data td { padding: 14px 16px; border-bottom: 1px solid rgba(91,200,232,0.08); vertical-align: middle; color: rgba(255,255,255,0.78); }
.data tr:last-child td { border-bottom: 0; }
.data td b { display: block; color: #fff; font-weight: 700; }
.sub { display: block; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.nowrap { white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap;
  background: rgba(91,200,232,0.12); color: var(--sky); border: 1px solid rgba(91,200,232,0.3);
}
.pill-ok { background: rgba(47,191,113,0.12); color: #7fe0ad; border-color: rgba(47,191,113,0.35); }
.pill-warn { background: rgba(242,163,58,0.12); color: #f7c47e; border-color: rgba(242,163,58,0.35); }
.pill-bad { background: rgba(232,67,90,0.12); color: #ff9aa8; border-color: rgba(232,67,90,0.35); }

/* ═══ Team directory ═══ */
.people { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.person {
  display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.82);
}
.person > span:last-child { min-width: 0; }
.person b { display: block; font-size: 15px; font-weight: 800; }
.person span span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.person a { display: block; font-size: 12.5px; margin-top: 4px; text-decoration: none; overflow-wrap: anywhere; }

.solo { max-width: 640px; margin: 40px auto; text-align: center; }
.solo .hero-desc { margin: 0 auto 30px; }

/* ═══ Footer ═══ */
.site-foot { background: #030d1a; border-top: 1px solid var(--border-dark); }
.foot-bottom {
  max-width: 1200px; margin: 0 auto; padding: 22px 44px 26px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.32);
}
.foot-bottom a { color: rgba(255,255,255,0.32); text-decoration: none; }
.foot-bottom a:hover { color: var(--sky); }

/* ═══ Responsive ═══ */
@media (max-width: 1440px) {
  .split { grid-template-columns: 1fr; }
  .split .panel { max-width: 520px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy { padding-top: 0; }
  .who-name { display: none; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 16px; height: 60px; }
  .nav-logo { height: 32px; }
  .btn-account { padding: 7px 12px; font-size: 11px; }
  .userbar .btn-account span { display: none; }   /* Sign out becomes an icon button */
  .hero { padding: 32px 16px 56px; }
  .panel { padding: 30px 20px 22px; }
  .panel::before { left: 20px; right: 20px; }
  .tiles { grid-template-columns: 1fr; }
  .foot-bottom { padding: 16px 16px 24px; }
}
@media (max-width: 400px) {
  .nav-tag { display: none; }
}

/* ═══ Microsoft 365 sign-in ═══ */
.btn-ms {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 15px 20px;
  background: #fff; color: #1b1b1b; border: 0; border-radius: 5px; text-decoration: none;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; transition: background .2s, transform .2s;
}
.btn-ms:hover { background: #eef3f7; transform: translateY(-1px); }
.btn-ms svg { width: 20px; height: 20px; }
.ms-hint { margin-top: 10px; text-align: center; }
.divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); text-align: center; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-dark); }
.form .btn-outline { margin-top: 20px; width: 100%; font-family: inherit; cursor: pointer; }
.pw-alt { margin-top: 22px; border-top: 1px solid var(--border-dark); padding-top: 16px; }
.pw-alt summary { cursor: pointer; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55); }
.pw-alt summary:hover { color: var(--sky); }
.pw-alt[open] summary { margin-bottom: 16px; }
.account-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.account-grid .panel { flex: 1 1 380px; }
.panel-text { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.7; margin-bottom: 22px; }
.panel h2 .ms-mark { width: 22px; height: 22px; vertical-align: -2px; margin-right: 6px; }

/* ═══ Procurement ═══ */
.tiles-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 40px; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.h2 { font-size: 22px; font-weight: 900; }
.search input {
  width: min(340px, 100%); padding: 11px 14px 11px 40px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.25); color: #fff;
  background: rgba(5,14,24,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BC8E8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center / 16px;
  font: 600 14px 'Montserrat', sans-serif;
}
.search input:focus { outline: none; border-color: var(--sky); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { padding: 7px 13px; border-radius: 20px; border: 1px solid var(--border-dark); color: rgba(255,255,255,0.7); text-decoration: none; font-size: 12px; font-weight: 700; }
.chip span { color: var(--sky); margin-left: 3px; }
.chip:hover { border-color: rgba(91,200,232,0.5); color: #fff; }
.chip.on { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.chip.on span { color: var(--navy); }
.empty { padding: 26px; border: 1px dashed var(--border-dark); border-radius: 12px; color: rgba(255,255,255,0.55); text-align: center; font-size: 14px; }
.data .num { text-align: right; white-space: nowrap; }
.doc-link { font-weight: 800; text-decoration: none; white-space: nowrap; }
.sub-cell { font-size: 12.5px; color: rgba(255,255,255,0.55); }

/* Document form */
.docform { display: flex; flex-direction: column; gap: 18px; }
.form-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px; align-items: start; }
.form-sec { border: 1px solid var(--border-dark); padding: 30px 26px 24px; min-width: 0; }
.form-sec legend { float: left; width: 100%; margin-bottom: 14px; }
.fgrid { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-wide { grid-column: 1 / -1; }
.fld label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.fld .opt { font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: rgba(255,255,255,0.35); }
.docform input:not([type=checkbox]):not([type=radio]), .docform textarea, .docform select {
  width: 100%; font: 600 14px/1.45 'Montserrat', sans-serif; color: #fff; padding: 10px 12px; border-radius: 6px;
  border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); -webkit-appearance: none; appearance: none;
}
.docform textarea { resize: vertical; font-weight: 500; }
.docform select {
  background: rgba(5,14,24,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BC8E8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
}
.docform select option { background: var(--navy-mid); }
.docform input::placeholder, .docform textarea::placeholder { color: rgba(255,255,255,0.28); font-weight: 500; }
.docform input:focus, .docform textarea:focus, .docform select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(91,200,232,0.14); }
.docform input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.docform .num { text-align: right; }

.items-wrap { overflow-x: auto; margin: 0 -6px; }
.items { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 6px 6px; table-layout: fixed; }
.items th { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: left; padding: 0 2px; }
.items th.num { text-align: right; }
.items input { padding: 9px 10px; font-size: 13.5px; }
.items .line-total { font-size: 13.5px; font-weight: 700; white-space: nowrap; padding-right: 4px; color: rgba(255,255,255,0.85); }
.w4 { width: 4%; } .w6 { width: 6%; } .w7 { width: 7%; } .w8 { width: 8%; } .w9 { width: 9%; } .w10 { width: 10%; }
.w11 { width: 11%; } .w12 { width: 12%; } .w13 { width: 13%; } .w14 { width: 14%; } .w16 { width: 16%; } .w24 { width: 24%; } .w30 { width: 30%; }
.row-del { width: 32px; height: 36px; border-radius: 6px; border: 1px solid rgba(232,67,90,0.35); background: transparent; color: #ff9aa8; font-size: 18px; cursor: pointer; }
.row-del:hover { background: rgba(232,67,90,0.14); }
.add-row { margin-top: 8px; }
.form-totals { margin: 18px 0 0 auto; width: min(100%, 380px); display: grid; gap: 8px; }
.form-totals > div { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 12px; font-size: 13px; }
.form-totals label { font-size: 13px; color: rgba(255,255,255,0.7); }
.form-totals b { text-align: right; font-size: 15px; }
.form-totals input { padding: 8px 10px; font-size: 13.5px; }
.form-totals .grand { border-top: 1px solid var(--border-dark); padding-top: 10px; font-weight: 800; font-size: 14px; }
.form-totals .grand b { color: var(--sky); font-size: 18px; }
.form-totals .hint { margin-top: 4px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-actions .btn-outline { font-family: inherit; }

/* Document page */
.crumb-up { margin-bottom: 18px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.doc-actions form { display: contents; }
.doc-actions .btn-primary, .doc-actions .btn-outline { padding: 11px 18px; font-size: 12px; font-family: inherit; cursor: pointer; }
.doc-actions .btn-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.btn-outline.danger { border-color: rgba(232,67,90,0.5); color: #ff9aa8; }
.btn-outline.danger:hover { border-color: #ff9aa8; color: #fff; }
.spacer { flex: 1; }
.doc-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.doc-info a { font-weight: 700; }
.doc-scroll { overflow-x: auto; padding: 4px 0 12px; }
.doc-scroll .doc { box-shadow: 0 30px 80px rgba(0,0,0,0.38); border-radius: 2px; }

@media (max-width: 640px) {
  .fgrid { grid-template-columns: 1fr; }
  .form-sec { padding: 26px 16px 18px; }
  .spacer { display: none; }
}

/* ═══ E-signatures & PO approval ═══ */
.sign-panel input, .sign-panel textarea, .sig-form input:not([type=hidden]), .approve-panel textarea {
  width: 100%; font: 600 14px/1.45 'Montserrat', sans-serif; color: #fff; padding: 11px 12px; border-radius: 6px;
  border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72);
}
.sign-panel input:focus, .sign-panel textarea:focus, .sig-form input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(91,200,232,0.14); }
.fld-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 6px; }
.sign-panel { margin-bottom: 20px; max-width: 760px; }
.sign-panel.done { padding: 26px 30px 20px; }
.sign-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.sign-row .fld { flex: 1 1 260px; }
.sign-row .btn-primary { padding: 13px 22px; }
.sig-list { list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: rgba(255,255,255,0.75); }
.sig-list b { color: var(--sky); margin-right: 6px; }
.reject-box { margin-top: 16px; border-top: 1px solid var(--border-dark); padding-top: 14px; }
.reject-box summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.6); }
.reject-box summary:hover { color: #ff9aa8; }
.reject-box form { margin-top: 12px; max-width: 520px; }
.reject-box .btn-outline { margin-top: 10px; font-family: inherit; cursor: pointer; }

.approve-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 24px; align-items: start; }
.approve-panel { position: sticky; top: 90px; }
.approve-form .btn-primary { margin-top: 16px; width: 100%; }
@media (max-width: 1100px) { .approve-grid { grid-template-columns: 1fr; } .approve-panel { position: static; } }

.sig-current { max-width: 760px; margin-bottom: 20px; }
.sig-paper { background: #fff; border-radius: 8px; padding: 14px 18px; display: table; margin-bottom: 4px; }
.sig-paper img { display: block; max-height: 90px; max-width: 100%; }
.sig-form { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.sig-tabs { display: flex; gap: 8px; }
.sig-tabs .chip { font-family: inherit; cursor: pointer; background: transparent; }
.sig-tabs .chip.on { background: var(--sky); }
.sig-pad { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; background: #fff; border-radius: 8px; touch-action: none; cursor: crosshair; }
.sig-name { max-width: 600px; margin-bottom: 10px; }
.sig-pw { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sig-pw .fld label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.sig-form .btn-primary { align-self: flex-start; }
.linkish { background: none; border: 0; padding: 0; color: var(--sky); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.sig-file { max-width: 600px; padding: 9px !important; font-size: 13px !important; cursor: pointer; }
.sig-file::file-selector-button { margin-right: 12px; padding: 7px 12px; border: 0; border-radius: 5px; background: var(--sky); color: var(--navy); font: 800 11px 'Montserrat', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13px; color: rgba(255,255,255,0.75); cursor: pointer; }
.check input { width: 16px !important; height: 16px; padding: 0 !important; accent-color: var(--sky); }
#sig-upload-msg:empty { display: none; }

/* ═══ Corporate photos & user page ═══ */
.av-img { object-fit: cover; padding: 0; background: #0b1e30; }
.mini-av.md { width: 40px; height: 40px; font-size: 13px; }
.mini-av.xl { width: 64px; height: 64px; font-size: 22px; font-style: normal; vertical-align: middle; }
.mini-av.xxl { width: 112px; height: 112px; font-size: 36px; border-width: 2px; }
.hero h1 .mini-av.xl { display: inline-grid; margin-right: 14px; transform: translateY(-4px); }
.hero h1 img.mini-av.xl { display: inline-block; }
.user-cell { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.user-cell:hover b { color: var(--sky); }
.user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.user-grid .panel { display: flex; flex-direction: column; gap: 12px; }
.photo-row { display: flex; gap: 20px; align-items: center; }
.photo-row .panel-text { margin-bottom: 10px; }
.photo-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-dark); padding-top: 16px; }
.photo-form .btn-primary, .user-grid .sig-form .btn-primary { align-self: flex-start; }
.photo-preview img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sky); }
#photo-msg:empty { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.facts { display: grid; gap: 8px; margin-bottom: 6px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(91,200,232,0.08); padding-bottom: 8px; font-size: 13.5px; }
.facts dt { color: rgba(255,255,255,0.55); }
.facts dd { font-weight: 700; text-align: right; }
.user-grid .sig-form { border-top: 1px solid var(--border-dark); padding-top: 16px; }
.account-grid .sig-paper { margin-bottom: 12px; }
@media (max-width: 640px) { .photo-row { flex-direction: column; align-items: flex-start; } }
.photo-editor { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.photo-view { width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--sky); cursor: grab; touch-action: none; background: #fff; }
.photo-view:active { cursor: grabbing; }
.zoom-row { display: flex; align-items: center; gap: 10px; width: 200px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); }
.zoom-row input { flex: 1; accent-color: var(--sky); padding: 0 !important; border: 0 !important; background: none !important; }

/* ═══ Team directory & org chart ═══ */
.sync-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--border-dark); border-radius: 10px; font-size: 13px; color: rgba(255,255,255,0.65); background: rgba(11,30,48,0.6); }
.people li { list-style: none; }
a.person { color: #fff; text-decoration: none; transition: border-color .2s, transform .2s; height: 100%; }
a.person:hover { border-color: rgba(91,200,232,0.55); transform: translateY(-2px); }
.person .dept { color: var(--sky) !important; font-size: 11.5px !important; font-weight: 700; letter-spacing: 0.03em; }
.h3 { font-size: 16px; font-weight: 800; margin: 28px 0 6px; }
.mini-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 10px; color: #fff; text-decoration: none; margin-bottom: 8px; }
.mini-person:hover { border-color: rgba(91,200,232,0.5); }
.mini-person b { display: block; font-size: 14px; }
.mini-person span span { display: block; font-size: 12px; color: rgba(255,255,255,0.55); }
.mini-list { display: grid; gap: 0; }
.role-select { width: 100%; font: 600 14px 'Montserrat', sans-serif; color: #fff; padding: 11px 12px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); }
.role-select option { background: var(--navy-mid); }

/* Top-down org chart with connector lines */
.org-wrap { overflow-x: auto; padding: 6px 0 20px; }
.org, .org ul { display: flex; justify-content: center; margin: 0; padding: 22px 0 0; position: relative; }
.org { padding-top: 0; min-width: max-content; margin: 0 auto; }
.org li { list-style: none; position: relative; padding: 22px 8px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.org > li { padding-top: 0; }
.org li::before, .org li::after { content: ''; position: absolute; top: 0; width: 50%; height: 22px; border-top: 1.5px solid rgba(91,200,232,0.45); }
.org li::before { right: 50%; }
.org li::after { left: 50%; border-left: 1.5px solid rgba(91,200,232,0.45); }
.org li:only-child::before, .org li:only-child::after { display: none; }
.org li:only-child { padding-top: 22px; }
.org > li:only-child { padding-top: 0; }
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before { border-right: 1.5px solid rgba(91,200,232,0.45); border-radius: 0 6px 0 0; }
.org li:first-child::after { border-radius: 6px 0 0 0; }
.org ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid rgba(91,200,232,0.45); }
.org li:only-child > .org-node::before { content: ''; position: absolute; }
.org-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; padding: 14px 10px 12px;
  border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.92); color: #fff; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.org-node:hover { border-color: rgba(91,200,232,0.6); transform: translateY(-2px); }
.org-node b { font-size: 13px; line-height: 1.3; }
.org-node span { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.35; }
.org li:only-child::after { display: block; left: 50%; width: 0; border-top: 0; border-left: 1.5px solid rgba(91,200,232,0.45); }
.org > li:only-child::after { display: none; }

/* ═══ Full-size photo viewer ═══ */
.av-zoom { display: inline-block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; vertical-align: middle; line-height: 0; }
.av-zoom:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.av-zoom img { transition: transform .2s, box-shadow .2s; }
.av-zoom:hover img { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(91,200,232,0.35); }
.hero h1 .av-zoom { margin-right: 14px; transform: translateY(-4px); }
.hero h1 .av-zoom .mini-av.xl { margin-right: 0; transform: none; }
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: rgba(3, 9, 16, 0.88); backdrop-filter: blur(6px); cursor: zoom-out; animation: lb-in .15s ease-out;
}
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img { width: min(80vmin, 648px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); background: #0b1e30; }
.lightbox figcaption { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.lb-close {
  position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(7,19,31,0.7); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-close:hover, .lb-close:focus-visible { border-color: var(--sky); color: var(--sky); outline: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ═══ Personal records (Team profiles) ═══ */
.panel-wide { grid-column: 1 / -1; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head .sec-label { margin-bottom: 0; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.5); }
.lock-note svg, .rec-form .hint svg { width: 13px; height: 13px; color: var(--sky); vertical-align: -2px; }
.warn-note { color: #f7c47e !important; }
.country-chips { margin-bottom: 6px; }
.country-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.country-chips .chip form { display: inline; }
.chip-x { border: 0; background: rgba(7,19,31,0.25); color: var(--navy); width: 18px; height: 18px; border-radius: 50%; font-weight: 800; line-height: 1; cursor: pointer; }
.add-row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.add-row-form select, .add-row-form input {
  flex: 1 1 220px; font: 600 13.5px 'Montserrat', sans-serif; color: #fff; padding: 9px 11px; border-radius: 6px;
  border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72);
}
.add-row-form select option { background: var(--navy-mid); }
.doc-table td { vertical-align: top; }
.doc-table .sub { margin-top: 3px; }
.masked { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: 0.04em; }
.reveal { font-size: 11.5px; margin-left: 6px; }
.rec-dialog {
  margin: auto; /* the global reset removes the browser's default centring */
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--border-dark); border-radius: 14px;
  background: var(--navy-mid); color: #fff; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.rec-dialog::backdrop { background: rgba(3, 9, 16, 0.8); backdrop-filter: blur(4px); }
.rec-form { padding: 26px 26px 22px; }
.rec-form h2 { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.rec-form select, .rec-form input[type=date] {
  width: 100%; font: 600 15px 'Montserrat', sans-serif; padding: 12px 14px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.25); background: rgba(5,14,24,0.72); color: #fff;
}
.rec-form select option, .rec-form select optgroup { background: var(--navy-mid); }
.rec-form input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.dlg-actions { display: flex; gap: 10px; margin-top: 18px; }
.dlg-actions .btn-primary { margin-top: 0 !important; width: auto !important; }
.dlg-actions .btn-outline { font-family: inherit; cursor: pointer; }

/* ═══ Contracts & permissions ═══ */
.hub-actions { margin-bottom: 18px; align-items: center; }
.hub-actions .btn-primary, .hub-actions .btn-outline { padding: 11px 18px; font-size: 12px; font-family: inherit; cursor: pointer; }
.hub-actions form { display: contents; }
.ag-flag { display: inline-block; margin-right: 4px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.3); }
.ag-flag.on { border-color: rgba(47,191,113,0.45); color: #7fe0ad; background: rgba(47,191,113,0.1); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.contract-id { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(91,200,232,0.4); color: var(--sky); font-weight: 800; letter-spacing: 0.04em; font-size: 13px; }
.contract-id svg { width: 16px; height: 16px; }
.upper { text-transform: uppercase; }
.approval-list { display: grid; gap: 16px; }
.approval-list .panel { display: flex; flex-direction: column; gap: 10px; }
.approval-list .h3 { margin: 0; }
.diff td.old { color: #ff9aa8; text-decoration: line-through; text-decoration-color: rgba(255,154,168,0.5); }
.diff td.new { color: #7fe0ad; }
.btn-sm { padding: 9px 16px !important; font-size: 11.5px !important; }
.reject-inline { display: flex; gap: 6px; align-items: center; }
.reject-inline input { font: 600 13px 'Montserrat', sans-serif; color: #fff; padding: 8px 10px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); width: 220px; }
.perm-form { display: flex; flex-direction: column; gap: 14px; }
.perm-form .btn-primary { align-self: flex-start; }
.perm-role { max-width: 520px; }
.perm-table td:nth-child(n+3), .perm-table th:nth-child(n+3) { text-align: center; width: 110px; }
.perm-table input[type=radio] { width: 17px; height: 17px; accent-color: var(--sky); cursor: pointer; }

/* Checkboxes in forms */
.form input[type=checkbox], .docform input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--sky); cursor: pointer; flex: none; }
.check-grid .check { margin: 4px 0; }

/* ═══ Contracts: credit terms & contacts ═══ */
.radio-row { display: flex; gap: 22px; }
.radio-row input[type=radio] { width: 17px; height: 17px; margin: 0; accent-color: var(--sky); cursor: pointer; }
.money-row { display: flex; gap: 8px; }
.money-row input { flex: 1; }
.money-row select { width: 90px !important; flex: none; }
.panel-wide-form { grid-column: 1 / -1; }
.contact-rows { clear: both; display: grid; gap: 8px; margin-bottom: 10px; } /* below the floated section title */
.contact-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr 1fr 36px; gap: 8px; align-items: center; }
.contact-row .row-del { height: 40px; }
@media (max-width: 760px) { .contact-row { grid-template-columns: 1fr 1fr; } .contact-row .row-del { width: 100%; } }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.contact-card { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border-dark); border-radius: 10px; font-size: 13.5px; }
.contact-card b { font-size: 14.5px; }
.contact-card a { text-decoration: none; overflow-wrap: anywhere; }
[data-credit-only][hidden], [data-custom-name][hidden] { display: none !important; }
.dlg-actions .btn-primary, .dlg-actions .btn-outline { white-space: nowrap; padding-left: 22px; padding-right: 22px; }

/* ---------- Consultants ---------- */
.cons-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.cons-filters input, .cons-filters select { padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 8px; background: rgba(7,19,31,0.7); color: #fff; font: 600 13px 'Montserrat', sans-serif; }
.cons-filters input { flex: 1 1 260px; min-width: 0; }
.cons-filters select { flex: 0 1 200px; min-width: 0; }
.cons-filters select option { background: var(--navy-mid); }
.cons-filters input:focus, .cons-filters select:focus { outline: none; border-color: var(--sky); }
.cmap-wrap { margin-bottom: 18px; }
.cmap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cmap-tools .btn-mini svg { width: 13px; height: 13px; vertical-align: -2px; }
.cmap-tools .btn-mini.on { background: var(--sky); color: var(--navy); border-color: var(--sky); }
.cmap-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.65); }
.cmap { height: 480px; border: 1px solid var(--border-dark); border-radius: 12px; overflow: hidden; background: #0b1e30; z-index: 0; }
.cmap-mini { height: 220px; }
.cmap-pick { height: 260px; cursor: crosshair; }
.cmap.area-mode, .cmap.area-mode .leaflet-interactive { cursor: crosshair; }
.cmap-hint { margin-top: 8px; }
@media (max-width: 640px) { .cmap { height: 360px; } .cmap-count { margin-left: 0; width: 100%; } }
/* Dark map to match the intranet (tiles are recoloured in the browser). */
.cmap .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(0.92) contrast(0.88) saturate(0.45); }
.cmap .leaflet-container, .cmap.leaflet-container { font-family: 'Montserrat', sans-serif; }
.cmap .leaflet-control-attribution { background: rgba(7,19,31,0.75); color: rgba(255,255,255,0.55); font-size: 10px; }
.cmap .leaflet-control-attribution a { color: var(--sky); }
.cmap .leaflet-bar a { background: var(--navy-mid); color: #fff; border-bottom-color: var(--border-dark); }
.cmap .leaflet-bar a:hover { background: #12304a; }
.cmap .leaflet-popup-content-wrapper, .cmap .leaflet-popup-tip { background: var(--navy-mid); color: #fff; border: 1px solid var(--border-dark); }
.cmap .leaflet-popup-content { margin: 14px 16px; }
.cmap a.leaflet-popup-close-button { color: rgba(255,255,255,0.6); }
.cpop { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: rgba(255,255,255,0.7); min-width: 190px; }
.cpop b { font-size: 14.5px; color: #fff; }
.cpop .pill { align-self: flex-start; margin-top: 2px; }
.cpop-actions { display: flex; gap: 6px; margin-top: 8px; }
.cpop-actions .btn-mini { color: var(--sky); }
/* Photo markers, ringed by the consultant's main type. */
.cmk-wrap { background: none; border: 0; }
.cmk { --ring: var(--sky); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ring); background: var(--navy-mid);
  overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.55); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.cmk img, .leaflet-container .leaflet-marker-pane .cmk img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Leaflet sets marker images to width: auto */
.cmk b { font-size: 13px; font-weight: 800; color: #fff; }
.cmk.r-engineer { --ring: #f2a33a; } .cmk.r-pilot { --ring: #7fe0ad; } .cmk.r-borescope { --ring: #c79bff; } .cmk.r-engine_tech { --ring: #ff8a65; }
.cmk-wrap.hl .cmk { transform: scale(1.25); }
.cmk-wrap.sel .cmk { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red), 0 4px 14px rgba(0,0,0,0.6); }
.pin-wrap { background: none; border: 0; }
.pin-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.cons-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.6); }
.cons-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; border: 2px solid var(--ring, var(--sky)); vertical-align: -1px; }
.cons-legend .r-engineer { --ring: #f2a33a; } .cons-legend .r-pilot { --ring: #7fe0ad; } .cons-legend .r-borescope { --ring: #c79bff; } .cons-legend .r-engine_tech { --ring: #ff8a65; }
/* Selection */
.sel-panel { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.sel-panel .sec-head { flex-wrap: wrap; }
.sel-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sel-chip { display: inline-flex; align-items: center; gap: 8px; }
.sel-chip a { color: var(--navy); text-decoration: none; }
.btn-mini.disabled { opacity: .45; cursor: not-allowed; }
/* List */
.cons-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cons-item { position: relative; }
.cons-item[hidden] { display: none; }
.cons-card { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 16px 44px 16px 16px; border: 1px solid var(--border-dark); border-radius: 12px;
  background: rgba(11,30,48,0.82); color: #fff; text-decoration: none; transition: border-color .15s; }
.cons-card:hover { border-color: rgba(91,200,232,0.5); }
.cons-item.is-sel .cons-card { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cons-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.cons-main b { font-size: 15px; font-weight: 800; color: #fff; }
.cons-main .cons-roles { color: var(--sky); font-weight: 700; }
.cons-meta { margin-top: 4px; }
.cons-check { position: absolute; top: 14px; right: 14px; z-index: 1; }
.cons-check input { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; }
/* Form */
.row-list { clear: both; display: grid; gap: 10px; margin-bottom: 10px; }
.rating-row { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr 150px 36px; gap: 8px; align-items: center; }
.rating-row.no-num { grid-template-columns: 1.6fr 1fr 1.3fr 150px 36px; }
.history-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 130px 130px 36px; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(91,200,232,0.08); }
.history-row textarea { grid-column: 1 / -1; }
.rating-row .row-del, .history-row .row-del { height: 40px; }
@media (max-width: 900px) {
  .rating-row, .history-row { grid-template-columns: 1fr 1fr; }
  .rating-row select { grid-column: 1 / -1; }
  .rating-row .row-del, .history-row .row-del { width: 100%; }
}
.geo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.geo-head .fld-label { margin-bottom: 0; }
/* Profile */
.cons-headline { font-size: 15px; font-weight: 700; color: #fff; }
.timeline { list-style: none; display: grid; gap: 14px; border-left: 2px solid var(--border-dark); padding-left: 18px; }
.timeline li { position: relative; font-size: 13.5px; }
.timeline li::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); }
.timeline .sub { display: block; }
.money-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.money-totals div { padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.money-totals span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.money-totals b { font-size: 17px; }
.money-totals b.warn { color: #f7c47e; }
.status-form { display: flex; gap: 6px; align-items: center; }
.status-form select { padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: 6px; background: rgba(7,19,31,0.7); color: #fff; font: 600 12px 'Montserrat', sans-serif; }
.status-form select option { background: var(--navy-mid); }
.sel-panel[hidden] { display: none; }
.photo-editor[hidden], [data-other-field][hidden] { display: none !important; }
.cmk.r-technician_nl { --ring: #9fb3c8; } .cmk.r-records { --ring: #f5d76e; } .cmk.r-camo { --ring: #ff6f91; }
.cons-legend .r-technician_nl { --ring: #9fb3c8; } .cons-legend .r-records { --ring: #f5d76e; } .cons-legend .r-camo { --ring: #ff6f91; }
.pick-groups { clear: both; display: grid; gap: 8px; margin-bottom: 12px; }
.pick-group { border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(5,14,24,0.4); }
.pick-group summary { cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 10px; }
.pick-group summary:hover { color: var(--sky); }
.pick-group[open] summary { border-bottom: 1px solid var(--border-dark); }
.pick-group .check-grid { padding: 12px 14px; }
.pick-count { color: var(--sky); font-weight: 700; letter-spacing: 0; }
.passport-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .passport-row { grid-template-columns: 1fr; } }
[data-used-only][hidden] { display: none !important; }
.tag-chips { margin-bottom: 4px; }
.tag-chips .chip { cursor: default; font-weight: 600; }
.hub-actions .btn-primary svg, .hub-actions .btn-outline svg { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; }

/* ---------- Invoices & expense reports ---------- */
.bill-form [hidden] { display: none !important; }
.brows { table-layout: auto; min-width: 0; width: auto; }
.brows td { vertical-align: top; }
.brows input, .brows select, .brows textarea { padding: 8px 9px !important; font-size: 13px !important; }
.brows .c-date { width: 140px; }
.brows .c-text { width: 130px; }
.brows .c-text.c-wide, .brows .c-textarea { width: 260px; }
.brows .c-money { width: 108px; text-align: right; }
.brows .c-number { width: 76px; text-align: right; }
.brows .c-select { width: 112px; }
.brows .calc { min-width: 110px; padding-top: 10px; font-weight: 700; white-space: nowrap; color: rgba(255,255,255,0.85); }
.brows th.h-calc, .sum-table th.h-calc { text-align: right; }
.brows th.h-del { width: 34px; }
.sec-body { padding: 12px 14px 14px; overflow-x: auto; }
.sum-table { min-width: 560px; }
.sum-table td:first-child { width: 50%; }
.sum-table input.num { text-align: right; }
.sum-table .calc { text-align: right; font-weight: 700; padding-top: 10px; white-space: nowrap; }
.bill-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.vat-fld { width: 140px; }
.sum-list { margin: 14px 0 0 auto; width: min(100%, 380px); display: grid; gap: 6px; }
.sum-list.wide { width: 100%; max-width: 560px; }
.sum-list div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgba(91,200,232,0.08); }
.sum-list dt { color: rgba(255,255,255,0.65); }
.sum-list dt .sub { display: block; }
.sum-list dd { font-weight: 700; white-space: nowrap; }
.sum-list .grand { border-top: 1px solid var(--border-dark); border-bottom: 0; padding-top: 10px; }
.sum-list .grand dt { color: #fff; font-weight: 800; }
.sum-list .grand dd { color: var(--sky); font-size: 18px; font-weight: 800; }
.issuer-row { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.issuer-row .check { display: block; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 10px; cursor: pointer; font-weight: 700; }
.issuer-row .check:has(input:checked) { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.issuer-row .check input { vertical-align: -3px; margin-right: 8px; }
.issuer-row .sub { display: block; margin: 4px 0 0 26px; font-weight: 500; }
.bill-totals { margin-bottom: 14px; }
.status-filter { padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 8px; background: rgba(7,19,31,0.7); color: #fff; font: 600 13px 'Montserrat', sans-serif; }
.status-filter option { background: var(--navy-mid); }
.search .status-filter { margin-right: 8px; }
.hub-actions .btn-mini svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.exp-toggle { display: block; clear: both; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 10px; font-weight: 700; color: #fff; }
.exp-toggle:has(input:checked) { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.exp-toggle input { vertical-align: -3px; margin-right: 8px; }
.exp-toggle .sub { display: block; margin: 4px 0 0 26px; font-weight: 500; }
.exp-grid { margin-top: 14px; }
.exp-head { margin-top: 16px; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-exp-body][hidden] { display: none !important; }

/* ---------- Extranet ---------- */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ext-cta { margin-top: 26px; }
.ext-form .agree, .cons-form .agree { margin: 18px 0; align-items: flex-start; max-width: 760px; line-height: 1.5; }
.ext-form .agree input, .cons-form .agree input { margin-top: 3px; }
.upload-fld .hint { margin-top: 2px; }
.cons-form > .form-cols + .form-cols, .cons-form > .form-cols { margin-bottom: 18px; }
.reject-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-dark); }
.req-note { margin-left: 8px; font-size: 10px; letter-spacing: 0.06em; color: #f7c47e; text-transform: none; font-weight: 700; }

/* ---------- Projects ---------- */
.pmap { height: 380px; }
.pdot-wrap { background: none; border: 0; }
.pdot { --c: var(--sky); display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.55); }
.pdot.ps-active { --c: #2fbf71; } .pdot.ps-planned { --c: var(--sky); } .pdot.ps-on_hold { --c: #f2a33a; } .pdot.ps-completed { --c: #9fb3c8; } .pdot.ps-cancelled { --c: var(--red); }
.cons-legend .ps-active { --ring: #2fbf71; } .cons-legend .ps-planned { --ring: var(--sky); } .cons-legend .ps-on_hold { --ring: #f2a33a; } .cons-legend .ps-completed { --ring: #9fb3c8; } .cons-legend .ps-cancelled { --ring: var(--red); }
.asset-row { display: grid; grid-template-columns: 130px 1.6fr 1fr 1fr 110px 1.2fr 36px; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(91,200,232,0.08); }
.asset-row .asset-notes { grid-column: 1 / -1; }
.asset-row .row-del { height: 40px; }
@media (max-width: 900px) { .asset-row { grid-template-columns: 1fr 1fr; } .asset-row select[name=as_type] { grid-column: 1 / -1; } }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.member-row form { flex: none; }
.crumbs-path { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.crumbs-path span { margin: 0 4px; color: rgba(255,255,255,0.35); }
.file-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; }
.file-link svg { width: 16px; height: 16px; color: var(--sky); flex: none; }
.file-link:hover { color: var(--sky); }
.files-actions { margin-top: 12px; align-items: center; }
.files-actions .add-row-form { margin: 0; flex: 1; }
.unlink-form { margin-top: 8px; }
.unlink-form .linkish { font-size: 12px; color: rgba(255,255,255,0.5); }

/* ---------- Tasks ---------- */
.tstat { font-size: 13px; color: rgba(255,255,255,0.65); }
.late-text { color: #ff9aa8 !important; }
.pri { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pri-urgent { background: rgba(232,67,90,0.18); color: #ff9aa8; } .pri-high { background: rgba(242,163,58,0.16); color: #f7c47e; }
.pri-medium { background: rgba(91,200,232,0.12); color: var(--sky); } .pri-low { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
.tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.mini-av.sm { width: 26px; height: 26px; font-size: 10px; }
.mini-av.unassigned { opacity: .5; border-style: dashed; }
.tboard { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.tcol { background: rgba(11,30,48,0.6); border: 1px solid var(--border-dark); border-radius: 12px; padding: 10px; min-height: 160px; transition: border-color .15s, background .15s; }
.tcol.over { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.tcol.no-drop { opacity: .45; }
.tcol-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; font-size: 12.5px; letter-spacing: 0.04em; }
.tcol-head span { font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); padding: 1px 8px; border-radius: 10px; }
.tcol[data-status=review] .tcol-head b { color: #f7c47e; } .tcol[data-status=done] .tcol-head b { color: #7fe0ad; } .tcol[data-status=blocked] .tcol-head b { color: #ff9aa8; }
.tadd { width: 100%; margin-bottom: 10px; padding: 9px; border: 1px dashed rgba(91,200,232,0.4); border-radius: 8px; background: transparent; color: var(--sky); font: 700 12.5px 'Montserrat', sans-serif; cursor: pointer; }
.tadd:hover { background: rgba(91,200,232,0.08); }
.tcol-cards { display: grid; gap: 8px; min-height: 40px; }
.tcol-empty { font-size: 12px; color: rgba(255,255,255,0.3); text-align: center; padding: 14px 0; }
.tcard { border: 1px solid var(--border-dark); border-radius: 10px; background: var(--navy-mid); transition: transform .12s, box-shadow .12s, border-color .12s; }
.tcard[draggable=true] { cursor: grab; }
.tcard:hover { border-color: rgba(91,200,232,0.45); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.tcard.dragging { opacity: .5; transform: rotate(1.5deg); }
.tcard.done .tcard-title { text-decoration: line-through; color: rgba(255,255,255,0.5); }
.tcard-link { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; color: #fff; text-decoration: none; }
.tcard-top { display: flex; flex-wrap: wrap; gap: 5px; }
.tcard-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.tcard-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.tcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tcard-meta svg { width: 13px; height: 13px; }
.tcard-meta .due.late { color: #ff9aa8; font-weight: 700; } .tcard-meta .due.soon { color: #f7c47e; font-weight: 700; }
.tcard-who { margin-left: auto; }
.tbar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tbar.wide { min-width: 90px; margin: 6px 0; }
.tbar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), #7fe0ad); border-radius: 3px; }
.who-cell { display: inline-flex; align-items: center; gap: 8px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.task-grid .panel .form { max-width: none; }
.tprog-form { display: grid; gap: 6px; }
.tprog-form input[type=range] { width: 100%; accent-color: var(--sky); }
.tcheck { list-style: none; display: grid; gap: 6px; margin-bottom: 8px; }
.tcheck li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tcheck li form { display: inline; }
.tcheck-box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid rgba(91,200,232,0.5); background: transparent; color: var(--navy); font-weight: 900; font-size: 12px; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.tcheck-box.on { background: var(--sky); border-color: var(--sky); }
.tcheck-done { text-decoration: line-through; color: rgba(255,255,255,0.45); }
.tcheck .chip-x { margin-left: auto; color: #ff9aa8; background: transparent; }
.tfiles { list-style: none; display: grid; gap: 8px; margin-bottom: 10px; }
.tfiles li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tfiles li .sub { margin-left: auto; }
.tfiles .chip-x { color: #ff9aa8; background: transparent; }
.tdrop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 2px dashed rgba(91,200,232,0.35); border-radius: 12px; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.tdrop b { color: var(--sky); } .tdrop span { font-size: 12px; color: rgba(255,255,255,0.5); }
.tdrop:hover, .tdrop.over, .tdrop:focus { border-color: var(--sky); background: rgba(91,200,232,0.07); outline: none; }
.tcomment-form { display: flex; gap: 8px; align-items: flex-end; max-width: none !important; margin-bottom: 14px; }
.tcomment-form textarea { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tfeed { list-style: none; display: grid; gap: 12px; }
.tfeed li { display: flex; gap: 10px; font-size: 13px; }
.tfeed li.event { color: rgba(255,255,255,0.6); }
.tfeed .sub-inline { color: rgba(255,255,255,0.6); }
.tfeed .sub { display: block; }
.tfeed .panel-text { margin-top: 4px; color: #fff; }
.ttl { position: relative; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.82); overflow-x: auto; }
.ttl-head, .ttl-row { display: grid; grid-template-columns: 260px 1fr; min-width: 900px; }
.ttl-head { border-bottom: 1px solid var(--border-dark); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.ttl-name { padding: 10px 14px; border-right: 1px solid var(--border-dark); font-size: 13px; min-width: 0; }
.ttl-name a { color: #fff; text-decoration: none; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl-name .sub { font-size: 11.5px; }
.ttl-scale { position: relative; height: 36px; }
.ttl-week { position: absolute; top: 12px; padding-left: 6px; border-left: 1px solid rgba(91,200,232,0.15); height: 24px; white-space: nowrap; }
.ttl-row { border-bottom: 1px solid rgba(91,200,232,0.06); }
.ttl-track { position: relative; height: 52px; }
.ttl-bar { position: absolute; top: 14px; height: 24px; border-radius: 6px; background: rgba(91,200,232,0.35); border: 1px solid var(--sky); overflow: hidden; }
.ttl-fill { display: block; height: 100%; width: 0; background: var(--sky); opacity: .55; }
.ttl-bar.st-done { background: rgba(47,191,113,0.3); border-color: #2fbf71; } .ttl-bar.st-done .ttl-fill { background: #2fbf71; }
.ttl-bar.st-blocked { background: rgba(232,67,90,0.25); border-color: #ff9aa8; } .ttl-bar.st-review { border-color: #f7c47e; }
.ttl-bar.late { box-shadow: 0 0 0 2px rgba(232,67,90,0.6); }
.ttl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .7; pointer-events: none; }
@media (max-width: 640px) { .tgrid { grid-template-columns: 1fr; } }
.cons-filters .check { white-space: nowrap; margin: 0; }
/* Task groups (board in Group mode) */
.tboard-groups { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); }
.gcol { border-top: 3px solid var(--gc, var(--sky)); }
.gc0 { --gc: var(--sky); } .gc1 { --gc: #2fbf71; } .gc2 { --gc: #f2a33a; } .gc3 { --gc: #c79bff; } .gc4 { --gc: #ff8a65; } .gc5 { --gc: #f5d76e; } .gcx { --gc: rgba(255,255,255,0.25); }
.gcol .tcol-head { gap: 8px; }
.gcol .tcol-head b { margin-right: auto; }
.gmenu { position: relative; }
.gmenu summary { list-style: none; cursor: pointer; padding: 0 6px; font-weight: 900; color: rgba(255,255,255,0.6); }
.gmenu summary::-webkit-details-marker { display: none; }
.gmenu-pop { position: absolute; right: 0; top: 24px; z-index: 5; display: grid; gap: 8px; padding: 10px; min-width: 250px; background: var(--navy-mid); border: 1px solid var(--border-dark); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.gmenu-pop form { display: flex; gap: 6px; }
.gmenu-pop input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: 6px; background: rgba(5,14,24,0.7); color: #fff; font: 600 12.5px 'Montserrat', sans-serif; }
.tcol-new { border-style: dashed; background: transparent; }
.gadd { display: grid; gap: 8px; }
.gadd label { font-size: 12.5px; color: var(--sky); }
.gadd input { padding: 9px 10px; border: 1px solid var(--border-dark); border-radius: 8px; background: rgba(5,14,24,0.7); color: #fff; font: 600 13px 'Montserrat', sans-serif; }
.tag-group { background: rgba(91,200,232,0.12); color: var(--sky); }
.chips-label { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.5); align-self: center; }
.chips-sep { width: 1px; background: var(--border-dark); margin: 0 4px; }

/* ---------- Finance ---------- */
.amt-in { color: #8fe3b0; font-weight: 700; white-space: nowrap; }
.amt-out { color: #fff; font-weight: 600; white-space: nowrap; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-form input, .inline-form select { min-width: 0; max-width: 260px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-dark); background: rgba(7,19,31,0.6); color: #fff; font: inherit; font-size: 12.5px; }
.money-totals .ftotal { border-color: var(--sky); background: rgba(80,170,230,0.08); }
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fcard { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px; min-height: 160px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #0b2a47 0%, #113d66 55%, #1d5d93 100%); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform .15s; }
.fcard:hover { transform: translateY(-2px); }
.fcard.off { filter: grayscale(0.8); opacity: 0.7; }
.fcard-brand { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: rgba(255,255,255,0.75); }
.fcard-num { font-size: 19px; font-weight: 600; letter-spacing: 0.12em; margin-top: auto; }
.fcard-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.8); }
.fcard-row b { white-space: nowrap; }
.fcard-st { text-transform: capitalize; }
.fcard-row b { color: #f7c47e; }
.btn-attn { border-color: #f7c47e !important; color: #f7c47e !important; }

/* ---------- Corporate Intranet branding (top bar + home page) ---------- */
.nav-tag { font-size: 17px; letter-spacing: 0.2em; color: #fff; padding-left: 18px; }
.eyebrow.eyebrow-xl { font-size: clamp(22px, 3.4vw, 40px); letter-spacing: 0.16em; gap: 18px; margin-bottom: 26px; line-height: 1.1; }
.eyebrow.eyebrow-xl::before { width: 56px; height: 4px; flex: none; }
@media (max-width: 640px) {
  .nav-tag { font-size: 12px; letter-spacing: 0.14em; padding-left: 10px; }
  .eyebrow.eyebrow-xl { font-size: 18px; letter-spacing: 0.1em; gap: 12px; }
  .eyebrow.eyebrow-xl::before { width: 28px; height: 3px; }
}

/* ---------- Luxury serif (home page title, top bar) ---------- */
:root { --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif; }
.nav-tag { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: 0.34em; text-transform: uppercase; }
.hero-lux .eyebrow.eyebrow-xl {
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: 0.38em; color: #d9eef8; gap: 26px; margin-bottom: 22px;
}
.hero-lux .eyebrow.eyebrow-xl::before { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--sky)); }
.hero-lux h1 {
  font-family: var(--serif); font-weight: 300; font-style: normal; letter-spacing: 0.01em;
  font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05;
}
.hero-lux h1 em { font-weight: 400; font-style: italic; }
.hero-lux .hero-desc { letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); }
@media (max-width: 640px) {
  .nav-tag { font-size: 14px; letter-spacing: 0.24em; }
  .hero-lux .eyebrow.eyebrow-xl { font-size: 19px; letter-spacing: 0.24em; gap: 14px; }
  .hero-lux .eyebrow.eyebrow-xl::before { width: 36px; }
}

/* ---------- Invoice tracker ---------- */
.tracker-cta { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 22px; border: 1px solid var(--sky); border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, rgba(91,200,232,0.14), rgba(11,30,48,0.6)); transition: transform .15s; }
.tracker-cta:hover { transform: translateY(-2px); }
.tracker-cta > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tracker-cta b { font-size: 16px; }
.tracker-cta > span:nth-child(2) > span { font-size: 13px; color: rgba(255,255,255,0.62); }
.tracker-cta > span:last-child { color: var(--sky); font-size: 20px; }
.ytabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
.ytabs .tab { padding: 8px 14px; border: 1px solid var(--border-dark); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.7); text-decoration: none; }
.ytabs .tab.on { border-color: var(--sky); color: var(--navy, #07131f); background: var(--sky); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis-sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.6); }
.kpi > span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.kpi > b { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.kpi > em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.5); }
.kpi.k-ok > b { color: #8fe3b0; } .kpi.k-warn > b { color: #f7c47e; } .kpi.k-bad > b { color: #ff9aa8; }
.kpi.k-gold { border-color: rgba(212,175,106,0.55); background: linear-gradient(135deg, rgba(212,175,106,0.12), rgba(11,30,48,0.6)); }
.kpi.k-gold > b { color: #e8cf9a; font-family: var(--serif); font-weight: 500; font-size: 30px; }
.kpi-pill { font-size: 14px !important; }
.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.ch-ax { fill: rgba(255,255,255,0.5); font-size: 11px; font-family: inherit; }
.ch-inv { fill: var(--sky); } .ch-rec { fill: #5fd395; }
.ch-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.65); }
.ch-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lg-inv::before { background: var(--sky); } .lg-rec::before { background: #5fd395; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.8); }
.hb-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.hb-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sky); }
.hb-fill.hb-ok { background: #5fd395; } .hb-fill.hb-warn { background: #f2a33a; } .hb-fill.hb-bad { background: #e8435a; }
.hbar b { font-size: 12.5px; white-space: nowrap; }
.mini-list { list-style: none; display: grid; gap: 6px; font-size: 13px; }
.pill-muted { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); }
.ledger tr.st-cancelled td { opacity: 0.5; }
.expected { color: rgba(255,255,255,0.6); font-style: italic; }
.amt-neg { color: #ff9aa8; font-weight: 700; }
.fld-check { display: flex; align-items: flex-end; }
fieldset[disabled] { border: 0; }
fieldset { border: 0; min-width: 0; }

/* ---------- Home: four columns of functions; red Avisence hover ---------- */
.home-cols { display: grid; gap: 22px; align-items: start; }
.home-cols.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.home-col-title { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.home-col-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,16,46,0.6), transparent); }
.home-col .tile { padding: 20px 18px; gap: 14px; }
.home-col .tile-body b { font-size: 15px; padding-right: 8px; }
.home-col .tile .tag { top: 10px; right: 36px; }
@media (max-width: 1280px) { .home-cols.cols-4, .home-cols.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .home-cols.cols-4, .home-cols.cols-3, .home-cols.cols-2 { grid-template-columns: 1fr; } }

a.tile { overflow: hidden; }
a.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(135deg, rgba(200,16,46,0.34) 0%, rgba(200,16,46,0.12) 45%, rgba(11,30,48,0) 100%); }
a.tile > * { position: relative; }
a.tile:hover { border-color: rgba(200,16,46,0.75); background: rgba(24,16,28,0.92); box-shadow: 0 12px 34px rgba(200,16,46,0.22); }
a.tile:hover::before { opacity: 1; }
a.tile:hover .tile-icon { color: #fff; background: var(--red); border-color: var(--red); transition: background .25s, color .25s; }
a.tile:hover .tile-go { color: #ff6b81; }
a.tile:hover .tile-body span { color: rgba(255,255,255,0.75); }
a.tile:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Procurement: existing documents ---------- */
.import-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 26px; padding: 16px 20px;
  border: 1px dashed rgba(91,200,232,0.45); border-radius: 12px; background: rgba(11,30,48,0.6); font-size: 13.5px; color: rgba(255,255,255,0.72); }
.import-bar b { color: #fff; }
.import-bar .btn-outline svg { width: 16px; height: 16px; vertical-align: -3px; }
.import-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.import-choices a { justify-content: flex-start; gap: 10px; }
.import-choices svg { width: 18px; height: 18px; }
.import-sec { border-color: rgba(91,200,232,0.45); }
.doc-files { margin-bottom: 18px; }
.doc-actions a svg, .doc-actions button svg { width: 16px; height: 16px; flex: none; }
.doc-actions .btn-outline { display: inline-flex; align-items: center; gap: 8px; }
.read-status { margin-top: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border-dark); background: rgba(7,19,31,0.6); font-size: 13px; display: grid; gap: 6px; }
.read-status[hidden] { display: none; }
.read-status p { margin: 0; }
.rs-ok { color: #8fe3b0; } .rs-ok a { color: #8fe3b0; }
.rs-warn { color: #f7c47e; } .rs-warn a { color: #f7c47e; }
.rs-busy { color: rgba(255,255,255,0.7); }
.read-status label.rs-check { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #fff; margin: 4px 0 0; }

/* ---------- Sign-in page: same elegant serif as the home page ---------- */
.hero-login h1 { font-size: clamp(46px, 6vw, 86px); margin-bottom: 18px; }
.hero-lux .hero-slogan { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: 0.02em; color: rgba(91,200,232,0.85); margin-bottom: 34px; }
.hero-login .panel h2 { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: 40px; letter-spacing: 0.01em; }
.hero-login .client-note b { font-weight: 700; }
.hero-login .eyebrow.eyebrow-xl { white-space: nowrap; font-size: clamp(20px, 2.4vw, 32px); }
.rs-sigs { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-sigs figure { margin: 0; padding: 8px 12px; background: #fff; border-radius: 8px; display: grid; gap: 4px; justify-items: center; }
.rs-sigs img { max-height: 54px; max-width: 220px; }
.rs-sigs figcaption { font-size: 10.5px; font-weight: 700; color: #3a4a5c; text-transform: uppercase; letter-spacing: 0.08em; }
.email-attach { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.email-attach svg { width: 18px; height: 18px; color: var(--sky); }
.pill-sent { background: rgba(91,200,232,0.14); color: #8fdcf2; border-color: rgba(91,200,232,0.4); }
.rs-ai { color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.small-text { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.7); }

/* ---------- Procurement: order file (documents of one order as a tree, with their files) ---------- */
.order-file { margin-bottom: 18px; }
.of-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.of-tree { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.of-node { position: relative; border: 1px solid var(--border-dark); border-radius: 10px; padding: 10px 14px; background: rgba(7,19,31,0.45); }
.of-node.of-here { border-color: rgba(91,200,232,0.6); background: rgba(91,200,232,0.07); }
.of-d1 { margin-left: 28px; } .of-d2 { margin-left: 56px; } .of-d3 { margin-left: 84px; } .of-d4 { margin-left: 112px; } .of-d5 { margin-left: 140px; }
.of-d1::before, .of-d2::before, .of-d3::before, .of-d4::before, .of-d5::before { content: ''; position: absolute; left: -16px; top: -9px; width: 14px; height: 30px; border-left: 1.5px solid rgba(91,200,232,0.35); border-bottom: 1.5px solid rgba(91,200,232,0.35); border-bottom-left-radius: 6px; }
.of-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.of-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--sky); background: rgba(91,200,232,0.1); border: 1px solid var(--border-dark); }
.of-icon svg { width: 17px; height: 17px; }
.of-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; }
.of-title a { font-weight: 800; color: #fff; text-decoration: none; }
.of-title a:hover { color: var(--sky); }
.of-type { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.of-this { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
.of-pills { display: flex; gap: 6px; }
.of-files { list-style: none; margin: 8px 0 0 44px; padding: 0; display: grid; gap: 6px; }
.of-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.of-file .of-meta { margin-left: auto; }
.of-file .chip-x { color: #ff9aa8; background: transparent; }
.of-cat { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); white-space: nowrap; }
.of-cat-original { border-color: rgba(47,191,113,0.45); color: #7fe0ad; }
.of-cat-vendor_quotation, .of-cat-customer_po { border-color: rgba(91,200,232,0.5); color: var(--sky); }
.of-cat-payment_slip, .of-cat-card_authorization, .of-cat-credit_application { border-color: rgba(242,163,58,0.5); color: #f7c47e; }
.of-cat-customer_account { border-color: rgba(91,200,232,0.5); color: #8fdcf2; }
@media (max-width: 700px) { .of-d1, .of-d2, .of-d3, .of-d4, .of-d5 { margin-left: 14px; } .of-files { margin-left: 0; } }
.of-cat-contracts { border-color: rgba(200,16,46,0.55); color: #ff9aa8; }
.cf-list { display: grid; gap: 6px; margin-bottom: 8px; }
.cf-list .check { align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: #fff; }
.cf-list .check .sub { display: block; }
.of-file > .sub:not(.of-meta) { min-width: 0; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-file > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; }
.rev-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(242,163,58,0.45); background: rgba(242,163,58,0.08); color: #f7c47e; font-size: 13.5px; }
.rev-banner svg { width: 20px; height: 20px; flex: none; }
.rev-banner a { color: #fff; font-weight: 700; }
.rev-banner.rev-current { border-color: rgba(91,200,232,0.45); background: rgba(91,200,232,0.08); color: #8fdcf2; }
.btn-revise svg { width: 15px; height: 15px; }

/* Choice between options in a dialog (e.g. invoice / proforma invoice) */
.rec-form .choice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 0.9rem; margin: 0 0 0.6rem; border: 1px solid var(--border-dark); border-radius: 8px; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 0.95rem; }
.rec-form .choice:hover, .rec-form .choice:has(input:checked) { border-color: var(--red); background: rgba(200, 16, 46, 0.1); }
.rec-form .choice input { margin-top: 0.25rem; accent-color: var(--red); }
.rec-form .choice .sub { display: block; margin-top: 0.15rem; }

/* Email: supporting documents for the PDF binder */
.binder-group { border: 1px solid var(--border-dark); border-radius: 8px; padding: 0.55rem 0.9rem 0.65rem; margin: 0.5rem 0 0; }
.binder-group legend { padding: 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.binder-opt { display: flex; gap: 0.6rem; align-items: center; padding: 0.25rem 0; text-transform: none; letter-spacing: normal; font-size: 0.95rem; cursor: pointer; }
.binder-opt input { accent-color: var(--red); width: 1rem; height: 1rem; }
.fld .binder-opt { font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; color: rgba(255,255,255,0.88); }
.form-actions a svg, .form-actions button svg { width: 16px; height: 16px; flex: none; }
.form-actions .btn-primary, .form-actions .btn-outline { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Procurement dashboard ---------- */
.dash-banner { display: flex; align-items: center; gap: 16px; margin: 22px 0 6px; padding: 16px 20px; border: 1px solid var(--border-dark); border-radius: 12px;
  background: linear-gradient(120deg, rgba(200,16,46,0.14), rgba(11,30,48,0.7) 55%); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.dash-banner:hover { border-color: var(--red); background: linear-gradient(120deg, rgba(200,16,46,0.3), rgba(11,30,48,0.7) 60%); }
.dash-banner > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.dash-banner > span:nth-child(2) > span { font-size: 13px; color: rgba(255,255,255,0.6); }
.dash-filters { display: grid; gap: 10px; margin: 14px 0 10px; padding: 14px 16px; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.55); }
.df-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.df-row label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); min-width: 130px; }
.df-row label.df-wide { flex: 1; min-width: 220px; }
.df-row label.df-check { flex-direction: row; align-items: center; gap: 7px; min-width: 0; padding-bottom: 9px; text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 600; }
.df-row input:not([type=checkbox]), .df-row select { font: inherit; font-size: 13px; letter-spacing: normal; text-transform: none; font-weight: 500; color: #fff; background: rgba(5,14,24,0.8);
  border: 1px solid var(--border-dark); border-radius: 6px; padding: 7px 9px; min-height: 36px; }
.df-row input[type=checkbox] { accent-color: var(--red); }
.df-row .btn-primary { padding: 9px 22px; }
.dash-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; color: rgba(255,255,255,0.7); font-size: 13.5px; }
.dash-scope .chip { margin: 0; }
a.kpi { color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.kpi:hover { border-color: var(--red); transform: translateY(-1px); }
.ch-po { fill: var(--red); } .ch-iv { fill: #5fd395; } .ch-qt { fill: var(--sky); }
.ch-hit { fill: transparent; } .ch-col:hover .ch-hit { fill: rgba(255,255,255,0.05); }
.ch-legend .lg-po::before { background: var(--red); } .ch-legend .lg-iv::before { background: #5fd395; } .ch-legend .lg-qt::before { background: var(--sky); }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.donut { width: 170px; height: 170px; flex: none; }
.dn { fill: none; stroke-width: 26; cursor: pointer; transition: stroke-width .15s; } .dn:hover { stroke-width: 32; }
.dn-qt { stroke: var(--sky); } .dn-po { stroke: var(--red); } .dn-ps { stroke: #f2a33a; } .dn-iv { stroke: #5fd395; } .dn-pf { stroke: #c9a4ff; }
.dn-n { fill: #fff; font-size: 30px; font-weight: 800; } .dn-l { fill: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dn-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dn-legend a { color: rgba(255,255,255,0.8); text-decoration: none; } .dn-legend a:hover, .dn-legend a.on { color: #fff; }
.dn-legend b { margin-left: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.sw.dn-qt { background: var(--sky); } .sw.dn-po { background: var(--red); } .sw.dn-ps { background: #f2a33a; } .sw.dn-iv { background: #5fd395; } .sw.dn-pf { background: #c9a4ff; }
.hb-fill.hb-gold { background: #d4af6a; } .hb-fill.hb-muted { background: rgba(255,255,255,0.3); }
.hb-label a { color: inherit; text-decoration: none; } .hb-label a:hover { color: #fff; text-decoration: underline; }
.dash-note { margin-top: 10px; }
.attention li { margin-bottom: 8px; } .attention .pill { margin-left: 6px; }
.dash-profile .sub { font-size: 14px; }
th a.sort { color: inherit; text-decoration: none; } th a.sort.on::after { content: ' ↓'; } th a.sort.on.asc::after { content: ' ↑'; }

/* Extranet customer / supplier portal page (opened from the QR code on documents) */
.hero-ref { display: inline-flex; align-items: center; gap: 10px; margin: -14px 0 26px; padding: 9px 14px; border: 1px solid var(--border-dark); border-left: 2px solid var(--red);
  border-radius: 6px; background: rgba(11,30,48,0.6); font-size: 13.5px; color: rgba(255,255,255,0.75); }
.hero-ref svg { width: 16px; height: 16px; flex: none; stroke: var(--sky); fill: none; }
.portal-list { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 14px; }
.portal-list li { display: flex; gap: 14px; align-items: flex-start; }
.portal-list li > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.portal-list b { color: #fff; font-size: 14px; letter-spacing: 0.01em; }
.portal-list .tile-icon { flex: none; }

/* Extranet: document verification */
.verify-panel { max-width: 860px; }
.verify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.verify-row input { flex: 1; min-width: 220px; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; }
.verify-result { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 20px; border-radius: 10px; border: 1px solid; }
.verify-result svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.verify-result > div { display: flex; flex-direction: column; gap: 4px; }
.verify-result b { font-size: 18px; letter-spacing: 0.01em; }
.verify-result span { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.6; }
.verify-result.ok { color: #8fe3b0; border-color: rgba(95,211,149,0.45); background: rgba(47,191,113,0.1); }
.verify-result.warn { color: #f7c47e; border-color: rgba(242,163,58,0.45); background: rgba(242,163,58,0.1); }
.verify-result.bad { color: #ff9aa8; border-color: rgba(232,67,90,0.5); background: rgba(232,67,90,0.1); }
.verify-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-bottom: 22px; border: 1px solid var(--border-dark); border-radius: 10px; overflow: hidden; background: rgba(11,30,48,0.9); box-shadow: inset 0 0 0 1px var(--border-dark); }
.vf { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(11,30,48,0.9); }
.vf span { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.vf b { font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.verify-sigs { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; gap: 10px; }
.verify-sigs li { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--border-dark); border-left: 2px solid var(--red); border-radius: 8px; background: rgba(5,14,24,0.5); }
.vs-role { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; color: rgba(255,255,255,0.8); }
.verify-tech { margin: 0 0 16px; } .verify-tech summary { cursor: pointer; color: var(--sky); font-size: 13px; font-weight: 600; }

/* Contracts: company logos */
.co-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); overflow: hidden; }
.co-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.co-logo-none { background: rgba(91,200,232,0.08); border-color: var(--border-dark); color: var(--sky); font-weight: 800; letter-spacing: 0.06em; }
.co-logo-sm { width: 64px; height: 36px; padding: 4px 6px; font-size: 12px; }
.co-logo-lg { width: 220px; height: 110px; padding: 12px 16px; font-size: 30px; border-radius: 12px; }
.co-cell { display: flex; align-items: center; gap: 12px; }
.co-cell > span:last-child { display: flex; flex-direction: column; }
.co-logo-main { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.co-logo-info { display: flex; flex-direction: column; gap: 6px; }
.co-logo-info .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.co-logo-info svg, .hub-actions form svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2; }
.logo-results { margin-top: 20px; border-top: 1px solid var(--border-dark); padding-top: 16px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.logo-cand { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(5,14,24,0.5); }
.logo-cand.best { border-color: rgba(95,211,149,0.6); box-shadow: 0 0 0 1px rgba(95,211,149,0.25); }
.logo-cand:hover { border-color: var(--red); }
.logo-cand-img { display: flex; align-items: center; justify-content: center; height: 110px; padding: 12px; border-radius: 8px;
  background-color: #fff; background-image: linear-gradient(45deg, #eef1f4 25%, transparent 25%), linear-gradient(-45deg, #eef1f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef1f4 75%), linear-gradient(-45deg, transparent 75%, #eef1f4 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.logo-cand-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-cand-meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.logo-cand .btn-mini { align-self: flex-start; }

/* My account: replace your signature image */
.sig-replace { margin-top: 18px; border-top: 1px solid var(--border-dark); padding-top: 14px; }
.sig-replace summary { cursor: pointer; color: var(--sky); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.sig-replace[open] summary { margin-bottom: 12px; }

/* Home: five columns (Finance, Operations, People, Miscellaneous, Administration) */
.home-cols.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .home-cols.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .home-cols.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .home-cols.cols-5 { grid-template-columns: 1fr; } }

/* Forms */
.form-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.form-card-grid { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .form-card-grid { grid-template-columns: 1fr; } }
.lh-preview { background: #fff; border-radius: 6px; overflow: hidden; aspect-ratio: 8.5 / 11; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.lh-preview img { display: block; width: 100%; }
.lh-body { flex: 1; padding: 9% 7% 0; display: flex; flex-direction: column; gap: 5px; }
.lh-line { display: block; height: 4px; border-radius: 2px; background: #dfe5eb; }
.lh-line.w30 { width: 30%; } .lh-line.w40 { width: 40%; } .lh-line.w55 { width: 55%; } .lh-line.w70 { width: 70%; } .lh-line.w80 { width: 80%; } .lh-line.w90 { width: 90%; } .lh-line.w95 { width: 95%; }
.lh-gap { height: 8px; }
.lh-foot { padding: 7px 7% 8px; background: linear-gradient(90deg, #02060b, #08182a); border-top: 2px solid; border-image: linear-gradient(90deg, #c8102e 0 34%, #3fa9cf 34% 100%) 1; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lh-tag { font-size: 6px; letter-spacing: 0.14em; text-transform: uppercase; color: #7fc6de; font-weight: 600; }
.lh-co { display: block; width: 70%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); }
.form-dls { display: flex; flex-direction: column; gap: 10px; }
.form-dls .fld-label { margin: 8px 0 0; }
.form-dl { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(5,14,24,0.5); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.form-dl:hover { border-color: var(--red); background: rgba(200,16,46,0.12); }
.form-dl > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.form-dl-kind { flex: none; width: 52px; text-align: center; padding: 8px 0; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.form-dl-kind.pdf { background: rgba(200,16,46,0.18); color: #ff9aa8; border: 1px solid rgba(200,16,46,0.5); }
.form-dl-kind.docx { background: rgba(43,87,154,0.25); color: #9cc3ff; border: 1px solid rgba(80,130,220,0.5); }

/* ---------- Internal projects ---------- */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.ip-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--border-dark); border-radius: 14px; background: rgba(11,30,48,0.6); color: #fff; text-decoration: none; transition: border-color .2s, transform .2s, background .2s; }
.ip-card:hover { border-color: var(--red); background: rgba(200,16,46,0.12); transform: translateY(-2px); }
.ip-card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-name { font-size: 17px; font-weight: 800; }
.ip-summary { font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.55; }
.ip-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: rgba(255,255,255,0.6); }
.ip-meta svg { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; }
.ip-progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ip-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--sky)); border-radius: 99px; }
.ip-update-form textarea { width: 100%; }
.ip-update-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ip-progress-input { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
.ip-progress-input input { width: 80px; }
.ip-updates { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.ip-updates li { padding: 12px 16px; border-left: 2px solid var(--sky); background: rgba(5,14,24,0.45); border-radius: 0 8px 8px 0; }
.ip-updates p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.ip-site-tabs { margin: 6px 0 18px; }
.ip-preview-card code, .ip-editor code { font-size: 12.5px; }
/* Editor */
.ip-editor-fields { display: grid; grid-template-columns: 2fr 1.4fr 110px 120px; gap: 12px 16px; align-items: end; margin-bottom: 14px; }
@media (max-width: 900px) { .ip-editor-fields { grid-template-columns: 1fr 1fr; } }
.ip-editor-fields .fld-wide { grid-column: 1 / -1; }
.ip-slug { display: flex; align-items: center; gap: 6px; } .ip-slug input { flex: 1; } .ip-slug span { color: rgba(255,255,255,0.5); font-size: 13px; }
.ip-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
@media (max-width: 1100px) { .ip-split { grid-template-columns: 1fr; } }
.ip-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.ip-pane-head .sub { margin-left: auto; font-size: 11.5px; }
.ip-code textarea, .ip-mono { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; line-height: 1.55; tab-size: 2; white-space: pre; overflow: auto; }
.ip-code textarea { height: 72vh; min-height: 420px; resize: vertical; background: #050e18; color: #d7e6f2; border: 1px solid var(--border-dark); border-radius: 10px; padding: 14px; }
.ip-sizes { display: inline-flex; gap: 6px; } .ip-sizes .chip { margin: 0; padding: 5px 12px; font-size: 11.5px; }
.ip-frame-wrap { --frame-w: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--border-dark); border-radius: 10px; background: #0b1e30; overflow: auto; display: flex; justify-content: center; }
.ip-frame-wrap iframe { width: var(--frame-w); max-width: 100%; height: 100%; border: 0; background: #fff; transition: width .25s; }
.ip-small input[type=number] { width: 100%; }
/* Images */
.ip-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ip-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ip-asset { margin: 0; border: 1px solid var(--border-dark); border-radius: 10px; overflow: hidden; background: rgba(5,14,24,0.5); }
.ip-asset-img { height: 130px; display: flex; align-items: center; justify-content: center; padding: 12px;
  background-color: #1a2a3a; background-image: linear-gradient(45deg, #22344a 25%, transparent 25%), linear-gradient(-45deg, #22344a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #22344a 75%), linear-gradient(-45deg, transparent 75%, #22344a 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.ip-asset-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ip-asset-img span { font-weight: 800; color: var(--sky); }
.ip-asset figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ip-asset .btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-sizes .chip { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); border: 1px solid var(--border-dark); cursor: pointer; font-family: inherit; font-weight: 700; }
.ip-sizes .chip.on { background: var(--sky); color: var(--navy-dark); border-color: var(--sky); }
.ip-rev-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ip-rev-form input { padding: 9px 12px; border: 1px solid var(--line, #d8dee6); border-radius: 8px; font: inherit; }
.ip-rev-form input[name="label"] { width: 120px; }
.ip-rev-form input[name="note"] { flex: 1 1 240px; }
.em-contacts .center { text-align: center; width: 56px; }
.em-contacts input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--navy, #0b1e30); cursor: pointer; }
.em-contacts .mono-ish { font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---------- Sign a document ---------- */
.sg-card-body { display: flex; gap: 22px; align-items: center; }
.sg-card-stamp { width: 96px; height: 96px; flex: none; padding: 6px; border-radius: 50%; background: #fff; }
.sg-card-body p { margin: 0 0 14px; color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
.sg-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.sg-pill.ok { background: rgba(47,191,113,.16); color: #6fe0a0; } .sg-pill.warn { background: rgba(242,163,58,.16); color: #ffc46e; }
.sg-pill.bad { background: rgba(232,67,90,.16); color: #ff8c9c; } .sg-pill.muted { background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }
.sg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 16px 0; border: 1px solid var(--border-dark); border-radius: 10px; overflow: hidden; background: rgba(11,30,48,0.7); }
.sg-facts > div { display: flex; flex-direction: column; padding: 12px 16px; border-right: 1px solid var(--border-dark); }
.sg-facts span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.sg-facts b { margin-top: 4px; font-size: 14px; color: #fff; }
.sg-note { margin: 0 0 16px; padding: 11px 16px; border-left: 3px solid var(--sky); background: rgba(91,200,232,0.08); border-radius: 6px; color: rgba(255,255,255,0.85); }
.sg-signbox { margin-bottom: 20px; }
.sg-modes { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.sg-modes .choice { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--border-dark); border-radius: 8px; cursor: pointer; }
.sg-modes .choice:has(input:checked) { border-color: var(--red); background: rgba(200,16,46,0.1); }
.sg-modes .choice input { margin-top: .25rem; accent-color: var(--red); }
.sg-modes .choice .sub { display: block; margin-top: .2rem; }
.sg-decline { margin-top: 14px; } .sg-decline summary { cursor: pointer; color: rgba(255,255,255,0.55); font-size: 13px; }
.sg-detail { align-items: start; }
.sg-timeline { list-style: none; margin: 8px 0 12px 6px; padding: 0 0 0 16px; border-left: 2px solid var(--border-dark); }
.sg-timeline li { position: relative; display: flex; flex-direction: column; padding: 0 0 16px 12px; font-size: 13.5px; }
.sg-dot { position: absolute; left: -24px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy-mid); border: 2px solid var(--sky); }
.sg-timeline li:last-child .sg-dot { background: var(--sky); box-shadow: 0 0 10px rgba(91,200,232,.6); }
.sg-pages { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 6px 0 20px; }
.sg-page { position: relative; width: min(100%, 860px); background: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.45); user-select: none; touch-action: none; }
.sg-readonly .sg-page { width: 100%; touch-action: auto; }
.sg-page img { display: block; width: 100%; height: 100%; pointer-events: none; }
.sg-layer { position: absolute; inset: 0; cursor: crosshair; }
.sg-readonly .sg-layer { cursor: default; }
.sg-pageno { position: absolute; right: 2px; bottom: -19px; font-size: 11px; color: rgba(255,255,255,0.55); }
.sg-box { position: absolute; border: 1.5px dashed; border-radius: 4px; display: flex; align-items: flex-end; cursor: move; }
.sg-box span { margin: 0 0 2px 4px; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; }
.sg-box.t-signature { border-color: #1666b8; background: rgba(22,102,184,.12); } .sg-box.t-signature span { background: #1666b8; }
.sg-box.t-initials { border-color: #6b3fb5; background: rgba(107,63,181,.12); } .sg-box.t-initials span { background: #6b3fb5; }
.sg-box.t-date { border-color: #2c7a5a; background: rgba(44,122,90,.12); } .sg-box.t-date span { background: #2c7a5a; }
.sg-box.t-stamp { border-color: #C8102E; background: rgba(200,16,46,.07); border-radius: 50%; align-items: center; justify-content: center; } .sg-box.t-stamp span { background: #C8102E; margin: 0; }
.sg-box.ghost { opacity: .7; }
.sg-x { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #0b1e30; color: #fff; font-size: 13px; line-height: 20px; padding: 0; cursor: pointer; }
.sg-grip { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 3px; background: #0b1e30; cursor: nwse-resize; }
.sg-readonly .sg-x, .sg-readonly .sg-grip, .sg-editor.reviewing .sg-x, .sg-editor.reviewing .sg-grip { display: none; }
.sg-editor.reviewing .sg-layer { cursor: default; }
.sg-bar { position: sticky; top: 0; z-index: 5; margin-bottom: 26px; padding: 16px 18px; border-radius: 12px; background: rgba(7,19,31,0.96); border: 1px solid var(--border-dark); box-shadow: 0 16px 40px rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.sg-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.sg-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--border-dark); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.65); cursor: pointer; }
.sg-step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.1); font-size: 12px; }
.sg-step.on { background: #fff; color: var(--navy); border-color: #fff; } .sg-step.on span { background: var(--red); color: #fff; }
.sg-prompt p { margin: 4px 0 12px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.sg-prompt p b { color: #fff; }
.sg-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 14px 6px 0; vertical-align: middle; }
.sg-tools .chip { display: inline-flex; align-items: center; gap: 6px; }
.sg-stamp-ico { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.sg-next { vertical-align: middle; margin-right: 6px; }
@media (max-width: 640px) { .sg-card-body { flex-direction: column; align-items: flex-start; } .sg-bar { position: static; } }
.sg-tools .chip { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid var(--border-dark); }
.sg-tools .chip.on { background: var(--sky); color: var(--navy); border-color: var(--sky); }

/* ---------- Forms home: action buttons ---------- */
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.fx-group { display: flex; flex-direction: column; gap: 12px; }
.fx-group .sec-label { margin-bottom: 4px; }
.fx-btn { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 10px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-dark); transition: border-color .2s, background .2s, transform .2s; }
.fx-btn:hover { border-color: var(--sky); background: rgba(91,200,232,0.07); transform: translateY(-1px); }
.fx-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--red), #8f0b21); box-shadow: 0 6px 16px rgba(200,16,46,.3); }
.fx-ic svg { width: 20px; height: 20px; stroke: #fff; }
.fx-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fx-txt b { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.fx-txt span { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.45; }
.fx-go { font-size: 24px; line-height: 1; color: var(--sky); transition: transform .2s; }
.fx-btn:hover .fx-go { transform: translateX(3px); }
.fx-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(242,163,58,.18); color: #ffc46e; font-size: 11.5px; font-weight: 700; }
.fx-stamp { display: flex; align-items: center; gap: 14px; padding: 4px 4px 0; }
.fx-stamp img { width: 58px; height: 58px; flex: none; padding: 4px; border-radius: 50%; background: #fff; }
.fx-stamp p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
@media (max-width: 860px) { .fx-grid { grid-template-columns: 1fr; } }

/* Sign a document: upload drop zone */
.sg-drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; border: 1.5px dashed rgba(91,200,232,0.45); border-radius: 12px; background: rgba(91,200,232,0.04); cursor: pointer; transition: border-color .2s, background .2s; text-transform: none; letter-spacing: normal; }
.sg-drop:hover, .sg-drop.over { border-color: var(--sky); background: rgba(91,200,232,0.10); }
.sg-drop.has-file { border-style: solid; }
.sg-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sg-drop-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(91,200,232,0.14); }
.sg-drop-ic svg { width: 20px; height: 20px; stroke: var(--sky); }
.sg-drop-txt { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: #fff; font-weight: 500; }
.sg-drop-txt u { color: var(--sky); text-underline-offset: 3px; }
.sg-drop-txt span { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 400; }
.sg-drop-file { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(47,191,113,.16); color: #6fe0a0; font-size: 12.5px; font-weight: 700; }

/* Sign a document: editor with a side panel */
.sg-work { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.sg-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 28px); overflow-y: auto; padding: 16px; border-radius: 12px;
  background: rgba(7,19,31,0.96); border: 1px solid var(--border-dark); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.sg-side .sg-steps { flex-direction: column; margin: 0; }
.sg-side .sg-step { width: 100%; }
.sg-side .sg-prompt p { margin: 0; font-size: 13px; }
.sg-side-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.sg-side-label b { padding: 1px 8px; border-radius: 999px; background: rgba(91,200,232,.16); color: #fff; letter-spacing: 0; }
.sg-toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-tool { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 8px; border: 1px solid var(--border-dark); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.85); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.sg-tool:hover { border-color: rgba(91,200,232,.5); }
.sg-tool.on { border-color: var(--sky); background: rgba(91,200,232,0.14); color: #fff; box-shadow: inset 0 0 0 1px var(--sky); }
.sg-tool kbd { margin-left: auto; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border-dark); font: 10.5px/1.6 Menlo, monospace; color: rgba(255,255,255,0.5); }
.sg-sw { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.5px dashed; }
.sg-sw.t-signature { border-color: #5aa2ee; background: rgba(22,102,184,.35); } .sg-sw.t-initials { border-color: #a07ae0; background: rgba(107,63,181,.35); }
.sg-sw.t-date { border-color: #4cc391; background: rgba(44,122,90,.35); } .sg-sw.t-stamp { border-color: #ff5a73; background: rgba(200,16,46,.3); border-radius: 50%; }
.sg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sg-list li { display: flex; align-items: stretch; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); }
.sg-li-go { flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.sg-li-go b { font-weight: 600; } .sg-li-go span { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.55); }
.sg-li-go:hover b { color: var(--sky); }
.sg-li-x { flex: none; width: 32px; border: 0; border-left: 1px solid var(--border-dark); background: none; color: rgba(255,255,255,0.55); font-size: 16px; cursor: pointer; }
.sg-li-x:hover { color: #ff8c9c; }
.sg-empty { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.sg-review { display: flex; flex-direction: column; gap: 10px; }
.sg-review .fld { margin: 0; }
.sg-submit { width: 100%; justify-content: center; }
.sg-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-dark); }
.sg-nav .btn-primary, .sg-nav .btn-outline { padding: 9px 14px; font-size: 12px; }
.sg-work .sg-pages { align-items: stretch; }
.sg-work .sg-page { width: 100%; max-width: 900px; margin: 0 auto; }
.sg-box .sg-tag { margin: 0 0 2px 4px; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; }
.sg-box.t-signature .sg-tag { background: #1666b8; } .sg-box.t-initials .sg-tag { background: #6b3fb5; } .sg-box.t-date .sg-tag { background: #2c7a5a; } .sg-box.t-stamp .sg-tag { background: #C8102E; margin: 0; }
.sg-box.flash { animation: sg-flash 1.2s ease-out; }
@keyframes sg-flash { 0%, 40% { box-shadow: 0 0 0 6px rgba(91,200,232,.55); } 100% { box-shadow: 0 0 0 0 rgba(91,200,232,0); } }
/* Draft preview (review step) */
.sg-box.mocked { border-style: solid; border-width: 1px; background: rgba(255,255,255,0.35); align-items: center; justify-content: flex-start; overflow: visible; }
.sg-box.mocked .sg-tag { position: absolute; left: 0; top: -17px; margin: 0; opacity: .85; }
.sg-mock { pointer-events: none; }
.sg-mock-sig { font-family: 'Allura', 'Snell Roundhand', cursive; font-size: clamp(16px, 2.6vw, 30px); line-height: 1; color: #1452a3; padding-left: 4px; white-space: nowrap; overflow: hidden; }
.sg-mock-ini { width: 100%; text-align: center; font: italic 700 clamp(11px, 1.5vw, 17px) Georgia, 'Times New Roman', serif; color: #1452a3; }
.sg-mock-date { width: 100%; text-align: center; font-size: clamp(9px, 1.15vw, 13px); color: #1452a3; font-family: Helvetica, Arial, sans-serif; }
.sg-mock-stamp { width: 100%; height: 100%; object-fit: contain; opacity: .85; }
.sg-draft { position: absolute; right: 3px; bottom: 2px; padding: 0 4px; border-radius: 3px; background: rgba(200,16,46,.85); color: #fff; font: 700 8.5px/1.5 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; font-style: normal; pointer-events: none; }
.sg-vghost { position: absolute; left: calc(100% + 6px); bottom: 0; width: 150px; padding: 4px 6px; border: 1px dashed #2f9c64; border-radius: 3px; background: rgba(47,191,113,.12); color: #1f6e44; font: 600 8.5px/1.3 Montserrat, sans-serif; pointer-events: none; }
@media (max-width: 980px) { .sg-work { grid-template-columns: 1fr; } .sg-side { position: static; max-height: none; } .sg-vghost { display: none; } }
.sg-box.mocked span.sg-mock { margin: 0; padding: 0 0 0 4px; border-radius: 0; background: none; font-weight: 400; color: #1452a3; }
.sg-box.mocked span.sg-mock-ini, .sg-box.mocked span.sg-mock-date { padding: 0; }
.sg-box.mocked span.sg-mock-ini { font-weight: 700; }
.sg-review[hidden], .sg-side [hidden] { display: none !important; }
.sg-side svg, .sg-drop svg { width: 16px; height: 16px; flex: none; }
.docform label.sg-drop, .docform label.sg-drop * { text-transform: none; letter-spacing: normal; }
.docform label.sg-drop .sg-drop-txt b { font-weight: 700; }
.sg-drop-main { font-style: normal; }

/* Sign a document: faint signature / initials / stamp while placing; draft watermark in review */
.sg-box .sg-ink { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; opacity: .38; pointer-events: none; }
.sg-box .sg-ink-stamp { inset: 0; width: 100%; height: 100%; }
.sg-box.mocked .sg-ink { opacity: .62; }
.sg-box.mocked { background: rgba(255,255,255,0.15); border: 1px dashed rgba(11,30,48,.25); }
.sg-box.t-signature .sg-ink, .sg-box.t-initials .sg-ink { object-position: center; }
.sg-wm { position: absolute; inset: 0; display: none; place-items: center; overflow: hidden; pointer-events: none; }
.sg-wm span { transform: rotate(-32deg); font: 900 clamp(34px, 7.5vw, 92px)/1 Montserrat, sans-serif; letter-spacing: .08em; color: rgba(200,16,46,.16); white-space: nowrap; border: 6px solid rgba(200,16,46,.14); padding: 10px 26px; border-radius: 12px; }
.sg-editor.reviewing .sg-wm { display: grid; }
.sg-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,0.75); text-transform: none; letter-spacing: normal; cursor: pointer; }
.sg-check input { accent-color: var(--sky); }
.sg-stampq p { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,0.85); }
.sg-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-yn label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--border-dark); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; }
.sg-yn label:has(input:checked) { border-color: var(--sky); background: rgba(91,200,232,0.14); }
.sg-yn input { accent-color: var(--sky); }
.sg-signer-fld { margin: 0; }
.sg-toolbox[hidden], .sg-stampq[hidden] { display: none !important; }
.sg-signbox .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sg-side { top: 84px; max-height: calc(100vh - 100px); }
.sg-page { container-type: inline-size; }
.sg-wm span { font-size: 8.5cqw; border-width: .7cqw; padding: 1.2cqw 3cqw; }

/* Icons in buttons never grow beyond their text */
.btn-primary svg, .btn-outline svg, .btn-mini svg, .btn-account svg, button > svg, a.btn-primary > svg, a.btn-outline > svg { width: 16px; height: 16px; flex: none; }
.btn-mini svg { width: 13px; height: 13px; }
.md-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.md-upload .md-drop { align-self: stretch; }
.md-upload > .btn-primary { width: auto; }

/* Sign a document: internal or external signer; email preview; signing link; Extranet signing */
.sg-who { display: grid; gap: 10px; }
.sg-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 8px; border: 1px solid var(--border-dark); background: rgba(255,255,255,0.03); }
.sg-seg label { position: relative; display: flex; align-items: center; justify-content: center; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; color: rgba(255,255,255,0.7); }
.sg-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sg-seg label:has(input:checked) { background: var(--sky); color: var(--navy); }
.sg-seg label:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.sg-ext { display: grid; gap: 8px; }
.sg-ext .fld { margin: 0; }
.sg-ext-note { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.sg-ext-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); border: 1px solid rgba(91,200,232,0.4); vertical-align: 1px; }
.sg-linkbox .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sg-linkbox p { margin: 0 0 6px; }
.sg-send { align-items: start; }
.em-addr { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.em-addr dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding-top: 2px; }
.em-addr dd { margin: 0; overflow-wrap: anywhere; }
.em-attach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; border: 1px dashed var(--border-dark); border-radius: 8px; font-size: 13.5px; }
.em-attach svg { color: var(--sky); flex: none; }
.em-attach span { color: rgba(255,255,255,0.55); font-size: 12px; }
.em-preview { border-radius: 8px; overflow: hidden; background: #eef1f4; color: #111; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.em-pv-subj { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; background: #fff; border-bottom: 1px solid #dde2e8; font-size: 13px; }
.em-pv-subj span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7785; }
.em-pv-head { margin: 14px 14px 0; padding: 14px 20px; background: #07131f; border-radius: 6px 6px 0 0; }
.em-pv-head img { display: block; width: 120px; height: auto; }
.em-pv-bar { margin: 0 14px; height: 3px; background: linear-gradient(90deg, #C8102E 0 46%, #5BC8E8 46% 100%); }
.em-pv-body { margin: 0 14px; padding: 20px 20px 8px; background: #fff; }
.em-pv-body h3 { margin: 0 0 12px; font-size: 18px; color: #07131f; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.em-pv-body p { margin: 0 0 11px; font-size: 13px; line-height: 1.55; color: #333; }
.em-pv-body table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 12.5px; }
.em-pv-body th, .em-pv-body td { padding: 6px 8px; border: 1px solid #d9d9d9; text-align: left; color: #111; }
.em-pv-body th { width: 34%; background: #f3f5f8; }
.em-pv-btn { display: inline-block; margin: 2px 0 16px; padding: 10px 20px; border-radius: 5px; background: #C8102E; color: #fff; font-weight: 700; font-size: 13px; }
.em-pv-attach { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 9px 12px; background: #fff; border-top: 1px solid #e6e9ed; border-radius: 0 0 6px 6px; font-size: 12.5px; color: #333; }
.em-pv-attach svg { color: #C8102E; }
.xs-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: xs; }
.xs-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--border-dark); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.xs-steps li::before { counter-increment: xs; content: counter(xs); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 11px; }
.xs-steps li.done { color: rgba(255,255,255,0.8); }
.xs-steps li.done::before { content: '✓'; background: rgba(91,200,232,0.25); color: var(--sky); }
.xs-steps li.on { border-color: var(--sky); color: var(--white); }
.xs-steps li.on::before { background: var(--sky); color: var(--navy); }
.xs-narrow { max-width: 560px; }
.xs-passkey { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.xs-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.xs-or::before, .xs-or::after { content: ''; flex: 1; height: 1px; background: var(--border-dark); }
.xs-scan { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px dashed var(--border-dark); border-radius: 8px; }
.xs-scan[hidden], .xs-auth[hidden] { display: none !important; }
.xs-sig-current { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.xs-sig-current img { height: 54px; width: auto; padding: 6px 12px; border-radius: 6px; background: #fff; }
.sg-side input:not([type=checkbox]):not([type=radio]), .sg-side select {
  width: 100%; font: 600 13px/1.4 'Montserrat', sans-serif; color: #fff; padding: 8px 10px; border-radius: 6px;
  border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); -webkit-appearance: none; appearance: none;
}
.sg-side select { background: rgba(5,14,24,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BC8E8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 13px; padding-right: 30px; }
.sg-side select option { background: var(--navy-mid); }
.sg-side input::placeholder { color: rgba(255,255,255,0.28); font-weight: 500; }
.sg-side input:focus, .sg-side select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(91,200,232,0.14); }
.sg-party { display: grid; gap: 8px; margin-top: 4px; }
.sg-box.party-c { border-color: #e0a526; background: rgba(224,165,38,0.12); }
.sg-box.party-c .sg-tag, .sg-box.party-c > span:first-child { background: #e0a526; color: #1b1300; }
.ink-panel { max-width: 760px; }
.ink-tabs { max-width: 460px; }
.ink-pad { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; background: #fff; border-radius: 8px; touch-action: none; cursor: crosshair;
  background-image: linear-gradient(transparent calc(100% - 26%), rgba(11,30,58,0.18) calc(100% - 26%), rgba(11,30,58,0.18) calc(100% - 25.5%), transparent calc(100% - 25.5%)); }
.ink-pad-ini { max-width: 420px; aspect-ratio: 2 / 1; }
.ink-scan { background-image: none; }
.ink-pane[hidden] { display: none !important; }
.ink-pane { display: grid; gap: 10px; }
.warn-text { color: #ffb4b4 !important; }
.ink-phone summary { cursor: pointer; font-weight: 700; color: var(--sky); }
.ink-phone-body { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ink-qr { width: 150px; height: 150px; border-radius: 6px; flex: none; }
.ink-phone-body p { margin: 0; max-width: 360px; font-size: 13px; color: rgba(255,255,255,0.7); }
.xs-sig-current img.xs-ini { height: 48px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.rec-grid > div { display: grid; gap: 10px; align-content: start; }
.rec-grid p { margin: 0; }
.rec-grid .btn-primary, .rec-grid .btn-outline { justify-self: start; }
.ob-review { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid rgba(91,200,232,0.3); border-radius: 8px; background: rgba(91,200,232,0.06); }
.ob-check { display: flex !important; align-items: flex-start; gap: 10px; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.85) !important; line-height: 1.5; }
.ob-check input { margin-top: 3px; flex: none; }
.rec-add { display: grid; gap: 10px; justify-items: start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-dark); }
.rec-add:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rec-seg { min-width: 300px; }
.rec-seg:has(label:only-child) { grid-template-columns: 1fr; min-width: 160px; }

/* Uniform function tiles (intranet and Extranet): one size, title up to two lines, one-line description */
.tile { height: 96px; align-items: center; padding: 0 20px; gap: 14px; }
.home-col .tile { height: 96px; padding: 0 16px; gap: 12px; }
.tile-icon { width: 42px; height: 42px; }
.tile-icon svg { width: 20px; height: 20px; }
.tile-body b, .home-col .tile-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
.tile-body > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.4; }
.tile .tag { top: 8px; right: 10px; }
.tile-go { flex: none; }

/* Apps (Email, SharePoint, Navan): a separate row above the functions */
.quick-apps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 30px; padding: 0 0 22px; border-bottom: 1px solid var(--border-dark); }
.qa-label { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-right: 6px; }
.qa { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 8px; min-width: 190px; border-radius: 26px; border: 1px solid rgba(91,200,232,0.28); background: rgba(5,14,24,0.55); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.qa:hover { border-color: var(--sky); background: rgba(91,200,232,0.1); }
.qa-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(91,200,232,0.14); color: var(--sky); flex: none; }
.qa-ic svg { width: 18px; height: 18px; }
.qa-t { display: grid; line-height: 1.2; flex: 1; }
.qa-t b { font-size: 14px; font-weight: 800; }
.qa-t span { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.qa-go { color: var(--sky); opacity: .7; font-weight: 700; }
.qa-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; color: #e0a526; border: 1px solid rgba(224,165,38,0.45); white-space: nowrap; }
@media (max-width: 700px) { .qa { flex: 1 1 100%; } .qa-label { width: 100%; } }
/* Home: room for five columns on wide screens; every tile the same size, description up to two lines. */
@media (min-width: 1501px) { .hero-lux .wrap { max-width: 1560px; } }
.home-col .tile { height: 104px; padding: 0 14px; gap: 12px; }
.home-col .tile-body > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-col .tile-body b { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
.tiles .tile { height: 104px; }
.tiles .tile-body > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pri-critical { background: #C8102E; color: #fff; box-shadow: 0 0 0 1px rgba(255,120,140,0.5); }
.pri-none { background: transparent; color: rgba(255,255,255,0.45); border: 1px dashed rgba(255,255,255,0.2); }
.tag-internal { border-color: rgba(224,165,38,0.45) !important; color: #f0c56a !important; }
.t-assignee { display: flex; align-items: center; gap: 10px; }
.t-assignee select { flex: 1; min-width: 0; }
.t-assignee-av { flex: none; display: grid; }
.mini-av.md { width: 38px; height: 38px; font-size: 13px; }
.t-new-internal[hidden] { display: none !important; }
.opt-link { margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--sky); }
.viewas-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: #e0a526; color: #1b1300; font-size: 13.5px; font-weight: 600; }
.viewas-bar svg { width: 16px; height: 16px; }
.viewas-bar form { margin: 0; }
.viewas-bar .btn-mini { background: #1b1300; color: #ffd978; border-color: #1b1300; }

/* Home: Arrange (move functions and apps; they snap into the same aligned places) */
.home-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: -18px 0 12px; min-height: 34px; }
.arrange-btn svg { width: 14px; height: 14px; }
.arrange-help { font-size: 12.5px; color: rgba(255,255,255,0.65); margin-right: auto; }
.btn-sm { padding: 8px 16px; font-size: 11px; }
.arranging .home-col { min-height: 120px; padding: 6px; margin: -6px; border-radius: 14px; outline: 1px dashed rgba(91,200,232,0.25); }
.arranging .home-col .tile, .arranging .qa[data-app] { cursor: grab; border-style: dashed; border-color: rgba(91,200,232,0.45); }
.arranging .home-col .tile .tile-go, .arranging .qa .qa-go, .arranging .qa .qa-tag, .arranging .tile .tag { visibility: hidden; }
.arranging .tile.dragging, .arranging .qa.dragging { opacity: .35; }
.drop-slot { height: 104px; border-radius: 12px; border: 2px dashed var(--sky); background: rgba(91,200,232,0.08); }
.drop-slot-app { height: 52px; width: 190px; border-radius: 26px; }
.arr-box { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(2, 22px); gap: 3px; z-index: 2; }
.qa .arr-box { position: static; transform: none; grid-template-columns: repeat(2, 22px); margin-left: 4px; }
.arr { width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid rgba(91,200,232,0.45); background: rgba(5,14,24,0.85); color: var(--sky); font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
.arr:hover, .arr:focus-visible { background: var(--sky); color: var(--navy); outline: none; }
.tile.moved, .qa.moved { animation: movedPulse .6s ease; }
@keyframes movedPulse { 0% { box-shadow: 0 0 0 0 rgba(91,200,232,0.6); } 100% { box-shadow: 0 0 0 10px rgba(91,200,232,0); } }
@media (prefers-reduced-motion: reduce) { .tile.moved, .qa.moved { animation: none; } }
.ext-test { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border-dark); }
.ext-test.on { border-style: solid; border-color: rgba(91,200,232,0.45); background: rgba(91,200,232,0.07); }
.ext-test > svg { width: 18px; height: 18px; color: var(--sky); flex: none; }
.ext-test > div { flex: 1; min-width: 220px; }
.ext-test .sub { display: block; margin-top: 2px; }

/* Inactivity sign-out: the one-minute warning and the message on the sign-in page */
.idle-warn { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(3,8,14,0.72); backdrop-filter: blur(3px); }
.idle-warn-box { max-width: 420px; width: 100%; padding: 26px 26px 22px; border-radius: 14px; background: var(--navy-mid); border: 1px solid rgba(91,200,232,0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.5); color: #fff; }
.idle-warn-box b { display: block; font-size: 18px; margin-bottom: 8px; }
.idle-warn-box p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.idle-warn-box [data-idle-left] { font-weight: 800; color: #ffcf6e; }
.idle-warn-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.idle-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(224,165,38,0.5); background: rgba(224,165,38,0.12); color: #ffe2a3; font-size: 13.5px; line-height: 1.5; }
.idle-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #e0a526; }
.idle-note b { color: #fff; }

/* ═══ Top bar: settings, notifications ═══ */
.tb-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-dark); background: rgba(91,200,232,0.06); color: rgba(255,255,255,0.85); cursor: pointer; transition: border-color .2s, color .2s, background .2s; flex: none; }
.tb-icon:hover, .tb-icon[aria-expanded="true"] { border-color: var(--sky); color: var(--sky); background: rgba(91,200,232,0.12); }
.tb-icon svg { width: 18px; height: 18px; }
.nbell { position: relative; }
.nbadge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--navy); }
.npanel { position: absolute; right: -8px; top: 48px; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); display: flex; flex-direction: column; border-radius: 14px; background: #0a1a2a; border: 1px solid rgba(91,200,232,0.3); box-shadow: 0 24px 60px rgba(0,0,0,0.55); z-index: 80; overflow: hidden; }
.npanel[hidden] { display: none; }
.npanel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-dark); }
.npanel-head b { font-size: 14px; letter-spacing: .04em; }
.npanel-head a { font-size: 12px; font-weight: 700; color: var(--sky); text-decoration: none; }
.npanel-list { overflow-y: auto; padding: 6px 0; }
.npanel-empty { margin: 0; padding: 26px 16px; text-align: center; color: rgba(255,255,255,0.55); font-size: 13px; }
.nsec { padding: 10px 16px 4px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.nitem { display: flex; gap: 11px; align-items: flex-start; padding: 9px 16px; color: #fff; text-decoration: none; border-left: 3px solid transparent; }
.nitem:hover { background: rgba(91,200,232,0.07); }
.nitem.unread { border-left-color: var(--sky); background: rgba(91,200,232,0.05); }
.nitem-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(91,200,232,0.12); color: var(--sky); }
.nitem-ic svg { width: 15px; height: 15px; }
.nk-due .nitem-ic, .nk-due .ntoast-ic { background: rgba(232,67,90,0.16); color: #ff9aa8; }
.nk-pending .nitem-ic, .nk-pending .ntoast-ic { background: rgba(224,165,38,0.16); color: #f0c56a; }
.nk-meeting .nitem-ic, .nk-meeting .ntoast-ic { background: rgba(124,92,255,0.18); color: #b9a7ff; }
.nitem-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nitem-t b { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nitem-t span { font-size: 11.5px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nitem-at { flex: none; font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap; padding-top: 2px; }
.njoin { flex: none; align-self: center; padding: 3px 10px; border-radius: 12px; background: #7c5cff; color: #fff; font-size: 11px; font-weight: 800; }
.npanel-foot { display: grid; gap: 4px; padding: 0 16px; font-size: 12px; }
.npanel-foot:not(:empty) { padding: 10px 16px 12px; border-top: 1px solid var(--border-dark); }
.npanel-foot a { color: var(--sky); font-weight: 700; text-decoration: none; }
.nwarn { color: #f0c56a; }
.ntoasts { position: fixed; right: 18px; top: 82px; z-index: 210; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.ntoast { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #0d2236; border: 1px solid rgba(91,200,232,0.35); box-shadow: 0 16px 40px rgba(0,0,0,0.5); color: #fff; text-decoration: none; animation: toastIn .35s ease; transition: opacity .35s, transform .35s; }
.ntoast.out { opacity: 0; transform: translateX(20px); }
.ntoast-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(91,200,232,0.14); color: var(--sky); }
.ntoast-ic svg { width: 15px; height: 15px; }
.ntoast b { display: block; font-size: 13px; }
.ntoast span span { display: block; font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ═══ Widget bar ═══ */
.wbar { display: flex; align-items: center; gap: 10px; padding: 0 44px; min-height: 40px; background: linear-gradient(180deg, rgba(7,19,31,0.94), rgba(7,19,31,0.78)); border-bottom: 1px solid rgba(91,200,232,0.12); position: relative; z-index: 40; }
.wbar-in { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.wbar-in::-webkit-scrollbar { display: none; }
.wb-sep { flex: none; width: 1px; height: 18px; background: rgba(255,255,255,0.12); }
.wb { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,0.85); white-space: nowrap; }
.wb-off { opacity: .55; }
.wb-k { font-weight: 700; letter-spacing: .03em; color: rgba(255,255,255,0.7); }
.wb-v { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.wb-s { font-size: 11px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.wb-s.up { color: #5fd39a; } .wb-s.down { color: #ff8b9a; }
.wx-ic { display: inline-grid; width: 16px; height: 16px; color: #f0c56a; }
.wx-ic svg { width: 16px; height: 16px; }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.wb-sports .win { color: #5fd39a; } .wb-sports .loss { color: #ff8b9a; }
.wb-sports .live { display: inline-block; padding: 0 5px; border-radius: 3px; background: var(--red); color: #fff; font-size: 9.5px; letter-spacing: .08em; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .55; } }
.wbar-edit { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: rgba(255,255,255,0.45); }
.wbar-edit:hover { color: var(--sky); background: rgba(91,200,232,0.1); }
.wbar-edit svg { width: 13px; height: 13px; }
.wdate { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,0.85); }
@media (max-width: 760px) { .wbar { padding: 0 12px; } .wbar-in { justify-content: flex-start; } }

/* World clocks: five styles */
.wclock { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wclock .wc-ap { font-size: .72em; margin-left: 2px; opacity: .7; font-weight: 600; }
.wclock .wc-day { font-size: 9.5px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); margin-left: 4px; text-transform: uppercase; letter-spacing: .06em; }
.style-classic .wc-city { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.style-classic .wc-time { font-size: 12.5px; font-weight: 700; color: #fff; }
.style-analog .wc-dial { width: 24px; height: 24px; flex: none; }
.style-analog .wc-face { fill: rgba(91,200,232,0.08); stroke: rgba(91,200,232,0.55); stroke-width: .8; }
.style-analog circle:not(.wc-face) { fill: rgba(255,255,255,0.8); }
.style-analog line { stroke-linecap: round; } .style-analog .wc-h, .style-analog .wc-m { stroke: #fff; } .style-analog .wc-s { stroke: var(--red); }
.style-analog .wc-txt { display: grid; line-height: 1.1; }
.style-analog .wc-city { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.style-analog .wc-time { font-size: 12px; font-weight: 700; color: #fff; }
.style-serif { gap: 6px; align-items: baseline; }
.style-serif .wc-time { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 500; color: #fff; letter-spacing: .02em; }
.style-serif .wc-city { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 12.5px; color: var(--sky); }
.style-minimal { gap: 5px; align-items: baseline; }
.style-minimal .wc-time { font-size: 12.5px; font-weight: 400; color: #fff; }
.style-minimal .wc-city { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.5); }
.style-badge .wc-code { padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(91,200,232,0.5); color: var(--sky); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; }
.style-badge .wc-time { font-size: 12.5px; font-weight: 700; color: #fff; }

/* ═══ Settings page ═══ */
.st-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.st-tabs a { padding: 7px 14px; border-radius: 18px; border: 1px solid var(--border-dark); color: rgba(255,255,255,0.8); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.st-tabs a:hover { border-color: var(--sky); color: var(--sky); }
.st-wlist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; counter-reset: wl; }
.st-wlist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-dark); background: rgba(5,14,24,0.4); }
.st-wlist li::before { counter-increment: wl; content: counter(wl); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(91,200,232,0.14); color: var(--sky); font-size: 11px; font-weight: 800; flex: none; }
.st-wlist b { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-wtype { flex: none; width: 110px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.st-wlist .row-actions { display: flex; gap: 6px; }
.st-wlist form { margin: 0; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0 0 22px; }
.st-add { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--border-dark); background: rgba(5,14,24,0.35); }
.st-add .fld { margin: 0; }
.st-add-head { display: flex; justify-content: space-between; align-items: baseline; }
.st-add-head b { font-size: 14px; }
.st-add-act { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.st-add input, .st-add select, .st-appform input, .st-prefs select { width: 100%; font: 600 13px/1.4 'Montserrat', sans-serif; color: #fff; padding: 8px 10px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); }
.st-add select option, .st-prefs select option { background: var(--navy-mid); }
.st-search { display: flex; gap: 6px; }
.st-prefs { display: grid; gap: 16px; padding-top: 6px; border-top: 1px solid var(--border-dark); }
.st-prefs .fld { margin: 0; }
.st-seg { max-width: 200px; }
.st-clocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.st-clock { position: relative; display: grid; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-dark); cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.st-clock input { position: absolute; opacity: 0; }
.st-clock.on, .st-clock:has(input:checked) { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.st-clock-demo { display: flex; align-items: center; min-height: 32px; padding: 4px 8px; border-radius: 6px; background: rgba(7,19,31,0.9); }
.st-clock b { font-size: 13px; color: #fff; }
.st-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.st-apps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.st-apps li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-dark); }
.st-apps li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.st-apps li form { margin: 0; }
.st-appform { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.st-appform .fld { margin: 0; }
.st-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.st-icons label { cursor: pointer; }
.st-icons input { position: absolute; opacity: 0; }
.st-icons span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-dark); color: rgba(255,255,255,0.75); }
.st-icons input:checked + span { border-color: var(--sky); color: var(--sky); background: rgba(91,200,232,0.12); }
.st-icons svg { width: 16px; height: 16px; }
.home-tools [hidden], .tb-icon[hidden] { display: none !important; }
.arrange-btn { display: inline-flex; align-items: center; gap: 7px; }
.st-add [hidden], .st-prefs [hidden], .nbadge[hidden] { display: none !important; }
.st-add button[disabled] { opacity: .4; cursor: not-allowed; }
.st-prefs .btn-primary, .st-appform .btn-primary { justify-self: start; }
.st-prefs select { max-width: 360px; }
.st-loc { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 0 0 16px; padding: 14px; border-radius: 12px; border: 1px solid rgba(91,200,232,0.25); background: rgba(91,200,232,0.05); }
.st-loc > div { display: grid; gap: 3px; }
.st-loc b { font-size: 14px; }
.st-loc-form { display: grid; gap: 8px; min-width: 260px; }
.st-loc-form input, .st-loc-form select { width: 100%; font: 600 13px/1.4 'Montserrat', sans-serif; color: #fff; padding: 8px 10px; border-radius: 6px; border: 1.5px solid rgba(91,200,232,0.22); background: rgba(5,14,24,0.72); }
.st-loc-form [hidden] { display: none !important; }
.st-default { margin: 0 0 14px; }
.st-reset { margin: 0 0 14px; }
.st-seg3 { max-width: 270px; grid-template-columns: repeat(3, 1fr); }
.st-tones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-tone { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-dark); cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.st-tone input { position: absolute; opacity: 0; }
.st-tone.on, .st-tone:has(input:checked) { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.st-tone > span { display: grid; gap: 2px; }
.st-tone b { font-size: 13.5px; color: #fff; }
.st-tone-play { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(91,200,232,0.5); background: rgba(91,200,232,0.1); color: var(--sky); font-size: 11px; cursor: pointer; }
.st-tone-play:hover { background: var(--sky); color: var(--navy); }
.st-ms { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: 12px; border: 1px dashed rgba(91,200,232,0.35); }
.st-ms.on { border-style: solid; background: rgba(91,200,232,0.06); }
.st-ms > svg { width: 22px; height: 22px; color: var(--sky); flex: none; }
.st-ms > div { flex: 1; min-width: 240px; display: grid; gap: 3px; }
.st-ms .hint { margin: 0; }
.st-ms .hint:empty { display: none; }

/* ═══ Business Travel ═══ */
.tr-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 22px; }
.tr-hub .fx-btn { min-height: 86px; }
.tr-main { grid-column: 1 / -1; border-color: rgba(91,200,232,0.5) !important; background: linear-gradient(120deg, rgba(91,200,232,0.14), rgba(11,30,48,0.85) 60%) !important; }
.tr-main .fx-txt b { font-size: 18px; }
.tr-navan .fx-ic { color: #e0a526; }
.tr-search .tr-route { display: grid; grid-template-columns: 1fr auto 1fr 170px 190px; gap: 12px; align-items: end; }
.tr-search .fld { margin: 0; }
.tr-swap { width: 38px; height: 40px; border-radius: 50%; border: 1px solid rgba(91,200,232,0.45); background: rgba(91,200,232,0.08); color: var(--sky); font-size: 16px; cursor: pointer; }
.tr-swap:hover { background: var(--sky); color: var(--navy); }
.tr-need { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.tr-need .fld-label { margin-right: 6px; }
.tr-chip { cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.tr-chip input { position: absolute; opacity: 0; }
.tr-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-dark); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.75); }
.tr-chip span svg { width: 15px; height: 15px; }
.tr-chip input:checked + span { border-color: var(--sky); background: rgba(91,200,232,0.14); color: #fff; }
.tr-chip input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.tr-part[hidden], [data-add-part][hidden] { display: none !important; }
.tr-part .sec-label svg { width: 14px; height: 14px; vertical-align: -2px; }
.tr-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tr-check { align-self: end; padding-bottom: 10px; }
.tr-people { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tr-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.tr-link { position: relative; display: grid; gap: 2px; padding: 11px 34px 11px 14px; border-radius: 10px; border: 1px solid var(--border-dark); background: rgba(5,14,24,0.45); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.tr-link:hover { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.tr-link b { font-size: 14px; }
.tr-link span { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.tr-link i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sky); font-style: normal; }
.tr-link.primary { border-color: rgba(224,165,38,0.55); background: rgba(224,165,38,0.08); }
.tr-link.primary span { color: #f0c56a; }
.tr-seg-head { display: flex; align-items: center; gap: 12px; }
.tr-seg-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tr-seg-head b { font-size: 15px; }
.tr-seg-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(91,200,232,0.12); color: var(--sky); flex: none; }
.tr-seg-ic svg { width: 18px; height: 18px; }
.tr-seg.booked { border-color: rgba(95,211,154,0.35); }
.tr-book summary { cursor: pointer; font-weight: 700; color: var(--sky); margin-top: 10px; }
.tr-book form { margin-top: 10px; }
.tr-booking { margin-top: 10px; }
.tr-st-planning { background: rgba(224,165,38,0.16); color: #f0c56a; } .tr-st-booked { background: rgba(95,211,154,0.16); color: #5fd39a; }
.tr-st-completed { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); } .tr-st-cancelled { background: rgba(232,67,90,0.14); color: #ff9aa8; }
@media (max-width: 980px) { .tr-search .tr-route { grid-template-columns: 1fr auto 1fr; } .tr-search .tr-route .fld:nth-of-type(3), .tr-search .tr-route .fld:nth-of-type(4) { grid-column: span 1; } }
@media (max-width: 640px) { .tr-search .tr-route { grid-template-columns: 1fr; } .tr-swap { justify-self: center; transform: rotate(90deg); } }
/* Centre the widgets when they fit, and scroll from the first one when they don't (no clipping on the left). */
.wbar-in { justify-content: flex-start; }
.wbar-in > :first-child { margin-left: auto; }
.wbar-in > :last-child { margin-right: auto; }

/* ═══ Tasks: priority colours and overdue highlight ═══ */
.p-critical { --pc: #e8213f; } .p-urgent { --pc: #f2711c; } .p-high { --pc: #e0a526; }
.p-medium { --pc: #5bc8e8; } .p-low { --pc: #45c486; } .p-non_essential { --pc: #8a96a3; }
.pri-critical { background: #e8213f; color: #fff; }
.pri-urgent { background: rgba(242,113,28,0.2); color: #ffad73; }
.pri-high { background: rgba(224,165,38,0.18); color: #f3c869; }
.pri-medium { background: rgba(91,200,232,0.14); color: var(--sky); }
.pri-low { background: rgba(69,196,134,0.15); color: #6fdca5; }
.pri-none { background: transparent; color: rgba(255,255,255,0.45); border: 1px dashed rgba(255,255,255,0.2); }
/* Board cards: a coloured edge and a faint wash in the priority colour */
.tcard[class*="p-"] { border-left: 4px solid var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 10%, var(--navy-mid)), var(--navy-mid) 55%); }
.tcard.done { border-left-color: rgba(255,255,255,0.15); background: var(--navy-mid); }
/* Grid rows */
.tgrid-table tr.trow > td:first-child { box-shadow: inset 4px 0 0 var(--pc); }
/* Timeline bars */
.ttl-bar[class*="p-"] { box-shadow: inset 0 0 0 1.5px var(--pc); }
/* Task page: a slim strip in the priority colour */
.task-pri-strip { height: 4px; border-radius: 2px; margin: 0 0 16px; background: linear-gradient(90deg, var(--pc), transparent); }

/* Overdue: a soft glow that moves through warm colours (red, orange, magenta), on cards, rows and timeline bars */
@keyframes overduePulse {
  0%   { box-shadow: 0 0 0 1px #e8213f, 0 0 14px 1px rgba(232,33,63,0.55); border-color: #e8213f; }
  33%  { box-shadow: 0 0 0 1px #f2711c, 0 0 18px 2px rgba(242,113,28,0.55); border-color: #f2711c; }
  66%  { box-shadow: 0 0 0 1px #d6338f, 0 0 16px 2px rgba(214,51,143,0.55); border-color: #d6338f; }
  100% { box-shadow: 0 0 0 1px #e8213f, 0 0 14px 1px rgba(232,33,63,0.55); border-color: #e8213f; }
}
@keyframes overdueRow { 0%, 100% { background: rgba(232,33,63,0.12); } 33% { background: rgba(242,113,28,0.12); } 66% { background: rgba(214,51,143,0.12); } }
@keyframes overdueText { 0%, 100% { color: #ff6b81; } 33% { color: #ffa260; } 66% { color: #ff74c4; } }
.tcard.overdue:not(.done) { animation: overduePulse 2.4s ease-in-out infinite; }
.tcard.overdue .due.late { animation: overdueText 2.4s ease-in-out infinite; font-weight: 800; }
.tgrid-table tr.trow.overdue > td { animation: overdueRow 2.4s ease-in-out infinite; }
.ttl-bar.overdue { animation: overduePulse 2.4s ease-in-out infinite; }
.overdue-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid #e8213f; color: #fff; font-size: 14px;
  background: linear-gradient(90deg, rgba(232,33,63,0.25), rgba(214,51,143,0.12)); animation: overduePulse 2.4s ease-in-out infinite; }
.overdue-banner svg { width: 18px; height: 18px; color: #ff6b81; flex: none; }
/* Less motion requested: a steady red outline instead */
@media (prefers-reduced-motion: reduce) {
  .tcard.overdue:not(.done), .ttl-bar.overdue, .overdue-banner { animation: none; box-shadow: 0 0 0 2px #e8213f; }
  .tgrid-table tr.trow.overdue > td { animation: none; background: rgba(232,33,63,0.14); }
  .tcard.overdue .due.late { animation: none; color: #ff6b81; }
}

/* ═══ Dashboard ═══ */
.tb-dash { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid rgba(91,200,232,0.4); background: rgba(91,200,232,0.08);
  color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s, background .2s, color .2s; }
.tb-dash:hover { border-color: var(--sky); background: rgba(91,200,232,0.16); color: var(--sky); }
.tb-dash svg { width: 16px; height: 16px; color: var(--sky); }
@media (max-width: 900px) { .tb-dash span { display: none; } .tb-dash { width: 38px; padding: 0; justify-content: center; } }
.db-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 1150px) { .db-wrap { grid-template-columns: 1fr; } }
.db-main { display: grid; gap: 22px; }
.db-sec { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--border-dark); background: rgba(11,30,48,0.82); }
.db-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }
.db-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.db-head h2 svg { width: 16px; height: 16px; }
.db-head a { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); text-decoration: none; }
.db-head a:hover { color: var(--sky); }
.db-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.db-card { position: relative; display: grid; gap: 3px; padding: 14px 14px 13px; border-radius: 12px; border: 1px solid var(--border-dark); background: rgba(5,14,24,0.5); color: #fff; text-decoration: none; transition: border-color .2s, transform .2s; min-height: 104px; align-content: start; }
.db-card:hover { border-color: rgba(91,200,232,0.55); transform: translateY(-2px); }
.db-ic { position: absolute; top: 12px; right: 12px; color: rgba(255,255,255,0.3); }
.db-ic svg { width: 16px; height: 16px; }
.db-v { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; padding-right: 22px; }
.db-l { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); }
.db-s { font-size: 11.5px; color: rgba(255,255,255,0.5); overflow-wrap: anywhere; }
.db-warn { border-color: rgba(224,165,38,0.5); } .db-warn .db-v { color: #f3c869; }
.db-alert { border-color: rgba(232,33,63,0.6); background: rgba(232,33,63,0.08); } .db-alert .db-v { color: #ff6b81; }
.db-good .db-v { color: #6fdca5; }
.db-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-dark); }
.db-list-t { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.db-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.db-list li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.db-list li a { color: #fff; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.db-list li a:hover { color: var(--sky); }
.db-list li > span:last-child { margin-left: auto; color: rgba(255,255,255,0.55); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-list li.late > span:last-child { color: #ff6b81; font-weight: 700; }
.db-list li[class*="pr-"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; background: var(--sky); }
.db-list li.pr-critical::before { background: #e8213f; } .db-list li.pr-urgent::before { background: #f2711c; } .db-list li.pr-high::before { background: #e0a526; } .db-list li.pr-low::before { background: #45c486; }
.db-tag { padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.db-tag.st-issued { background: rgba(91,200,232,0.15); color: var(--sky); } .db-tag.st-paid { background: rgba(69,196,134,0.16); color: #6fdca5; } .db-tag.st-draft { background: rgba(224,165,38,0.14); color: #f3c869; }
.db-side { position: sticky; top: 84px; }
.db-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.db-feed li { position: relative; padding: 9px 0 9px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.8); }
.db-feed li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.db-feed b { color: #fff; }
.db-detail { display: block; font-size: 11.5px; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-at { display: block; font-size: 10.5px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.db-cards { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.db-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1150px) { .db-wrap { grid-template-columns: 1fr; } .db-side { position: static; } }
.db-sec { padding: 18px 18px; }
.db-v { font-size: 24px; }

/* ═══ Page headings: Tenor Sans, a high-contrast classical sans (thin and thick strokes, no italics), in title case
   (all pages and functions, intranet and Extranet). The accent word is coloured only.
   The home and sign-in pages keep their own serif (Cormorant, like "Intranet"). ═══ */
:root { --display: 'Tenor Sans', 'Optima', 'Candara', 'Segoe UI', sans-serif; }
.hero:not(.hero-lux) h1 { font-family: var(--display); font-weight: 400; font-style: normal; letter-spacing: 0.02em; line-height: 1.14; font-size: clamp(32px, 3.8vw, 52px); }
.hero-page:not(.hero-lux) h1 { font-size: clamp(30px, 3.3vw, 46px); }
.hero:not(.hero-lux) h1 em { font-family: var(--display); font-style: normal; font-weight: 400; color: var(--sky); letter-spacing: 0.02em; }
.panel h2:not(.hero-login .panel h2), .h2, .rec-form h2 { font-family: var(--display); font-weight: 400; font-style: normal; letter-spacing: 0.02em; }
.panel h2:not(.hero-login .panel h2) { font-size: 27px; }
/* Documents shown on a page keep their own type (Jost, as printed and in the PDF), not the page-heading font. */
.doc.px .px-title h1 { font: 500 19pt/1.05 'Jost', 'Futura', Arial, sans-serif; letter-spacing: 0.1em; font-style: normal; }
.doc.px h2, .doc.px h3 { font-family: 'Jost', 'Futura', Arial, sans-serif; letter-spacing: inherit; }
.hero:not(.hero-lux) .hero-slogan { font-family: var(--display); font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: 0.06em; }

/* Users → Navan: settings checkboxes */
.navan-settings .btn-primary { width: auto; align-self: flex-start; padding-left: 34px; padding-right: 34px; }
.form .check-row, .check-row { display: flex; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--white); gap: 12px; align-items: flex-start; margin: 4px 0 14px; cursor: pointer; }
.check-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--sky); flex: none; }
.check-row b { display: block; font-weight: 600; }
.check-row .sub { display: block; margin-top: 2px; }
.user-grid + .table-wrap { margin-top: 22px; }

/* ═══ Logistics ═══ */
.alert-warn { background: rgba(242,163,58,0.1); border: 1px solid rgba(242,163,58,0.35); color: #f7c47e; }
.alert ul { margin: 6px 0 0 18px; }
.sh-st { white-space: nowrap; }
.sh-st-label_created, .sh-st-unknown { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.18); }
.sh-st-picked_up, .sh-st-in_transit { background: rgba(91,200,232,0.12); color: #9fdcf0; border-color: rgba(91,200,232,0.35); }
.sh-st-out_for_delivery { background: rgba(140,120,255,0.14); color: #c3b6ff; border-color: rgba(140,120,255,0.4); }
.sh-st-delivered { background: rgba(47,191,113,0.12); color: #7fe0ad; border-color: rgba(47,191,113,0.35); }
.sh-st-exception, .sh-st-returned { background: rgba(232,67,90,0.12); color: #ff9aa8; border-color: rgba(232,67,90,0.35); }
.sh-st-cancelled { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.12); text-decoration: line-through; }
.sh-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 16px; }
.sh-count { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 10px; color: #fff; text-decoration: none; background: rgba(255,255,255,0.02); transition: border-color .2s, background .2s; }
.sh-count b { font-size: 24px; font-weight: 700; line-height: 1.1; }
.sh-count span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sh-count:hover, .sh-count.on { border-color: var(--sky); background: rgba(91,200,232,0.07); }
.sh-filter { margin-bottom: 16px; }
.sh-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sh-filter-row input[name=q] { flex: 1 1 260px; }
.sh-filter-row select { flex: 0 1 170px; }
.sh-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.sh-pkg, .sh-item { display: grid; gap: 10px 12px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--border-dark); }
.sh-pkg { grid-template-columns: minmax(90px, 1fr) minmax(200px, 2fr) minmax(110px, 1fr) 28px; }
.sh-item { grid-template-columns: minmax(200px, 3fr) 70px minmax(90px, 1fr) minmax(90px, 1fr) 60px 28px; }
.sh-pkg .chip-x, .sh-item .chip-x { margin-bottom: 8px; }
.sh-dims { display: flex; gap: 6px; }
.sh-dims input { min-width: 0; flex: 1; }
.sh-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.7); }
.sh-rate { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-dark); background: rgba(255,255,255,0.03); color: #fff; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.sh-rate b { font-weight: 700; } .sh-rate span { grid-column: 1; font-size: 12px; color: rgba(255,255,255,0.55); }
.sh-rate strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; color: var(--sky); }
.sh-rate s { grid-column: 2; font-size: 11px; color: rgba(255,255,255,0.4); text-align: right; }
.sh-rate:hover, .sh-rate.on { border-color: var(--sky); background: rgba(91,200,232,0.08); }
.sh-rate.on { box-shadow: 0 0 0 2px rgba(91,200,232,0.35); }
.sh-block { margin: 0; font: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: rgba(255,255,255,0.85); }
.sh-events { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--border-dark); }
.sh-events li { position: relative; padding: 0 0 14px 8px; }
.sh-events li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-mid); border: 2px solid rgba(255,255,255,0.3); }
.sh-events li.now::before { background: var(--sky); border-color: var(--sky); box-shadow: 0 0 0 4px rgba(91,200,232,0.2); }
.sh-events b { font-weight: 600; font-size: 14px; }
.sh-files { list-style: none; margin: 0; padding: 0; }
.sh-files li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border-dark); }
.sh-files .sub { margin: 0; }
.sh-files .inline-form { margin-left: auto; }
@media (max-width: 720px) {
  .sh-pkg, .sh-item { grid-template-columns: 1fr 1fr; }
  .sh-item .fld:first-child { grid-column: 1 / -1; }
}
.of-cat-shipment { border-color: rgba(91,200,232,0.55); color: #9fdcf0; background: rgba(91,200,232,0.08); }
.sh-form [hidden], .sh-customs[hidden] { display: none !important; }

/* ═══ Materials (RFQs) ═══ */
.rq-line { display: grid; grid-template-columns: 26px minmax(150px, 1.4fr) minmax(160px, 2fr) 80px 70px minmax(120px, 1fr) 28px; gap: 10px 12px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--border-dark); }
.rq-n { align-self: center; margin-top: 18px; font-weight: 800; color: rgba(255,255,255,0.45); font-size: 13px; }
.rq-line .chip-x { margin-bottom: 8px; }
.rq-ac-result { min-height: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.rq-ac-found { font-weight: 700; color: #9fdcf0; }
.rq-ac-result a { color: var(--sky); }
.rq-urg .tr-chip input:checked + span { color: #fff; }
.rq-chip-critical input:checked + span { background: rgba(232,67,90,0.22) !important; border-color: #e8435a !important; }
.rq-chip-aog input:checked + span { background: rgba(242,120,58,0.22) !important; border-color: #f2783a !important; }
.rq-chip-urgent input:checked + span { background: rgba(242,163,58,0.2) !important; border-color: #f2a33a !important; }
.rq-u-critical { background: rgba(232,67,90,0.16); color: #ff9aa8; border-color: rgba(232,67,90,0.5); }
.rq-u-aog { background: rgba(242,120,58,0.16); color: #ffb88f; border-color: rgba(242,120,58,0.5); }
.rq-u-urgent { background: rgba(242,163,58,0.14); color: #f7c47e; border-color: rgba(242,163,58,0.45); }
.rq-u-regular { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.18); }
.rq-st-draft { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.rq-st-sent { background: rgba(91,200,232,0.12); color: #9fdcf0; border-color: rgba(91,200,232,0.35); }
.rq-st-quoting { background: rgba(140,120,255,0.14); color: #c3b6ff; border-color: rgba(140,120,255,0.4); }
.rq-st-awarded { background: rgba(47,191,113,0.12); color: #7fe0ad; border-color: rgba(47,191,113,0.35); }
.rq-st-closed, .rq-st-cancelled { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); }
.rq-r-sent { background: rgba(91,200,232,0.12); color: #9fdcf0; } .rq-r-replied { background: rgba(47,191,113,0.12); color: #7fe0ad; }
.rq-r-failed { background: rgba(232,67,90,0.12); color: #ff9aa8; } .rq-r-no_quote, .rq-r-pending { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.rq-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0 0 14px; }
.rq-listopt { padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 8px; transition: border-color .2s, background .2s; }
.rq-listopt.suggest { border-color: rgba(91,200,232,0.6); background: rgba(91,200,232,0.06); }
.rq-listopt .sub { display: block; }
.rq-vendors { margin: 0 0 14px; } .rq-vendors summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.rq-vfilter { width: 100%; margin: 8px 0; }
.rq-vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; max-height: 320px; overflow: auto; padding: 4px 2px; }
.rq-vlist [hidden] { display: none !important; }
.rq-vlist .sub { display: block; }
.rq-extra { margin-top: 6px; }
.rq-subject { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; font-size: 15px; }
.rq-preview { width: 100%; height: 640px; border: 1px solid var(--border-dark); border-radius: 8px; background: #fff; margin: 0 0 14px; }
.rq-matrix .rq-ghead th { background: rgba(91,200,232,0.08); text-transform: none; letter-spacing: 0; font-size: 13px; color: #fff; }
.rq-pn { font-weight: 800; color: var(--sky); margin-right: 6px; }
.rq-matrix tr.sel td { background: rgba(47,191,113,0.08); }
.rq-matrix tr.rej td { opacity: 0.45; }
.rq-matrix .row-actions { white-space: nowrap; }
.rq-body { max-height: 520px; overflow: auto; }
@media (max-width: 760px) { .rq-line { grid-template-columns: 22px 1fr 1fr; } .rq-line .fld:nth-child(3) { grid-column: 2 / -1; } }
.rq-matrix td.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; border-bottom: 0; }
.rq-matrix td.row-actions .inline-form { display: inline-flex; gap: 6px; }
.rq-matrix td.row-actions .btn-mini { padding: 5px 9px; font-size: 10px; }
.rq-matrix td .sub { max-width: 260px; }

/* Email review (before sending) */
.em-review .facts dd { word-break: break-word; }
.em-frame { width: 100%; height: 620px; border: 1px solid var(--border-dark); border-radius: 8px; background: #eef1f4; margin: 14px 0; }

/* Drag and drop on file fields (dropzone.js) */
.dz-hint { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.5); }
.dz-hint::before { content: '⤓ '; color: var(--sky); }
.dz-over { outline: 2px dashed var(--sky) !important; outline-offset: 4px; background-color: rgba(91,200,232,0.07) !important; transition: background-color .15s; }
.dz-banner { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; padding: 12px 22px; border-radius: 30px; background: var(--sky); color: var(--navy); font: 800 12px 'Montserrat', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,0.45); pointer-events: none; }
.dz-banner[hidden] { display: none; }

/* Choice fields: dropdown + "Other…" text box */
.choice-field { display: flex; flex-direction: column; gap: 8px; }
.choice-field [hidden] { display: none !important; }
/* Custom line-item columns */
.items-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.col-del { margin-left: 4px; padding: 0 5px; border: 0; border-radius: 4px; background: rgba(232,67,90,0.15); color: #ff9aa8; font: inherit; cursor: pointer; line-height: 1.4; }
.col-del:hover { background: rgba(232,67,90,0.3); }
.items-actions { align-items: center; margin-top: 12px; } .items-actions .btn-mini { margin: 0 !important; }
/* Arrange columns */
table.items.arranging th[data-colname] { cursor: grab; background: rgba(91,200,232,0.06); border-radius: 6px; white-space: nowrap; }
.col-move { margin: 0 3px; padding: 0 5px; border: 1px solid rgba(91,200,232,0.4); border-radius: 4px; background: transparent; color: var(--sky); font-size: 9px; line-height: 1.6; cursor: pointer; }
.col-move:hover { background: rgba(91,200,232,0.15); }
.col-dragging { opacity: 0.4; }
[data-arrange][aria-pressed="true"] { background: var(--sky); color: var(--navy); }

/* Drafts and supporting files */
.pill-draft { background: rgba(232,180,91,0.14); color: #f0c77a; border-color: rgba(232,180,91,0.45); }
tr.row-draft td:first-child { box-shadow: inset 3px 0 0 #e8b45b; }
tr.row-draft .doc-link::after { content: ' · draft'; color: #f0c77a; font-weight: 400; font-size: 0.85em; }
.chip-draft { border-style: dashed; }
.drafts-panel { margin: 18px 0; padding: 14px 18px; border: 1px solid rgba(232,180,91,0.35); border-radius: 12px; background: rgba(232,180,91,0.06); }
.drafts-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.drafts-panel h2 .count { font-size: 0.8em; opacity: 0.7; }
.drafts-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; }
.drafts-panel li a { display: block; padding: 6px 0; text-decoration: none; }
.drafts-panel li a:hover b { text-decoration: underline; }
.drafts-panel .sub { display: block; font-size: 0.8em; opacity: 0.65; }
.att-sec { margin-top: 18px; }
.att-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: end; }
@media (max-width: 640px) { .att-row { grid-template-columns: 1fr; } }
.att-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 0.88em; }
.att-list img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.att-sec > .hint { margin-bottom: 12px; }
/* Receiving inspection */
.of-cat-receiving_inspection { border-color: rgba(140,120,255,0.5); color: #c3b6ff; }
.ri-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ri-two > div { display: flex; flex-direction: column; }
.rec-form .att-list { margin-bottom: 6px; }
.ri-docs { border: 1px solid var(--border-dark); border-radius: 10px; padding: 10px 14px 2px; margin: 4px 0 12px; }
.ri-docs legend { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.ri-docs legend .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ri-docs .check-row { margin: 2px 0 8px; }
.of-node.of-ri { border-color: rgba(140,120,255,0.4); background: rgba(140,120,255,0.05); }
.of-ri .of-icon { color: #c3b6ff; border-color: rgba(140,120,255,0.45); }
.of-ri-t { font-weight: 700; }
.of-ri-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.of-ri-doc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(140,120,255,0.4); color: #d6ccff; font-size: 11.5px; font-weight: 600; }
.of-ri-doc svg { width: 12px; height: 12px; }

/* Private documents and files (Avisence only, not on the Extranet): rose */
.pill-private { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,92,160,0.12); color: #ff9ccc; border-color: rgba(255,92,160,0.45); margin-left: 4px; }
.pill-private svg { width: 11px; height: 11px; }
.of-node.of-private { border-color: rgba(255,92,160,0.5); background: rgba(255,92,160,0.06); }
.of-node.of-private .of-icon { color: #ff9ccc; border-color: rgba(255,92,160,0.45); }
.of-file.of-private > a { color: #ff9ccc; }
.btn-lock { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--border-dark); background: transparent; color: rgba(255,255,255,0.45); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.btn-lock svg { width: 13px; height: 13px; }
.btn-lock:hover { color: #ff9ccc; border-color: rgba(255,92,160,0.5); }
.btn-lock.on { color: #ff9ccc; border-color: rgba(255,92,160,0.6); background: rgba(255,92,160,0.12); }
.inline-form { display: inline-flex; margin: 0; }
.btn-private-on { border-color: rgba(255,92,160,0.6) !important; color: #ff9ccc !important; background: rgba(255,92,160,0.1) !important; }
.private-check { margin: 18px 0 4px; padding: 12px 14px; border: 1px dashed rgba(255,92,160,0.45); border-radius: 10px; background: rgba(255,92,160,0.04); }
.private-check b svg, .check-row b svg { width: 13px; height: 13px; vertical-align: -1px; color: #ff9ccc; }
.hub tr .pill-private, td .pill-private { margin-left: 6px; }

/* Order ID */
.order-ref { display: block; width: fit-content; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #9fdcf0; text-decoration: none; border-bottom: 1px dotted rgba(91,200,232,0.5); }
.order-ref:hover { color: #fff; border-bottom-color: #fff; }
.order-ref-big { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 0; padding: 3px 10px; border: 1px solid rgba(91,200,232,0.45); border-radius: 999px; background: rgba(91,200,232,0.08); font-size: 12px; }
.order-ref-big svg { width: 13px; height: 13px; }
.order-ref-inline { color: #9fdcf0; letter-spacing: 0.04em; }

/* Procurement list grouped by order */
.og-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 8px; }
.og-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--sky); font: inherit; font-size: 14px; letter-spacing: 0.03em; cursor: pointer; }
.og-toggle:hover b { text-decoration: underline; }
.og-chev { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(91,200,232,0.45); font-size: 10px; transition: transform .2s; }
.og-row.open .og-chev { transform: rotate(90deg); background: rgba(91,200,232,0.12); }
.og-row td { background: rgba(91,200,232,0.03); }
.og-row .sub { display: block; margin-top: 2px; }
.og-row td:first-child .sub { margin-left: 28px; }
.og-codes { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.og-codes span { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-dark); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }
tr.og-child td { background: rgba(0,0,0,0.18); padding-top: 9px; padding-bottom: 9px; font-size: 0.95em; }
tr.og-child td:first-child { padding-left: 34px; position: relative; }
.og-branch { position: absolute; left: 18px; top: 0; bottom: 50%; width: 10px; border-left: 1.5px solid rgba(91,200,232,0.35); border-bottom: 1.5px solid rgba(91,200,232,0.35); border-bottom-left-radius: 5px; }
.og-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.og-status .pill { margin: 0; }
/* Order stage and money tags, lightly colour-coded */
.og-stage, .og-tag { font-weight: 700; }
.og-stage-quotation { background: rgba(91,200,232,0.10); color: #9fdcf0; border-color: rgba(91,200,232,0.40); }
.og-stage-purchase_order, .og-stage-proforma_invoice { background: rgba(110,140,255,0.12); color: #b4c3ff; border-color: rgba(110,140,255,0.42); }
.og-stage-packing_slip, .og-stage-customs_invoice, .og-stage-international_docs { background: rgba(170,120,255,0.12); color: #d2b8ff; border-color: rgba(170,120,255,0.42); }
.og-tag-invoice_received { background: rgba(242,190,60,0.12); color: #f5d27a; border-color: rgba(242,190,60,0.42); }
.og-tag-invoiced { background: rgba(255,130,80,0.12); color: #ffb08a; border-color: rgba(255,130,80,0.42); }
.og-tag-paid { background: rgba(47,191,113,0.12); color: #7fe0ad; border-color: rgba(47,191,113,0.42); }
.og-tag-payment_received { background: rgba(40,210,200,0.12); color: #7ff0e6; border-color: rgba(40,210,200,0.45); }
.og-toggle b { white-space: nowrap; }

/* Order rows colour-coded by status: an edge in the status colour and a soft wash fading across the row (as task
   cards); its documents carry a fainter edge. */
.oc-quoted { --oc: #5bc8e8; } .oc-ordered { --oc: #6e8cff; } .oc-shipped { --oc: #aa78ff; }
.oc-invoice_received { --oc: #f2be3c; } .oc-invoiced { --oc: #ff8250; } .oc-paid { --oc: #2fbf71; } .oc-payment_received { --oc: #28d2c8; } .oc-void { --oc: #8a96a3; }
.og-table tr.og-row, .og-table tr.og-single { background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 13%, transparent), color-mix(in srgb, var(--oc) 4%, transparent) 45%, transparent 80%); }
.og-table tr.og-row td, .og-table tr.og-single td { background: transparent; }
.og-table tr.og-row > td:first-child, .og-table tr.og-single > td:first-child { box-shadow: inset 4px 0 0 var(--oc); }
.og-table tr.og-row { border-top: 1px solid color-mix(in srgb, var(--oc) 30%, transparent); }
.og-table tr.og-row:hover, .og-table tr.og-single:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 20%, transparent), color-mix(in srgb, var(--oc) 6%, transparent) 50%, transparent 85%); }
.og-table tr.og-row.open { background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 22%, transparent), color-mix(in srgb, var(--oc) 7%, transparent) 55%, transparent 90%); }
.og-table tr.og-row .og-chev { border-color: color-mix(in srgb, var(--oc) 60%, transparent); color: var(--oc); }
.og-table tr.og-row.open .og-chev { background: color-mix(in srgb, var(--oc) 18%, transparent); }
.og-table tr.og-child td { background: color-mix(in srgb, var(--oc) 3%, rgba(0,0,0,0.2)); }
.og-table tr.og-child > td:first-child { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--oc) 35%, transparent); }
.og-table tr.og-child .og-branch { border-color: color-mix(in srgb, var(--oc) 50%, transparent); }
.og-table tr.row-draft > td:first-child { box-shadow: inset 4px 0 0 #e8b45b; }
.oc-received { --oc: #9ad35a; } .oc-rejected { --oc: #e8435a; } .oc-draft { --oc: #e8b45b; }
.og-stage-received { background: rgba(154,211,90,0.12); color: #c3eb94; border-color: rgba(154,211,90,0.45); }
.og-stage-rejected { background: rgba(232,67,90,0.14); color: #ff9aa8; border-color: rgba(232,67,90,0.5); }
.og-codes .og-code-ri { border-color: rgba(154,211,90,0.45); color: #c3eb94; }
.pill-created { background: rgba(160,180,200,0.12); color: #c9d6e3; border-color: rgba(160,180,200,0.4); }
.num-row { display: flex; gap: 8px; align-items: center; }
.num-row input { flex: 1; min-width: 0; }
.num-row .btn-mini { white-space: nowrap; }

/* Procurement: "Upload an existing document": a soft, glowing band that stands out without glare */
.import-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; margin: 6px 0 28px; padding: 20px 24px;
  border: 1px solid rgba(124,170,255,0.32); border-radius: 16px; font-size: 14px; color: rgba(225,236,248,0.78);
  background: radial-gradient(120% 160% at 0% 0%, rgba(91,200,232,0.16), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(140,120,255,0.14), transparent 60%), linear-gradient(135deg, #0f2236, #0c1b2c);
  box-shadow: 0 10px 30px -18px rgba(91,200,232,0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
.import-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(91,200,232,0.55), rgba(140,120,255,0.45)) top / 100% 2px no-repeat; opacity: 0.8; }
.import-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #bfe9f7;
  background: linear-gradient(145deg, rgba(91,200,232,0.22), rgba(140,120,255,0.18)); border: 1px solid rgba(124,170,255,0.38); }
.import-ic svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.import-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.import-txt b { color: #f3f8ff; font-size: 15.5px; font-weight: 600; letter-spacing: 0.01em; }
.btn-import { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #0a1726; background: linear-gradient(135deg, #8fdcf2, #a9b8ff); border: 0; box-shadow: 0 6px 18px -8px rgba(143,220,242,0.7); transition: transform .15s, box-shadow .2s, filter .2s; }
.btn-import svg { width: 15px; height: 15px; }
.btn-import:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(143,220,242,0.85); }
.btn-import:focus-visible { outline: 2px solid #cfeffa; outline-offset: 3px; }
@media (max-width: 760px) { .import-bar { flex-wrap: wrap; } .btn-import { width: 100%; justify-content: center; } }
.em-team { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; } .em-team .check-row { margin: 0; }
.sp-panel { border-color: rgba(242,163,58,0.45); }
.sp-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sp-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border-dark); }
.sp-list .sub { display: block; }
.sp-acts { display: flex; gap: 8px; }

/* Page navigation: Back and Home, as clear buttons above the page title */
.page-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.nav-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: #e8f3fa; border: 1px solid rgba(124,170,255,0.32); background: linear-gradient(135deg, rgba(91,200,232,0.10), rgba(140,120,255,0.08)); box-shadow: 0 6px 18px -12px rgba(91,200,232,0.6);
  transition: border-color .2s, background .2s, transform .15s, color .2s; }
.nav-btn svg { width: 17px; height: 17px; flex: none; color: var(--sky); transition: transform .2s; }
.nav-btn:hover { color: #fff; border-color: rgba(143,220,242,0.7); background: linear-gradient(135deg, rgba(91,200,232,0.18), rgba(140,120,255,0.14)); transform: translateY(-1px); }
.nav-back:hover svg { transform: translateX(-3px); }
.nav-btn:focus-visible { outline: 2px solid #cfeffa; outline-offset: 3px; }
@media (max-width: 520px) { .nav-btn { flex: 1; justify-content: center; } }
/* Back: a soft mint so it stands apart from Home */
.nav-back { color: #e6fbf4; border-color: rgba(110,222,190,0.42); background: linear-gradient(135deg, rgba(110,222,190,0.14), rgba(91,200,232,0.06)); box-shadow: 0 6px 18px -12px rgba(110,222,190,0.6); }
.nav-back svg { color: #8eeacb; }
.nav-back:hover { border-color: rgba(142,234,203,0.75); background: linear-gradient(135deg, rgba(110,222,190,0.24), rgba(91,200,232,0.10)); }

/* Finance: the locked bank section and its dashboard */
.bank-locked { padding: 0; overflow: hidden; }
.bank-gate { width: 100%; display: flex; align-items: center; gap: 18px; padding: 24px 26px; border: 0; cursor: pointer; text-align: left; font: inherit; color: rgba(225,236,248,0.8);
  background: radial-gradient(120% 160% at 0% 0%, rgba(91,200,232,0.14), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(47,191,113,0.10), transparent 60%), transparent; transition: background .2s; }
.bank-gate:hover { background: radial-gradient(120% 160% at 0% 0%, rgba(91,200,232,0.22), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(47,191,113,0.16), transparent 60%), transparent; }
.bank-gate-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; color: #bfe9f7; background: linear-gradient(145deg, rgba(91,200,232,0.22), rgba(47,191,113,0.14)); border: 1px solid rgba(124,170,255,0.38); }
.bank-gate-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.bank-gate-txt b { color: #f3f8ff; font-size: 16px; font-weight: 600; }
.bank-gate-go { flex: none; padding: 11px 20px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0a1726; background: linear-gradient(135deg, #8fdcf2, #8eeacb); }
.bank-unlock .bank-face { width: 100%; justify-content: center; display: inline-flex; gap: 8px; align-items: center; }
.bank-or { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.45); font-size: 12px; margin: 6px 0; }
.bank-or::before, .bank-or::after { content: ''; flex: 1; height: 1px; background: var(--border-dark); }
.bank-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bank-tools .btn-mini svg { width: 13px; height: 13px; vertical-align: -2px; }
.bank-dash > summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); margin: 6px 0 12px; }
.bank-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.bank-kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-dark); background: rgba(255,255,255,0.02); }
.bank-kpi span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.bank-kpi b { font-size: 22px; color: #fff; }
.bank-kpi em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.55); }
.bank-kpi.k-main { border-color: rgba(91,200,232,0.5); background: rgba(91,200,232,0.07); }
.bank-kpi.k-in b { color: #7fe0ad; } .bank-kpi.k-out b { color: #ffb08a; }
.bank-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 14px; }
.bank-accts { list-style: none; margin: 0; padding: 0; }
.bank-accts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-dark); font-size: 14px; }
.bank-accts em { font-style: normal; opacity: 0.6; } .bank-accts small { display: block; font-size: 11.5px; opacity: 0.55; }
.bank-face-note { text-align: center; margin: 6px 0 0; }

/* Materials: one compact row of actions; status chips and search on one line */
.mat-actions { margin-bottom: 18px; }
.mat-actions svg { width: 15px; height: 15px; vertical-align: -3px; }
.mat-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.mat-filter .chips { margin: 0; }
.mat-search { flex: 0 1 380px; min-width: 240px; }

/* Internal projects: compact cards with the estimated completion */
.ip-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.ip-card { gap: 7px; padding: 14px 16px; border-radius: 12px; }
.ip-card .ip-name { font-size: 15px; line-height: 1.3; }
.ip-card .ip-summary { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ip-card .pill { font-size: 10.5px; padding: 2px 8px; }
.ip-card .ip-meta { font-size: 12px; }
.ip-est { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 2px; }
.ip-est b { font-size: 13px; color: #fff; letter-spacing: 0; }

/* ═══ Compact layout for every signed-in page (intranet and Extranet): tighter boxes, gaps, headings and buttons.
   The sign-in pages keep their own (larger) layout. ═══ */
.hero-page { padding: 34px 32px 60px; }
.hero-page .page-nav { margin-bottom: 18px; }
.hero-page .nav-btn { min-height: 38px; padding: 8px 15px; font-size: 12px; }
.hero-page .eyebrow { margin-bottom: 6px; }
.hero-page:not(.hero-lux) h1 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; }
.hero-page .hero-desc { font-size: 14px; line-height: 1.6; margin-bottom: 20px; max-width: 720px; }
.hero-page .panel { padding: 24px 22px 18px; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.hero-page .panel::before { left: 22px; right: 22px; height: 2px; }
.hero-page .sec-label { margin-bottom: 8px; font-size: 10.5px; }
.hero-page .sec-head { margin-bottom: 4px; }
.hero-page .user-grid { gap: 14px; }
.hero-page .user-grid + .user-grid, .hero-page .wrap > .panel + .panel, .hero-page .wrap > section.panel + section.panel { margin-top: 14px; }
.hero-page .user-grid > .panel { margin-top: 0; }
.hero-page .hub-actions { margin-bottom: 14px; }
.hero-page .btn-primary { padding: 11px 20px; font-size: 12px; gap: 8px; }
.hero-page .btn-outline { padding: 10px 18px; font-size: 11.5px; border-width: 1.5px; }
.hero-page .hub-actions .btn-primary, .hero-page .hub-actions .btn-outline { padding: 9px 15px; font-size: 11.5px; }
.hero-page .form .btn-primary { width: auto; margin-top: 14px; padding: 11px 26px; }
.hero-page .facts { gap: 4px; }
.hero-page .facts div { padding-bottom: 5px; font-size: 13px; }
.hero-page .panel-text, .hero-page .hint { margin-bottom: 6px; }
.hero-page .chips { margin-bottom: 12px; }
.hero-page .table-wrap .data th, .hero-page .table-wrap .data td { padding-top: 10px; padding-bottom: 10px; }
.hero-page .alert { padding: 11px 14px; margin-bottom: 12px; font-size: 13.5px; }
.hero-page .tile { padding: 14px 16px; }
.hero-page .tiles { gap: 12px; }
/* Dialogs: buttons sized to their text */
.rec-form .dlg-actions .btn-primary, .rec-form .dlg-actions .btn-outline { width: auto; padding: 10px 20px; }
/* Internal project page: the update form */
.ip-update-row .btn-primary { width: auto; }
.ip-update-row { margin-top: 8px; }
/* Financial dashboard: a compact strip of figures, sized to their content instead of spanning the page */
.bank-kpis { grid-template-columns: repeat(auto-fill, minmax(165px, 205px)); justify-content: start; gap: 10px; margin-bottom: 14px; }
.bank-kpi { padding: 10px 13px; gap: 2px; border-radius: 10px; }
.bank-kpi span { font-size: 9.5px; letter-spacing: 0.1em; }
.bank-kpi b { font-size: 17px; line-height: 1.25; }
.bank-kpi em { font-size: 11px; }
.bank-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 420px)); justify-content: start; gap: 28px; }
.bank-accts li { padding: 6px 0; font-size: 13px; }
.bank-dash > summary { margin: 2px 0 10px; }
/* Link banners (Invoice tracker, Procurement dashboard…): sized to their content, not the whole page width */
.tracker-cta, .dash-banner { display: inline-flex !important; width: auto !important; max-width: 560px; padding: 10px 16px !important; gap: 12px !important; margin: 10px 0 14px !important; vertical-align: top; }
.tracker-cta .tile-icon, .dash-banner .tile-icon { width: 34px !important; height: 34px !important; flex: none; }
.tracker-cta .tile-icon svg, .dash-banner .tile-icon svg { width: 16px; height: 16px; }
.tracker-cta b, .dash-banner b { font-size: 14px; }
.tracker-cta > span:nth-child(2) > span, .dash-banner > span:nth-child(2) > span { font-size: 12px !important; line-height: 1.4; }
.tracker-cta .tile-go, .dash-banner .tile-go { margin-left: 8px; }
.tracker-cta, .dash-banner { max-width: 520px; }
.tracker-cta > span:nth-child(2), .dash-banner > span:nth-child(2) { min-width: 0; }
.tracker-cta > span:nth-child(2) > span, .dash-banner > span:nth-child(2) > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Internal projects: people, completion date and a little life */
.ip-card { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(14,36,58,0.85), rgba(8,22,36,0.85)); }
.ip-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120% 90% at 0% 0%, rgba(91,200,232,0.16), transparent 55%), radial-gradient(90% 90% at 100% 100%, rgba(200,16,46,0.12), transparent 60%); }
.ip-card:hover { border-color: rgba(91,200,232,0.55); background: linear-gradient(160deg, rgba(16,42,66,0.92), rgba(9,24,40,0.92)); box-shadow: 0 14px 34px -18px rgba(91,200,232,0.55); transform: translateY(-2px); }
.ip-card:hover::after { opacity: 1; }
.ip-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--red), var(--sky)); opacity: .55; transition: opacity .25s; }
.ip-card:hover::before { opacity: 1; }
.ip-progress span { position: relative; overflow: hidden; }
.ip-progress span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-100%); animation: ip-shimmer 3.2s ease-in-out infinite; }
@keyframes ip-shimmer { 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ip-progress span::after { animation: none; } }
.ip-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ip-people { display: inline-flex; }
.ip-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #dff3fb;
  background: linear-gradient(145deg, #1c3d5c, #13283d); border: 2px solid #0b1b2c; box-shadow: 0 0 0 1px rgba(91,200,232,0.35); }
.ip-av:first-child { margin-left: 0; }
.ip-av-owner { background: linear-gradient(145deg, #c8102e, #7d0a1d); box-shadow: 0 0 0 1px rgba(255,140,160,0.5); }
.ip-av-more { background: rgba(255,255,255,0.08); }
.ip-eta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,0.7); }
.ip-eta svg { width: 13px; height: 13px; color: var(--sky); }
.ip-who { font-size: 11.5px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-who b { color: rgba(255,255,255,0.85); font-weight: 600; }
.ip-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; }
.ip-members .check-row { margin: 4px 0; }

/* Tasks: one toolbar for views, layout and filters; a board where empty columns step aside */
.ttools { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 12px; background: rgba(11,30,48,0.55); }
.ttools .list-head { margin: 0 0 10px; gap: 10px; }
.ttools .chips { margin: 0; gap: 6px; }
.ttools .chip { padding: 6px 12px; font-size: 12px; }
.ttools .chips-label { font-size: 10.5px; }
.ttools .cons-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.ttools .cons-filters input[name=q] { flex: 1 1 220px; max-width: 320px; padding: 8px 12px; font-size: 13px; }
.ttools .cons-filters select { flex: 0 1 auto; width: auto; min-width: 140px; padding: 8px 30px 8px 12px; font-size: 13px; }
.ttools .cons-filters .check { font-size: 12.5px; }
.tboard { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; }
.tboard > .tcol { flex: 1 1 220px; min-width: 210px; padding: 8px; min-height: 120px; }
.tboard > .tcol.is-empty { flex: 0 0 132px; min-width: 132px; min-height: 120px; }
.tboard > .tcol.is-empty .tcol-head { padding-bottom: 6px; font-size: 11.5px; }
.tboard > .tcol.is-empty .tcol-empty { padding: 26px 0; font-size: 11px; }
.tboard > .tcol.over { flex-basis: 220px; }
.tcol-head { padding: 2px 4px 8px; }
.tcard-link { gap: 6px; padding: 9px 10px; }
.tcard-top { flex-wrap: nowrap; overflow: hidden; }
.tcard-top > * { flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-title { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard.done .tcard-top, .tcard.done .tbar { display: none; }
.tcard.done .tcard-link { padding: 8px 10px; gap: 4px; }
.tcard.done .tcard-title { font-size: 12px; font-weight: 600; -webkit-line-clamp: 1; }

/* ═══ Second density pass (every signed-in page): smaller boxes, fields and tables ═══ */
.hero-page .panel { padding: 16px 18px 14px; }
.hero-page .panel::before { left: 18px; right: 18px; }
.hero-page .sec-label { margin-bottom: 6px; font-size: 10px; letter-spacing: 0.14em; }
.hero-page .sec-label::before { width: 16px; }
.hero-page .sec-head { gap: 8px; }
.hero-page .user-grid, .hero-page .tiles { gap: 10px; }
.hero-page .user-grid + .user-grid, .hero-page .wrap > .panel + .panel, .hero-page .wrap > section.panel + section.panel { margin-top: 10px; }
.hero-page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .hero-page select { padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; min-height: 0; }
.hero-page textarea { padding: 8px 12px; font-size: 13.5px; min-height: 0; }
.hero-page label, .hero-page .fld-label { margin-bottom: 4px; }
.hero-page .fgrid, .hero-page .docform .fgrid { gap: 10px 14px; }
.hero-page .table-wrap .data th { padding-top: 7px; padding-bottom: 7px; font-size: 10px; }
.hero-page .table-wrap .data td { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.hero-page .panel .hint, .hero-page .panel .panel-text, .hero-page .panel .sub { font-size: 12.5px; line-height: 1.5; }
.hero-page .btn-mini { padding: 5px 9px; font-size: 10px; }
.hero-page .form-sec, .hero-page fieldset.panel { margin-bottom: 10px; }
.hero-page .form-actions { margin-top: 12px; gap: 8px; }
/* Internal project page: the update box on two lines, progress and button beside each other */
.ip-update-row { justify-content: flex-start; gap: 10px; }
.ip-update-row input[type=number] { width: 72px; padding: 6px 8px; }
.ip-update-row .btn-primary { margin-left: auto; padding: 8px 18px; }
/* Internal project page: one compact overview */
.ip-overview .ip-ov-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ip-overview .ip-ov-top .sec-label { margin: 0; }
.ip-ov-prog { display: flex; align-items: center; gap: 12px; }
.ip-ov-prog b { font-size: 18px; min-width: 46px; }
.ip-ov-prog .ip-progress { flex: 1; margin: 0; }
.ip-ov-basis { margin: 4px 0 10px !important; }
.ip-ov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border-dark); }
.ip-ov-facts dt { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ip-ov-facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }
.ip-ov-facts dd .sub { display: block; font-weight: 400; font-size: 11px; }
.ip-ov-links { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-dark); font-size: 13px; }
.ip-ov-links .fld-label { display: inline; margin-right: 6px; }
.ip-ov-notes { margin: 6px 0 0 !important; }

/* "⋯" row menus */
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * { vertical-align: middle; }
.row-menu { position: relative; display: inline-block; margin-left: 6px; }
.row-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(91,200,232,0.35); color: var(--sky); font-size: 18px; line-height: 1; transition: background .15s, border-color .15s; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: rgba(91,200,232,0.12); border-color: rgba(91,200,232,0.7); }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px; padding: 6px; border-radius: 10px; text-align: left;
  border: 1px solid rgba(124,170,255,0.3); background: #0d2136; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.row-menu-pop form { display: block; margin: 0; }
.row-menu-pop a, .row-menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #e6f1f8; text-decoration: none; text-align: left; }
.row-menu-pop a:hover, .row-menu-pop button:hover { background: rgba(91,200,232,0.12); color: #fff; }
.row-menu-pop .danger { color: #ff9aa8; }
.row-menu-pop .danger:hover { background: rgba(232,67,90,0.14); }
.row-menu-pop svg { width: 14px; height: 14px; color: var(--sky); flex: none; }
.table-wrap { overflow: visible; }
@media (max-width: 760px) { .table-wrap { overflow-x: auto; } }

/* Line-item tables (invoices, expense reports): roomy cells, short two-line headings, scroll sideways when needed */
.items-wrap { overflow-x: auto; padding-bottom: 4px; }
table.brows { width: max(100%, 980px); border-collapse: separate; border-spacing: 6px 0; margin: 0 -6px; }
table.brows th { white-space: normal; vertical-align: bottom; font-size: 9.5px; line-height: 1.25; letter-spacing: 0.08em; padding: 0 2px 6px; max-width: 110px; }
table.brows td { padding: 3px 0; vertical-align: top; }
table.brows td input, table.brows td select, table.brows td textarea { width: 100%; padding: 8px 9px; font-size: 13px; }
table.brows td .c-text { min-width: 140px; }
table.brows td .c-wide, table.brows td textarea { min-width: 200px; }
table.brows td .c-date { min-width: 138px; }
table.brows td .c-number { min-width: 70px; text-align: right; }
table.brows td .c-money { min-width: 96px; text-align: right; }
table.brows td select { min-width: 96px; }
table.brows td.calc { white-space: nowrap; padding-top: 10px; font-weight: 700; }
table.brows th.h-calc { text-align: right; }
/* Wide line tables scroll inside their box instead of spilling out */
.bill-form details, .bill-form fieldset, .bill-form .panel, .bill-form .fld-wide { min-width: 0; max-width: 100%; }
.bill-form .items-wrap { max-width: 100%; }
table.brows { width: 100%; }
table.brows td .c-text { min-width: 112px; }
table.brows td .c-wide, table.brows td textarea { min-width: 160px; }
table.brows td .c-date { min-width: 126px; }
table.brows td .c-number { min-width: 60px; }
table.brows td .c-money { min-width: 84px; }
table.brows td input, table.brows td select { padding: 7px 8px; }

/* Line tables as cards: fields wrap below instead of scrolling sideways */
table.brows.stacked { display: block; width: 100%; margin: 0; border-spacing: 0; }
table.brows.stacked thead { display: none; }
table.brows.stacked tbody { display: grid; gap: 10px; }
table.brows.stacked tr { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; padding: 12px 44px 12px 12px;
  border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(255,255,255,0.02); }
table.brows.stacked td { display: flex; flex-direction: column; gap: 4px; padding: 0; min-width: 0; }
table.brows.stacked td[hidden] { display: none; }
table.brows.stacked td::before { content: attr(data-label); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
table.brows.stacked td input, table.brows.stacked td select, table.brows.stacked td textarea { min-width: 0 !important; width: 100%; }
table.brows.stacked td:has(.c-wide), table.brows.stacked td:has(textarea) { grid-column: span 2; }
table.brows.stacked td.calc { justify-content: flex-end; align-items: flex-end; padding: 0; font-size: 15px; }
table.brows.stacked td.calc::before { align-self: flex-end; }
table.brows.stacked td:last-child { position: absolute; top: 10px; right: 10px; }
table.brows.stacked td:last-child::before { display: none; }
.bill-form .items-wrap { overflow: visible; }
/* Expand a section full screen */
.sec-expand { margin-left: auto; }
details.pick-group > summary { display: flex; align-items: center; gap: 10px; }
details.pick-group > summary .sec-expand { margin-left: 8px; }
details.pick-group > summary .pick-count { margin-left: auto; }
.sec-expand-bar { display: flex; justify-content: flex-end; margin: -26px 0 8px; }
.sec-full { position: fixed !important; inset: 3vh 3vw; z-index: 80; overflow: auto; margin: 0 !important; max-width: none !important; background: #0b1c2e !important;
  border: 1px solid rgba(91,200,232,0.5) !important; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,0.7); padding: 18px 22px !important; }
body.has-sec-full::after { content: ''; position: fixed; inset: 0; z-index: 79; background: rgba(2,8,15,0.72); backdrop-filter: blur(3px); }
.sec-full table.brows.stacked tr { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* While a section is expanded, nothing around it may trap a fixed element (blur / transforms make a containing block) */
body.has-sec-full .panel, body.has-sec-full fieldset, body.has-sec-full .hero, body.has-sec-full form, body.has-sec-full details { backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; }
body.has-sec-full .hero { overflow: visible !important; }
/* Expanded section above everything: lift its page layer; the dim backdrop is its own shadow */
body.has-sec-full::after { display: none; }
body.has-sec-full .hero .wrap, body.has-sec-full main { z-index: 200 !important; position: relative; }
.sec-full { box-shadow: 0 0 0 100vmax rgba(2,8,15,0.78), 0 30px 90px rgba(0,0,0,0.7) !important; }
table.brows.stacked tr.no-receipt { border-color: rgba(242,163,58,0.55); background: rgba(242,163,58,0.05); }
table.brows.stacked td:has([data-col=receipt_note]) { grid-column: span 2; }
/* Card tables: the body always spans the table (WebKit otherwise shrinks it to nothing at some widths) */
table.brows.stacked > tbody { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
table.brows.stacked > tbody > tr { width: 100%; box-sizing: border-box; }

/* Receipt of an expense line: Attach Receipt (dialog: choose, drop or photograph) / No Receipt Available */
.rcpt-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rcpt-file { display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; gap: 6px; font-size: 12px; }
.rcpt-file[hidden] { display: none; }
.rcpt-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(94, 214, 168, 0.45); background: rgba(94, 214, 168, 0.1); color: #8fe6c4; font-size: 12px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpt-chip.new { border-color: rgba(79, 195, 247, 0.5); background: rgba(79, 195, 247, 0.1); color: #9ddcfb; }
a.rcpt-chip:hover { background: rgba(94, 214, 168, 0.2); }
.btn-mini.rcpt-add { border-style: dashed; }
table.brows tr.rcpt-over { outline: 2px dashed rgba(79, 195, 247, 0.8); outline-offset: 2px; background: rgba(79, 195, 247, 0.06); }
.rcpt-dialog { width: min(440px, calc(100vw - 32px)); }
.rcpt-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; margin: 10px 0 12px; padding: 16px; border: 2px dashed rgba(79, 195, 247, 0.45); border-radius: 12px; background: rgba(79, 195, 247, 0.04); text-align: center; transition: background 0.15s, border-color 0.15s; }
.rcpt-drop.over { border-color: rgba(79, 195, 247, 0.95); background: rgba(79, 195, 247, 0.12); }
.rcpt-drop-t { font-weight: 700; }
.rcpt-ways { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcpt-way { margin: 0 !important; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.rcpt-line { display: block; margin-top: 2px; }
.rcpt-file .btn-mini { flex: none; padding: 3px 8px; font-size: 10px; }
.rcpt-file .rcpt-chip { flex: 0 1 auto; min-width: 0; }

/* ═══ Analytics (www.avisence.com visitors) ═══ */
.an-tabs { margin: 4px 0 12px; }
.chip.on { background: rgba(91,200,232,0.16); border-color: rgba(91,200,232,0.6); color: #fff; }
.an-sub { align-items: center; }
.an-sub .btn-mini { margin-left: auto; }
.an-sub .btn-mini ~ .btn-mini { margin-left: 0; }
.an-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(5,14,24,0.45); }
.an-ranges { display: flex; flex-wrap: wrap; gap: 4px; }
.an-range { position: relative; padding: 5px 11px; border-radius: 16px; border: 1px solid transparent; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.65); cursor: pointer; }
.an-range input { position: absolute; opacity: 0; pointer-events: none; }
.an-range:hover { color: #fff; border-color: var(--border-dark); }
.an-range.on { background: var(--sky); color: #04121f; }
.an-frow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.an-f { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.an-f[hidden] { display: none; }
.an-f select, .an-f input { min-width: 0; height: 32px; padding: 4px 8px; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.an-q input { width: 210px; }
.an-chk { font-size: 12px; align-self: center; margin: 0; }
.an-tag { align-self: center; padding: 4px 10px; border-radius: 14px; background: rgba(200,16,46,0.18); border: 1px solid rgba(200,16,46,0.5); color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-bottom: 12px; }
.an-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 10px; background: rgba(11,30,48,0.86); }
.an-kpi-l { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.an-kpi b { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.15; }
.an-kpi .sub { font-size: 10.5px; }
.an-kpi-live b { color: #2fbf71; }
.hero-page .panel.an-panel { padding: 14px 16px 12px; margin-bottom: 12px; min-width: 0; }
.an-panel .sec-head { margin-bottom: 10px; }
.an-panel .sec-label .sub { margin-left: 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 600; }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.an-grid > .panel { margin-bottom: 0; }
.an-grid { margin-bottom: 12px; }
.an-span2 { grid-column: span 2; }
@media (max-width: 1100px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .an-grid { grid-template-columns: minmax(0, 1fr); } .an-span2 { grid-column: auto; } .an-q input { width: 100%; } }
.an-empty { padding: 8px 0; }
.an-bars { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0 0 8px; padding: 0; }
.an-bar-t { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 3px; }
.an-bar-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.85); }
.an-bar-l a { color: #fff; text-decoration: none; }
.an-bar-l a:hover { color: var(--sky); text-decoration: underline; }
.an-bar-v { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-bar-v .sub { font-weight: 500; font-size: 11px; }
.an-bar { display: block; width: 100%; height: 5px; }
.an-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.an-donut-n { fill: #fff; font-size: 20px; font-weight: 800; }
.an-donut-l { fill: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600; }
.an-legend { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; font-size: 12px; }
.an-legend li, .an-legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend .sub { font-size: 11px; }
.an-legend-row { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.an-trend > svg { width: 100%; height: auto; display: block; }
.an-ax { fill: rgba(255,255,255,0.45); font-size: 10.5px; font-family: inherit; }
.an-heat { width: 100%; height: auto; display: block; }
.an-note { margin-top: 4px; font-size: 11px; }
.an-map { border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(91,200,232,0.08), transparent 70%); }
.an-map svg { width: 100%; height: auto; display: block; }
.an-map-small .an-map { max-width: 560px; margin: 0 auto; }
.an-dot circle:last-child { transition: r 0.15s; }
.an-dot:hover circle:last-child { fill: #fff; }
.an-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0; font-size: 12.5px; }
.an-info div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.an-info dt { color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 1px; }
.an-info dd { margin: 0; overflow-wrap: anywhere; }
.an-ua { font-size: 11px; color: rgba(255,255,255,0.6); }
.an-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.an-timeline li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-left: 2px solid rgba(91,200,232,0.3); padding-left: 14px; position: relative; }
.an-timeline li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); }
.an-tl-t { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.an-timeline .sub, .an-tl-m, .an-tl-e { display: block; font-size: 11.5px; }
.an-tl-m { color: rgba(255,255,255,0.6); }
.an-tl-e { color: #f2a33a; font-weight: 600; }
.an-table td, .an-table th { padding: 8px 10px; font-size: 12.5px; }
.an-table td .sub { display: block; font-size: 11px; }
.an-table th.an-sort { cursor: pointer; user-select: none; }
.an-table th.an-sort:hover { color: #fff; }
.an-table th[data-dir=asc]::after { content: ' ▲'; }
.an-table th[data-dir=desc]::after { content: ' ▼'; }
.an-paths { font-size: 11.5px; }
.an-ref { max-width: 260px; overflow-wrap: anywhere; font-size: 11.5px; }
.an-raw td { padding: 6px 8px; }
.pill.an-kind { font-size: 10px; white-space: nowrap; }
.an-k-business { background: rgba(47,191,113,0.16); color: #7fe0a8; }
.an-k-education, .an-k-government { background: rgba(155,123,255,0.18); color: #c6b6ff; }
.an-k-isp { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.an-k-hosting { background: rgba(242,163,58,0.16); color: #f6c27a; }
.an-k-staff { background: rgba(91,200,232,0.16); color: var(--sky); }
.an-k-unknown { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); }
.an-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.an-settings textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.an-howto { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,0.78); }
.an-attrib { margin-top: 10px; font-size: 11px; }
.an-bar-v .sub, .an-legend .sub { display: inline; }
.an-paths .sub { display: inline; }
.an-timeline li { grid-template-columns: 64px minmax(0, 1fr); }

/* Sign a document: send to a colleague; My Documents inbox */
.sg-share > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--sky); list-style: none; }
.sg-share > summary::-webkit-details-marker { display: none; }
.sg-share > summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.sg-share[open] > summary { margin-bottom: 10px; }
.sg-share-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin: 8px 0 12px; max-height: 260px; overflow: auto; }
.md-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; letter-spacing: 0.06em; vertical-align: middle; }
.data tr.md-unread td b, .data tr.md-unread .doc-link { color: #fff; font-weight: 800; }
.data tr.md-unread td:first-child { box-shadow: inset 3px 0 0 var(--sky); }

/* Business Cards */
.bc-top { margin-bottom: 12px; }
.bc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .bc-grid { grid-template-columns: 1fr; } }
.bc-preview { display: grid; gap: 10px; }
.bc-img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); }
.bc-img-front { width: 52%; }
.bc-who { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.bc-who b { display: block; color: #fff; font-size: 16px; }
.bc-who .sub { display: block; }
.bc-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(91,200,232,0.35); }
.bc-photo-lg { width: 120px; height: 120px; }
.bc-initials { display: inline-flex; align-items: center; justify-content: center; background: rgba(91,200,232,0.12); color: var(--sky); font-weight: 800; }
.bc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 6px 0 14px; }
.bc-facts dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.bc-facts dd { color: #fff; font-size: 13px; overflow-wrap: anywhere; }
.bc-facts dd .sub { display: block; font-size: 11px; }
.bc-exports { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(91,200,232,0.12); align-items: start; }
@media (max-width: 760px) { .bc-exports { grid-template-columns: 1fr; } }
.bc-qr { display: flex; gap: 12px; align-items: center; }
.bc-qr img { border-radius: 6px; background: #fff; }
.bc-qr b { display: block; color: #fff; }
.bc-qr .sub { display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.bc-qr-dl { display: flex; gap: 6px; }
.bc-dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bc-dl { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--border-dark); border-radius: 10px; text-decoration: none; background: rgba(91,200,232,0.04); transition: background 0.15s, border-color 0.15s; }
.bc-dl:hover { background: rgba(91,200,232,0.1); border-color: rgba(91,200,232,0.5); }
.bc-dl b { color: #fff; font-size: 13px; }
.bc-dl span { color: rgba(255,255,255,0.55); font-size: 11px; }
.bc-edit { display: grid; gap: 14px; }
.bc-photo-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.bc-file { cursor: pointer; }
.bc-src { display: grid; gap: 8px; margin: 8px 0 12px; }
.bc-del { margin-top: 6px; }

/* ⋯ row menus: the panel holding an open menu stays above the next panel; near the bottom the menu opens upward. */
.panel:has(details.row-menu[open]), section:has(> .table-wrap details.row-menu[open]) { position: relative; z-index: 40; }
.table-wrap:has(details.row-menu[open]) { overflow: visible; }
.row-menu.up > .row-menu-pop { top: auto; bottom: calc(100% + 6px); }

/* Order file: a file shown as its own entry in the tree */
.of-own-node > .of-head .of-icon { opacity: 0.9; }
.of-own-t { color: #fff; font-weight: 700; }
.btn-mini.of-own { padding: 3px 8px; font-size: 10px; }

/* Procurement invoices / proformas: the locked bank details (paper look, as printed) */
.bank-field [hidden] { display: none !important; }
.bank-lock-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.65); margin-bottom: 8px; }
.bank-lock-note svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.bank-paper { background: #fff; color: #0b1e30; border-radius: 8px; padding: 12px; margin-bottom: 8px; font-family: 'Jost', 'Montserrat', sans-serif; }
.bank-paper .px-bank-card { border: 1px solid #d9e0e7; margin-bottom: 8px; }
.bank-paper .px-bank-card:last-child { margin-bottom: 0; }
.bank-paper .px-bank-h { background: #0b1e30; color: #fff; border-left: 3px solid #C8102E; padding: 5px 10px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.bank-paper .px-bank-cols { display: grid; grid-template-columns: 30% 30% 40%; gap: 0; padding: 8px 10px 10px; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 760px) { .bank-paper .px-bank-cols { grid-template-columns: 1fr; gap: 8px; } }
.bank-paper .px-bank-cols b { font-weight: 600; }
.bank-paper .px-bank-l { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3e6b8a; margin-bottom: 2px; }
.bank-paper dl { display: grid; grid-template-columns: 86px 1fr; margin: 0; }
.bank-paper dt { color: #66768a; font-weight: 600; }
.bank-paper dd { margin: 0; font-weight: 700; }
.bank-paper .px-bank-memo { background: #eef7fb; padding: 6px 10px; font-size: 11.5px; font-weight: 600; }
.bank-custom textarea { width: 100%; margin-bottom: 8px; }