/* =========================================================
   Infanta Document Tracking System — Design Tokens
   Palette grounded in Infanta's coastal-municipal identity:
   ink-navy (bay water / official records) + brass (civic seal)
   on a paper ground, run like a registry ledger.
   ========================================================= */

:root {
  --ink-navy:      #1A3A63;
  --ink-navy-2:    #21467A;
  --topbar-navy:   #0D1F3C;
  --sidebar-navy:  #122D53;
  --brass:         #E0A83C;
  --brass-dark:    #C68B27;
  --paper:         #EEF1F5;
  --paper-panel:   #FFFFFF;
  --paper-line:    #DED7C4;
  --border-soft:   #E2E6EC;
  --text-main:     #1B2430;
  --text-muted:    #6B7280;
  --text-onnavy:   #DCE4F0;
  --text-onnavy-dim: #93A5C2;

  --status-pending:    #8B6323;
  --status-inprocess:  #1F4353;
  --status-onhold:     #A1443A;
  --status-released:   #4B6B4E;
  --status-completed:  #2F6F4F;

  --pri-routine: #6B6558;
  --pri-urgent:  #A1443A;
  --pri-high:    #8B6323;

  --accent-blue:   #2F6FB0;
  --accent-blue-bg: #EAF2FB;
  --accent-amber:  #B8862E;
  --accent-amber-bg: #FBF3E4;
  --accent-green:  #2F7D5C;
  --accent-green-bg: #E9F6EF;
  --accent-purple: #6E4E9E;
  --accent-purple-bg: #F1ECF9;
  --accent-red:    #B0402F;
  --accent-red-bg: #FBECE9;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-panel: 0 1px 3px rgba(14, 34, 56, 0.07);
  --shadow-card: 0 2px 10px rgba(14, 34, 56, 0.06);

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-navy);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

a { color: var(--ink-navy-2); }
a:hover { color: var(--brass-dark); }

/* ---------------- Global top bar (fixed, full width) ---------------- */

.global-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  z-index: 40;
  background: var(--topbar-navy);
  border-bottom: 2px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #fff;
}

.gt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 7px 12px;
  flex: 1;
  max-width: 380px;
  margin: 0 20px;
  position: relative;
}
.gt-search i { color: var(--text-onnavy-dim); flex-shrink: 0; }
.gt-search input[type="search"] {
  background: none !important;
  border: none !important;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
  padding: 0 !important;
  box-shadow: none !important;
}
.gt-search input[type="search"]::placeholder { color: var(--text-onnavy-dim); }

.gt-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--paper-panel);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  overflow: hidden;
  z-index: 70;
  max-height: 420px;
  overflow-y: auto;
}
.gt-search-results.open { display: block; }
.gt-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-main);
  border-bottom: 1px solid var(--paper-line);
}
.gt-search-result-item:last-child { border-bottom: none; }
.gt-search-result-item:hover, .gt-search-result-item.active { background: var(--paper); }
.gt-search-result-item .gsr-tracking { font-family: 'Courier New', monospace; font-size: 11.5px; font-weight: 700; color: var(--ink-navy); flex-shrink: 0; }
.gt-search-result-item .gsr-subject { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-search-result-item .gsr-dept { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.gt-search-results-footer {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-navy-2);
  text-align: center;
  border-top: 1px solid var(--paper-line);
  cursor: pointer;
}
.gt-search-results-footer:hover { background: var(--paper); }
.gt-search-empty { padding: 16px 14px; font-size: 12.5px; color: var(--text-muted); text-align: center; }

.global-topbar .gt-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.08); }

.gt-clock {
  font-size: 13px;
  color: var(--text-onnavy-dim);
}

.global-topbar .gt-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-topbar-action {
  background: var(--brass);
  color: #1A1200;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
}
.btn-topbar-action:hover { background: #C79646; color: #1A1200; }

.gt-bell {
  position: relative;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-onnavy-dim);
  background: none;
  border: none;
  cursor: pointer;
}
.gt-bell:hover { background: rgba(255,255,255,0.08); color: #fff; }
.gt-bell .badge-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--topbar-navy);
}

.notif-dropdown-wrap { position: relative; }
.notif-dropdown {
  position: absolute;
  top: 46px;
  right: 0;
  width: 360px;
  max-height: 460px;
  background: var(--paper-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 60;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-dropdown-head strong { font-size: 13.5px; color: var(--text-main); }
.notif-dropdown-head a { font-size: 12px; color: var(--ink-navy-2); text-decoration: none; font-weight: 600; }
.notif-dropdown-head a:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--paper-line);
  color: var(--text-main);
}
.notif-item:hover { background: var(--paper); }
.notif-item.unread { background: var(--accent-blue-bg); }
.notif-item .ni-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.notif-item .ni-icon.tone-inprocess { background: var(--accent-blue-bg); color: var(--accent-blue); }
.notif-item .ni-icon.tone-completed { background: var(--accent-green-bg); color: var(--accent-green); }
.notif-item .ni-icon.tone-onhold { background: var(--accent-red-bg); color: var(--accent-red); }
.notif-item .ni-icon.tone-pending { background: var(--accent-amber-bg); color: var(--accent-amber); }
.notif-item .ni-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.notif-item .ni-message { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.notif-item .ni-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-dropdown-foot {
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid var(--paper-line);
}
.notif-dropdown-foot a { font-size: 12.5px; font-weight: 600; color: var(--ink-navy-2); text-decoration: none; }
.notif-dropdown-foot a:hover { text-decoration: underline; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ---------------- User account dropdown ---------------- */

.user-dropdown-wrap { position: relative; }
.gt-user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.14);
  background: none;
  border-top: none; border-right: none; border-bottom: none;
  cursor: pointer;
}
.user-dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  width: 260px;
  background: var(--paper-panel);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  z-index: 60;
  display: none;
  overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-head {
  background: var(--topbar-navy);
  color: #fff;
  padding: 16px;
}
.user-dropdown-head .udh-name { font-weight: 700; font-size: 14px; }
.user-dropdown-head .udh-role { color: var(--brass); font-size: 12px; font-weight: 600; margin-top: 2px; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.user-dropdown-item:hover { background: var(--paper); }
.user-dropdown-item .udi-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
}
.user-dropdown-item .udi-icon.amber { background: var(--accent-amber-bg); color: var(--accent-amber); }
.user-dropdown-item .udi-icon.neutral { background: var(--paper); color: var(--text-muted); }
.user-dropdown-item .udi-icon.red { background: var(--accent-red-bg); color: var(--accent-red); }
.user-dropdown-divider { border-top: 1px solid var(--paper-line); margin: 4px 0; }
.user-dropdown-item.danger { color: var(--status-onhold); }

.gt-user-trigger .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.gt-user-trigger .who { line-height: 1.25; text-align: left; }
.gt-user-trigger .who .name { font-size: 13px; font-weight: 700; color: #fff; }
.gt-user-trigger .who .role { font-size: 11px; color: var(--text-onnavy-dim); }

/* ---------------- App shell ---------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  padding-top: 60px;
}

.sidebar {
  width: 246px;
  flex-shrink: 0;
  background: var(--sidebar-navy);
  color: var(--text-onnavy);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  transition: width 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .sidebar .site-title,
body.sidebar-collapsed .sidebar .site-sub,
body.sidebar-collapsed .sidebar .sidebar-section-label,
body.sidebar-collapsed .sidebar-nav a span.label,
body.sidebar-collapsed .sidebar-foot { display: none; }
body.sidebar-collapsed .main { margin-left: 72px; }

.main { margin-left: 246px; transition: margin-left 0.15s ease; flex: 1; min-width: 0; }

.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(233, 228, 214, 0.14);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand .seal-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-brand .seal-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-brand .site-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
  line-height: 1.25;
}

.sidebar-brand .site-sub {
  font-size: 11.5px;
  color: var(--text-onnavy-dim);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 168, 60, 0.35) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(224, 168, 60, 0.35);
  border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgba(224, 168, 60, 0.6);
}

.sidebar-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-onnavy-dim);
  padding: 14px 20px 6px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--text-onnavy);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
  background: rgba(233, 228, 214, 0.06);
}

.sidebar-nav a.active {
  background: rgba(233, 228, 214, 0.09);
  border-left-color: var(--brass);
  color: #fff;
  font-weight: 600;
}

.sidebar-foot {
  padding: 14px 20px;
  border-top: 1px solid rgba(233, 228, 214, 0.14);
  font-size: 12px;
  color: var(--text-onnavy-dim);
}

/* ---------------- Main content area ---------------- */

.content {
  padding: 26px 28px 60px;
  max-width: 1320px;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.page-header .eyebrow {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.page-header .title-row { display: flex; align-items: center; gap: 10px; }
.page-header .title-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
}
.page-header h1 { font-size: 23px; margin-bottom: 2px; }
.page-header.header-sans h1 { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.01em; }
.page-header p.desc { color: var(--text-muted); margin: 4px 0 0; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------------- Panels / cards ---------------- */

.panel {
  background: var(--paper-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.panel-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--paper-panel);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.stat-card .stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.stat-card .stat-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
}
.stat-card .stat-view {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-blue);
  text-decoration: none;
  border: 1px solid var(--accent-blue);
  border-radius: 20px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat-card .stat-view:hover { background: var(--accent-blue-bg); }
.stat-card .stat-flag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.stat-card.accent-amber  { border-top-color: var(--accent-amber); }
.stat-card.accent-amber .stat-icon  { background: var(--accent-amber-bg); color: var(--accent-amber); }
.stat-card.accent-green  { border-top-color: var(--accent-green); }
.stat-card.accent-green .stat-icon  { background: var(--accent-green-bg); color: var(--accent-green); }
.stat-card.accent-purple { border-top-color: var(--accent-purple); }
.stat-card.accent-purple .stat-icon { background: var(--accent-purple-bg); color: var(--accent-purple); }
.stat-card.accent-red    { border-top-color: var(--accent-red); }
.stat-card.accent-red .stat-icon    { background: var(--accent-red-bg); color: var(--accent-red); }

/* legacy accent aliases kept for compatibility */
.stat-card.accent-brass { border-top-color: var(--brass); }
.stat-card.accent-hold  { border-top-color: var(--status-onhold); }
.stat-card.accent-done  { border-top-color: var(--status-completed); }

.stat-card .num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 32px;
  color: var(--ink-navy);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.stat-card .helper {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Compact secondary stat row */
.stat-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.stat-mini-card {
  background: var(--paper-panel);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-mini-card .mini-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  flex-shrink: 0;
}
.stat-mini-card.c-green { border-left-color: var(--accent-green); }
.stat-mini-card.c-green .mini-icon { background: var(--accent-green-bg); color: var(--accent-green); }
.stat-mini-card.c-red { border-left-color: var(--accent-red); }
.stat-mini-card.c-red .mini-icon { background: var(--accent-red-bg); color: var(--accent-red); }
.stat-mini-card.c-purple { border-left-color: var(--accent-purple); }
.stat-mini-card.c-purple .mini-icon { background: var(--accent-purple-bg); color: var(--accent-purple); }
.stat-mini-card .num { font-family: var(--font-ui); font-weight: 800; font-size: 21px; margin-bottom: 0; letter-spacing: -0.01em; }
.stat-mini-card .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------- Tables (registry ledger feel) ---------------- */

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.ledger thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink-navy);
  white-space: nowrap;
}

table.ledger tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: middle;
}

table.ledger tbody tr:hover { background: rgba(23, 50, 63, 0.03); }

.tracking-code {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--ink-navy);
  letter-spacing: 0.02em;
}

/* ---------------- Badges / pills ---------------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.badge-pending    { color: var(--status-pending);   background: rgba(139, 99, 35, 0.1);  border-color: rgba(139, 99, 35, 0.25); }
.badge-inprocess  { color: var(--status-inprocess); background: rgba(31, 67, 83, 0.1);   border-color: rgba(31, 67, 83, 0.25); }
.badge-onhold     { color: var(--status-onhold);    background: rgba(161, 68, 58, 0.1);  border-color: rgba(161, 68, 58, 0.25); }
.badge-released   { color: var(--status-released);  background: rgba(75, 107, 78, 0.1);  border-color: rgba(75, 107, 78, 0.25); }
.badge-completed  { color: var(--status-completed); background: rgba(47, 111, 79, 0.1);  border-color: rgba(47, 111, 79, 0.25); }

.badge-routine { color: var(--pri-routine); background: rgba(107,101,88,0.1); border-color: rgba(107,101,88,0.25); }
.badge-urgent  { color: var(--pri-urgent);  background: rgba(161,68,58,0.1); border-color: rgba(161,68,58,0.25); }
.badge-high    { color: var(--pri-high);    background: rgba(139,99,35,0.1); border-color: rgba(139,99,35,0.25); }

/* ---------------- Forms ---------------- */

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 5px;
}

.field { margin-bottom: 16px; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], input[type=email], input[type=tel], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #C9C1AA;
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text-main);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ink-navy-2);
  outline-offset: 1px;
  border-color: var(--ink-navy-2);
}

textarea { resize: vertical; min-height: 80px; }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-ui);
}

.btn-primary { background: var(--ink-navy); color: #fff; }
.btn-primary:hover { background: var(--ink-navy-2); color: #fff; }

.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-dark); color: #fff; }

.btn-outline { background: transparent; border-color: #C9C1AA; color: var(--text-main); }
.btn-outline:hover { border-color: var(--ink-navy); color: var(--ink-navy); }

.btn-danger { background: transparent; border-color: rgba(161,68,58,0.4); color: var(--status-onhold); }
.btn-danger:hover { background: rgba(161,68,58,0.08); }

.btn-sm { padding: 5px 11px; font-size: 12px; }

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon-group {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* ---------------- Alerts / flash ---------------- */

.alert {
  padding: 11px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 13.5px;
  border-left: 3px solid;
}
.alert-success { background: rgba(47,111,79,0.08); border-color: var(--status-completed); color: #204F38; }
.alert-error   { background: rgba(161,68,58,0.08); border-color: var(--status-onhold); color: #7A2E26; }
.alert-info    { background: rgba(31,67,83,0.08); border-color: var(--ink-navy-2); color: var(--ink-navy); }

/* ---------------- Timeline (routing history) ---------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 2px solid var(--paper-line);
  margin-left: 6px;
}
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper-panel);
  border: 2px solid var(--ink-navy);
}
.timeline .t-when { font-size: 11.5px; color: var(--text-muted); }
.timeline .t-what { font-weight: 600; margin: 2px 0; }
.timeline .t-detail { font-size: 13px; color: var(--text-main); }

/* ---------------- Login page (split screen) ---------------- */

.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 70% 30%;
}

.login-promo {
  position: relative;
  background: radial-gradient(circle at 12% 15%, #2A538C 0%, transparent 42%),
              radial-gradient(circle at 88% 85%, #2A538C 0%, transparent 42%),
              linear-gradient(160deg, var(--ink-navy) 0%, var(--topbar-navy) 100%);
  color: #fff;
  padding: 50px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 3px solid var(--brass);
  overflow: hidden;
}

.login-promo .promo-seal {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin-bottom: 20px;
}
.login-promo .promo-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.login-promo h1 {
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 32px;
  text-align: center;
  margin-bottom: 6px;
}

.login-promo .promo-sub {
  color: var(--brass);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 36px;
}

.promo-features { list-style: none; margin: 0; padding: 0; max-width: 400px; width: 100%; }
.promo-features li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  color: var(--text-onnavy);
}
.promo-features li .pf-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--brass);
}

.login-promo .promo-foot {
  margin-top: 30px;
  font-size: 12px;
  color: var(--text-onnavy-dim);
  text-align: center;
}

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--paper-panel);
}

.login-form-inner { width: 100%; max-width: 380px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  color: var(--ink-navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.login-form-inner h1 { font-family: var(--font-ui); font-weight: 800; font-size: 29px; margin-bottom: 4px; color: #14213D; }
.login-form-inner .sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 26px; }

.field-label-row { display: flex; align-items: center; justify-content: space-between; }
.field-label-row label { margin-bottom: 5px; }
.field-label-row a { font-size: 12px; font-weight: 600; color: var(--ink-navy-2); text-decoration: none; }
.field-label-row a:hover { text-decoration: underline; }

.field-icon-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #C9CDD6;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.field-icon-wrap:focus-within {
  border-color: var(--ink-navy-2);
  outline: 2px solid rgba(33, 70, 122, 0.15);
}
.field-icon-wrap .field-icon {
  flex-shrink: 0;
  width: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  background: #F3F4F7;
  border-right: 1px solid #C9CDD6;
}
.field-icon-wrap input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.field-icon-wrap input:focus { outline: none; }
.field-icon-wrap .field-toggle {
  flex-shrink: 0;
  width: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  background: #fff;
  border: none;
  border-left: 1px solid #E2E6EC;
  cursor: pointer;
}
.field-icon-wrap .field-toggle:hover { color: var(--ink-navy); background: #F8F9FB; }

.login-form-inner .btn-primary { width: 100%; justify-content: center; margin-top: 6px; background: var(--ink-navy); }
.login-form-inner .btn-primary:hover { background: var(--ink-navy-2); }

.login-foot-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------------- OTP verification screen ---------------- */

.promo-security-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(224, 168, 60, 0.3);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 380px;
  text-align: center;
}
.promo-security-box .psb-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(224, 168, 60, 0.16);
  color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.promo-security-box p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-onnavy);
  margin: 0;
}

.otp-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.otp-inputs input {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  color: var(--ink-navy);
}
.otp-inputs input:focus {
  border-color: var(--ink-navy-2);
  outline: 2px solid rgba(33, 70, 122, 0.15);
}

.otp-timer {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.otp-timer strong { color: var(--ink-navy); font-variant-numeric: tabular-nums; }
.otp-timer.expired strong { color: var(--accent-red); }

.otp-dev-banner {
  background: var(--accent-amber-bg);
  border: 1px dashed var(--accent-amber);
  color: #6B4E14;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.otp-dev-banner strong { font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: 0.08em; }

.otp-resend-row {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 18px;
}
.otp-resend-row a, .otp-resend-row button {
  color: var(--ink-navy-2);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
}
.otp-resend-row a:hover, .otp-resend-row button:hover { text-decoration: underline; }
.otp-resend-row button:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }

@media (max-width: 880px) {
  .login-split { grid-template-columns: 1fr; }
  .login-promo { display: none; }
}

/* ---------------- Public tracking page ---------------- */

.public-wrap {
  min-height: 100vh;
  background: var(--paper);
}
.public-header {
  background: var(--ink-navy);
  color: #fff;
  padding: 40px 20px 60px;
  text-align: center;
}
.public-header .site-title { font-family: var(--font-display); font-size: 26px; }
.public-header .site-sub { color: var(--text-onnavy-dim); font-size: 13px; margin-top: 4px; }

.public-search-card {
  max-width: 560px;
  margin: -34px auto 0;
  background: var(--paper-panel);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 22px 24px;
}
.public-search-card form { display: flex; gap: 10px; }
.public-search-card input { flex: 1; }

.public-result { max-width: 560px; margin: 24px auto 60px; }

/* ---------------- Modal dialog ---------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 43, 0.55);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--paper-panel);
  border-radius: var(--radius);
  width: 100%;
  max-width: 700px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modal-pop 0.15s ease;
}
@keyframes modal-pop {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--paper-line);
}
.modal-header h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.modal-header h3 i { color: var(--accent-blue); }
.modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--paper); color: var(--text-main); }

.modal-body { padding: 22px; }

/* ---------------- Attachment preview modal ---------------- */

.ap-viewer {
  position: relative;
  background: #111;
  min-height: 60vh;
  max-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ap-content { width: 100%; height: 72vh; display: flex; align-items: center; justify-content: center; }
.ap-content img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.ap-content iframe { width: 100%; height: 72vh; border: none; background: #fff; }
.ap-content .ap-unsupported {
  color: #fff;
  text-align: center;
  padding: 40px;
  font-size: 13.5px;
}
.ap-content .ap-unsupported a { color: var(--brass); font-weight: 700; }

.ap-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.ap-nav-btn:hover { background: rgba(0,0,0,0.75); }
.ap-nav-prev { left: 14px; }
.ap-nav-next { right: 14px; }
.ap-nav-btn.hidden { display: none; }

.ap-counter { text-align: center; padding: 8px; font-size: 12px; color: var(--text-muted); background: var(--paper); }

/* ---------------- Camera capture modal ---------------- */

.camera-preview-wrap {
  background: #111;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.camera-preview-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.use-camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #C9C1AA;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  margin-top: 10px;
}
.use-camera-btn:hover { border-color: var(--ink-navy); color: var(--ink-navy); }

/* ---------------- SweetAlert2 theme override ---------------- */

.dts-swal-popup {
  font-family: var(--font-ui) !important;
  border-radius: var(--radius) !important;
}
.dts-swal-popup .swal2-title { font-size: 18px !important; color: var(--text-main) !important; }
.dts-swal-popup .swal2-html-container { font-size: 14px !important; color: var(--text-muted) !important; }
.dts-swal-popup .swal2-confirm, .dts-swal-popup .swal2-cancel {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
}

.dts-swal-toast {
  font-family: var(--font-ui) !important;
}
.dts-swal-toast .swal2-title {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ---------------- Temporary password reveal ---------------- */

.temp-password-reveal {
  display: flex;
  gap: 14px;
  background: var(--accent-amber-bg);
  border: 1.5px solid var(--accent-amber);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.temp-password-reveal .tpr-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-amber);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.temp-password-reveal .tpr-title { font-weight: 700; font-size: 13.5px; color: var(--text-main); margin-bottom: 8px; }
.temp-password-reveal .tpr-code {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #fff;
  border: 1px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--ink-navy);
  margin-bottom: 10px;
  user-select: all;
}
.temp-password-reveal .tpr-hint { font-size: 12px; color: #6B4E14; line-height: 1.6; }

.settings-card .card-banner.banner-blue { background: var(--ink-navy); }

.qm-list { display: flex; flex-direction: column; }
.qm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--text-main);
  border-bottom: 1px solid var(--paper-line);
}
.qm-item:last-child { border-bottom: none; }
.qm-item:hover .qm-label { color: var(--ink-navy-2); }
.qm-item .qm-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qm-item .qm-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.qm-item .qm-chevron { color: var(--text-muted); flex-shrink: 0; }

/* ---------------- Settings page ---------------- */

.settings-card {
  background: var(--paper-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
}
.settings-card .card-banner {
  background: #14181F;
  color: #fff;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-card .card-body { padding: 24px; }

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #F3F4F7;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.settings-toggle-row .stt-title { font-weight: 700; font-size: 14.5px; color: var(--text-main); margin-bottom: 4px; }
.settings-toggle-row .stt-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; margin-top: 2px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #C9CDD6;
  border-radius: 25px;
  transition: background 0.15s ease;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 19px; width: 19px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--ink-navy-2); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(19px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--ink-navy-2); outline-offset: 2px; }

.settings-divider {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 24px 0;
}

.section-lead {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-main);
  margin-bottom: 6px;
}
.section-lead .lead-icon { color: var(--accent-blue); }

.settings-actions-bar {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  padding: 14px 0 4px;
  margin-top: 4px;
}

/* ---------------- File upload with thumbnail preview ---------------- */

.file-upload-zone {
  position: relative;
  border: 1.5px dashed #C9C1AA;
  border-radius: var(--radius);
  background: #FBFAF7;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.file-upload-zone.drag-over { border-color: var(--ink-navy-2); background: var(--accent-blue-bg); }

.file-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.file-upload-zone.has-file .file-upload-input { cursor: default; }

.file-upload-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  pointer-events: none;
}
.file-upload-empty i { color: var(--text-muted); margin-bottom: 8px; }
.file-upload-empty .fu-title { font-size: 13.5px; font-weight: 600; color: var(--text-main); margin-bottom: 3px; }
.file-upload-empty .fu-hint { font-size: 12px; }

.file-upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.fu-thumb {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
.fu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fu-thumb.type-pdf  { background: var(--accent-red-bg); color: var(--accent-red); }
.fu-thumb.type-docx { background: var(--accent-blue-bg); color: var(--accent-blue); }
.fu-thumb.type-xlsx { background: var(--accent-green-bg); color: var(--accent-green); }

.fu-info { flex: 1; min-width: 0; }
.fu-filename { font-size: 13.5px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-filesize { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fu-remove {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid #C9C1AA;
  background: #fff;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  position: relative;
}
.fu-remove:hover { border-color: var(--status-onhold); color: var(--status-onhold); background: var(--accent-red-bg); }

.fu-multi-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.fu-multi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
.fu-multi-item .fu-thumb { width: 40px; height: 40px; font-size: 0; }
.fu-multi-item .fu-thumb i { width: 18px; height: 18px; }
.fu-multi-item .fu-info { flex: 1; min-width: 0; }
.fu-multi-item .fu-filename { font-size: 12.5px; }
.fu-multi-item .fu-filesize { font-size: 11px; }
.fu-multi-add-more {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--ink-navy-2);
  font-weight: 600;
  cursor: pointer;
  border-top: 1px dashed var(--paper-line);
  margin-top: 2px;
}
.fu-multi-add-more:hover { text-decoration: underline; }

/* ---------------- Two-column layout grids ---------------- */
/* Used instead of inline grid-template-columns so the mobile media query
   below can actually override them — inline styles win over stylesheet
   rules regardless of media query, which was silently defeating the
   responsive stacking on several pages. */

.grid-2col-doc      { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.grid-2col-profile  { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; }
.grid-2col-settings { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
.chart-row-wide-left { grid-template-columns: 1.4fr 1fr; margin-top: 20px; }
.form-row-smtp { grid-template-columns: 2fr 1fr 1.2fr; }

/* ---------------- Responsive table scroll ---------------- */
/* Wide ledger tables scroll within their own box on narrow screens,
   instead of forcing the whole page (search bars, filters, etc.)
   to scroll horizontally along with them. */

.panel-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.panel-table-scroll table.ledger {
  min-width: 640px;
}

/* ---------------- Reports nav ---------------- */

.reports-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
}
.reports-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--paper-line);
  background: #fff;
}
.reports-nav-item:hover { border-color: var(--ink-navy); color: var(--ink-navy); }
.reports-nav-item.active {
  background: var(--ink-navy);
  border-color: var(--ink-navy);
  color: #fff;
}

/* ---------------- Misc ---------------- */

.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}
.empty-state h3 { color: var(--text-main); font-size: 16px; }

/* ---------------- Chart panels ---------------- */

.chart-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-canvas-wrap { position: relative; height: 260px; }

.chart-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
}
.chart-panel-header .cph-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-navy);
}
.chart-panel-header .cph-title i { color: var(--accent-blue); flex-shrink: 0; }
.chart-panel-header .cph-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  margin-left: 26px;
}

@media (max-width: 900px) {
  /* Sidebar becomes a slide-in drawer instead of vanishing with no way back */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(0,0,0,0.3);
  }
  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: rgba(13, 25, 40, 0.55);
    z-index: 25;
  }
  body.sidebar-mobile-open .sidebar-backdrop {
    display: block;
  }
  .main { margin-left: 0 !important; }

  /* Keep the top bar from overflowing/wrapping on narrow screens */
  .global-topbar { padding: 0 10px; }
  .gt-left { gap: 8px; }
  .gt-right { gap: 8px; }
  .gt-clock { display: none; }
  .gt-action-label { display: none; }
  .btn-topbar-action { padding: 8px 10px; }
  .gt-user-trigger .who { display: none; }
  .gt-user-trigger { padding-left: 6px; gap: 6px; }
  .notif-dropdown { width: calc(100vw - 24px); right: -6px; }
  .user-dropdown { right: -6px; }
  .gt-search { margin: 0 8px; max-width: none; padding: 6px 10px; }

  .content { padding: 18px 14px 40px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-mini-grid { grid-template-columns: 1fr 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .grid-2col-doc, .grid-2col-profile, .grid-2col-settings { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .login-split { grid-template-columns: 1fr; }
  .login-promo { display: none; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-mini-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > *:last-child { width: 100%; }
}

/* =====================================================================
   Dashboard  (dx-*)  — server-rendered SVG charts, no external scripts
   ===================================================================== */
.dx-content { padding-top: 22px; }
.dx-muted { color: var(--text-muted); }

/* ---- hero ---- */
.dx-hero {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(224,168,60,.18) 0, rgba(224,168,60,0) 46%),
    radial-gradient(70% 120% at 0% 100%, rgba(47,111,176,.30) 0, rgba(47,111,176,0) 60%),
    linear-gradient(118deg, #0D1F3C 0%, #16345C 55%, #21467A 100%);
  color: #fff; border-radius: 16px; padding: 28px 32px 62px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(13,31,60,.22);
}
.dx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.dx-hero-main { min-width: 0; flex: 1 1 420px; }
.dx-hero-meta { display: flex; flex-wrap: wrap; }
.dx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-onnavy);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 4px 11px; border-radius: 999px; margin: 0 8px 6px 0; }
.dx-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 31px; letter-spacing: -.012em; margin: 10px 0 8px; color: #fff; line-height: 1.15; }
.dx-hero-sub { color: var(--text-onnavy); font-size: 14.5px; margin: 0; line-height: 1.65; max-width: 640px; }
.dx-hero-sub strong { color: #fff; font-weight: 700; }
.dx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: 10px; transition: background .15s, transform .15s; white-space: nowrap; }
.dx-btn-primary { background: var(--brass); color: #1A1200; box-shadow: 0 4px 14px rgba(224,168,60,.35); }
.dx-btn-primary:hover { background: #ECB84F; transform: translateY(-1px); }
.dx-btn-ghost { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.dx-btn-ghost:hover { background: rgba(255,255,255,.16); }

/* ---- KPI cards (float over the hero's lower edge) ---- */
.dx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: -38px 16px 20px; position: relative; z-index: 2; }
.dx-kpi { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 16px 18px 14px 22px; text-decoration: none; color: inherit; box-shadow: 0 8px 22px rgba(14,34,56,.09); overflow: hidden; min-width: 0; transition: transform .15s, box-shadow .15s; }
.dx-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
a.dx-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14,34,56,.14); }
a.dx-kpi:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.dx-kpi-top { display: flex; align-items: center; gap: 9px; }
.dx-kpi-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--cbg); color: var(--c); display: grid; place-items: center; flex-shrink: 0; }
.dx-kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.25; }
.dx-kpi-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 40px; }
.dx-kpi-val { font-size: 36px; font-weight: 800; letter-spacing: -.025em; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
.dx-kpi-val small { font-size: 19px; font-weight: 700; margin-left: 1px; color: var(--text-muted); }
.dx-kpi.is-alert .dx-kpi-val { color: var(--accent-red); }
.dx-kpi-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.dx-legend i, .dx-status-list i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dx-spark { flex-shrink: 0; }
.dx-ring { flex-shrink: 0; }
.dx-ring-txt { font: 800 13px var(--font-ui); fill: var(--text-main); }
.dx-delta { font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dx-delta.up { background: #E4F4EB; color: #1F6B4A; }
.dx-delta.down { background: #FBE7E3; color: #9A3426; }
.dx-delta.flat { background: #EEF1F5; color: #6B7280; }
.dx-delta.neutral { background: #E8F0FA; color: #24598F; }

/* ---- cards + grids ---- */
.dx-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dx-grid-wide { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.dx-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dx-grid-one  { grid-template-columns: minmax(0, 1fr); }
.dx-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dx-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); min-width: 0; }
.dx-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dx-card-h h2 { font: 700 15px var(--font-ui); margin: 0; color: var(--text-main); letter-spacing: -.005em; }
.dx-card-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dx-more { font-size: 12px; font-weight: 700; color: var(--accent-red); background: var(--accent-red-bg); padding: 3px 10px; border-radius: 999px; }
.dx-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.dx-legend b { color: var(--text-main); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ---- charts ---- */
.dx-chart { width: 100%; height: auto; display: block; }
.dx-gl { stroke: #E9EDF3; stroke-width: 1; stroke-dasharray: 3 4; }
.dx-ax { stroke: #CBD2DC; stroke-width: 1; }
.dx-tick { font: 500 11px var(--font-ui); fill: #8A93A3; }
.dx-dot { fill: #fff; stroke-width: 2.2; }
.dx-dot:hover { r: 6; }
.dx-empty-note { font: 600 13px var(--font-ui); fill: #9AA3B2; }
.dx-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dx-donut { width: 168px; height: 168px; flex-shrink: 0; margin: 0 auto; }
.dx-donut-big { font: 800 27px var(--font-ui); fill: var(--text-main); }
.dx-donut-sub { font: 700 9.5px var(--font-ui); fill: #8A93A3; letter-spacing: .08em; text-transform: uppercase; }
.dx-status-list { list-style: none; margin: 0; padding: 0; flex: 1 1 170px; min-width: 0; }
.dx-status-list li { display: grid; grid-template-columns: 1fr auto 42px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F0F2F6; font-size: 13px; }
.dx-status-list li:last-child { border-bottom: 0; }
.dx-status-list a { color: var(--text-main); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; }
.dx-status-list a:hover { color: var(--ink-navy); text-decoration: underline; }
.dx-status-list b { font-variant-numeric: tabular-nums; }
.dx-status-list span { color: var(--text-muted); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- needs-attention table ---- */
.dx-table-wrap { overflow-x: auto; }
.dx-table { width: 100%; border-collapse: collapse; }
.dx-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8A93A3; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); font-weight: 700; white-space: nowrap; }
.dx-table th.r, .dx-table td.r { text-align: right; }
.dx-table td { padding: 11px 10px; border-bottom: 1px solid #F0F2F6; vertical-align: middle; font-size: 13px; }
.dx-table tbody tr:last-child td { border-bottom: 0; }
.dx-table tbody tr:hover td { background: #FAFBFD; }
.dx-doc { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.dx-track { font: 700 12px 'SFMono-Regular', Consolas, 'Courier New', monospace; color: var(--ink-navy); letter-spacing: .01em; }
.dx-subj { font-size: 13.5px; color: var(--text-main); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.dx-doc:hover .dx-subj { text-decoration: underline; }
.dx-prio { font: 700 9.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.dx-prio.urgent { background: var(--accent-red-bg); color: var(--accent-red); }
.dx-prio.high { background: var(--accent-amber-bg); color: #8B6323; }
.dx-age { display: inline-block; min-width: 40px; text-align: center; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.dx-age.sev1 { background: var(--accent-amber-bg); color: #8B6323; }
.dx-age.sev2 { background: #FCE9D9; color: #A5521C; }
.dx-age.sev3 { background: var(--accent-red-bg); color: var(--accent-red); }

/* ---- bars ---- */
.dx-bar-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 42px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.dx-bar-row.wide { grid-template-columns: 190px minmax(0, 1fr) 44px; }
.dx-bar-label { color: var(--text-main); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-bar-track { height: 9px; background: #EEF1F5; border-radius: 999px; overflow: hidden; }
.dx-bar-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: dx-grow .75s cubic-bezier(.2,.7,.2,1) both; }
.dx-bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes dx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- activity feed ---- */
.dx-feed { list-style: none; margin: 0; padding: 0; }
.dx-feed li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F0F2F6; }
.dx-feed li:last-child { border-bottom: 0; }
@media (min-width: 1000px) { .dx-feed.cols { columns: 2; column-gap: 40px; } .dx-feed.cols li { break-inside: avoid; } }
.dx-feed-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.dx-feed-ico.t-blue { background: var(--accent-blue-bg); color: var(--accent-blue); }
.dx-feed-ico.t-green { background: var(--accent-green-bg); color: var(--accent-green); }
.dx-feed-ico.t-amber { background: var(--accent-amber-bg); color: #A87825; }
.dx-feed-ico.t-purple { background: var(--accent-purple-bg); color: var(--accent-purple); }
.dx-feed-ico.t-red { background: var(--accent-red-bg); color: var(--accent-red); }
.dx-feed-ico.t-gray { background: #EEF1F5; color: #6B7280; }
.dx-feed-body { min-width: 0; flex: 1; }
.dx-feed-body > a { color: var(--text-main); text-decoration: none; font-size: 13.5px; }
.dx-feed-body > a:hover strong { text-decoration: underline; }
.dx-feed-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-feed-meta { font-size: 11.5px; color: #8A93A3; margin-top: 1px; }

/* ---- empty states + footer ---- */
.dx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dx-empty i, .dx-empty svg { color: var(--accent-green); }
.dx-empty strong { color: var(--text-main); font-size: 15px; }
.dx-empty.small { padding: 16px 8px; }
.dx-foot { font-size: 12px; color: #8A93A3; text-align: center; margin: 6px 0 4px; }

/* ---- responsive ---- */
@media (max-width: 1360px) { .dx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .dx-grid-wide, .dx-grid-even { grid-template-columns: minmax(0, 1fr); }
  .dx-hero { padding: 22px 22px 58px; }
  .dx-hero h1 { font-size: 25px; }
}
@media (max-width: 760px) {
  .dx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -34px 0 16px; gap: 12px; }
  .dx-kpi { padding: 14px 14px 12px 18px; }
  .dx-kpi-val { font-size: 29px; }
  .dx-card { padding: 16px; }
  .dx-subj { max-width: 190px; }
  .dx-hide-sm { display: none; }
  .dx-bar-row.wide { grid-template-columns: 120px minmax(0, 1fr) 40px; }
  .dx-hero-actions { width: 100%; }
}
@media (max-width: 560px) { .dx-hide-xs { display: none; } .dx-subj { max-width: 215px; } }
@media (max-width: 480px) { .dx-kpis { grid-template-columns: minmax(0, 1fr); } .dx-bar-row { grid-template-columns: 88px minmax(0, 1fr) 36px; } }
@media (prefers-reduced-motion: reduce) { .dx-bar-fill { animation: none; } a.dx-kpi, .dx-btn { transition: none; } }
@media print { .dx-hero-actions { display: none; } .dx-kpi, .dx-card { box-shadow: none; } }

/* =====================================================================
   Register incoming document  (rg-*)
   ===================================================================== */
.rg-content { padding-top: 22px; }
.rg-banner {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; overflow: hidden;
  background:
    radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.17) 0, rgba(224,168,60,0) 48%),
    linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%);
  color: #fff; border-radius: 16px; padding: 24px 30px 28px; margin-bottom: 20px; box-shadow: 0 12px 30px rgba(13,31,60,.20);
}
.rg-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.rg-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); }
.rg-crumb a { color: var(--text-onnavy); text-decoration: none; } .rg-crumb a:hover { text-decoration: underline; }
.rg-crumb span { margin: 0 4px; opacity: .6; }
.rg-banner h1 { font-family: var(--font-display); font-size: 29px; font-weight: 600; letter-spacing: -.012em; margin: 8px 0 8px; color: #fff; line-height: 1.15; }
.rg-banner p { margin: 0; color: var(--text-onnavy); max-width: 640px; font-size: 14px; line-height: 1.65; }
.rg-banner-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-onnavy-dim); }
.rg-banner-hint kbd { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; font: 700 11px var(--font-ui); color: #fff; }

.rg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 20px; align-items: start; }
.rg-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rg-side { position: sticky; top: 84px; min-width: 0; }
.rg-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 24px 8px; box-shadow: var(--shadow-card); }
.rg-card-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.rg-card-h h2 { font: 700 16px var(--font-ui); margin: 1px 0 0; color: var(--text-main); letter-spacing: -.005em; }
.rg-card-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.rg-step { width: 30px; height: 30px; border-radius: 50%; background: var(--ink-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px rgba(224,168,60,.30); flex-shrink: 0; }

.rg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rg-field { margin-bottom: 18px; min-width: 0; }
.rg-field label, .rg-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-main); margin-bottom: 7px; }
.rg-field .req { color: var(--accent-red); margin-left: 2px; }
.rg-opt { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: 6px; background: #EEF1F5; padding: 1px 8px; border-radius: 999px; }
.rg-field input[type=text], .rg-field input[type=email], .rg-field input[type=tel], .rg-field input[type=date], .rg-field select, .rg-field textarea {
  width: 100%; box-sizing: border-box; font: 400 14px var(--font-ui); padding: 11px 13px; border: 1px solid #CDD5E0; border-radius: 10px; background: #fff; color: var(--text-main);
  transition: border-color .15s, box-shadow .15s; min-height: 44px;
}
.rg-field textarea { resize: vertical; line-height: 1.55; }
.rg-field input:focus, .rg-field select:focus, .rg-field textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.rg-field.has-error input, .rg-field.has-error select, .rg-field.has-error textarea, .rg-field.has-error .file-upload-zone { border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(176,64,47,.12); }
.rg-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.rg-hint:empty { display: none; }
.rg-meta { display: flex; justify-content: space-between; gap: 10px; }
.rg-count { font-size: 11.5px; color: #8A93A3; font-variant-numeric: tabular-nums; margin-top: 6px; white-space: nowrap; }
.rg-err { display: none; font-size: 12.5px; color: var(--accent-red); font-weight: 600; margin-top: 6px; line-height: 1.45; }
.rg-field.has-error .rg-err { display: block; }

.rg-seg { display: flex; gap: 4px; background: #F0F2F6; border-radius: 12px; padding: 4px; }
.rg-field .rg-seg-opt { flex: 1; position: relative; cursor: pointer; margin: 0; }
.rg-seg-opt input { position: absolute; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rg-seg-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.rg-seg-opt:hover span { color: var(--text-main); }
.rg-seg-opt input:checked + span { background: #fff; color: var(--ink-navy); box-shadow: 0 1px 5px rgba(14,34,56,.16); }
.rg-seg-opt.p-high input:checked + span { background: var(--accent-amber-bg); color: #8B6323; box-shadow: 0 0 0 1px #EBD39B; }
.rg-seg-opt.p-urgent input:checked + span { background: var(--accent-red-bg); color: var(--accent-red); box-shadow: 0 0 0 1px #F0C4BC; }
.rg-seg-opt input:focus-visible + span { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

.rg-date { display: flex; align-items: center; gap: 8px; }
.rg-date input { flex: 1; min-width: 0; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rg-chip { border: 1px solid #CDD5E0; background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 12px var(--font-ui); color: var(--ink-navy); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.rg-chip:hover { background: var(--accent-blue-bg); border-color: var(--accent-blue); }
.rg-chip.phrase { font-weight: 500; color: var(--text-main); }

.rg-alert { background: #FCEFEC; border: 1px solid #F0C4BC; border-left: 4px solid var(--accent-red); border-radius: 12px; padding: 14px 18px; }
.rg-alert[hidden] { display: none; }
.rg-alert-title { font-weight: 800; color: #8E2E20; font-size: 13.5px; margin-bottom: 4px; }
.rg-alert ul { margin: 0; padding-left: 18px; color: #7A3228; font-size: 13px; line-height: 1.75; }
.rg-alert li.note { color: #7A5A17; }
.rg-alert a { color: inherit; text-decoration: underline; cursor: pointer; }

/* the shared upload widget, refined only on this page */
.rg-card .file-upload-zone { border: 2px dashed #C5CEDB; border-radius: 12px; background: #FAFBFD; transition: border-color .15s, background .15s; }
.rg-card .file-upload-zone:hover, .rg-card .file-upload-zone.drag-over { border-color: var(--accent-blue); background: var(--accent-blue-bg); }
.rg-card .file-upload-empty { padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rg-card .file-upload-empty > i, .rg-card .file-upload-empty > svg { color: var(--accent-blue); }

/* live summary */
.rg-summary { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px; box-shadow: 0 12px 28px rgba(14,34,56,.10); }
.rg-sum-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.rg-sum-h h2 { font: 700 15px var(--font-ui); margin: 0; }
.rg-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-amber-bg); color: #8B6323; white-space: nowrap; }
.rg-pill.done { background: var(--accent-green-bg); color: #1F6B4A; }
.rg-track { background: linear-gradient(135deg, #0D1F3C, #1A3A63); color: #fff; border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.rg-track span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-onnavy-dim); }
.rg-track strong { display: block; font: 800 18px 'SFMono-Regular', Consolas, 'Courier New', monospace; letter-spacing: .02em; margin: 3px 0 2px; }
.rg-track small { font-size: 11.5px; color: var(--text-onnavy); }
.rg-track.pending strong { font: 700 16px var(--font-ui); letter-spacing: 0; margin: 4px 0 4px; }
.rg-sum { margin: 0 0 12px; }
.rg-sum > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #F0F2F6; font-size: 13px; }
.rg-sum dt { color: var(--text-muted); flex-shrink: 0; }
.rg-sum dd { margin: 0; text-align: right; font-weight: 600; color: var(--text-main); min-width: 0; overflow-wrap: anywhere; }
.rg-sum dd.empty { color: #9AA3B2; font-weight: 500; }
.rg-prio { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rg-prio.p-routine { background: #EEF1F5; color: #566074; } .rg-prio.p-high { background: var(--accent-amber-bg); color: #8B6323; } .rg-prio.p-urgent { background: var(--accent-red-bg); color: var(--accent-red); }
.rg-checks { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding: 0; }
.rg-checks li { font-size: 11.5px; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: #F0F2F6; color: var(--text-muted); font-weight: 600; }
.rg-checks li i { width: 8px; height: 8px; border-radius: 50%; background: #C3CAD6; }
.rg-checks li.ok { background: var(--accent-green-bg); color: #1F6B4A; } .rg-checks li.ok i { background: #2F7D5C; }
.rg-dupes { background: var(--accent-amber-bg); border: 1px solid #EBD39B; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.rg-dupes[hidden] { display: none; }
.rg-dupes-h { font-weight: 800; font-size: 12.5px; color: #7A5A17; display: flex; gap: 6px; align-items: center; }
.rg-dupes p { font-size: 12px; color: #7A5A17; margin: 4px 0 8px; line-height: 1.5; }
.rg-dupes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rg-dupes a { display: block; background: #fff; border: 1px solid #EBD39B; border-radius: 8px; padding: 7px 10px; text-decoration: none; color: var(--text-main); font-size: 12.5px; }
.rg-dupes a:hover { border-color: var(--brass-dark); }
.rg-dupes a strong { display: block; font: 700 11.5px 'SFMono-Regular', Consolas, monospace; color: var(--ink-navy); }
.rg-dupes a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-dupes a em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.rg-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--brass); color: #1A1200; border: 0; border-radius: 12px; padding: 14px 16px; font: 800 14.5px var(--font-ui); cursor: pointer; box-shadow: 0 6px 18px rgba(224,168,60,.36); transition: background .15s, transform .15s; }
.rg-submit:hover { background: #ECB84F; transform: translateY(-1px); }
.rg-submit:focus-visible { outline: 3px solid rgba(47,111,176,.5); outline-offset: 2px; }
.rg-submit:disabled, .rg-submit.busy { opacity: .72; cursor: progress; transform: none; }
.rg-submit.sm { width: auto; padding: 11px 24px; }
.rg-cancel { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.rg-cancel:hover { color: var(--text-main); text-decoration: underline; }
.rg-mobilebar { display: none; }

@media (max-width: 1000px) {
  .rg-layout { grid-template-columns: minmax(0, 1fr); }
  .rg-side { position: static; }
  .rg-content { padding-bottom: 86px; }
  .rg-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
    background: #fff; border-top: 1px solid var(--border-soft); box-shadow: 0 -8px 22px rgba(14,34,56,.12); font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
  .rg-banner { padding: 20px 20px 24px; } .rg-banner h1 { font-size: 24px; } .rg-banner-hint { display: none; }
}
@media (max-width: 700px) {
  .rg-row { grid-template-columns: minmax(0, 1fr); }
  .rg-card { padding: 18px 16px 6px; }
  .rg-date { flex-wrap: wrap; } .rg-date input { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .rg-submit, .rg-chip, .rg-field input, .rg-field select, .rg-field textarea, .rg-card .file-upload-zone { transition: none; } }

/* =====================================================================
   All documents list  (ls-*)
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ls-content { padding-top: 22px; }
.ls-banner {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; overflow: hidden;
  background: radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.17) 0, rgba(224,168,60,0) 48%), linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%);
  color: #fff; border-radius: 16px; padding: 22px 30px 26px; margin-bottom: 16px; box-shadow: 0 12px 30px rgba(13,31,60,.20);
}
.ls-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.ls-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); } .ls-crumb span { margin: 0 4px; opacity: .6; }
.ls-banner h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 6px; color: #fff; line-height: 1.15; }
.ls-banner p { margin: 0; color: var(--text-onnavy); font-size: 14px; } .ls-banner p strong { color: #fff; font-size: 15px; }
.ls-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 13.5px var(--font-ui); text-decoration: none; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.ls-btn.primary { background: var(--brass); color: #1A1200; box-shadow: 0 4px 14px rgba(224,168,60,.35); } .ls-btn.primary:hover { background: #ECB84F; transform: translateY(-1px); }
.ls-btn.ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .ls-btn.ghost:hover { background: rgba(255,255,255,.16); }
.ls-btn.solid { background: var(--ink-navy); color: #fff; } .ls-btn.solid:hover { background: var(--ink-navy-2); }
.ls-btn.outline { background: #fff; color: var(--ink-navy); border-color: #CDD5E0; } .ls-btn.outline:hover { background: var(--accent-blue-bg); border-color: var(--accent-blue); }
.ls-btn:focus-visible, .ls-tab:focus-visible, .ls-act:focus-visible, .ls-chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.ls-badge { background: var(--brass); color: #1A1200; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: 2px; }

.ls-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 6px; scrollbar-width: thin; }
.ls-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border-soft); color: var(--text-muted); font: 600 13px var(--font-ui); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.ls-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B7BFCC; }
.ls-tab.t-all::before { background: var(--ink-navy); } .ls-tab.t-active::before { background: #2F6FB0; } .ls-tab.t-pending::before { background: #C9922E; }
.ls-tab.t-in_process::before { background: #2F6FB0; } .ls-tab.t-on_hold::before { background: #B0402F; } .ls-tab.t-released::before { background: #6E4E9E; } .ls-tab.t-completed::before { background: #2F7D5C; } .ls-tab.t-voided::before { background: #8A93A3; }
.ls-tab b { background: #EEF1F5; color: var(--text-main); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ls-tab:hover { background: #F7F9FC; color: var(--text-main); }
.ls-tab.on { background: var(--ink-navy); border-color: var(--ink-navy); color: #fff; } .ls-tab.on b { background: rgba(255,255,255,.18); color: #fff; } .ls-tab.on::before { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

.ls-filters { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card); margin-bottom: 12px; }
.ls-search-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ls-search { flex: 1 1 320px; position: relative; display: block; min-width: 0; }
.ls-search > i, .ls-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8A93A3; pointer-events: none; }
.ls-search input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 11px 14px 11px 40px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 14px var(--font-ui); background: #fff; color: var(--text-main); }
.ls-search input:focus, .ls-adv select:focus, .ls-adv input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.ls-adv { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #DDE3EC; } .ls-adv[hidden] { display: none; }
.ls-adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.ls-adv label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-main); min-width: 0; }
.ls-adv select, .ls-adv input[type=date] { min-height: 42px; padding: 9px 11px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 13.5px var(--font-ui); background: #fff; width: 100%; box-sizing: border-box; }
.ls-adv label.ls-check { flex-direction: row; align-items: center; gap: 9px; font-weight: 600; min-height: 42px; } .ls-check input { width: 17px; height: 17px; accent-color: var(--ink-navy); }
.ls-adv-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ls-link { font: 600 12.5px var(--font-ui); color: var(--ink-navy-2); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; } .ls-link:hover { text-decoration: underline; }
.ls-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ls-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 12px; border-radius: 999px; background: var(--accent-blue-bg); color: #24598F; font: 600 12px var(--font-ui); text-decoration: none; }
.ls-chip:hover { background: #D7E6F7; } .ls-chip span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .7; }

.ls-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.ls-table-wrap { overflow-x: auto; }
.ls-table { width: 100%; border-collapse: collapse; }
.ls-table th { text-align: left; padding: 12px 14px; font: 700 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #8A93A3; background: #FAFBFD; border-bottom: 1px solid var(--border-soft); white-space: nowrap; position: sticky; top: 0; }
.ls-sort { color: inherit; text-decoration: none; } .ls-sort:hover { color: var(--ink-navy); } .ls-sort.on { color: var(--ink-navy); }
.ls-sortgroup { margin-left: 8px; display: inline-flex; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; }
.ls-table td { padding: 13px 14px; border-bottom: 1px solid #F0F2F6; vertical-align: top; font-size: 13px; color: var(--text-main); }
.ls-table tbody tr:last-child td { border-bottom: 0; }
.ls-row { cursor: pointer; transition: background .12s; } .ls-row:hover td { background: #F8FAFD; }
.ls-row td:first-child { box-shadow: inset 3px 0 0 transparent; } .ls-row.p-urgent td:first-child { box-shadow: inset 3px 0 0 #B0402F; } .ls-row.p-high td:first-child { box-shadow: inset 3px 0 0 #C9922E; }
.ls-row.is-void td { opacity: .62; }
.ls-muted { color: var(--text-muted); }
.ls-subj { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 14px; color: var(--text-main); text-decoration: none; line-height: 1.4; }
.ls-subj:hover { color: var(--ink-navy); text-decoration: underline; }
.ls-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.ls-track { font: 700 11.5px 'SFMono-Regular', Consolas, 'Courier New', monospace; color: var(--ink-navy); letter-spacing: .01em; }
.ls-dot { opacity: .5; } .ls-from { overflow-wrap: anywhere; }
.ls-att { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: #EEF1F5; color: #566074; font-weight: 700; font-size: 11px; }
mark { background: #FFF0B8; color: inherit; border-radius: 3px; padding: 0 2px; }
.ls-prio { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; color: var(--text-muted); } .ls-prio i { width: 8px; height: 8px; border-radius: 50%; background: #B7BFCC; }
.ls-prio.p-high { color: #8B6323; } .ls-prio.p-high i { background: #C9922E; } .ls-prio.p-urgent { color: var(--accent-red); font-weight: 700; } .ls-prio.p-urgent i { background: #B0402F; }
.ls-idle { display: inline-block; margin-top: 4px; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.ls-idle.sev1 { background: var(--accent-amber-bg); color: #8B6323; } .ls-idle.sev2 { background: #FCE9D9; color: #A5521C; } .ls-idle.sev3 { background: var(--accent-red-bg); color: var(--accent-red); }
.ls-upd { display: block; margin-top: 3px; font-size: 11.5px; color: #8A93A3; }
.ls-recv { min-width: 0; }
.ls-actions-h { width: 1%; } .ls-actions-c { white-space: nowrap; text-align: right; }
.ls-act { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; }
.ls-act:hover { background: var(--accent-blue-bg); color: var(--ink-navy); }

.ls-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--border-soft); background: #FAFBFD; font-size: 13px; color: var(--text-muted); }
.ls-pager strong { color: var(--text-main); }
.ls-pages { display: flex; gap: 4px; align-items: center; }
.ls-pages a, .ls-pages span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 600; font-size: 13px; text-decoration: none; box-sizing: border-box; }
.ls-pages a { color: var(--ink-navy); background: #fff; border: 1px solid #D6DDE8; } .ls-pages a:hover { background: var(--accent-blue-bg); border-color: var(--accent-blue); }
.ls-pages .cur { background: var(--ink-navy); color: #fff; } .ls-pages .dis, .ls-pages .gap { color: #B7BFCC; }
.ls-per label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .ls-per select { padding: 6px 8px; border: 1px solid #CDD5E0; border-radius: 8px; background: #fff; font: 600 13px var(--font-ui); }
.ls-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 56px 20px; color: var(--text-muted); }
.ls-empty i, .ls-empty svg { color: #9AA3B2; } .ls-empty h2 { font: 700 18px var(--font-ui); color: var(--text-main); margin: 6px 0 0; } .ls-empty p { margin: 0 0 10px; max-width: 460px; line-height: 1.6; }

@media (max-width: 1100px) { .ls-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ls-banner { padding: 18px 18px 22px; } .ls-banner h1 { font-size: 23px; } .ls-banner-actions { width: 100%; } .ls-banner-actions .ls-btn { flex: 1; }
  .ls-search-row .ls-btn { flex: 1; } .ls-adv-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-table thead { display: none; } .ls-table, .ls-table tbody, .ls-table tr, .ls-table td { display: block; width: 100%; box-sizing: border-box; }
  .ls-row { padding: 14px 16px; border-bottom: 1px solid #E6EAF0; } .ls-table tbody tr:last-child { border-bottom: 0; }
  .ls-row td:first-child { box-shadow: none; } .ls-row.p-urgent { box-shadow: inset 4px 0 0 #B0402F; } .ls-row.p-high { box-shadow: inset 4px 0 0 #C9922E; }
  .ls-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .ls-table td::before { content: attr(data-label); font: 700 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: #8A93A3; text-align: left; flex-shrink: 0; }
  .ls-table td[data-label="Document"] { display: block; text-align: left; padding-bottom: 8px; } .ls-table td[data-label="Document"]::before { display: none; }
  .ls-actions-c { justify-content: flex-end; } .ls-actions-c::before { display: none; }
  .ls-recv { text-align: right; }
  .ls-pager { flex-direction: column; align-items: stretch; text-align: center; } .ls-pages { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ls-btn, .ls-tab, .ls-row, .ls-act { transition: none; } }
@media print { .ls-filters, .ls-tabs, .ls-banner-actions, .ls-pager, .ls-actions-c, .ls-actions-h, .ls-chips { display: none; } .ls-card { box-shadow: none; } }

/* =====================================================================
   Notifications  (nt-*) and the live bell
   ===================================================================== */
.tone-announce { background: var(--accent-purple-bg); color: var(--accent-purple); }
.gt-bell .badge-count[hidden], #sidebarNotifBadge[hidden], .nt-pill[hidden], .nt-markall[hidden] { display: none !important; }
.gt-bell.ring svg, .gt-bell.ring i { animation: nt-ring .9s ease-in-out 1; transform-origin: 50% 12%; }
@keyframes nt-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* refreshed dropdown */
.notif-dropdown { width: 380px; border-radius: 14px; box-shadow: 0 18px 44px rgba(13,31,60,.28); }
.notif-dropdown-head { gap: 10px; padding: 14px 16px; }
.notif-dropdown-head .nt-markall { margin-left: auto; }
.nt-pill { background: var(--brass); color: #1A1200; font: 800 11px var(--font-ui); border-radius: 999px; padding: 2px 9px; }
.nt-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: 600 12px var(--font-ui); color: var(--ink-navy-2); } .nt-linkbtn:hover { text-decoration: underline; }
.notif-item { position: relative; align-items: flex-start; }
.notif-item .ni-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notif-item .ni-title, .notif-item .ni-message, .notif-item .ni-time { display: block; }
.notif-item .ni-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item .ni-icon.tone-announce { background: var(--accent-purple-bg); color: var(--accent-purple); }
.notif-item .ni-dot, .nt-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-blue); flex-shrink: 0; margin-top: 6px; display: inline-block; }
.notif-item.unread .ni-title { font-weight: 700; }

/* toasts for new notifications */
.nt-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.nt-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; background: #fff; color: var(--text-main); text-decoration: none; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border-soft);
  border-left: 4px solid var(--brass); box-shadow: 0 16px 40px rgba(13,31,60,.28); animation: nt-in .28s cubic-bezier(.2,.8,.2,1); }
.nt-toast:hover { background: #FAFBFD; }
.nt-toast .ni-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.nt-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.nt-toast-body strong { color: var(--text-main); font-size: 13px; } .nt-toast-body span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-toast-body em { font-style: normal; font-weight: 700; color: var(--ink-navy-2); }
.nt-toast-x { background: none; border: 0; font-size: 20px; line-height: 1; color: #8A93A3; cursor: pointer; padding: 0 2px; } .nt-toast-x:hover { color: var(--text-main); }
@keyframes nt-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* the page */
.nt-content { padding-top: 22px; }
.nt-banner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; overflow: hidden;
  background: radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.17) 0, rgba(224,168,60,0) 48%), linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%);
  color: #fff; border-radius: 16px; padding: 22px 30px 26px; margin-bottom: 16px; box-shadow: 0 12px 30px rgba(13,31,60,.20); }
.nt-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.nt-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); } .nt-crumb span { margin: 0 4px; opacity: .6; } .nt-crumb a { color: var(--text-onnavy); text-decoration: none; }
.nt-banner h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 6px; color: #fff; line-height: 1.15; }
.nt-banner p { margin: 0; color: var(--text-onnavy); font-size: 14px; max-width: 560px; line-height: 1.6; } .nt-banner p strong { color: #fff; font-size: 15px; }
.nt-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; } .nt-banner-actions form { margin: 0; }
.nt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 13.5px var(--font-ui); text-decoration: none; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.nt-btn.sm { padding: 7px 12px; font-size: 12.5px; }
.nt-btn.primary { background: var(--brass); color: #1A1200; box-shadow: 0 4px 14px rgba(224,168,60,.35); } .nt-btn.primary:hover { background: #ECB84F; transform: translateY(-1px); } .nt-btn.primary:disabled { opacity: .7; cursor: progress; transform: none; }
.nt-btn.ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .nt-btn.ghost:hover { background: rgba(255,255,255,.16); }
.nt-btn.solid { background: var(--ink-navy); color: #fff; } .nt-btn.solid:hover { background: var(--ink-navy-2); }
.nt-btn.outline { background: #fff; color: var(--ink-navy); border-color: #CDD5E0; } .nt-btn.outline:hover { background: var(--accent-blue-bg); border-color: var(--accent-blue); }
.nt-btn.danger { background: #fff; color: var(--accent-red); border-color: #E7B9B1; } .nt-btn.danger:hover { background: var(--accent-red-bg); }
.nt-btn:focus-visible, .nt-tab:focus-visible, .nt-act:focus-visible, .nt-main:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.nt-link { font: 600 12.5px var(--font-ui); color: var(--ink-navy-2); text-decoration: none; } .nt-link:hover { text-decoration: underline; }
.nt-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 6px; scrollbar-width: thin; }
.nt-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border-soft); color: var(--text-muted); font: 600 13px var(--font-ui); text-decoration: none; white-space: nowrap; }
.nt-tab b { background: #EEF1F5; color: var(--text-main); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nt-tab:hover { background: #F7F9FC; color: var(--text-main); } .nt-tab.on { background: var(--ink-navy); border-color: var(--ink-navy); color: #fff; } .nt-tab.on b { background: rgba(255,255,255,.18); color: #fff; }
.nt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); display: inline-block; }
.nt-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.nt-search-box { position: relative; flex: 1 1 280px; display: block; min-width: 0; }
.nt-search-box > i, .nt-search-box > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8A93A3; pointer-events: none; }
.nt-search-box input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 14px 10px 38px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 14px var(--font-ui); background: #fff; }
.nt-search-box input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.nt-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.nt-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); background: #FAFBFD; min-height: 24px; }
.nt-selall { display: inline-flex; align-items: center; gap: 9px; font: 600 12.5px var(--font-ui); color: var(--text-muted); cursor: pointer; } .nt-selall input, .nt-check input { width: 17px; height: 17px; accent-color: var(--ink-navy); cursor: pointer; }
.nt-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; margin-left: auto; } .nt-bulk[hidden] { display: none; } .nt-bulk strong { font-size: 12.5px; margin-right: 4px; }
.nt-group { margin: 0; padding: 14px 18px 6px; font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: #8A93A3; background: #fff; }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-item { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 0 12px 0 6px; border-bottom: 1px solid #F0F2F6; transition: background .12s; }
.nt-item:hover { background: #F8FAFD; } .nt-item.unread { background: #F3F8FE; box-shadow: inset 3px 0 0 var(--accent-blue); } .nt-item.unread:hover { background: #ECF4FD; } .nt-item.picked { background: #FFF8E6; }
.nt-check { display: grid; place-items: center; width: 34px; align-self: stretch; margin: 0; flex-shrink: 0; }
.nt-main { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 0; padding: 15px 8px 15px 4px; color: inherit; text-decoration: none; }
.nt-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.nt-ico.tone-inprocess, .nt-type.tone-inprocess { background: var(--accent-blue-bg); color: var(--accent-blue); } .nt-ico.tone-completed, .nt-type.tone-completed { background: var(--accent-green-bg); color: var(--accent-green); }
.nt-ico.tone-onhold, .nt-type.tone-onhold { background: var(--accent-red-bg); color: var(--accent-red); } .nt-ico.tone-pending, .nt-type.tone-pending { background: var(--accent-amber-bg); color: #8B6323; }
.nt-ico.tone-announce, .nt-type.tone-announce { background: var(--accent-purple-bg); color: var(--accent-purple); }
.nt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nt-title { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-ui); color: var(--text-main); line-height: 1.4; } .nt-item.unread .nt-title { font-weight: 800; }
.nt-msg { font-size: 13px; color: var(--text-muted); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.nt-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11.5px; color: #8A93A3; }
.nt-type { font: 700 10.5px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.nt-acts { display: flex; gap: 2px; align-items: center; margin: 0; padding-top: 12px; opacity: 0; transition: opacity .12s; }
.nt-item:hover .nt-acts, .nt-item:focus-within .nt-acts { opacity: 1; }
.nt-act { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; color: var(--text-muted); cursor: pointer; } .nt-act:hover { background: var(--accent-blue-bg); color: var(--ink-navy); } .nt-act.danger:hover { background: var(--accent-red-bg); color: var(--accent-red); }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 60px 20px; color: var(--text-muted); }
.nt-empty i, .nt-empty svg { color: #9AA3B2; } .nt-empty h2 { font: 700 18px var(--font-ui); color: var(--text-main); margin: 6px 0 0; } .nt-empty p { margin: 0; max-width: 460px; line-height: 1.6; }
.nt-foot { text-align: center; font-size: 12px; color: #8A93A3; margin: 12px 0 4px; }
.nt-muted { color: var(--text-muted); font-size: 13px; }

/* announcement page */
.nt-announce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nt-form { padding: 22px 24px; } .nt-field { margin-bottom: 18px; } .nt-field label { display: block; font: 700 12.5px var(--font-ui); margin-bottom: 7px; }
.nt-field input, .nt-field select, .nt-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 14px var(--font-ui); background: #fff; min-height: 44px; }
.nt-field textarea { resize: vertical; line-height: 1.55; } .nt-field input:focus, .nt-field select:focus, .nt-field textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.nt-count { text-align: right; font-size: 11.5px; color: #8A93A3; margin-top: 5px; font-variant-numeric: tabular-nums; }
.nt-form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nt-note { font-size: 12px; color: var(--text-muted); }
.nt-alert { background: #FCEFEC; border: 1px solid #F0C4BC; border-left: 4px solid var(--accent-red); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; color: #7A3228; font-size: 13px; } .nt-alert strong { color: #8E2E20; } .nt-alert ul { margin: 4px 0 0; padding-left: 18px; }
.nt-history { padding: 18px 20px; } .nt-history h2 { font: 700 15px var(--font-ui); margin: 0 0 10px; } .nt-history ul { list-style: none; margin: 0; padding: 0; }
.nt-history li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid #F0F2F6; font-size: 12.5px; line-height: 1.5; } .nt-history li:last-child { border-bottom: 0; } .nt-history time { color: #8A93A3; font-size: 11.5px; }

@media (max-width: 900px) { .nt-announce { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .nt-banner { padding: 18px 18px 22px; } .nt-banner h1 { font-size: 23px; } .nt-banner-actions { width: 100%; } .nt-banner-actions > *, .nt-banner-actions .nt-btn { flex: 1; } .nt-banner-actions form { display: flex; }
  .nt-acts { opacity: 1; } .nt-item { flex-wrap: wrap; } .nt-main { padding-right: 0; } .nt-acts { width: 100%; justify-content: flex-end; padding: 0 0 8px; border-top: 0; }
  .notif-dropdown { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; }
  .nt-search .nt-btn.solid { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .gt-bell.ring svg, .gt-bell.ring i, .nt-toast { animation: none; } .nt-btn, .nt-item, .nt-acts { transition: none; } }
@media print { .nt-banner-actions, .nt-tabs, .nt-search, .nt-acts, .nt-check, .nt-toolbar, .ls-pager { display: none; } }

/* =====================================================================
   Avatars (.av) and My Profile (pf-*) with the photo cropper
   ===================================================================== */
.av { width: var(--s, 34px); height: var(--s, 34px); border-radius: 50%; background: var(--c, #2F6FB0); color: #fff; display: inline-grid; place-items: center; overflow: hidden; flex-shrink: 0; vertical-align: middle; line-height: 1; }
.av b { font: 700 calc(var(--s, 34px) * .38) var(--font-display); letter-spacing: .02em; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-user-trigger .av { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.pf-namecell { display: inline-flex; align-items: center; gap: 10px; }
body.pf-lock { overflow: hidden; }

.pf-content { padding-top: 22px; }
.pf-hero { position: relative; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; overflow: hidden;
  background: radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.18) 0, rgba(224,168,60,0) 48%), radial-gradient(70% 120% at 0% 100%, rgba(47,111,176,.28) 0, rgba(47,111,176,0) 60%), linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%);
  color: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(13,31,60,.20); }
.pf-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.pf-avatar-wrap { position: relative; flex-shrink: 0; }
.pf-avatar-wrap .pf-avatar { box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 10px 28px rgba(0,0,0,.35); }
.pf-cam { position: absolute; right: -2px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid #16345C; background: var(--brass); color: #1A1200; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.pf-cam:hover { transform: scale(1.08); } .pf-cam:focus-visible, .pf-btn:focus-visible, .pf-x:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 2px; }
.pf-id { min-width: 0; flex: 1 1 280px; }
.pf-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); } .pf-crumb span { margin: 0 4px; opacity: .6; }
.pf-hero h1 { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 4px; color: #fff; line-height: 1.15; overflow-wrap: anywhere; }
.pf-sub { color: var(--text-onnavy); font-size: 14px; }
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-ui); letter-spacing: .02em; color: var(--text-onnavy); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 4px 11px; border-radius: 999px; }
.pf-pill.ok { background: rgba(47,125,92,.35); border-color: rgba(120,220,170,.4); color: #D7F5E6; } .pf-pill.bad { background: rgba(176,64,47,.4); color: #FFE0DB; }
.pf-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .pf-hero-actions form { margin: 0; } .pf-hero-actions form[hidden] { display: none; }
.pf-note { flex-basis: 100%; display: flex; gap: 8px; align-items: center; background: rgba(224,168,60,.16); border: 1px solid rgba(224,168,60,.4); color: #FFEBC2; padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.pf-dropnote { display: none; position: absolute; inset: 0; place-items: center; background: rgba(13,31,60,.88); border: 3px dashed var(--brass); border-radius: 16px; font: 700 18px var(--font-ui); color: #fff; z-index: 3; }
.pf-hero.dragging .pf-dropnote { display: grid; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 13.5px var(--font-ui); text-decoration: none; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.pf-btn.sm { padding: 7px 12px; font-size: 12.5px; }
.pf-btn.primary { background: var(--brass); color: #1A1200; box-shadow: 0 4px 14px rgba(224,168,60,.35); } .pf-btn.primary:hover { background: #ECB84F; transform: translateY(-1px); } .pf-btn.primary:disabled { opacity: .7; cursor: progress; transform: none; }
.pf-btn.ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .pf-btn.ghost:hover { background: rgba(255,255,255,.16); }
.pf-btn.ghost.dark { color: var(--ink-navy); background: transparent; border-color: transparent; } .pf-btn.ghost.dark:hover { background: var(--accent-blue-bg); }
.pf-btn.outline { background: #fff; color: var(--ink-navy); border-color: #CDD5E0; } .pf-btn.outline:hover { background: var(--accent-blue-bg); border-color: var(--accent-blue); }

.pf-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.pf-card-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; } .pf-card-h h2 { font: 700 15.5px var(--font-ui); margin: 1px 0 0; } .pf-card-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pf-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-blue-bg); color: var(--accent-blue); }
.pf-ico.tone-green { background: var(--accent-green-bg); color: var(--accent-green); } .pf-ico.tone-purple { background: var(--accent-purple-bg); color: var(--accent-purple); } .pf-ico.tone-blue { background: var(--accent-blue-bg); color: var(--accent-blue); } .pf-ico.tone-amber { background: var(--accent-amber-bg); color: #8B6323; }
.pf-field { margin-bottom: 16px; } .pf-field[hidden] { display: none; } .pf-field label { display: block; font: 700 12.5px var(--font-ui); margin-bottom: 7px; }
.pf-field input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 11px 13px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 14px var(--font-ui); background: #fff; }
.pf-field input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.pf-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; display: flex; gap: 6px; align-items: flex-start; }
.pf-pw { background: #FFF9EC; border: 1px solid #EBD39B; border-radius: 12px; padding: 14px 16px; }
.pf-actions { margin-top: 4px; }
.pf-alert { background: #FCEFEC; border: 1px solid #F0C4BC; border-left: 4px solid var(--accent-red); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; color: #7A3228; font-size: 13px; } .pf-alert strong { color: #8E2E20; } .pf-alert ul { margin: 4px 0 0; padding-left: 18px; }
.pf-list { list-style: none; margin: 0; padding: 0; } .pf-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F0F2F6; font-size: 13px; flex-wrap: wrap; }
.pf-list li:last-child { border-bottom: 0; } .pf-k { font-weight: 700; color: var(--text-main); min-width: 120px; } .pf-v { color: var(--text-muted); flex: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.pf-tag { font: 800 10.5px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: #EEF1F5; color: #566074; } .pf-tag.ok { background: var(--accent-green-bg); color: #1F6B4A; } .pf-tag.warn { background: var(--accent-amber-bg); color: #8B6323; }
.pf-sub-h { font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: #8A93A3; margin: 18px 0 6px; }
.pf-muted { color: #8A93A3; font-size: 12px; }
.pf-feed { list-style: none; margin: 0; padding: 0; } .pf-feed li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; justify-content: space-between; } .pf-feed li > span:nth-child(2) { flex: 1; min-width: 0; }
.pf-feed.big li { border-bottom: 1px solid #F0F2F6; padding: 10px 0; } .pf-feed.big li:last-child { border-bottom: 0; } .pf-detail { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; background: #C3CAD6; margin-top: 6px; flex-shrink: 0; } .pf-dot.now { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(47,125,92,.2); }
.pf-dl { margin: 0; } .pf-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #F0F2F6; font-size: 13px; } .pf-dl > div:last-child { border-bottom: 0; } .pf-dl dt { color: var(--text-muted); } .pf-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pf-stats > * { background: #F7F9FC; border-radius: 12px; padding: 12px 10px; text-align: center; text-decoration: none; color: inherit; }
.pf-stats b { display: block; font: 800 22px var(--font-ui); color: var(--ink-navy); font-variant-numeric: tabular-nums; } .pf-stats span { font-size: 11px; color: var(--text-muted); line-height: 1.3; display: block; margin-top: 2px; } a.pf-stats-link:hover, .pf-stats a:hover { background: var(--accent-blue-bg); }
.pf-tips h2 { font: 700 14px var(--font-ui); margin: 0 0 8px; } .pf-tips ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

/* the photo editor */
.pf-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; } .pf-modal[hidden] { display: none; }
.pf-modal-bg { position: absolute; inset: 0; background: rgba(8,16,32,.68); backdrop-filter: blur(2px); }
.pf-dialog { position: relative; background: #fff; border-radius: 16px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.pf-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); } .pf-dialog h2 { font: 700 17px var(--font-ui); margin: 0; }
.pf-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6B7280; width: 36px; height: 36px; border-radius: 50%; } .pf-x:hover { background: #F0F2F6; color: var(--text-main); }
.pf-dialog-body { display: flex; gap: 26px; padding: 22px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.pf-stage-wrap { flex: 0 0 auto; }
.pf-stage { position: relative; touch-action: none; cursor: grab; border-radius: 12px; overflow: hidden; background: #1A1F2B; outline: none; user-select: none; } .pf-stage:active { cursor: grabbing; }
.pf-stage:focus-visible { box-shadow: 0 0 0 3px rgba(47,111,176,.7); } .pf-stage canvas { display: block; }
.pf-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side at center, transparent calc(100% - 1px), rgba(8,16,32,.62) 100%); }
.pf-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.95); }
.pf-hint-line { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); text-align: center; max-width: 320px; } .pf-hint-line.warn { color: #8B6323; font-weight: 600; }
.pf-controls { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 18px; }
.pf-preview-box { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-muted); } .pf-preview-box canvas { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 2px #E2E7EF; background: #fff; }
.pf-zoom { display: flex; flex-direction: column; gap: 8px; font: 700 12.5px var(--font-ui); } .pf-zoom input { width: 100%; accent-color: var(--ink-navy); }
.pf-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-error { margin: 0 22px 14px; padding: 10px 14px; background: #FCEFEC; border: 1px solid #F0C4BC; border-left: 4px solid var(--accent-red); border-radius: 10px; color: #7A3228; font-size: 13px; } .pf-error[hidden] { display: none; }
.pf-dialog > footer { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--border-soft); background: #FAFBFD; flex-wrap: wrap; } .pf-dialog .grow { flex: 1; }

@media (max-width: 1000px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .pf-hero { padding: 22px 20px; gap: 18px; justify-content: center; text-align: center; } .pf-id { flex-basis: 100%; } .pf-pills { justify-content: center; } .pf-hero h1 { font-size: 24px; } .pf-hero-actions { justify-content: center; width: 100%; }
  .pf-card { padding: 16px; } .pf-v { justify-content: flex-start; text-align: left; } .pf-list li { align-items: flex-start; flex-direction: column; gap: 6px; }
  .pf-modal { padding: 0; align-items: end; } .pf-dialog { border-radius: 16px 16px 0 0; max-height: 96vh; width: 100%; } .pf-dialog-body { padding: 16px; gap: 16px; } .pf-dialog > footer { padding: 12px 16px; } .pf-dialog > footer .pf-btn { flex: 1; } .pf-dialog > footer .ghost { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .pf-cam, .pf-btn { transition: none; } }

/* =====================================================================
   Change password  (pw-*)
   ===================================================================== */
.pw-content { padding-top: 22px; }
.pw-banner { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; overflow: hidden; margin-bottom: 16px; padding: 24px 30px 28px;
  background: radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.18) 0, rgba(224,168,60,0) 48%), linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%); color: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(13,31,60,.20); }
.pw-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.pw-banner-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--brass); flex-shrink: 0; }
.pw-banner-text { flex: 1 1 280px; min-width: 0; }
.pw-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); } .pw-crumb span { margin: 0 4px; opacity: .6; }
.pw-banner h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 6px; color: #fff; line-height: 1.15; }
.pw-banner p { margin: 0; color: var(--text-onnavy); font-size: 14px; line-height: 1.6; }
.pw-last { display: flex; flex-direction: column; gap: 2px; text-align: right; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 16px; }
.pw-last span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-onnavy-dim); } .pw-last strong { font-size: 15px; } .pw-last em { font-style: normal; font-size: 12px; color: var(--text-onnavy); }
.pw-forced { display: flex; gap: 12px; align-items: flex-start; background: #FFF6E0; border: 1px solid #EBD39B; border-left: 4px solid var(--brass); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; color: #6B4E12; font-size: 13.5px; line-height: 1.55; } .pw-forced svg, .pw-forced i { color: #B8862E; flex-shrink: 0; margin-top: 2px; }
.pw-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pw-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 26px; box-shadow: var(--shadow-card); }
.pw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pw-field { margin-bottom: 22px; } .pw-field > label { display: block; font: 700 13px var(--font-ui); margin-bottom: 7px; }
.pw-input { position: relative; } .pw-input input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 70px 11px 14px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 15px var(--font-ui); background: #fff; }
.pw-input input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 9px 12px; min-height: 36px; font: 700 12px var(--font-ui); color: var(--ink-navy-2); cursor: pointer; border-radius: 8px; } .pw-eye:hover { background: var(--accent-blue-bg); } .pw-eye:focus-visible { outline: 2px solid var(--accent-blue); }
.pw-caps { margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-ui); color: #8B6323; background: var(--accent-amber-bg); border-radius: 999px; padding: 3px 11px; } .pw-caps[hidden] { display: none; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; } .pw-meter i { height: 6px; border-radius: 999px; background: #E6EAF0; transition: background .2s; }
.pw-meter i.s0 { background: #B0402F; } .pw-meter i.s1 { background: #D9822B; } .pw-meter i.s2 { background: #C9A227; } .pw-meter i.s3 { background: #4FA06B; } .pw-meter i.s4 { background: #2F7D5C; }
.pw-meter-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; font-size: 12.5px; }
#pwLabel { font-weight: 700; color: var(--text-muted); } #pwLabel.sc0 { color: #B0402F; } #pwLabel.sc1 { color: #B8651F; } #pwLabel.sc2 { color: #8B6323; } #pwLabel.sc3 { color: #2F7D5C; } #pwLabel.sc4 { color: #1F6B4A; }
.pw-suggest { border: 0; background: none; cursor: pointer; font: 700 12.5px var(--font-ui); color: var(--ink-navy-2); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; } .pw-suggest:hover { background: var(--accent-blue-bg); }
.pw-suggestion { margin-top: 12px; background: #F3F8FE; border: 1px solid #C9DDF3; border-radius: 12px; padding: 14px 16px; } .pw-suggestion[hidden] { display: none; }
.pw-suggestion-h { font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: #4A6E94; margin-bottom: 6px; }
.pw-suggestion code { display: block; font: 700 17px 'SFMono-Regular', Consolas, monospace; color: var(--ink-navy); word-break: break-all; letter-spacing: .01em; user-select: all; }
.pw-suggestion-b { display: flex; gap: 8px; margin: 10px 0 8px; } .pw-suggestion p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.pw-rules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; } .pw-rules li { font-size: 13px; color: var(--text-muted); display: flex; gap: 9px; align-items: center; }
.pw-rules li::before { content: "○"; width: 18px; text-align: center; color: #B7BFCC; font-weight: 800; } .pw-rules li.ok { color: #1F6B4A; } .pw-rules li.ok::before { content: "✓"; color: #2F7D5C; } .pw-rules li.bad { color: #B0402F; font-weight: 600; } .pw-rules li.bad::before { content: "✗"; color: #B0402F; }
.pw-match { margin-top: 7px; font: 700 12.5px var(--font-ui); min-height: 16px; } .pw-match.ok { color: #1F6B4A; } .pw-match.bad { color: #B0402F; }
.pw-submit { width: 100%; padding: 14px 16px; font-size: 14.5px; } .pw-cancel { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); text-decoration: none; } .pw-cancel:hover { text-decoration: underline; color: var(--text-main); }
.pw-alert { background: #FCEFEC; border: 1px solid #F0C4BC; border-left: 4px solid var(--accent-red); border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; color: #7A3228; font-size: 13.5px; } .pw-alert strong { color: #8E2E20; display: block; margin-bottom: 2px; } .pw-alert ul { margin: 2px 0 0; padding-left: 18px; }
.pw-info { padding: 18px 20px; } .pw-info h2 { font: 700 14.5px var(--font-ui); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; } .pw-info h2 svg, .pw-info h2 i { color: var(--accent-blue); }
.pw-info ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.65; } .pw-info li { margin-bottom: 6px; } .pw-info strong { color: var(--text-main); }
.pw-done { max-width: 640px; margin: 8px auto; text-align: center; padding: 36px 32px; } .pw-done-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-green-bg); color: var(--accent-green); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: 0 0 0 8px rgba(47,125,92,.08); }
.pw-done h2 { font: 700 22px var(--font-ui); margin: 0 0 18px; } .pw-done-list { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; display: grid; gap: 14px; font-size: 14px; line-height: 1.55; } .pw-done-list li { display: flex; gap: 12px; align-items: flex-start; } .pw-done-list svg, .pw-done-list i { color: var(--accent-green); flex-shrink: 0; margin-top: 2px; }
.pw-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1000px) { .pw-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .pw-banner { padding: 20px; gap: 14px; } .pw-banner h1 { font-size: 23px; } .pw-last { text-align: left; width: 100%; } .pw-card { padding: 18px 16px; } .pw-done { padding: 26px 18px; } .pw-input input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pw-meter i { transition: none; } }

/* =====================================================================
   Reports  (rp-*) — shared by all seven reports, with a real print layout
   ===================================================================== */
.rp-content { padding-top: 22px; }
.rp-banner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; overflow: hidden; margin-bottom: 14px; padding: 22px 30px 26px;
  background: radial-gradient(100% 160% at 100% 0%, rgba(224,168,60,.17) 0, rgba(224,168,60,0) 48%), linear-gradient(118deg, #0D1F3C 0%, #16345C 58%, #21467A 100%); color: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(13,31,60,.20); }
.rp-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brass), rgba(224,168,60,0) 70%); }
.rp-crumb { font-size: 12px; letter-spacing: .03em; color: var(--text-onnavy-dim); } .rp-crumb span { margin: 0 4px; opacity: .6; }
.rp-banner h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 6px; color: #fff; line-height: 1.15; }
.rp-banner p { margin: 0; color: var(--text-onnavy); font-size: 14px; line-height: 1.6; max-width: 720px; } .rp-banner p strong { color: #fff; }
.rp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 13.5px var(--font-ui); text-decoration: none; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.rp-btn.primary { background: var(--brass); color: #1A1200; box-shadow: 0 4px 14px rgba(224,168,60,.35); } .rp-btn.primary:hover { background: #ECB84F; transform: translateY(-1px); }
.rp-btn.ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .rp-btn.ghost:hover { background: rgba(255,255,255,.16); }
.rp-btn.solid { background: var(--ink-navy); color: #fff; } .rp-btn.solid:hover { background: var(--ink-navy-2); }
.rp-btn:focus-visible, .rp-tab:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.rp-link { font: 600 12.5px var(--font-ui); color: var(--ink-navy-2); text-decoration: none; align-self: center; } .rp-link:hover { text-decoration: underline; }
.rp-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 4px; scrollbar-width: thin; }
.rp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border-soft); color: var(--text-muted); font: 600 13px var(--font-ui); text-decoration: none; white-space: nowrap; }
.rp-tab:hover { background: #F7F9FC; color: var(--text-main); } .rp-tab.on { background: var(--ink-navy); border-color: var(--ink-navy); color: #fff; }
.rp-bar { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card); margin-bottom: 14px; }
.rp-f { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--font-ui); color: var(--text-main); min-width: 0; }
.rp-f select, .rp-f input { min-height: 40px; padding: 8px 11px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 13.5px var(--font-ui); background: #fff; min-width: 130px; box-sizing: border-box; }
.rp-f select:focus, .rp-f input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,176,.18); }
.rp-note { display: flex; gap: 8px; align-items: center; background: var(--accent-blue-bg); color: #24598F; border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rp-kpis .dx-kpi { box-shadow: var(--shadow-card); }
.rp-grid { display: grid; gap: 16px; margin-bottom: 16px; } .rp-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rp-grid.wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .rp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); min-width: 0; margin-bottom: 16px; } .rp-grid > .rp-card { margin-bottom: 0; }
.rp-card.flush { padding: 0; overflow: hidden; } .rp-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .rp-card.flush .rp-card-h { padding: 18px 22px 0; }
.rp-card-h h2 { font: 700 15px var(--font-ui); margin: 0; } .rp-card-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.rp-table-wrap { overflow-x: auto; } .rp-table { width: 100%; border-collapse: collapse; }
.rp-table th { text-align: left; padding: 11px 14px; font: 700 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #8A93A3; background: #FAFBFD; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.rp-table th.r, .rp-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table td { padding: 11px 14px; border-bottom: 1px solid #F0F2F6; font-size: 13px; vertical-align: middle; } .rp-table tbody tr:last-child td { border-bottom: 0; } .rp-table tbody tr:hover td { background: #F8FAFD; }
.rp-table tfoot td { font-weight: 800; background: #FAFBFD; border-top: 2px solid var(--border-soft); }
.rp-table a { color: var(--ink-navy); text-decoration: none; font-weight: 600; } .rp-table a:hover { text-decoration: underline; }
.rp-sub { display: block; font-size: 11.5px; color: #8A93A3; margin-top: 2px; font-weight: 400; } .rp-mono { font: 700 11.5px 'SFMono-Regular', Consolas, monospace; color: var(--ink-navy); }
.rp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 20px; color: var(--text-muted); } .rp-empty h2 { font: 700 17px var(--font-ui); color: var(--text-main); margin: 6px 0 0; } .rp-empty p { margin: 0; max-width: 440px; line-height: 1.6; }
.rp-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #EEF1F5; } .rp-stack i { display: block; height: 100%; }
.rp-method { font-size: 12px; color: var(--text-muted); background: #F7F9FC; border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 16px; margin: 4px 0 8px; line-height: 1.6; } .rp-method strong { color: var(--text-main); } .rp-method ul { margin: 4px 0 0; padding-left: 18px; }
.rp-ring { display: flex; align-items: center; gap: 14px; } .rp-spark { height: 36px; }
.rp-print-head, .rp-sign { display: none; }
.rp-bars-split { display: grid; gap: 0; }
@media (max-width: 1000px) { .rp-grid.two, .rp-grid.wide, .rp-grid.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .rp-banner { padding: 18px; } .rp-banner h1 { font-size: 23px; } .rp-actions { width: 100%; } .rp-actions .rp-btn { flex: 1; } .rp-f { flex: 1 1 140px; } .rp-f select, .rp-f input { width: 100%; } .rp-card { padding: 16px; } .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rp-kpis { grid-template-columns: minmax(0, 1fr); } }
@media print {
  @page { size: A4; margin: 14mm; }
  body, .app-shell, .main, .content, .rp-content { background: #fff !important; }
  .sidebar, .global-topbar, .rp-banner, .rp-tabs, .rp-bar, .rp-note, .rp-actions, .ls-pager, .nt-toasts, .no-print, .rp-link, #pfModal { display: none !important; }
  .main { margin-left: 0 !important; transition: none !important; } .content, .rp-content { padding: 0 !important; }
  .rp-print-head { display: block; text-align: center; border-bottom: 2px solid #1A3A63; padding-bottom: 10px; margin-bottom: 16px; }
  .rp-ph-small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #8B6323; font-weight: 700; } .rp-ph-lgu { font: 700 17px var(--font-display); color: #1A3A63; } .rp-ph-title { font-size: 13px; font-weight: 700; margin-top: 6px; } .rp-ph-meta { font-size: 11px; color: #555; margin-top: 2px; }
  .rp-card, .dx-kpi, .dx-card { box-shadow: none !important; break-inside: avoid; border-color: #CBD2DC; } .rp-table th { background: #F2F4F8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-kpis { grid-template-columns: repeat(3, 1fr); } .rp-grid.two, .rp-grid.wide { grid-template-columns: 1fr 1fr; } .dx-bar-fill { animation: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-table-wrap { overflow: visible; } .rp-table tr { break-inside: avoid; } a { color: inherit !important; text-decoration: none !important; }
  .rp-sign { display: flex; justify-content: space-between; gap: 40px; margin-top: 56px; } .rp-sign div { flex: 1; border-top: 1px solid #333; padding-top: 6px; font-size: 11px; text-align: center; }
}
.rp-check { justify-content: flex-end; } .rp-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: 13px; white-space: nowrap; } .rp-chk input { min-width: 0 !important; min-height: 0 !important; width: 17px; height: 17px; accent-color: var(--ink-navy); }
.dx-bar-label a { color: var(--text-main); text-decoration: none; } .dx-bar-label a:hover { color: var(--ink-navy); text-decoration: underline; }

.rp-bars .dx-bar-row, .rp-bars .dx-bar-row.wide { grid-template-columns: minmax(110px, 230px) minmax(0, 1fr) auto; } .rp-bars .dx-bar-val { white-space: nowrap; min-width: 44px; }
.rp-table .dx-age, .rp-kpis .dx-delta { white-space: nowrap; }
.rp-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1280px) { .rp-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .rp-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rp-kpis.six { grid-template-columns: minmax(0, 1fr); } }
@media print { .rp-kpis.six { grid-template-columns: repeat(3, 1fr); } }
.rp-mono, .rp-table td.nw { white-space: nowrap; }
.rp-bars .dx-bar-row, .rp-bars .dx-bar-row.wide { grid-template-columns: minmax(110px, 330px) minmax(0, 1fr) auto; }

/* =====================================================================
   Administration  (ad-*)
   ===================================================================== */
.ad-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ad-check { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; }
.ad-check > div { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; } .ad-check strong { display: block; font-size: 13.5px; } .ad-check span { display: block; color: var(--text-muted); } .ad-check em { display: block; font-style: normal; font-weight: 600; margin-top: 3px; }
.ad-ck-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.ad-check.ok .ad-ck-ico { background: var(--accent-green-bg); color: var(--accent-green); } .ad-check.warn { background: #FFF9EC; border-color: #F0E0B8; } .ad-check.warn .ad-ck-ico { background: var(--accent-amber-bg); color: #8B6323; } .ad-check.warn em { color: #8B6323; }
.ad-check.bad { background: #FCEFEC; border-color: #F0C4BC; } .ad-check.bad .ad-ck-ico { background: var(--accent-red-bg); color: var(--accent-red); } .ad-check.bad em { color: #8E2E20; }
.ad-check .rp-btn.sm { padding: 7px 14px; font-size: 12.5px; align-self: center; }
.ad-links { display: grid; gap: 4px; } .ad-links a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-main); font: 600 13.5px var(--font-ui); } .ad-links a:hover { background: var(--accent-blue-bg); color: var(--ink-navy); }
.rp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rp-col > .rp-card { margin-bottom: 0; }
.rp-btn.sm { padding: 7px 14px; font-size: 12.5px; }

.ad-person { display: flex; align-items: center; gap: 12px; } .ad-person a { font-weight: 700; color: var(--ink-navy); text-decoration: none; } .ad-person a:hover { text-decoration: underline; }
.ad-chips { display: flex; gap: 6px; flex-wrap: wrap; } .ad-chip { display: inline-block; font: 700 10.5px var(--font-ui); letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: #EEF1F5; color: #566074; white-space: nowrap; }
.ad-chip.ok { background: var(--accent-green-bg); color: #1F6B4A; } .ad-chip.warn { background: var(--accent-amber-bg); color: #8B6323; } .ad-chip.bad { background: var(--accent-red-bg); color: var(--accent-red); }
.ad-acts { display: inline-flex; gap: 6px; align-items: center; position: relative; } .ad-more { position: relative; } .ad-more summary { list-style: none; cursor: pointer; } .ad-more summary::-webkit-details-marker { display: none; }
.ad-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 14px 34px rgba(13,31,60,.18); padding: 6px; display: grid; gap: 2px; text-align: left; }
.ad-menu form { margin: 0; } .ad-menu button { width: 100%; display: flex; gap: 9px; align-items: center; border: 0; background: none; padding: 9px 11px; border-radius: 8px; font: 600 13px var(--font-ui); cursor: pointer; color: var(--text-main); text-align: left; } .ad-menu button:hover { background: var(--accent-blue-bg); } .ad-menu button.danger { color: var(--accent-red); } .ad-menu button.danger:hover { background: var(--accent-red-bg); }
.ad-reveal { background: #FFF9EC; border: 1px solid #EBD39B; border-left: 4px solid var(--brass); border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; }
.ad-reveal-h { display: flex; gap: 12px; align-items: flex-start; color: #6B4E12; } .ad-reveal-h strong { display: block; font-size: 15px; } .ad-reveal-h span { font-size: 13px; line-height: 1.5; }
.ad-reveal-b { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; } .ad-reveal-b code { font: 700 16px 'SFMono-Regular', Consolas, monospace; background: #fff; border: 1px solid #EBD39B; border-radius: 8px; padding: 5px 10px; user-select: all; }
.ad-dialog { border: 0; border-radius: 16px; padding: 0; width: min(620px, calc(100% - 24px)); box-shadow: 0 30px 80px rgba(0,0,0,.45); } .ad-dialog::backdrop { background: rgba(8,16,32,.68); backdrop-filter: blur(2px); }
.ad-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); } .ad-dialog h2 { font: 700 17px var(--font-ui); margin: 0; }
.ad-dialog-body { padding: 20px 22px; display: grid; gap: 16px; max-height: 72vh; overflow: auto; } .ad-dialog footer { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border-soft); background: #FAFBFD; border-radius: 0 0 16px 16px; } .ad-dialog .grow { flex: 1; }
.ad-dialog .rp-f input, .ad-dialog .rp-f select { width: 100%; } .ad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .ad-two { grid-template-columns: 1fr; } }
.ad-hint { font: 400 12px var(--font-ui); color: var(--text-muted); } .ad-hint.bad { color: var(--accent-red); font-weight: 600; } .ad-req { color: var(--accent-red); font-size: 11px; margin-left: 4px; }
.ad-pw { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 16px 14px; display: grid; gap: 10px; } .ad-pw legend { font: 700 12px var(--font-ui); padding: 0 6px; } .ad-radio { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; } .ad-radio input { margin-top: 3px; accent-color: var(--ink-navy); }
.ad-pw input[type=text] { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border: 1px solid #CDD5E0; border-radius: 10px; font: 400 14px var(--font-ui); }
.ad-ev { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; } .ad-ev svg, .ad-ev i { color: var(--accent-blue); } .ad-ev.onhold svg, .ad-ev.onhold i { color: var(--accent-red); } .ad-ev.completed svg, .ad-ev.completed i { color: var(--accent-green); } .ad-ev.pending svg, .ad-ev.pending i { color: #C9922E; }
@media print { .rp-tabs, .rp-bar { display: none !important; } }

.rg-row[hidden] { display: none; }
.form-row[hidden] { display: none; }
.sidebar-switch { margin: 0; } .sidebar-switch button { display: flex; width: 100%; align-items: center; gap: 12px; background: none; border: 0; color: inherit; font: inherit; padding: 10px 18px; cursor: pointer; text-align: left; } .sidebar-switch button:hover { background: rgba(255,255,255,.08); }
.ad-chip.exec { background: #E9E4F7; color: #4B3A8C; }

.gt-scan { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; padding: 8px 13px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .gt-scan:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Staff session timeout warning */
.st-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(7,20,42,.72); backdrop-filter: blur(3px); padding: 16px; } .st-modal[hidden] { display: none; }
.st-box { width: min(440px, 100%); background: #fff; border-radius: 20px; padding: 30px 30px 26px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); border-top: 5px solid var(--brass, #E0A83C); }
.st-ring { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-content: center; background: #FFF4DC; border: 6px solid var(--brass, #E0A83C); } .st-ring b { font: 700 36px/1 "Source Serif 4", Georgia, serif; color: #0B1B33; } .st-ring span { font-size: 11px; color: #5E6E86; }
.st-box h2 { margin: 0 0 8px; font: 700 22px "Source Serif 4", Georgia, serif; color: #0B1B33; } .st-box p { margin: 0 0 20px; color: #5E6E86; font-size: 14.5px; line-height: 1.6; }
.st-btns { display: grid; gap: 10px; } .st-stay { border: 0; border-radius: 12px; background: #12315C; color: #fff; padding: 14px; font: 700 16px Inter, sans-serif; cursor: pointer; } .st-stay:hover { background: #1F4E8C; } .st-stay:disabled { opacity: .6; } .st-out { border: 1px solid #C9D3E2; border-radius: 12px; background: #fff; color: #12315C; padding: 11px; font: 700 14px Inter, sans-serif; cursor: pointer; } .st-modal button:focus-visible { outline: 3px solid #F2B84B; outline-offset: 2px; }

/* Assignment and comments on a document */
.asn-who { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .asn-av, .cm-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #12315C; color: #fff; display: grid; place-items: center; font: 700 15px Inter, sans-serif; } .asn-who b { display: block; } .asn-who small { display: block; color: #5E6E86; font-size: 12px; margin-top: 2px; } .asn-note { font-style: italic; }
.asn-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; } .asn-form select, .asn-form input { width: 100%; }
.cm-note { font-size: 12.5px; margin: 0 0 12px; } .cm-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; } .cm-list li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; } .cm-av { background: #6F8DB5; }
.cm-b { background: #F4F7FB; border-radius: 12px; padding: 10px 14px; min-width: 0; } .cm-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .cm-h span { color: #5E6E86; font-size: 12px; } .cm-t { margin-top: 4px; line-height: 1.55; overflow-wrap: anywhere; font-size: 14px; }
.cm-mention { background: #FFF1CC; color: #6B4A00; border-radius: 4px; padding: 0 3px; font-weight: 600; } .cm-acts { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; font-size: 12.5px; } .cm-acts summary { cursor: pointer; color: #1F4E8C; font-weight: 600; } .cm-acts details form { display: grid; gap: 6px; margin-top: 6px; min-width: min(360px, 70vw); } .cm-acts textarea { width: 100%; } .cm-del { border: 0; background: none; color: #9B2C2C; font: 600 12.5px Inter, sans-serif; cursor: pointer; padding: 0; }
.cm-form textarea { width: 100%; resize: vertical; min-height: 78px; } .cm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.ls-asg { display: inline-flex; align-items: center; gap: 4px; background: #E1ECFB; color: #1B467F; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; }

/* My Assignments */
.ma-content { max-width: 1000px; } .ma-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, #0B1B33 0%, #12315C 60%, #1B4A85 100%); color: #fff; border-radius: 18px; padding: 24px 30px; margin-bottom: 18px; border-bottom: 3px solid var(--brass, #E0A83C); }
.ma-eyebrow { font: 800 11px Inter, sans-serif; letter-spacing: .14em; color: #9FB6D6; } .ma-banner h1 { font: 700 30px/1.15 "Source Serif 4", Georgia, serif; margin: 4px 0 8px; color: #fff; } .ma-banner p { margin: 0; color: rgba(255,255,255,.82); max-width: 56ch; line-height: 1.55; font-size: 14.5px; }
.ma-stats { display: flex; gap: 10px; } .ma-stats > div { background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 18px; text-align: center; min-width: 92px; } .ma-stats b { display: block; font: 700 30px/1 "Source Serif 4", Georgia, serif; } .ma-stats span { font-size: 11.5px; opacity: .8; } .ma-stats .bad b { color: #FCA5A5; } .ma-stats .warn b { color: #F8D27F; }
.ma-group { margin-bottom: 20px; } .ma-group h2 { font: 800 12px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; color: #12315C; display: flex; gap: 10px; align-items: center; } .ma-group h2 em { font-style: normal; background: #E3EAF4; border-radius: 999px; padding: 2px 10px; letter-spacing: 0; } .ma-group.bad h2 { color: #9B2C2C; } .ma-group.warn h2 { color: #8B6323; }
.ma-card { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(11,27,51,.09); padding: 16px 20px; margin-bottom: 10px; border-left: 5px solid #1F9D6B; } .ma-group.bad .ma-card { border-left-color: #D64545; } .ma-group.warn .ma-card { border-left-color: #E0A83C; }
.ma-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ma-trk { font: 700 15px Inter, sans-serif; color: #0B1B33; text-decoration: none; } .ma-trk:hover { text-decoration: underline; } .ma-chip { font: 800 11px Inter, sans-serif; padding: 3px 10px; border-radius: 999px; background: #E3EAF4; color: #12315C; } .ma-chip.st-pending, .ma-chip.wait { background: #FBF0D6; color: #8B6323; } .ma-chip.st-on_hold, .ma-chip.pr-urgent { background: #FADADA; color: #9B2C2C; } .ma-chip.pr-high { background: #FDE9D2; color: #8A4B10; }
.ma-subj { margin: 6px 0 10px; font-size: 14.5px; } .ma-bar { height: 7px; border-radius: 999px; background: #E3EAF4; overflow: hidden; } .ma-bar i { display: block; height: 100%; border-radius: 999px; background: #1F9D6B; } .ma-group.warn .ma-bar i { background: #E0A83C; } .ma-group.bad .ma-bar i { background: #D64545; }
.ma-meta { margin: 8px 0 0; color: #5E6E86; font-size: 12.5px; line-height: 1.5; } .ma-meta b.bad { color: #9B2C2C; } .ma-acts { display: flex; gap: 8px; margin-top: 12px; } .ma-empty { text-align: center; padding: 40px 24px; } .ma-empty-i { width: 64px; height: 64px; border-radius: 50%; background: #DDF4EA; color: #14694A; display: grid; place-items: center; font-size: 30px; margin: 0 auto 12px; } .ma-empty h2 { margin: 0 0 6px; font: 700 20px "Source Serif 4", Georgia, serif; }
@media (max-width: 700px) { .ma-banner { padding: 20px 18px; } .ma-banner h1 { font-size: 24px; } .ma-stats { width: 100%; } .ma-stats > div { flex: 1; min-width: 0; padding: 10px 6px; } }
.sidebar-count { margin-left: auto; background: var(--brass); color: #1A1200; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }

/* Outgoing documents and releases */
.dir-chip { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #E3EAF4; color: #12315C; } .dir-chip.out { background: #EDE3FA; color: #5B3A8C; }
.rl-card { border: 1px solid #DCE3EE; border-left: 5px solid #3A7BD5; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; } .rl-card.st-delivered { border-left-color: #1F9D6B; background: #F4FBF8; } .rl-card.st-returned, .rl-card.st-cancelled { border-left-color: #D64545; background: #FEF6F6; } .rl-card.st-ready { border-left-color: #E0A83C; background: #FFFBF1; }
.rl-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rl-chip { font: 800 11px Inter, sans-serif; padding: 3px 10px; border-radius: 999px; background: #E1ECFB; color: #1B467F; } .rl-chip.st-delivered { background: #DDF4EA; color: #14694A; } .rl-chip.st-returned, .rl-chip.st-cancelled { background: #FADADA; color: #9B2C2C; } .rl-chip.st-ready { background: #FBF0D6; color: #8B6323; }
.rl-meta { margin: 6px 0 0; font-size: 12.5px; color: #5E6E86; line-height: 1.55; } .rl-ok { margin: 8px 0 0; font-size: 13px; color: #14694A; line-height: 1.55; } .rl-bad { margin: 8px 0 0; font-size: 13px; color: #9B2C2C; } .rl-acts { margin-top: 10px; }
.rl-d { margin-top: 10px; } .rl-d summary { cursor: pointer; color: #1F4E8C; font-weight: 700; font-size: 13px; } .rl-d form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; background: #F6F8FC; border-radius: 10px; } .rl-d label { display: grid; gap: 3px; font-size: 12.5px; font-weight: 700; } .rl-d small { font-weight: 500; color: #5E6E86; } .rl-d input, .rl-d select { width: 100%; } .rl-d .req { color: #C0392B; }

/* Outgoing & releases board */
.rb-content { max-width: 1180px; } .rb-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, #0B1B33 0%, #12315C 60%, #1B4A85 100%); color: #fff; border-radius: 18px; padding: 24px 30px; margin-bottom: 18px; border-bottom: 3px solid var(--brass, #E0A83C); } .rb-eye { font: 800 11px Inter, sans-serif; letter-spacing: .14em; color: #9FB6D6; } .rb-banner h1 { font: 700 30px/1.15 "Source Serif 4", Georgia, serif; margin: 4px 0 8px; color: #fff; } .rb-banner p { margin: 0; color: rgba(255,255,255,.82); max-width: 60ch; line-height: 1.55; font-size: 14.5px; } .rb-btn { background: #E0A83C; color: #1A1200; text-decoration: none; font-weight: 800; border-radius: 10px; padding: 12px 20px; }
.rb-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .rb-k { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(11,27,51,.09); padding: 14px 16px; text-decoration: none; color: inherit; border-left: 5px solid #3A7BD5; } .rb-k:hover { transform: translateY(-2px); } .rb-k.warn { border-left-color: #E0A83C; } .rb-k.bad { border-left-color: #D64545; } .rb-k.ok { border-left-color: #1F9D6B; } .rb-k b { display: block; font: 700 30px/1 "Source Serif 4", Georgia, serif; color: #0B1B33; } .rb-k.bad b { color: #9B2C2C; } .rb-k span { font-size: 12px; color: #5E6E86; }
.rb-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(11,27,51,.09); padding: 14px 16px; margin-bottom: 16px; } .rb-filter label { display: grid; gap: 3px; font: 700 11px Inter, sans-serif; color: #5E6E86; } .rb-filter .grow { flex: 1; min-width: 200px; } .rb-filter input, .rb-filter select { border: 1px solid #C9D3E2; border-radius: 8px; padding: 8px 10px; font: 500 13.5px Inter, sans-serif; }
.rb-panel { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(11,27,51,.09); padding: 16px 20px; } .rb-sum { color: #5E6E86; font-size: 13.5px; margin-bottom: 10px; } .rb-sum b { color: #0B1B33; font: 700 20px "Source Serif 4", Georgia, serif; } .rb-scroll { overflow-x: auto; } .rb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .rb-table th { text-align: left; font: 800 10.5px Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #5E6E86; padding: 9px 10px; border-bottom: 2px solid #E3EAF4; white-space: nowrap; } .rb-table td { padding: 11px 10px; border-bottom: 1px solid #EDF1F7; vertical-align: top; } .rb-table tr.late td { background: #FFF8F2; } .rb-table small { display: block; color: #5E6E86; font-size: 12px; margin-top: 2px; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-table small.bad { color: #9B2C2C; font-weight: 700; } .rb-acts a { display: block; font-weight: 700; font-size: 12.5px; }
.rb-pager { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: #5E6E86; } .rb-pager a { font-weight: 700; margin-left: 10px; } .rb-empty { color: #5E6E86; padding: 16px 0; }
@media (max-width: 1000px) { .rb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .rb-banner { padding: 20px 18px; } .rb-banner h1 { font-size: 24px; } }

/* records & archive */
.rec-chip { display: inline-block; font: 800 10.5px Inter, sans-serif; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: #E3EAF4; color: #12315C; margin-left: 4px; } .rec-chip.st-archived { background: #E4E1F5; color: #43399A; } .rec-chip.st-disposed { background: #ECECEC; color: #555; text-decoration: line-through; } .rec-chip.st-transferred { background: #DDF0F4; color: #17596B; } .rec-chip.hold { background: #FADADA; color: #9B2C2C; }
.rc-line { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; } .rc-warn { color: #9B2C2C; }

/* memoranda */
.memo-chip { display: inline-block; font: 800 10.5px Inter, sans-serif; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: #FBEBD3; color: #8A4B0B; margin-left: 4px; }

/* source, agency and reply-by on the registration form */
.rg-agency { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #D3DCE9; } .rg-agency[hidden] { display: none !important; } .rg-agency-h { font: 800 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5E6E86; margin-bottom: 10px; } .rg-agency select { width: 100%; }
.dl-chip { display: inline-block; font: 800 10.5px Inter, sans-serif; padding: 2px 9px; border-radius: 999px; margin-left: 4px; background: #E3EAF4; color: #12315C; } .dl-chip.overdue, .dl-chip.closed_no_reply { background: #FADADA; color: #9B2C2C; } .dl-chip.due_today, .dl-chip.due_soon { background: #FBEBD3; color: #8A4B0B; } .dl-chip.replied_ontime { background: #DDF4EA; color: #14694A; } .dl-chip.replied_late { background: #FBF0D6; color: #8B6323; } .dl-chip.upcoming { background: #E1ECFB; color: #1B467F; }