/* Dispatch Register V75 consolidated application stylesheet.
   Source order preserved: styles.css -> enterprise-v58 -> register-layout-v61 -> office-corporate-v67 -> font-size-v69. */

/* ===== SOURCE: public/styles.css ===== */
/* ── RESET & TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:       #070e1a;
  --surface:  #0d1a2e;
  --card:     #111e33;
  --border:   #1e3050;
  --border2:  #24395c;
  --text:     #e8f0ff;
  --muted:    #7a92b8;
  --dim:      #4a6080;
  --accent:   #5b6ef5;
  --accent2:  #3abde8;
  --green:    #30d98b;
  --red:      #f05a6e;
  --gold:     #f0b429;
  --shadow-sm: 0 2px 8px #00000040;
  --shadow:    0 8px 32px #00000055;
  --shadow-lg: 0 20px 60px #00000070;
  --radius:   14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

/* ── TOPBAR ─────────────────────────────────────────────────────── */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #09152380;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b6ef5, #3abde8);
  display: grid; place-items: center;
  font-weight: 900; font-size: 13px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 14px #5b6ef540;
}
.brand-text { line-height: 1.2; }
.brand-text small { font-size: 9px; color: var(--accent); letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.brand-text h1 { font-size: 14px; font-weight: 700; }
.top-actions { display: flex; gap: 8px; }

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--dim);
  text-transform: uppercase;
  padding: 14px 10px 6px;
}
.sidebar-label:first-child { padding-top: 0; }
.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all .18s;
  white-space: nowrap;
}
.tab:hover { background: #ffffff08; color: var(--text); }
.tab.active {
  background: linear-gradient(135deg, #5b6ef520, #3abde810);
  color: var(--text);
  border: 1px solid #5b6ef530;
}
.tab-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.tab.active .tab-icon { opacity: 1; }
.tab-badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}

/* ── MAIN CONTENT ──────────────────────────────────────────────── */
.main-content {
  overflow-y: auto;
  padding: 28px;
  min-width: 0;
}

/* ── PANELS ─────────────────────────────────────────────────────── */
.panel { display: none; }
.panel.active { display: block; }

/* ── PAGE HEADER ─────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-title-wrap { display: flex; align-items: center; gap: 14px; }
.page-badge {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px #5b6ef540;
}
.page-header h3 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.page-header h3 small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }

/* ── HERO STATS ─────────────────────────────────────────────────── */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.stat-icon.blue { background: #5b6ef515; color: #7b8fff; }
.stat-icon.cyan { background: #3abde815; color: #4dd5fa; }
.stat-icon.green { background: #30d98b15; color: #3feea0; }
.stat-num { font-size: 30px; font-weight: 800; line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; }

/* ── TOOLBAR ─────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar input, .toolbar select {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  outline: none;
  font-size: 13px;
  transition: border-color .2s;
}
.toolbar input:focus, .toolbar select:focus { border-color: var(--accent); }
.toolbar input:first-child { flex: 1; min-width: 180px; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), #4e8cf5);
  color: white;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .18s, transform .15s;
  white-space: nowrap;
}
.primary:hover { opacity: .88; transform: translateY(-1px); }
.primary:active { transform: translateY(0); opacity: 1; }

.ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.ghost:hover { background: #ffffff0c; border-color: var(--accent); }

.icon-btn {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border2);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  transition: all .18s;
}
.icon-btn:hover { background: #ffffff0c; color: var(--text); }

/* ── TABLE ─────────────────────────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 62vh;
  background: var(--card);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { position: sticky; top: 0; z-index: 2; }
th {
  background: #0f1e35;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  max-width: 280px;
  white-space: pre-wrap;
  line-height: 1.5;
}
tbody tr:hover td { background: #ffffff05; }
.empty { text-align: center; padding: 60px; color: var(--dim); font-size: 13px; }

/* ── ROW ACTIONS ─────────────────────────────────────────────────── */
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini {
  padding: 5px 10px;
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: #172840;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}
.mini:hover { background: #1f3656; border-color: var(--accent); }
.mini.danger { color: #ff9ba8; border-color: #ff667733; }
.mini.danger:hover { background: #2a0e14; border-color: var(--red); }

/* ── ATTACH CHIP ─────────────────────────────────────────────────── */
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #172840;
  border: 1px solid var(--border2);
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  transition: background .18s;
}
.attach-chip:hover { background: #1f3555; }
.attach-chip small { color: var(--muted); font-weight: 500; }

/* ── NOTICE GRID ─────────────────────────────────────────────────── */
.notice-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.notice-section-head h4 { font-size: 14px; font-weight: 700; }
.notice-section-head span { font-size: 11px; color: var(--muted); }
.notice-section-head.old { margin-top: 30px; }

.notice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.notice-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform .2s, box-shadow .2s;
}
.notice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.notice-card.important { border-color: #f0b42940; box-shadow: inset 0 2px 0 var(--gold); }
.notice-media { height: 140px; background: #07111e; overflow: hidden; display: grid; place-items: center; }
.notice-media img { width: 100%; height: 100%; object-fit: cover; }
.pdf-box { display: grid; place-items: center; text-align: center; color: #f4b4b4; gap: 4px; }
.pdf-box b { font-size: 28px; }
.pdf-box span { font-size: 11px; color: var(--muted); }
.notice-body { padding: 14px; }
.notice-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.notice-body h4 { font-size: 15px; margin: 8px 0 6px; line-height: 1.3; }
.notice-body p { font-size: 12px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notice-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.pub-badge {
  position: absolute; right: 10px; top: 10px;
  padding: 4px 8px; border-radius: 99px;
  font-size: 9px; font-weight: 900; letter-spacing: .06em;
  background: #0b2218cc; color: #4de9a8; border: 1px solid #30d98b40;
}
.pub-badge.hidden { background: #28151acc; color: #ff9aa8; border-color: #f05a6e40; }

/* ── MODAL ─────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: #000000b0;
  display: grid; place-items: center; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(960px, 97vw);
  max-height: 92vh; overflow: auto;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 0;
  margin-bottom: 18px;
}
.modal-head-left small {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase;
}
.modal-head h3 { font-size: 18px; font-weight: 700; margin: 3px 0 0; }
.modal-body { padding: 0 24px 24px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 11px; font-weight: 700;
  color: #a0b4cc; letter-spacing: .04em;
}
.field input, .field textarea, .field select {
  padding: 11px 13px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: #091626;
  color: var(--text);
  outline: none;
  font-size: 13px;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { min-height: 85px; resize: vertical; }

.check-row { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 0; }
.check-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.file-preview {
  min-height: 120px;
  border: 1.5px dashed var(--border2);
  border-radius: 11px;
  background: #091523;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  transition: border-color .2s;
}
.file-preview img { max-width: 100%; max-height: 280px; border-radius: 8px; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ── PREVIEW MODAL ─────────────────────────────────────────────── */
.preview-card { width: min(1100px, 98vw); }
#previewContent iframe { width: 100%; height: 72vh; border: 0; border-radius: 11px; background: white; display: block; }
#previewContent img { display: block; max-width: 100%; max-height: 75vh; margin: auto; border-radius: 11px; }
.preview-text { white-space: pre-wrap; color: #c8d5e9; line-height: 1.6; padding: 4px 0; }

/* ── SYSTEM / BACKUP PANEL ─────────────────────────────────────── */
.system-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 20px;
}
.system-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.system-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
}
.system-card small { color: var(--dim); letter-spacing: .1em; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.system-card b { display: block; font-size: 24px; font-weight: 800; margin: 3px 0; }
.system-card p { margin: 0; color: var(--muted); font-size: 11px; }

.storage-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; margin: 16px 0 24px; }
.settings-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.settings-title {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 14px;
}
.settings-title h4 { font-size: 15px; font-weight: 700; }
.settings-title small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px #30d98b18; flex-shrink: 0; }
.settings-card label { display: block; font-size: 10px; font-weight: 800; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 6px; }
.settings-card code {
  display: block; padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: 9px;
  background: #071321;
  color: #71d6f2;
  font-size: 12px;
  white-space: nowrap;
  overflow: auto;
}
.info-box {
  margin-top: 14px; padding: 12px 14px;
  border-radius: 10px;
  background: #5b6ef510; border: 1px solid #5b6ef530;
  color: #aebee0; line-height: 1.55; font-size: 12px;
}
.restore-steps { padding-left: 18px; color: #b4c3da; line-height: 1.7; }
.restore-steps li { margin-bottom: 7px; }
.restore-steps b { color: white; }

.section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 22px 0 12px;
}
.section-head h4 { font-size: 14px; font-weight: 700; }
.section-head small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.backup-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
.backup-table { min-width: 820px; }
.backup-table td { vertical-align: middle; }
.backup-name { font-family: 'Cascadia Code', 'Consolas', monospace; color: #8edcf1; font-size: 12px; }
.reason-tag { padding: 4px 8px; border-radius: 99px; background: #5b6ef515; border: 1px solid #5b6ef535; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #a0afff; }

/* ── MASTER SETTINGS ─────────────────────────────────────────────── */
.master-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-bottom: 24px; }
.master-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.master-form .field.full { grid-column: 1 / -1; }

.smtp-status {
  padding: 7px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: #2a1820; border: 1px solid #f05a6e40; color: #ff9aaa;
}
.smtp-status.enabled { background: #09231b; border-color: #30d98b40; color: #6ef0b2; }

.switch-line {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  cursor: pointer;
}
.switch-line input { width: auto !important; height: auto; }
.security-note {
  margin-top: 14px; padding: 12px 14px;
  border-radius: 10px;
  background: #f0b42908; border: 1px solid #f0b42930;
  color: #c5b58f; font-size: 11px; line-height: 1.55;
}
.email-form-actions { display: flex !important; flex-direction: row !important; justify-content: flex-end; gap: 10px; }
.status-pill {
  display: inline-flex; padding: 4px 8px; border-radius: 99px;
  background: #09231b; color: #71eab3; border: 1px solid #30d98b40;
  font-size: 10px; font-weight: 800;
}
.status-pill.inactive { background: #28161b; color: #ff98a7; border-color: #f05a6e44; }

/* ── POPUP ─────────────────────────────────────────────────────── */
.popup {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 18px;
  border: 1px solid #5b6ef555;
  background: linear-gradient(145deg, #14223a, #0e1a2d);
  box-shadow: var(--shadow-lg);
}
.popup[hidden] { display: none; }
.popup-close {
  position: absolute; right: 12px; top: 10px;
  border: none; background: none; color: var(--muted);
  font-size: 22px; cursor: pointer; transition: color .18s;
}
.popup-close:hover { color: var(--text); }
.popup small { color: #a9a0ff; letter-spacing: .14em; font-weight: 900; font-size: 9px; text-transform: uppercase; }
.popup h3 { font-size: 20px; margin: 8px 0 6px; }
.popup p { color: var(--muted); line-height: 1.5; font-size: 13px; }
.popup-actions { display: flex; gap: 9px; margin-top: 14px; }
.pulse {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); margin-right: 7px;
  box-shadow: 0 0 0 6px #f0b42920;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px #f0b42920; } 50% { box-shadow: 0 0 0 9px #f0b42908; } }

/* ── TOAST ─────────────────────────────────────────────────────── */
#toast {
  position: fixed; right: 20px; top: 72px; z-index: 200;
  padding: 12px 18px;
  border-radius: 10px;
  background: #152130;
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600;
  opacity: 0;
  transform: translateX(16px);
  transition: .22s;
  pointer-events: none;
  max-width: 340px;
}
#toast.show { opacity: 1; transform: none; }
#toast.success { border-color: #30d98b55; color: #6ef0b2; }
#toast.error { border-color: #f05a6e55; color: #ff9aaa; }

/* ── NOTICE BOARD ─────────────────────────────────────────────── */
.notice-heading { display: flex; justify-content: space-between; align-items: center; margin: 22px 2px 12px; }
.notice-heading h4 { margin: 0; font-size: 17px; }
.notice-heading span { color: var(--muted); font-size: 11px; }
.notice-heading.old { padding-top: 14px; border-top: 1px solid var(--border); }

/* ── SMTP DISABLED NOTICE ─────────────────────────────────────── */
.feature-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid #f0b42930;
  border-radius: 10px;
  background: #f0b42908;
  margin-bottom: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: #c5b58f;
}
.feature-notice-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .notice-grid { grid-template-columns: repeat(2, 1fr); }
  .system-grid { grid-template-columns: repeat(2, 1fr); }
  .storage-layout { grid-template-columns: 1fr; }
  .master-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; grid-template-rows: 60px auto 1fr; }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap;
    padding: 10px 12px; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .sidebar-label { display: none; }
  .tab { padding: 8px 14px; font-size: 12px; width: auto; white-space: nowrap; }
  .hero-stats { grid-template-columns: 1fr; }
  .main-content { padding: 18px; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 14px; }
  .brand-text h1 { font-size: 13px; }
  .top-actions button { padding: 8px 12px; font-size: 12px; }
  .page-header { flex-direction: column; }
  .notice-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .master-form { grid-template-columns: 1fr; }
  .master-form .field.full { grid-column: auto; }
  .toolbar { flex-wrap: wrap; }
  .toolbar input:first-child { flex-basis: 100%; }
}

/* ── PRINT ─────────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .sidebar, .topbar, .page-header button, .toolbar, .actions, .notice-actions,
  .hero-stats, .popup, #toast { display: none !important; }
  .app-layout { display: block; }
  .main-content { padding: 0; }
  .panel { display: none !important; }
  .panel.active { display: block !important; }
  .table-wrap { max-height: none; overflow: visible; border: 1px solid #000; }
  table { font-size: 8.5pt; color: black; min-width: 0; }
  thead { position: static; background: #ddd !important; }
  th, td { border: 1px solid #000 !important; color: black !important; padding: 4px 6px; }
  .notice-card { break-inside: avoid; background: white; border: 1px solid #000; }
  .notice-body p, .notice-meta { color: #333 !important; }
  .pub-badge { display: none; }
}

.mail-btn{color:#7fdcff;border-color:#3abde855;background:#3abde810}
.mail-card{width:min(720px,96vw)}
.mail-attachment-info{grid-column:1/-1;padding:12px;border:1px solid var(--border2);border-radius:10px;background:#091523;color:var(--muted);font-size:12px}

.recipient-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.recipient-tools{display:flex;gap:7px}.recipient-tools .mini{padding:6px 9px;font-size:11px}
.recipient-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:230px;overflow:auto;padding:10px;border:1px solid var(--border2);border-radius:12px;background:#091523}
.recipient-option{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid #263b59;border-radius:10px;background:#102038;cursor:pointer;transition:.18s}
.recipient-option:hover{border-color:#4d75ad;background:#132844}.recipient-option.checked{border-color:#5c7cff;background:#17294b;box-shadow:0 0 0 1px #5c7cff44 inset}
.recipient-option input{width:auto;margin-top:3px}.recipient-option strong{display:block;font-size:12px;color:#eef4ff}.recipient-option span{display:block;font-size:11px;color:var(--muted);margin-top:3px;word-break:break-all}.recipient-option small{display:block;font-size:10px;color:#7f94b2;margin-top:3px}
.recipient-summary{margin-top:8px;color:#8fb7ff;font-size:11px;font-weight:750}
@media(max-width:650px){.recipient-list{grid-template-columns:1fr}.recipient-head{align-items:flex-start;flex-direction:column}}

.recipient-field{position:relative}
.recipient-dropdown-trigger{
  width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 14px;border:1px solid var(--border2);border-radius:11px;
  background:#091523;color:#eef4ff;cursor:pointer;text-align:left;font-weight:700
}
.recipient-dropdown-trigger:hover,.recipient-dropdown-trigger.open{border-color:#5c7cff;box-shadow:0 0 0 2px #5c7cff22}
.recipient-dropdown-trigger .recipient-chevron{font-size:18px;transition:.2s}
.recipient-dropdown-trigger.open .recipient-chevron{transform:rotate(180deg)}
.recipient-dropdown-panel{
  position:absolute;left:0;right:0;top:76px;z-index:20;padding:10px;
  border:1px solid #355070;border-radius:13px;background:#0b1728;
  box-shadow:0 22px 55px #000b
}
.recipient-dropdown-panel[hidden]{display:none}
.recipient-panel-title{font-size:11px;font-weight:800;color:#aebed6;text-transform:uppercase;letter-spacing:.08em}
.recipient-list{max-height:250px}
@media(max-width:650px){
  .recipient-dropdown-panel{position:fixed;left:16px;right:16px;top:18%;max-height:62vh}
  .recipient-list{max-height:45vh}
}

[hidden]{display:none!important}.login-overlay{position:fixed;inset:0;background:rgba(10,18,35,.72);z-index:9999;display:grid;place-items:center}.login-card{width:min(420px,92vw);background:#fff;padding:30px;border-radius:18px;box-shadow:0 24px 80px #0005;display:grid;gap:14px}.login-card label{display:grid;gap:6px}.notification-drawer{position:fixed;right:18px;top:72px;width:min(390px,92vw);max-height:75vh;overflow:auto;background:#fff;z-index:9000;border-radius:16px;padding:16px;box-shadow:0 18px 60px #0004}.backup-row{padding:12px;border-bottom:1px solid var(--line);display:grid;gap:5px}.backup-row small{color:var(--muted)}.editor-tools{display:flex;gap:6px;margin:6px 0}.dark-mode{--bg:#111827;--panel:#172033;--card:#1f2937;--text:#eef2ff;--muted:#aab4c7;--line:#334155}.dark-mode body,.dark-mode .app-layout{background:var(--bg);color:var(--text)}.dark-mode .topbar,.dark-mode .sidebar,.dark-mode .panel,.dark-mode .settings-card,.dark-mode .stat-card,.dark-mode .modal-card,.dark-mode .notification-drawer{background:var(--card)!important;color:var(--text)}.dark-mode input,.dark-mode textarea,.dark-mode select{background:#111827;color:#fff;border-color:#475569}

/* ═══════════════════════════════════════════════════════════════════
   SaaS UI Refresh — preserves all existing IDs and functionality
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f6f8fc;--surface:#ffffff;--card:#ffffff;--border:#e6eaf1;--border2:#d9deea;
  --text:#172033;--muted:#667085;--dim:#98a2b3;--accent:#5b5bd6;--accent2:#7c69ef;
  --green:#12b76a;--red:#f04438;--gold:#f79009;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow:0 8px 24px rgba(16,24,40,.08);--shadow-lg:0 24px 64px rgba(16,24,40,.16);
  --radius:14px;--radius-sm:9px;--radius-lg:20px;
}
body{background:var(--bg);color:var(--text);font-size:14px}
.app-layout{grid-template-columns:252px minmax(0,1fr);grid-template-rows:68px 1fr}
.topbar{height:68px;padding:0 24px;background:rgba(255,255,255,.92);border-color:var(--border);box-shadow:var(--shadow-sm)}
.logo{width:40px;height:40px;background:linear-gradient(135deg,#5b5bd6,#8b5cf6);box-shadow:0 8px 22px rgba(91,91,214,.24)}
.brand-text small{color:var(--accent)}.brand-text h1{font-size:16px;color:var(--text)}
.top-actions{align-items:center}.top-actions .ghost{background:#fff}
#userChip{border-radius:999px!important;background:#f2f4f7!important;border-color:#e4e7ec!important;color:#344054!important}
.sidebar{top:68px;height:calc(100vh - 68px);background:#fff;border-color:var(--border);padding:20px 14px}
.sidebar-label{font-size:10px;color:#98a2b3;padding:18px 10px 7px}
.tab{min-height:42px;border-radius:10px;color:#475467;font-weight:650;padding:10px 12px}
.tab:hover{background:#f7f7fb;color:#344054}.tab.active{background:#f0efff;color:#4b4bb7;border:1px solid #dfdcff;box-shadow:inset 3px 0 0 #5b5bd6}
.tab-badge{background:#eef0f4;color:#475467}.tab.active .tab-badge{background:#5b5bd6;color:#fff}
.main-content{padding:30px 32px 48px;max-width:1700px;width:100%;margin:0 auto}
.panel.active{animation:saasFade .18s ease-out}@keyframes saasFade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.page-header{margin-bottom:22px;align-items:center}.page-header h3{font-size:23px;letter-spacing:-.025em}.page-header h3 small{font-size:13px;margin-top:5px;color:#667085}
.page-badge{width:44px;height:44px;border-radius:12px;background:#eeecff;color:#5146b7;box-shadow:none;border:1px solid #ddd9ff}
.hero-stats{gap:16px}.feature-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-card{padding:20px;background:#fff;border-color:var(--border);box-shadow:var(--shadow-sm);transition:.2s}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{width:44px;height:44px}.stat-icon.blue{background:#eef4ff;color:#4c6fff}.stat-icon.cyan{background:#ecfbff;color:#0891b2}.stat-icon.green{background:#ecfdf3;color:#039855}.stat-icon.amber{background:#fff7ed;color:#ea580c}
.stat-num{font-size:28px;color:#101828}.stat-lbl{font-size:12px;color:#475467}.stat-hint{display:block;margin-top:5px;color:#98a2b3;font-size:11px}
.settings-card,.table-wrap,.system-card{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.settings-card{border-radius:16px;padding:22px}.table-wrap{border-radius:14px;overflow:auto}
table{color:var(--text);background:#fff}thead{background:#f8fafc}th{color:#667085;font-size:11px;letter-spacing:.035em;border-color:#edf0f5;padding:12px 14px}td{color:#344054;border-color:#f0f2f6;padding:12px 14px}tbody tr:hover{background:#fafbff}
.toolbar,.filter-bar{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm)}
.toolbar input,.toolbar select,.settings-card input,.settings-card textarea,.settings-card select{background:#fff;color:#344054;border:1px solid #d0d5dd;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.toolbar input:focus,.toolbar select:focus,.settings-card input:focus,.settings-card textarea:focus,.settings-card select:focus{border-color:#8178e9;box-shadow:0 0 0 3px rgba(91,91,214,.12);outline:none}
.primary{background:#5b5bd6;border-radius:9px;box-shadow:0 1px 2px rgba(16,24,40,.08);padding:10px 16px}.primary:hover{background:#4f4fc4;opacity:1}
.ghost{background:#fff;color:#344054;border-color:#d0d5dd}.ghost:hover{background:#f9fafb;border-color:#b9c0cc}
.mini{border-radius:7px!important}.actions{gap:6px}
.status-chip,.soft-chip{display:inline-flex;align-items:center;border-radius:999px;font-size:11px;font-weight:700}.status-chip{padding:7px 10px;background:#ecfdf3;color:#027a48;border:1px solid #abefc6}.soft-chip{padding:5px 9px;background:#f2f4f7;color:#475467}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.card-head small{display:block;color:#7f7ae8;font-size:10px;letter-spacing:.12em;font-weight:800}.card-head h4{font-size:16px;margin-top:3px}.mini-head{margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--border)}
.saas-content-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:16px}.activity-card,.quick-card{min-height:310px}
.quick-actions{display:grid;gap:10px}.quick-action{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#344054;cursor:pointer}.quick-action:hover{background:#f9f9ff;border-color:#d6d2ff}.quick-action b{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#f0efff;color:#5146b7;font-size:18px}.quick-action span{font-weight:700}.quick-action small{display:block;color:#98a2b3;font-weight:500;margin-top:2px}
.form-card{display:flex;flex-direction:column;gap:8px}.form-card>label{font-size:12px;font-weight:700;color:#475467;margin-top:5px}.form-card input,.form-card textarea,.form-card select{padding:11px 12px;border-radius:9px;width:100%}.form-card .primary{margin-top:8px;align-self:flex-start}
.helper-box{font-size:11px;color:#667085;background:#f8fafc;border:1px dashed #d0d5dd;padding:10px;border-radius:9px}.helper-box code{background:#eeecff;color:#5146b7;padding:2px 5px;border-radius:5px}
.editor-tools{padding:6px;background:#f8fafc;border:1px solid #e4e7ec;border-radius:9px;width:max-content}.editor-tools button{width:32px;height:30px;border:1px solid #d0d5dd;border-radius:6px;background:#fff;color:#344054;cursor:pointer}.editor-tools button:hover{border-color:#8178e9;color:#5146b7}
.schedule-block{margin-top:10px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#fafbff}.switch-line span{display:grid;color:#344054;font-weight:700}.switch-line small{color:#98a2b3;font-weight:500}.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.time-grid label{font-size:11px;color:#667085}.field-help{color:#667085}.user-list-wrap{margin-top:4px}
.backup-row{border-color:#edf0f5;border-radius:9px}.backup-row:hover{background:#fafbff}
.login-overlay{background:linear-gradient(135deg,rgba(42,45,94,.92),rgba(69,50,120,.88));backdrop-filter:blur(8px)}.login-card{width:min(440px,92vw);padding:30px;border-radius:20px;background:#fff;color:#101828;box-shadow:0 30px 90px rgba(16,24,40,.35);gap:15px}.login-brand{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}.login-brand small{color:#5b5bd6;font-weight:800;letter-spacing:.12em}.login-brand h2{font-size:24px;margin:2px 0 4px}.login-brand p{color:#667085;font-size:13px}.login-card label{font-size:12px;font-weight:700;color:#475467}.login-card input{margin-top:6px;padding:12px;border-radius:9px;border:1px solid #d0d5dd;background:#fff;color:#344054}.login-card .primary{justify-content:center;width:100%;padding:12px}.login-help{text-align:center;color:#98a2b3}
.notification-drawer{top:76px;right:20px;background:#fff;color:#344054;border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:16px}
.notification-drawer .modal-head{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:8px}
/* dark mode remains a first-class SaaS theme */
body.dark-mode{--bg:#0f172a;--surface:#111827;--card:#172033;--border:#263247;--border2:#36445c;--text:#eef2ff;--muted:#aab4c7;--dim:#718096;background:var(--bg);color:var(--text)}
body.dark-mode .topbar,body.dark-mode .sidebar,body.dark-mode .settings-card,body.dark-mode .stat-card,body.dark-mode .table-wrap,body.dark-mode table,body.dark-mode .toolbar,body.dark-mode .quick-action,body.dark-mode .notification-drawer{background:var(--card)!important;color:var(--text)}
body.dark-mode thead,body.dark-mode .editor-tools,body.dark-mode .schedule-block,body.dark-mode .helper-box{background:#111827!important}body.dark-mode th,body.dark-mode td{border-color:#263247;color:#dbe4f3}body.dark-mode tbody tr:hover{background:#1d293b}body.dark-mode .tab:hover{background:#1b2638}body.dark-mode .tab.active{background:#242650;border-color:#454785;color:#d9d8ff}body.dark-mode .toolbar input,body.dark-mode .toolbar select,body.dark-mode .settings-card input,body.dark-mode .settings-card textarea,body.dark-mode .settings-card select,body.dark-mode .login-card input{background:#111827;color:#fff;border-color:#475569}
@media(max-width:1200px){.feature-kpis{grid-template-columns:repeat(2,1fr)}.saas-content-grid{grid-template-columns:1fr}}
@media(max-width:900px){.app-layout{grid-template-columns:1fr;grid-template-rows:68px auto 1fr}.sidebar{height:auto;top:auto}.main-content{padding:20px}.feature-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.feature-kpis{grid-template-columns:1fr}.time-grid{grid-template-columns:1fr}.saas-page-head{align-items:flex-start}.top-actions #printBtn,.top-actions #exportBtn{display:none}.brand-text small{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   THEME CONSISTENCY FIX — final authoritative light/dark layer
   ═══════════════════════════════════════════════════════════════════ */
html { color-scheme: light; }
body {
  --bg:#f6f8fc; --surface:#ffffff; --card:#ffffff; --card-soft:#f8fafc;
  --border:#e4e7ec; --border2:#d0d5dd; --text:#101828; --muted:#667085;
  --dim:#98a2b3; --input-bg:#ffffff; --hover:#f8f9fc; --table-head:#f8fafc;
  --overlay:rgba(15,23,42,.52); --code-bg:#f2f4f7; --code-text:#475467;
  background:var(--bg); color:var(--text); color-scheme:light;
}
body.dark-mode {
  --bg:#0b1220; --surface:#101827; --card:#151f31; --card-soft:#111a2a;
  --border:#26344a; --border2:#3a4961; --text:#eef4ff; --muted:#a6b2c5;
  --dim:#718096; --input-bg:#0f1828; --hover:#1b2940; --table-head:#111b2b;
  --overlay:rgba(2,6,23,.76); --code-bg:#0d1726; --code-text:#83d9ef;
  background:var(--bg); color:var(--text); color-scheme:dark;
}
body, .app-layout, .main-content { background:var(--bg); color:var(--text); }
.topbar { background:color-mix(in srgb,var(--surface) 92%,transparent); border-color:var(--border); color:var(--text); }
.sidebar, .modal-card, .settings-card, .stat-card, .table-wrap, .system-card,
.notification-drawer, .quick-action, .login-card, .toolbar, .filter-bar,
.notice-card, .backup-table-wrap { background:var(--card); color:var(--text); border-color:var(--border); }
.brand-text h1, .page-header h3, .card-head h4, .settings-title h4, .section-head h4,
.modal-head h3, .stat-num, .notice-body h4 { color:var(--text); }
.brand-text small, .page-header h3 small, .stat-lbl, .stat-hint, .field-help,
.notice-body p, .backup-row small, .quick-action small, .login-help { color:var(--muted); }
.tab { color:var(--muted); }
.tab:hover { background:var(--hover); color:var(--text); }
.tab.active { background:color-mix(in srgb,var(--accent) 12%,var(--card)); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,var(--border)); }
#userChip, body.dark-mode #userChip { background:var(--card-soft)!important; border-color:var(--border)!important; color:var(--text)!important; }
.ghost, .icon-btn, .mini, .attach-chip, .editor-tools button {
  background:var(--card); color:var(--text); border-color:var(--border2);
}
.ghost:hover, .icon-btn:hover, .mini:hover, .attach-chip:hover, .editor-tools button:hover,
.quick-action:hover, .backup-row:hover { background:var(--hover); }
.toolbar input, .toolbar select, .settings-card input, .settings-card textarea,
.settings-card select, .field input, .field textarea, .field select, .login-card input,
input, textarea, select {
  background:var(--input-bg); color:var(--text); border-color:var(--border2);
}
input::placeholder, textarea::placeholder { color:var(--dim); opacity:1; }
select option { background:var(--input-bg); color:var(--text); }
.field label, .form-card>label, .settings-card label, .time-grid label, .switch-line span { color:var(--text); }
.switch-line small { color:var(--muted); }
.table-wrap, table { background:var(--card); color:var(--text); }
thead, th { background:var(--table-head)!important; color:var(--muted); border-color:var(--border); }
td { color:var(--text); border-color:var(--border); }
tbody tr:hover td, tbody tr:hover { background:var(--hover); }
.schedule-block, .helper-box, .editor-tools, .file-preview { background:var(--card-soft)!important; border-color:var(--border); color:var(--muted); }
.settings-card code { background:var(--code-bg); color:var(--code-text); border-color:var(--border); }
.info-box { background:color-mix(in srgb,var(--accent) 8%,var(--card)); color:var(--muted); border-color:color-mix(in srgb,var(--accent) 25%,var(--border)); }
.restore-steps, .preview-text { color:var(--muted); }
.restore-steps b { color:var(--text); }
.modal { background:var(--overlay); }
.login-overlay { background:linear-gradient(135deg,rgba(50,55,120,.88),rgba(91,60,150,.82)); }
body.dark-mode .login-overlay { background:linear-gradient(135deg,rgba(3,7,18,.94),rgba(24,20,55,.92)); }
.login-card label, .login-brand h2 { color:var(--text); }
.login-brand p { color:var(--muted); }
.form-actions, .notification-drawer .modal-head, .mini-head { border-color:var(--border); }
.pub-badge { background:color-mix(in srgb,var(--green) 16%,var(--card)); }
.pub-badge.hidden { background:color-mix(in srgb,var(--red) 14%,var(--card)); }
.mini.danger:hover { background:color-mix(in srgb,var(--red) 12%,var(--card)); }
#themeBtn { min-width:112px; justify-content:center; }
@supports not (color: color-mix(in srgb, black, white)) {
  body.dark-mode .tab.active { background:#242650; }
  body:not(.dark-mode) .tab.active { background:#f0efff; }
}

/* ======================================================================
   DISPATCHFLOW SaaS UI — 2026 polished interface layer
   ====================================================================== */
:root{
  --bg:#f4f7fb;--surface:#ffffff;--surface-2:#f8fafc;--surface-3:#eef2ff;
  --card:#ffffff;--card-soft:#f8fafc;--border:#e5eaf2;--border2:#d7deea;
  --text:#172033;--muted:#667085;--dim:#98a2b3;--accent:#635bff;
  --accent-2:#4f46e5;--accent-soft:#eeecff;--success:#079455;--warning:#dc6803;
  --danger:#d92d20;--cyan:#0891b2;--shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 10px 30px rgba(20,32,62,.08);--shadow-lg:0 24px 64px rgba(18,31,53,.16);
  --radius:16px;--radius-sm:10px;--topbar-h:76px;--sidebar-w:258px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app-layout{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) 1fr;background:var(--bg)}

/* Top navigation */
.topbar{grid-column:1/-1;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;border-bottom:1px solid rgba(229,234,242,.92);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(16,24,40,.02)}
.brand{display:flex;align-items:center;gap:12px;min-width:215px}.logo{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#756cff,#4f46e5);color:#fff;font-size:13px;font-weight:850;letter-spacing:-.02em;box-shadow:0 8px 22px rgba(99,91,255,.3)}
.brand-text{display:flex;flex-direction:column}.brand-text small{font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}.brand-text h1{margin:1px 0 0;font-size:19px;line-height:1.25;letter-spacing:-.035em;color:var(--text)}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.top-actions .ghost{height:38px;padding:0 12px;border-radius:10px;white-space:nowrap}.top-actions #userChip{max-width:210px;overflow:hidden;text-overflow:ellipsis;background:var(--surface-2)!important;border:1px solid var(--border)!important;font-weight:650}

/* Sidebar */
.sidebar{grid-column:1;grid-row:2;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:20px 14px 28px;background:var(--surface);border-right:1px solid var(--border);scrollbar-width:thin}.sidebar-label{padding:16px 12px 7px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.sidebar-label:first-child{padding-top:2px}
.tab{width:100%;min-height:44px;display:flex;align-items:center;gap:11px;margin:3px 0;padding:10px 11px;border:1px solid transparent;border-radius:11px;background:transparent;color:#475467;text-align:left;font-weight:650;transition:.18s ease}.tab:hover{background:var(--surface-2);color:var(--text);transform:translateX(2px)}.tab.active{background:linear-gradient(135deg,#f0efff,#f7f6ff);color:var(--accent-2);border-color:#dedaff;box-shadow:inset 3px 0 0 var(--accent)}.tab-icon{width:18px;height:18px;flex:none}.tab-badge{margin-left:auto;min-width:24px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border-radius:999px;background:#eef2f6;color:#667085;font-size:11px;font-weight:800}.tab.active .tab-badge{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)}

/* Main canvas */
.main-content{grid-column:2;grid-row:2;min-width:0;padding:28px 30px 44px}.panel{display:none}.panel.active{display:block;animation:panelIn .24s ease-out}@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat-card{min-height:116px;display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);transition:.2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.stat-icon{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:14px;font-size:20px;font-weight:800}.stat-icon.blue{background:#eeecff;color:#635bff}.stat-icon.cyan{background:#e6f8fb;color:#0891b2}.stat-icon.green{background:#eafaf2;color:#079455}.stat-num{font-size:29px;line-height:1;font-weight:800;letter-spacing:-.045em;color:var(--text)}.stat-lbl{margin-top:7px;font-size:13px;color:var(--muted);font-weight:600}.stat-hint{font-size:12px;color:var(--dim)}

/* Headers and controls */
.page-header,.saas-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px}.page-title-wrap{display:flex;align-items:center;gap:13px}.page-badge{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--accent-2);font-weight:850}.page-header h3,.saas-page-head h3{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.035em;color:var(--text)}.page-header h3 small,.saas-page-head p{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.primary,.ghost,.mini,.icon-btn,.icon{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;font-weight:700;transition:.18s ease}.primary{min-height:40px;padding:0 15px;border-radius:10px;background:linear-gradient(135deg,#6c63ff,#554de8);color:#fff;box-shadow:0 7px 16px rgba(99,91,255,.22)}.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(99,91,255,.3)}.ghost{min-height:38px;padding:0 13px;border-color:var(--border);border-radius:10px;background:var(--surface);color:#475467;box-shadow:var(--shadow-sm)}.ghost:hover{border-color:var(--border2);background:var(--surface-2);color:var(--text)}.mini{min-height:30px;padding:0 9px;border-radius:8px;border-color:var(--border);background:var(--surface);color:#475467;font-size:11px}.mini:hover{background:var(--surface-2);border-color:var(--border2)}.mini.danger{color:var(--danger);background:#fff7f6;border-color:#fee4e2}.icon-btn,.icon{width:36px;height:36px;padding:0;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:21px}.icon-btn:hover,.icon:hover{background:#eef2f6;color:var(--text)}
.toolbar,.filter-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}.toolbar input:first-child{flex:1;min-width:240px}.toolbar input,.toolbar select,.filter-bar input,.filter-bar select{height:39px;padding:0 12px;border:1px solid var(--border2);border-radius:9px;background:var(--surface-2);color:var(--text);outline:none;transition:.16s}.toolbar input:focus,.toolbar select:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:#918bff;box-shadow:0 0 0 3px rgba(99,91,255,.12);background:var(--surface)}

/* Data tables */
.table-wrap,.backup-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface)}thead{position:sticky;top:0;z-index:2;background:#f8fafc}th{padding:13px 14px;border-bottom:1px solid var(--border);color:#667085;font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;text-align:left;white-space:nowrap}td{padding:13px 14px;border-bottom:1px solid #edf0f5;color:#344054;font-size:12px;vertical-align:middle;max-width:260px}tbody tr:last-child td{border-bottom:0}tbody tr{transition:.15s ease}tbody tr:hover{background:#fafbff}td .actions{display:flex;gap:6px;white-space:nowrap}.empty{padding:44px 20px!important;color:var(--muted)!important;text-align:center!important}.status-pill,.status-chip,.soft-chip,.attach-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid #d1fadf;background:#ecfdf3;color:#067647;font-size:10px;font-weight:800}.status-pill.inactive{background:#f2f4f7;border-color:#eaecf0;color:#667085}.attach-chip{border-color:#d9d6fe;background:#f4f3ff;color:#5925dc}.attach-chip small{font-size:9px;opacity:.75}

/* Cards and settings */
.system-grid,.feature-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.system-card,.settings-card,.quick-card,.list-card,.activity-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}.system-card{display:flex;align-items:center;gap:13px;padding:17px}.system-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);font-size:11px;font-weight:850}.system-card small,.settings-title small,.section-head small,.mini-head small{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}.system-card b{display:block;margin:2px 0;font-size:21px;color:var(--text)}.system-card p{margin:0;color:var(--muted);font-size:11px}.storage-layout,.master-layout,.settings-feature-layout,.saas-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.settings-card,.quick-card,.list-card,.activity-card{padding:20px}.settings-title,.section-head,.mini-head,.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.settings-title h4,.section-head h4,.mini-head h4,.card-head h4{margin:2px 0 0;font-size:16px;color:var(--text)}.settings-card label{display:block;margin:16px 0 6px;color:#475467;font-size:12px;font-weight:700}.settings-card code{display:block;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:#344054;white-space:normal;overflow-wrap:anywhere}.info-box,.helper-box,.security-note,.feature-notice,.schedule-block{margin-top:15px;padding:13px 14px;border:1px solid #d9d6fe;border-radius:11px;background:#f4f3ff;color:#4a3ec2;font-size:12px}.restore-steps{margin:12px 0 0;padding-left:20px;color:var(--muted)}.restore-steps li{margin:8px 0}.health-dot{width:10px;height:10px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px #d1fadf}.section-head{margin:22px 0 10px}

/* Forms */
.form-grid,.master-form,.email-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{min-width:0}.field.full,.form-actions.full{grid-column:1/-1}.field label,.master-form label{display:block;margin-bottom:6px;color:#475467;font-size:11px;font-weight:750}.field input,.field textarea,.field select,.settings-card input,.settings-card textarea,.settings-card select,.master-form input,.master-form textarea,.master-form select{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--text);outline:none;transition:.16s}.field textarea,.settings-card textarea,.master-form textarea{min-height:90px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus,.settings-card input:focus,.settings-card textarea:focus,.settings-card select:focus,.master-form input:focus,.master-form textarea:focus,.master-form select:focus{border-color:#918bff;box-shadow:0 0 0 3px rgba(99,91,255,.12)}.file-preview{margin-top:8px;padding:12px;border:1px dashed var(--border2);border-radius:10px;background:var(--surface-2);color:var(--muted);text-align:center}.check-row{display:flex;flex-wrap:wrap;gap:10px}.check-row label,.switch-line{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}

/* Modals and overlays */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(15,23,42,.48);backdrop-filter:blur(7px)}.modal[hidden]{display:none}.modal-card{width:min(820px,96vw);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-lg)}.modal-head{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.modal-head-left small{font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--accent)}.modal-head h3{margin:2px 0 0;font-size:19px}.modal-body{padding:22px}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding:16px 22px;border-top:1px solid var(--border);background:var(--surface-2)}.preview-card{width:min(900px,96vw)}#previewContent iframe{width:100%;height:70vh;border:0;border-radius:10px}#previewContent img{display:block;max-width:100%;max-height:72vh;margin:auto;border-radius:10px}.popup{position:fixed;right:24px;bottom:24px;z-index:800;width:min(390px,calc(100vw - 32px));padding:20px;border:1px solid #d9d6fe;border-radius:17px;background:var(--surface);box-shadow:var(--shadow-lg)}

/* Notices, templates and utility cards */
.notice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.notice-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.notice-heading h4{margin:0}.notice-heading span{color:var(--muted);font-size:11px}.notice-card{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-sm);transition:.18s ease}.notice-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.notice-card.important{border-color:#fdb022}.notice-media{height:145px;overflow:hidden;background:var(--surface-2)}.notice-media img{width:100%;height:100%;object-fit:cover}.notice-body{padding:16px}.notice-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.notice-body h4{margin:9px 0 5px;font-size:15px}.notice-body p{min-height:38px;margin:0;color:var(--muted);font-size:12px}.notice-actions{display:flex;gap:6px;margin-top:14px}.pub-badge{position:absolute;margin:10px;padding:4px 8px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:9px;font-weight:800}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-action{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left}.quick-action:hover{border-color:#c7c3ff;background:#f7f6ff}.quick-action small{display:block;color:var(--muted)}

/* Login */
.login-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 15% 10%,rgba(119,110,255,.32),transparent 32%),radial-gradient(circle at 90% 90%,rgba(34,211,238,.18),transparent 30%),linear-gradient(145deg,#111827,#20205b);backdrop-filter:blur(8px)}.login-card{width:min(430px,94vw);display:grid;gap:15px;padding:30px;border:1px solid rgba(255,255,255,.75);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 34px 100px rgba(2,6,23,.45)}.login-brand{display:flex;align-items:flex-start;gap:14px;margin-bottom:5px}.login-brand small{font-size:10px;font-weight:850;letter-spacing:.13em;color:var(--accent)}.login-brand h2{margin:2px 0 3px;font-size:25px;letter-spacing:-.04em}.login-brand p{margin:0;color:var(--muted);font-size:13px}.login-card label{display:grid;gap:6px;color:#475467;font-size:12px;font-weight:700}.login-card input{width:100%;height:44px;padding:0 12px;border:1px solid var(--border2);border-radius:10px;outline:none}.login-card input:focus{border-color:#918bff;box-shadow:0 0 0 3px rgba(99,91,255,.12)}.login-card .primary{width:100%;height:44px}.login-help{text-align:center;color:var(--dim)}

/* Drawer, toast */
.notification-drawer{position:fixed;right:18px;top:86px;z-index:900;width:min(400px,calc(100vw - 28px));max-height:calc(100vh - 110px);overflow:auto;padding:0 16px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-lg)}#toast{position:fixed;left:50%;bottom:24px;z-index:1200;transform:translate(-50%,20px);padding:11px 15px;border-radius:10px;background:#101828;color:#fff;font-weight:650;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}#toast.success{background:#067647}#toast.error{background:#b42318}

/* Dark theme */
body.dark-mode{--bg:#0b1120;--surface:#111827;--surface-2:#172033;--surface-3:#202a3d;--card:#111827;--card-soft:#172033;--border:#263247;--border2:#36445c;--text:#eef2ff;--muted:#aab4c7;--dim:#718096;--accent-soft:#242650;color-scheme:dark;background:var(--bg);color:var(--text)}body.dark-mode .topbar{background:rgba(17,24,39,.88)}body.dark-mode .sidebar,body.dark-mode table,body.dark-mode thead,body.dark-mode .modal-head{background:var(--surface)}body.dark-mode tbody tr:hover{background:#151e2f}body.dark-mode th,body.dark-mode td{border-color:var(--border);color:#dbe4f3}body.dark-mode .tab.active{background:#242650;border-color:#454785;color:#d9d8ff}body.dark-mode .toolbar input,body.dark-mode .toolbar select,body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background:#0f172a;color:#fff;border-color:var(--border2)}body.dark-mode .mini.danger{background:#351b1d;border-color:#5d2529}body.dark-mode .login-card{background:#111827;border-color:#263247}

/* Responsive */
@media(max-width:1200px){.system-grid,.feature-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.notice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top-actions #printBtn{display:none}}
@media(max-width:900px){:root{--topbar-h:68px}.app-layout{display:block;padding-top:var(--topbar-h)}.topbar{position:fixed;inset:0 0 auto;height:var(--topbar-h);padding:0 15px}.sidebar{position:sticky;top:var(--topbar-h);z-index:80;width:100%;height:auto;display:flex;gap:7px;overflow-x:auto;padding:9px 12px;border-right:0;border-bottom:1px solid var(--border)}.sidebar-label{display:none}.tab{width:auto;min-width:max-content;min-height:39px;margin:0;padding:8px 11px}.tab:hover{transform:none}.tab-badge{display:none}.main-content{padding:20px 16px 36px}.top-actions #exportBtn,.top-actions #logoutBtn{display:none}.hero-stats{grid-template-columns:repeat(3,minmax(190px,1fr));overflow-x:auto;padding-bottom:3px}.storage-layout,.master-layout,.settings-feature-layout,.saas-content-grid{grid-template-columns:1fr}}
@media(max-width:640px){.brand-text small{display:none}.brand-text h1{font-size:17px}.logo{width:38px;height:38px}.top-actions{gap:5px}.top-actions #userChip,.top-actions #themeBtn{display:none}.top-actions .ghost{width:38px;padding:0;font-size:0}.top-actions .ghost:first-letter{font-size:15px}.main-content{padding:16px 12px 30px}.hero-stats{grid-template-columns:repeat(3,230px);gap:10px}.stat-card{min-height:96px;padding:15px}.page-header,.saas-page-head{align-items:flex-start}.page-title-wrap{align-items:flex-start}.page-header h3,.saas-page-head h3{font-size:19px}.page-badge{width:34px;height:34px}.page-header>.primary{min-width:42px;padding:0 11px;font-size:0}.page-header>.primary::first-letter{font-size:18px}.toolbar,.filter-bar{flex-wrap:wrap}.toolbar input:first-child{min-width:100%;width:100%}.toolbar input[type=date],.toolbar select{flex:1}.system-grid,.feature-kpis,.notice-grid{grid-template-columns:1fr}.form-grid,.master-form{grid-template-columns:1fr}.field.full{grid-column:auto}.modal{padding:10px}.modal-card{border-radius:16px}.modal-head,.modal-body{padding:16px}.form-actions{padding:13px 16px}.quick-actions{grid-template-columns:1fr}.table-wrap{border-radius:12px}th,td{padding:11px 12px}.popup{right:12px;bottom:12px}.notice-actions{flex-wrap:wrap}}

@media print{.topbar,.sidebar,.toolbar,.page-header .primary,.actions,.hero-stats{display:none!important}.app-layout{display:block}.main-content{padding:0}.table-wrap{overflow:visible;border:0;box-shadow:none}body{background:#fff;color:#000}th,td{font-size:9px;padding:5px}}
.dashboard-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;margin-top:18px}.dashboard-welcome h4{margin:5px 0 6px;font-size:20px}.dashboard-welcome p{margin:0;color:var(--muted)}
.quick-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.quick-page-card{display:flex;align-items:center;gap:16px;text-align:left;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;transition:.2s}.quick-page-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}.quick-page-card>b{display:grid;place-items:center;min-width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-size:22px}.quick-page-card span{display:flex;flex-direction:column;gap:5px}.quick-page-card strong{font-size:15px}.quick-page-card small{color:var(--muted);font-size:12px}
.report-filter-card{padding:18px;margin-bottom:18px}.report-filters{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr auto;gap:12px;align-items:end}.report-filters label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:var(--muted)}.report-filters input,.report-filters select{width:100%}.report-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.report-section{padding:0;overflow:hidden;margin-bottom:18px}.report-section .card-head{padding:18px 20px;border-bottom:1px solid var(--border)}.report-section .table-wrap{border:0;border-radius:0}.login-activity-card{margin-top:18px}.custom-date-field{display:none!important}.reports-custom .custom-date-field{display:flex!important}.reports-custom #reportDate{opacity:.5;pointer-events:none}
@media(max-width:1000px){.quick-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filters{grid-template-columns:repeat(2,1fr)}.report-filters .primary{width:100%}}
@media(max-width:650px){.dashboard-welcome{align-items:flex-start;flex-direction:column}.quick-page-grid,.report-kpis{grid-template-columns:1fr}.report-filters{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.report-filter-card,#reportPrint,.report-section .ghost{display:none!important}#reportsPanel{display:block!important}.main-content{margin:0!important;padding:0!important}.report-section{break-inside:avoid}}

/* Compact accessible checkbox used in record forms */
.field .checkbox-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-width: 300px;
  max-width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border2);
  border-radius: 11px;
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
}
.field .checkbox-control:hover { border-color: var(--accent); }
.field .checkbox-control input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.checkbox-box {
  position: relative;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  border: 2px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  transition: .16s ease;
}
.checkbox-control input:checked + .checkbox-box {
  border-color: var(--accent);
  background: var(--accent);
}
.checkbox-control input:checked + .checkbox-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-control input:focus-visible + .checkbox-box {
  box-shadow: 0 0 0 3px rgba(99,91,255,.22);
}
.checkbox-copy { display: grid; gap: 2px; line-height: 1.25; }
.checkbox-copy strong { color: var(--text); font-size: 13px; font-weight: 750; }
.checkbox-copy small { color: var(--muted); font-size: 11px; font-weight: 500; }
@media (max-width: 560px) {
  .field .checkbox-control { width: 100%; min-width: 0; }
}

/* === Final bugfix overrides: toast / notifications === */
body #toast{
  position:fixed !important;
  right:20px !important;
  left:auto !important;
  top:auto !important;
  bottom:20px !important;
  z-index:3000 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:auto !important;
  min-width:180px !important;
  max-width:min(420px, calc(100vw - 32px)) !important;
  min-height:auto !important;
  max-height:none !important;
  height:auto !important;
  padding:12px 16px !important;
  border-radius:12px !important;
  background:#101828 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 48px rgba(16,24,40,.28) !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  word-break:break-word !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(14px) !important;
  overflow:hidden !important;
}
body #toast.show{opacity:1 !important;transform:translateY(0) !important;}
body #toast.success{background:#067647 !important;border-color:#0e9f6e !important;}
body #toast.error{background:#b42318 !important;border-color:#f04438 !important;}
@media(max-width:640px){body #toast{right:12px !important;bottom:12px !important;max-width:calc(100vw - 24px) !important;}}

/* Email QR attachment option */
.qr-mail-option{margin-top:-2px}
.qr-email-checkbox{width:100%;box-sizing:border-box;cursor:pointer}
.qr-email-checkbox .checkbox-copy small{display:block;margin-top:3px;color:var(--muted);font-weight:500}
.qr-email-checkbox:has(input:checked){border-color:#918bff;background:rgba(99,91,255,.08)}

/* Compact dual register numbering settings */
.numbering-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.numbering-block{display:grid;gap:7px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.numbering-block label{margin:0}.numbering-block input{min-height:40px}.numbering-block .field-help{min-height:16px}@media(max-width:700px){.numbering-grid{grid-template-columns:1fr}}


/* Separate visible row index from configured register serial number */
.index-cell{font-weight:800;color:var(--muted);text-align:center;min-width:54px;white-space:nowrap}
@media(max-width:900px){.index-cell{min-width:44px}}


/* Recipient picker layout fix: prevent generic .field label/input styles
   from turning checkbox cards into large stacked blocks. */
.recipient-field .recipient-list .recipient-option{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin:0 !important;
  padding:10px 12px !important;
  box-sizing:border-box;
  min-height:auto !important;
  width:100%;
  cursor:pointer;
}
.recipient-field .recipient-list .recipient-option input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:16px !important;
  height:16px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:2px 0 0 0 !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  flex:0 0 16px;
  accent-color:#5c7cff;
}
.recipient-field .recipient-list .recipient-option > div{
  min-width:0;
  flex:1;
}
.recipient-field .recipient-list .recipient-option strong{
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.35;
}
.recipient-field .recipient-list .recipient-option span,
.recipient-field .recipient-list .recipient-option small{
  display:block;
  margin-top:3px;
  line-height:1.35;
}


/* ═══════════════════════════════════════════════════════════════
   Dispatch email modal — polished SaaS recipient experience
   ═══════════════════════════════════════════════════════════════ */
.mail-card{width:min(860px,96vw);overflow:visible}
.mail-card .modal-head{padding:20px 22px;border-bottom:1px solid var(--border)}
.mail-card #mailForm{padding:20px 22px 0;gap:16px}
.mail-card .form-actions{margin:2px -22px 0;padding:15px 22px;background:var(--surface-2);border-top:1px solid var(--border);border-radius:0 0 18px 18px}
.recipient-dropdown-trigger{min-height:48px;padding:0 14px;border-radius:12px;background:var(--surface);font-weight:700}
.recipient-dropdown-panel{padding:14px;border-radius:14px;border:1px solid var(--border2);background:var(--surface);box-shadow:0 18px 50px rgba(15,23,42,.18)}
.recipient-title-group{display:flex;align-items:center;gap:8px}
.recipient-count-badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:850}
.recipient-tools .mini{min-height:32px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:750}
.recipient-tools .mini:hover{border-color:var(--accent);color:var(--accent)}
.recipient-search-wrap{display:flex;align-items:center;gap:9px;margin:10px 0;padding:0 11px;border:1px solid var(--border2);border-radius:10px;background:var(--surface-2)}
.recipient-search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
.recipient-search-wrap>span{color:var(--dim);font-size:18px}
.recipient-search-wrap input{width:100%!important;min-height:40px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--text)!important}
.recipient-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:280px;padding:6px;border:0;background:transparent}
.recipient-field .recipient-list .recipient-option{position:relative;min-height:76px!important;padding:12px!important;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);box-shadow:none}
.recipient-field .recipient-list .recipient-option:hover{transform:translateY(-1px);border-color:#9b96ff;background:var(--surface);box-shadow:0 8px 22px rgba(15,23,42,.08)}
.recipient-field .recipient-list .recipient-option.checked{border-color:var(--accent);background:rgba(99,91,255,.08);box-shadow:0 0 0 2px rgba(99,91,255,.10)}
.recipient-field .recipient-list .recipient-option input[type="checkbox"]{width:17px!important;height:17px!important;flex-basis:17px;accent-color:var(--accent)}
.recipient-option strong{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recipient-option span{font-size:11px!important;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recipient-option small{display:inline-block!important;margin-top:6px!important;padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--dim)!important;font-size:9px!important;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.recipient-empty-search{padding:22px;text-align:center;color:var(--muted);font-size:12px}
.recipient-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.recipient-chips[hidden]{display:none!important}
.recipient-chip{display:inline-flex;align-items:center;gap:7px;max-width:210px;min-height:30px;padding:4px 8px 4px 10px;border:1px solid rgba(99,91,255,.25);border-radius:999px;background:rgba(99,91,255,.08);color:var(--accent);cursor:pointer}
.recipient-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:750}
.recipient-chip b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(99,91,255,.14);font-size:12px}
.recipient-chip:hover{border-color:var(--accent);background:rgba(99,91,255,.13)}
.recipient-summary{margin-top:6px;display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}
.recipient-summary::before{content:"●";color:var(--accent);font-size:8px}
.mail-attachment-info{grid-column:1/-1;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);line-height:1.55}
.mail-attachment-info small{color:var(--muted)}
.qr-mail-option{margin-top:-3px}
.qr-email-checkbox{border-radius:12px!important;background:var(--surface)!important}
#sendMailBtn{min-width:150px;justify-content:center}
body.dark-mode .recipient-dropdown-panel{box-shadow:0 22px 60px rgba(0,0,0,.38)}
body.dark-mode .recipient-field .recipient-list .recipient-option.checked{background:rgba(99,91,255,.16)}
@media(max-width:650px){
  .mail-card #mailForm{padding:16px 16px 0}
  .mail-card .form-actions{margin-left:-16px;margin-right:-16px;padding:13px 16px}
  .recipient-head{flex-direction:column;align-items:stretch}
  .recipient-title-group{justify-content:space-between}
  .recipient-tools{display:grid;grid-template-columns:1fr 1fr}
  .recipient-list{grid-template-columns:1fr;max-height:42vh}
  .recipient-dropdown-panel{left:10px!important;right:10px!important;top:12%!important;max-height:72vh!important}
  .recipient-chip{max-width:100%}
}

/* ======================================================================
   AUTHORITATIVE THEME + REPORTS LAYER V2
   This final layer intentionally overrides older legacy theme rules.
   ====================================================================== */
:root,
html[data-theme="light"]{
  --ui-bg:#f4f7fb;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8fafc;
  --ui-surface-3:#eef2ff;
  --ui-border:#e3e8f0;
  --ui-border-strong:#cfd8e6;
  --ui-text:#172033;
  --ui-muted:#667085;
  --ui-dim:#98a2b3;
  --ui-hover:#f1f5f9;
  --ui-input:#ffffff;
  --ui-table-head:#f8fafc;
  --ui-shadow:0 10px 28px rgba(16,24,40,.08);
  --ui-shadow-soft:0 2px 8px rgba(16,24,40,.05);
  --ui-accent:#635bff;
  --ui-accent-soft:#eeecff;
  --ui-success:#079455;
  --ui-warning:#dc6803;
  --ui-danger:#d92d20;
  color-scheme:light;
}
html[data-theme="dark"],body.dark-mode{
  --ui-bg:#08111f;
  --ui-surface:#101a2a;
  --ui-surface-2:#152237;
  --ui-surface-3:#1b2a43;
  --ui-border:#263850;
  --ui-border-strong:#3b506d;
  --ui-text:#edf4ff;
  --ui-muted:#a9b7ca;
  --ui-dim:#74849b;
  --ui-hover:#1a2a42;
  --ui-input:#0c1727;
  --ui-table-head:#121f32;
  --ui-shadow:0 16px 40px rgba(0,0,0,.32);
  --ui-shadow-soft:0 3px 12px rgba(0,0,0,.22);
  --ui-accent:#8b83ff;
  --ui-accent-soft:#262650;
  --ui-success:#36c98f;
  --ui-warning:#f5a34b;
  --ui-danger:#ff746b;
  color-scheme:dark;
}
html,body{background:var(--ui-bg)!important;color:var(--ui-text)!important}
body,.app-layout,.main-content,.panel{background:var(--ui-bg)!important;color:var(--ui-text)!important}
.topbar,.sidebar,.modal-card,.settings-card,.stat-card,.system-card,.quick-card,.list-card,
.activity-card,.notification-drawer,.toolbar,.filter-bar,.notice-card,.backup-table-wrap,
.table-wrap,.quick-page-card,.dashboard-welcome,.report-section,.report-filter-card{
  background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;
}
.topbar{background:color-mix(in srgb,var(--ui-surface) 92%,transparent)!important;box-shadow:0 1px 0 var(--ui-border)!important}
.sidebar{box-shadow:1px 0 0 var(--ui-border)!important}
.brand-text h1,.page-header h3,.saas-page-head h3,.card-head h4,.settings-title h4,.section-head h4,
.modal-head h3,.stat-num,.quick-page-card strong,.dashboard-welcome h4,.report-section h4,
.field label,.master-form label,.settings-card label,.switch-line span{color:var(--ui-text)!important}
.brand-text small,.page-header h3 small,.saas-page-head h3 small,.stat-lbl,.stat-hint,.field-help,
.quick-page-card small,.dashboard-welcome p,.report-filters label,.empty,.backup-row small,.checkbox-copy small{
  color:var(--ui-muted)!important
}
.tab{color:var(--ui-muted)!important}
.tab:hover{background:var(--ui-hover)!important;color:var(--ui-text)!important}
.tab.active{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important;border-color:color-mix(in srgb,var(--ui-accent) 38%,var(--ui-border))!important;box-shadow:inset 3px 0 0 var(--ui-accent)!important}
.tab-icon{stroke:currentColor!important}
.page-badge,.quick-page-card>b{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important}
.status-chip{background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface))!important;color:var(--ui-success)!important;border-color:color-mix(in srgb,var(--ui-success) 32%,var(--ui-border))!important}
.ghost,.mini,.icon,.icon-btn,.attach-chip,.editor-tools button,#userChip{
  background:var(--ui-surface-2)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;
}
.ghost:hover,.mini:hover,.icon:hover,.icon-btn:hover,.attach-chip:hover,.editor-tools button:hover{
  background:var(--ui-hover)!important;border-color:var(--ui-border-strong)!important
}
input,textarea,select,.field input,.field textarea,.field select,.settings-card input,.settings-card textarea,.settings-card select,.master-form input,.master-form textarea,.master-form select{
  background:var(--ui-input)!important;color:var(--ui-text)!important;border-color:var(--ui-border-strong)!important
}
input::placeholder,textarea::placeholder{color:var(--ui-dim)!important}
input:focus,textarea:focus,select:focus{border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 20%,transparent)!important}
select option{background:var(--ui-input)!important;color:var(--ui-text)!important}
table,thead,tbody,tr,th,td{border-color:var(--ui-border)!important}
table{background:var(--ui-surface)!important;color:var(--ui-text)!important}
thead,th{background:var(--ui-table-head)!important;color:var(--ui-muted)!important}
td{background:var(--ui-surface)!important;color:var(--ui-text)!important}
tbody tr:hover td{background:var(--ui-hover)!important}
.schedule-block,.helper-box,.editor-tools,.file-preview,.security-note,.info-box,.feature-notice{
  background:var(--ui-surface-2)!important;color:var(--ui-muted)!important;border-color:var(--ui-border)!important
}
.checkbox-box{background:var(--ui-input)!important;border-color:var(--ui-border-strong)!important}
.checkbox-control input:checked + .checkbox-box{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}

/* Reliable theme button: SVG icon and text always change together. */
#themeBtn.theme-toggle{min-width:132px;gap:8px;white-space:nowrap}
#themeBtn .theme-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#themeBtn .theme-label{font-size:12px;font-weight:750}
#themeBtn .theme-auto{padding:2px 6px;border-radius:999px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:9px;font-weight:850;letter-spacing:.04em}

/* Dashboard icon surfaces remain readable in both themes. */
.stat-icon.blue{background:color-mix(in srgb,#635bff 15%,var(--ui-surface))!important;color:#817aff!important}
.stat-icon.cyan{background:color-mix(in srgb,#0891b2 15%,var(--ui-surface))!important;color:#22b8d6!important}
.stat-icon.green{background:color-mix(in srgb,#079455 15%,var(--ui-surface))!important;color:#28bd7e!important}
.stat-icon.amber{background:color-mix(in srgb,#dc6803 15%,var(--ui-surface))!important;color:#f29b45!important}

/* Reports page polish */
#reportsPanel .saas-page-head{margin-bottom:16px}
#reportsPanel .report-filter-card{padding:20px;border-radius:16px;box-shadow:var(--ui-shadow-soft)!important}
#reportsPanel .report-filters{gap:14px}
#reportsPanel .report-filters label{font-size:11px;font-weight:800;letter-spacing:.025em}
#reportsPanel .report-filters input,#reportsPanel .report-filters select{min-height:44px;border-radius:10px}
#reportsPanel .report-kpis{gap:16px}
#reportsPanel .report-kpis .stat-card{min-height:104px;border-radius:16px;box-shadow:var(--ui-shadow-soft)!important}
#reportsPanel .report-section{border:1px solid var(--ui-border)!important;border-radius:16px!important;overflow:hidden;box-shadow:var(--ui-shadow-soft)!important}
#reportsPanel .report-section .card-head{padding:17px 20px;background:var(--ui-surface-2)!important;border-bottom:1px solid var(--ui-border)!important}
#reportsPanel .report-section .table-wrap{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:auto}
#reportsPanel table{min-width:760px}
#reportsPanel th{position:sticky;top:0;z-index:2;font-size:10px;text-transform:uppercase;letter-spacing:.055em;white-space:nowrap}
#reportsPanel td{font-size:12px;line-height:1.45;vertical-align:top}
#reportsPanel .empty{padding:30px!important;text-align:center!important;background:var(--ui-surface)!important}
#reportsPanel #reportPrint,#reportsPanel .report-section .ghost{background:var(--ui-surface-2)!important}

/* Smooth change without flashing or unreadable intermediate states. */
body,.topbar,.sidebar,.settings-card,.stat-card,.quick-page-card,.report-section,input,textarea,select,button,td,th{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease
}
@media(max-width:640px){
  #themeBtn.theme-toggle{display:inline-flex!important;width:38px!important;min-width:38px!important;padding:0!important}
  #themeBtn .theme-label,#themeBtn .theme-auto{display:none!important}
  #reportsPanel .report-filter-card{padding:14px}
  #reportsPanel .report-section .card-head{align-items:flex-start;flex-direction:column}
}
@media print{
  html,body,#reportsPanel,#reportsPanel *{color:#111!important;background:#fff!important;box-shadow:none!important}
  #reportsPanel .report-section{border:1px solid #d0d5dd!important;break-inside:avoid}
  #reportsPanel th{position:static!important;background:#f2f4f7!important;color:#344054!important}
  #reportsPanel td{color:#111!important;border-color:#d0d5dd!important}
}

/* ═══════════════════════════════════════════════════════════════════
   REGISTER REPORTS V3 — professional report workspace
   ═══════════════════════════════════════════════════════════════════ */
#reportsPanel{--report-blue:#4f46e5;--report-cyan:#0891b2;--report-green:#079455;--report-violet:#7c3aed}
#reportsPanel .report-page-head{align-items:center}
#reportsPanel .report-head-actions{display:flex;align-items:center;gap:9px}
#reportsPanel .report-filter-card{padding:0!important;overflow:hidden}
#reportsPanel .report-filter-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid var(--ui-border);background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 8%,var(--ui-surface)),var(--ui-surface))}
#reportsPanel .report-filter-top small{display:block;margin-bottom:4px;color:var(--ui-accent);font-size:9px;font-weight:850;letter-spacing:.12em}
#reportsPanel .report-filter-top h4{margin:0 0 4px;color:var(--ui-text);font-size:17px}
#reportsPanel .report-filter-top p{margin:0;color:var(--ui-muted);font-size:12px}
#reportsPanel .report-quick-ranges{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
#reportsPanel .report-quick-ranges .mini{min-height:34px;padding:7px 11px}
#reportsPanel .report-filters{padding:18px 22px;margin:0;background:var(--ui-surface)}
#reportsPanel .report-generated-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;border-top:1px solid var(--ui-border);background:var(--ui-surface-2)}
#reportsPanel .report-generated-bar>div{display:flex;align-items:center;gap:8px;min-width:0}
#reportsPanel .report-generated-bar strong{color:var(--ui-text);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reportsPanel .report-generated-bar small{padding-left:8px;border-left:1px solid var(--ui-border);color:var(--ui-muted);font-size:10px;white-space:nowrap}
#reportsPanel .report-live-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-success) 16%,transparent);flex:none}
#reportsPanel .report-search{position:relative;display:flex;align-items:center;width:min(390px,45vw);margin:0!important}
#reportsPanel .report-search>span{position:absolute;left:12px;color:var(--ui-muted);font-size:17px;pointer-events:none}
#reportsPanel .report-search input{height:40px!important;min-height:40px!important;padding:0 38px 0 36px!important;border-radius:999px!important;font-size:12px}
#reportsPanel .report-search button{position:absolute;right:7px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent!important;color:var(--ui-muted)!important;font-size:18px;cursor:pointer}
#reportsPanel .report-search button:hover{background:var(--ui-hover)!important;color:var(--ui-text)!important}
#reportsPanel .report-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0}
#reportsPanel .report-kpi{display:flex;align-items:center;gap:14px;padding:17px 18px!important;min-height:112px!important;overflow:hidden;position:relative}
#reportsPanel .report-kpi::after{content:"";position:absolute;right:-20px;bottom:-28px;width:88px;height:88px;border-radius:50%;background:currentColor;opacity:.045}
#reportsPanel .report-kpi-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:19px;font-weight:800;flex:none}
#reportsPanel .report-kpi.total .report-kpi-icon{background:color-mix(in srgb,var(--report-violet) 14%,var(--ui-surface));color:var(--report-violet)}
#reportsPanel .report-kpi.dispatch .report-kpi-icon{background:color-mix(in srgb,var(--report-blue) 14%,var(--ui-surface));color:var(--report-blue)}
#reportsPanel .report-kpi.received .report-kpi-icon{background:color-mix(in srgb,var(--report-green) 14%,var(--ui-surface));color:var(--report-green)}
#reportsPanel .report-kpi.emails .report-kpi-icon{background:color-mix(in srgb,var(--report-cyan) 14%,var(--ui-surface));color:var(--report-cyan)}
#reportsPanel .report-kpi .stat-num{font-size:26px;line-height:1}
#reportsPanel .report-kpi .stat-lbl{margin-top:5px;font-size:11px;font-weight:800;color:var(--ui-text)!important}
#reportsPanel .report-kpi .stat-hint{margin-top:3px;font-size:10px;color:var(--ui-muted)!important}
#reportsPanel .report-section{margin-bottom:20px!important}
#reportsPanel .report-section .card-head{min-height:72px}
#reportsPanel .report-section-title{display:flex;align-items:center;gap:12px;min-width:0}
#reportsPanel .report-section-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ui-accent-soft);color:var(--ui-accent);font-weight:850;flex:none}
#reportsPanel .report-section-title h4{margin-top:2px!important}
#reportsPanel .report-count-badge{padding:4px 8px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-muted);font-size:9px;font-weight:800;white-space:nowrap}
#reportsPanel table{width:100%;border-collapse:separate;border-spacing:0}
#reportsPanel th{height:44px;padding:10px 13px!important;border-bottom:1px solid var(--ui-border)!important}
#reportsPanel td{padding:12px 13px!important;border-bottom:1px solid color-mix(in srgb,var(--ui-border) 74%,transparent)!important;max-width:260px;overflow-wrap:anywhere}
#reportsPanel tbody tr:last-child td{border-bottom:0!important}
#reportsPanel .report-row-index{width:42px;color:var(--ui-dim)!important;text-align:center;font-weight:750}
#reportsPanel .report-serial{display:inline-flex;align-items:center;padding:4px 7px;border-radius:7px;background:var(--ui-surface-2);color:var(--ui-accent);font-size:10px;font-weight:850;white-space:nowrap}
#reportsPanel .report-subject{min-width:190px;font-weight:650;color:var(--ui-text)!important}
#reportsPanel .report-empty{height:180px!important}
#reportsPanel .report-empty span,#reportsPanel .report-empty b,#reportsPanel .report-empty small{display:block}
#reportsPanel .report-empty span{margin-bottom:8px;font-size:28px;color:var(--ui-dim)}
#reportsPanel .report-empty b{margin-bottom:4px;color:var(--ui-text);font-size:13px}
#reportsPanel .report-empty small{color:var(--ui-muted);font-size:11px}
@media(max-width:1100px){#reportsPanel .report-kpis{grid-template-columns:repeat(2,1fr)}#reportsPanel .report-filters{grid-template-columns:repeat(2,1fr)}#reportsPanel .report-filters .primary{width:100%}}
@media(max-width:720px){#reportsPanel .report-page-head,#reportsPanel .report-filter-top,#reportsPanel .report-generated-bar{align-items:flex-start;flex-direction:column}#reportsPanel .report-head-actions{width:100%}#reportsPanel .report-head-actions button{flex:1}#reportsPanel .report-quick-ranges{justify-content:flex-start}#reportsPanel .report-filters{grid-template-columns:1fr;padding:15px}#reportsPanel .report-filter-top,#reportsPanel .report-generated-bar{padding:15px}#reportsPanel .report-search{width:100%}#reportsPanel .report-kpis{grid-template-columns:1fr 1fr;gap:10px}#reportsPanel .report-kpi{min-height:98px!important;padding:14px!important}#reportsPanel .report-section .card-head{flex-direction:row!important;align-items:center!important}#reportsPanel .report-count-badge{display:none}}
@media(max-width:480px){#reportsPanel .report-kpis{grid-template-columns:1fr}#reportsPanel .report-section-title{gap:8px}#reportsPanel .report-section-icon{display:none}#reportsPanel .report-section .card-head{padding:13px 14px!important}#reportsPanel .report-section .ghost{padding:7px 9px;font-size:10px}}
@media print{#reportsPanel .report-head-actions,#reportsPanel .report-filter-card{display:none!important}#reportsPanel .report-kpis{grid-template-columns:repeat(4,1fr)!important}#reportsPanel .report-kpi{min-height:70px!important;padding:9px!important;border:1px solid #d0d5dd!important}#reportsPanel .report-kpi-icon{display:none!important}#reportsPanel .report-section{page-break-inside:auto!important}#reportsPanel .report-section .card-head{min-height:auto!important;padding:8px!important}#reportsPanel .report-section .ghost{display:none!important}#reportsPanel table{min-width:0!important;font-size:8px!important}#reportsPanel th,#reportsPanel td{padding:4px!important;font-size:8px!important}}


/* REGISTER REPORTS V4 - PDF export controls */
#reportsPanel .report-section-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#reportsPanel .report-pdf-btn,#reportsPanel [id$="ReportPdf"]{border-color:color-mix(in srgb,#dc2626 28%,var(--ui-border))!important;color:#dc2626!important;background:color-mix(in srgb,#dc2626 6%,var(--ui-surface))!important}
#reportsPanel .report-pdf-btn:hover,#reportsPanel [id$="ReportPdf"]:hover{border-color:#dc2626!important;background:color-mix(in srgb,#dc2626 12%,var(--ui-surface))!important;transform:translateY(-1px)}
body.dark-mode #reportsPanel .report-pdf-btn,body.dark-mode #reportsPanel [id$="ReportPdf"]{color:#fca5a5!important;border-color:rgba(248,113,113,.34)!important;background:rgba(127,29,29,.18)!important}
@media(max-width:720px){#reportsPanel .report-section-actions{width:auto;justify-content:flex-end}#reportsPanel .report-section-actions .ghost{padding:7px 9px;font-size:10px}}
@media print{#reportsPanel .report-pdf-btn,#reportsPanel [id$="ReportPdf"],#reportsPanel .report-section-actions{display:none!important}}

/* Full Hindi / English language switch */
.language-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--border);border-radius:11px;background:var(--card,rgba(255,255,255,.72));box-shadow:0 1px 3px rgba(15,23,42,.06)}
.lang-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:800;line-height:1;padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.18s ease}
.lang-btn:hover{color:var(--text);background:var(--surface-2,rgba(148,163,184,.12))}
.lang-btn.active{background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.22)}
html[lang="hi"] body{font-family:"Noto Sans Devanagari","Mangal","Segoe UI",Arial,sans-serif}
html[lang="hi"] .tab,html[lang="hi"] button,html[lang="hi"] input,html[lang="hi"] select,html[lang="hi"] textarea{letter-spacing:0}
@media(max-width:900px){.language-switch{margin-left:auto}.lang-btn{padding:7px 8px}.top-actions #bellBtn{display:none}}
@media(max-width:560px){.language-switch .lang-btn{font-size:11px;padding:7px}.top-actions #userChip{display:none}}

/* V8 number change confirmation */
.number-confirm{display:flex!important;align-items:center;gap:9px;margin:10px 0 2px;font-weight:700;cursor:pointer;color:var(--text,#172033)}
.number-confirm input{width:18px!important;height:18px!important;min-height:18px!important;margin:0;accent-color:#5b5cf0}
.number-confirm span{font-size:13px}


/* V10: clear saved check indicator after number update */
.number-save-result{display:none;margin-top:8px;padding:8px 10px;border:1px solid rgba(22,163,74,.28);border-radius:9px;background:rgba(22,163,74,.10);color:#15803d;font-size:12px;font-weight:800;line-height:1.25}
.number-save-result.show{display:block;animation:numberSavedIn .22s ease-out}
.saved-button{background:#16a34a!important;box-shadow:0 8px 20px rgba(22,163,74,.25)!important}
@keyframes numberSavedIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
body.dark .number-save-result{color:#86efac;border-color:rgba(74,222,128,.35);background:rgba(22,163,74,.16)}

/* V12 persistent numbering save state + checkbox-controlled editing */
.numbering-block input.number-locked:disabled{opacity:1;cursor:not-allowed;background:rgba(148,163,184,.10);color:var(--muted);border-style:dashed}
.number-confirm:has(input:checked){color:#15803d}
body.dark .number-confirm:has(input:checked){color:#86efac}
.number-save-result.show{display:block!important}

/* V16 Box Number serial allocation */
.box-number-field{margin-top:2px;padding:14px;border:1px dashed var(--border);border-radius:14px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.box-number-field input{max-width:240px;font-weight:700}
.box-number-hint{margin-top:8px;padding:9px 11px;border-radius:10px;background:rgba(16,185,129,.10);color:#047857;font-weight:700;font-size:12px}
.serial-auto-note{display:block;margin-top:6px;color:var(--muted);font-size:12px}
[data-theme="dark"] .box-number-hint{color:#6ee7b7;background:rgba(16,185,129,.16)}
.report-email-modal{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:9999;display:grid;place-items:center;padding:20px}.report-email-card{width:min(680px,96vw);max-height:90vh;overflow:auto;background:var(--card,#fff);border-radius:22px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.28)}.report-email-card h3{margin:0 0 4px}.report-email-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.report-email-grid label,.report-email-card>label{display:grid;gap:7px;font-weight:650}.report-email-card select,.report-email-card input,.report-email-card textarea{width:100%;padding:11px 12px;border:1px solid var(--border,#d0d5dd);border-radius:10px;background:var(--input,#fff);color:inherit}.report-recipient-box{border:1px solid var(--border,#d0d5dd);border-radius:12px;padding:10px;max-height:190px;overflow:auto;display:grid;gap:6px}.report-recipient-box label{display:flex;gap:9px;align-items:center;font-weight:500}.report-email-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}@media(max-width:650px){.report-email-grid{grid-template-columns:1fr}}

/* V25 English-to-Hindi transliteration typing */
.hindi-typing-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(37,99,235,.24);border-radius:14px;background:rgba(37,99,235,.07);margin-bottom:2px}
.hindi-typing-toolbar>div{display:grid;gap:3px}.hindi-typing-toolbar strong{font-size:14px}.hindi-typing-toolbar small{color:var(--muted);font-size:12px}
.hindi-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}.hindi-toggle input{position:absolute;opacity:0;pointer-events:none}.hindi-toggle span{width:42px;height:24px;border-radius:999px;background:#94a3b8;position:relative;transition:.2s}.hindi-toggle span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.2s}.hindi-toggle.active span{background:#2563eb}.hindi-toggle.active span:after{transform:translateX(18px)}.hindi-toggle b{min-width:26px;font-size:12px;color:var(--muted)}.hindi-toggle.active b{color:#2563eb}
.hindi-converting{outline:2px solid rgba(37,99,235,.35)!important;outline-offset:1px}.hindi-converting::placeholder{color:#2563eb}
[data-theme="dark"] .hindi-typing-toolbar,body.dark-mode .hindi-typing-toolbar{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.3)}
@media(max-width:600px){.hindi-typing-toolbar{align-items:flex-start}.hindi-typing-toolbar small{max-width:220px}}


/* V26 compact Hindi typing control */
.hindi-typing-toolbar{width:min(100%,300px);min-height:48px;align-self:start;justify-self:start;gap:10px;padding:7px 10px;border-radius:10px;margin:0;background:rgba(37,99,235,.06)}
.hindi-typing-toolbar>div{display:flex;align-items:center;gap:7px;min-width:0}
.hindi-typing-toolbar strong{font-size:13px;white-space:nowrap}
.hindi-typing-toolbar small{font-size:10px;line-height:1.15;white-space:nowrap}
.hindi-toggle{gap:6px;margin-left:auto}
.hindi-toggle span{width:36px;height:20px}
.hindi-toggle span:after{width:14px;height:14px;left:3px;top:3px}
.hindi-toggle.active span:after{transform:translateX(16px)}
.hindi-toggle b{min-width:22px;font-size:10px}
@media(max-width:600px){.hindi-typing-toolbar{width:100%;min-height:44px;padding:6px 9px;align-items:center}.hindi-typing-toolbar small{display:none}}


/* V27 Form alignment fix for Hindi typing toolbar */
.hindi-typing-toolbar--full{
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  min-height:52px;
  margin:0 0 2px 0;
  justify-self:stretch;
  align-self:start;
}
#entryForm .hindi-typing-toolbar--full + .field{align-self:start}
@media (max-width:600px){
  .hindi-typing-toolbar--full{min-height:46px}
}


/* V28 Letters Received Hindi toolbar */
.received-hindi-toolbar{grid-column:1/-1}
.received-hindi-toolbar small{overflow:hidden;text-overflow:ellipsis}


/* V34 Login & Roles render recovery */
body.is-admin-user #featureSettingsPanel.active .settings-feature-layout{display:grid!important}
body.is-admin-user #featureSettingsForm,
body.is-admin-user #userForm{display:block!important}
body.is-limited-user #featureSettingsForm,
body.is-limited-user #userForm{display:none!important}
#featureSettingsPanel .settings-feature-layout{align-items:start}
#featureSettingsPanel .user-list-wrap{margin-top:20px}


/* V36 Linked Received From display */
.linked-received-from{display:inline-flex;flex-direction:column;gap:2px;min-width:100px}
.linked-received-from small{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.linked-received-from:not(:has(small)){display:inline}

/* V42 Sender sent-recipient tooltip */
.sender-select-wrap{display:flex;align-items:center;gap:9px;width:100%}
.sender-select-wrap>select{flex:1;min-width:0}
.sender-table-value{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:26px}
.sender-table-value>span{font-size:11px;color:var(--muted);font-weight:700}
.sender-tip-trigger{appearance:none;border:1px solid rgba(37,99,235,.28);background:rgba(37,99,235,.08);color:#2563eb;border-radius:8px;min-height:32px;padding:5px 9px;font:800 11px/1.1 inherit;cursor:help;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sender-tip-trigger:hover,.sender-tip-trigger:focus-visible{background:rgba(37,99,235,.14);outline:2px solid rgba(37,99,235,.18);outline-offset:2px}
.sender-tip-trigger--compact{width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;font-size:12px}
.sender-tooltip-portal{position:fixed;left:0;top:0;width:min(330px,calc(100vw - 20px));max-height:min(300px,calc(100vh - 20px));overflow:auto;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card,#fff);box-shadow:0 18px 45px rgba(15,23,42,.24);color:var(--text);text-align:left;z-index:2147483646}
.sender-tooltip-portal[hidden]{display:none!important}
.sender-tooltip-portal::after{content:"";position:absolute;width:10px;height:10px;background:inherit;border-left:1px solid var(--border);border-top:1px solid var(--border);left:50%;transform:translateX(-50%) rotate(45deg)}
.sender-tooltip-portal[data-placement="top"]::after{bottom:-6px;transform:translateX(-50%) rotate(225deg)}
.sender-tooltip-portal[data-placement="bottom"]::after{top:-6px}
.sender-tip-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;margin-bottom:5px;border-bottom:1px solid var(--border);font-size:12px;font-weight:800}
.sender-tip-heading em{font-style:normal;padding:2px 7px;border-radius:999px;background:rgba(37,99,235,.12);color:#2563eb;font-size:10px}
.sender-tip-person{display:grid;gap:3px;padding:8px 3px;border-bottom:1px dashed var(--border)}
.sender-tip-person:last-child{border-bottom:0}
.sender-tip-person strong{font-size:12px;color:var(--text)}
.sender-tip-person span{font-size:11px;color:#2563eb;word-break:break-all}
.sender-tip-person small,.sender-tip-empty{font-size:10px;color:var(--muted);line-height:1.4}
[data-theme="dark"] .sender-tip-trigger,body.dark-mode .sender-tip-trigger{background:rgba(59,130,246,.15);border-color:rgba(96,165,250,.30);color:#93c5fd}
[data-theme="dark"] .sender-tooltip-portal,body.dark-mode .sender-tooltip-portal{background:var(--card,#111827);box-shadow:0 20px 50px rgba(0,0,0,.5)}
@media(max-width:600px){.sender-select-wrap{align-items:stretch;flex-direction:column}.sender-tip-trigger{align-self:flex-start}}


/* V43 hard isolation: recipient details never participate in table layout */
#senderTooltipPortal.sender-tooltip-portal{position:fixed!important;display:none!important;margin:0!important;float:none!important;box-sizing:border-box!important;visibility:hidden!important;opacity:0!important;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease,visibility .14s ease}
#senderTooltipPortal.sender-tooltip-portal.is-open:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important;transform:translateY(0)}
.sender-table-value>.sender-tip-person,.sender-table-value>.sender-tip-heading,.sender-table-value>.sender-tip-empty{display:none!important}
.sender-table-value{overflow:visible!important}


/* V45 definitive sent-recipient tooltip visibility */
#senderTooltipPortal.sender-tooltip-portal{position:fixed!important;display:none;visibility:hidden;opacity:0;margin:0!important;box-sizing:border-box!important;z-index:2147483647!important;pointer-events:auto!important;transform:none!important}
#senderTooltipPortal.sender-tooltip-portal.is-open{display:block!important;visibility:visible!important;opacity:1!important}

/* V46: allow JS left/top positioning; previous inset:auto!important kept portal off-screen */
#senderTooltipPortal.sender-tooltip-portal{right:auto!important;bottom:auto!important;left:0;top:0}
#senderTooltipPortal.sender-tooltip-portal.is-open{display:block!important;visibility:visible!important;opacity:1!important}

/* V47 - Letters Received multiple attachments */
.file-preview .multi-file-item{margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.file-preview .multi-file-item img{display:block}
.multi-preview-section{padding:10px 0 18px;border-bottom:1px solid var(--line)}
.multi-preview-section:last-child{border-bottom:0}
.multi-preview-title{font-weight:700;margin-bottom:8px}
.multi-preview-section iframe{width:100%;height:58vh;border:1px solid var(--line);border-radius:10px}
.multi-preview-section img{max-width:100%;max-height:65vh;display:block;margin:0 auto 10px;border-radius:10px}

/* V62 Attachment-connected QR */
.qr-mail-note{display:block;line-height:1.55}
.qr-mail-note span{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 10px;border-radius:999px;background:rgba(99,91,255,.10);color:var(--accent);font-weight:850}
.qr-mail-note small{display:block;margin-top:7px;color:var(--muted)}
.attachment-qr-panel{display:grid;grid-template-columns:1fr 112px auto;gap:14px;align-items:center;margin-bottom:18px;padding:14px;border:1px solid rgba(99,91,255,.22);border-radius:16px;background:linear-gradient(135deg,rgba(99,91,255,.09),rgba(14,165,233,.06))}
.attachment-qr-panel b{display:block;color:var(--text);font-size:15px}
.attachment-qr-panel small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.attachment-qr-panel img{width:104px!important;height:104px!important;max-height:none!important;margin:0!important;border-radius:12px!important;background:#fff;padding:6px;box-shadow:0 6px 16px rgba(15,23,42,.08)}
body.dark-mode .attachment-qr-panel{background:linear-gradient(135deg,rgba(99,91,255,.20),rgba(14,165,233,.10))}
@media(max-width:650px){.attachment-qr-panel{grid-template-columns:1fr;text-align:center}.attachment-qr-panel img{margin:auto!important}.attachment-qr-panel .mini{justify-content:center}}

/* V66 - Roles and team member action polish */
#dashStats{display:none!important}
.user-row{display:flex!important;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.user-row .user-info{display:flex;flex-direction:column;gap:4px;min-width:220px}
.user-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-actions .mini{min-width:86px;border-radius:10px;padding:7px 12px;font-weight:800}
.user-actions .danger{background:#fff1f1;border-color:#fecaca;color:#b42318}
@media(max-width:720px){.user-row{align-items:stretch}.user-actions{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}.user-actions .mini{min-width:0;width:100%}}

/* V72 Recent Activity reliability and readability */
.recent-activity-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recent-refresh-btn{min-height:34px;padding:7px 11px}.recent-activity-list{display:grid;gap:10px;margin-top:14px}.recent-activity-row{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.recent-activity-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.recent-activity-main b{font-size:13px;color:var(--text)}.activity-action-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:10px;font-weight:850;letter-spacing:.04em}.recent-activity-row p{margin:7px 0 6px;color:var(--muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere}.recent-activity-row small{display:block;color:var(--dim);font-size:11px}.recent-activity-row small strong{color:var(--muted)}.recent-activity-empty{padding:22px 10px}@media(max-width:640px){.recent-activity-actions{width:100%;justify-content:space-between}.recent-refresh-btn{flex:0 0 auto}}

/* ===== SOURCE: public/enterprise-v58-registry.css ===== */
/* ============================================================================
   V58 — "OFFICIAL REGISTER" DESIGN SYSTEM
   A dispatch/receipt ledger is a real physical artefact: ruled paper, brass
   desk‑stamps, ink, double‑underlined headings. This layer re‑themes the app
   around that object instead of a generic purple SaaS look — warm paper
   surfaces, ink‑navy chrome, a brass seal accent, a serif masthead face and
   a monospace face for every register/serial/date figure.
   Loaded last: wins the cascade over styles.css, bootstrap and older passes.
   ============================================================================ */

:root{
  /* paper + ink (light) */
  --ui-bg:#f7f2e6;--ui-surface:#fffdf8;--ui-surface-2:#f2ead4;--ui-surface-3:#ecdfbe;
  --ui-border:#e2d6b4;--ui-border-strong:#cdbb8c;
  --ui-text:#25201a;--ui-muted:#79705d;--ui-dim:#a3987d;
  --ui-hover:#efe6cc;--ui-input:#fffdf8;--ui-table-head:#f2ead4;
  --ui-shadow:0 14px 32px rgba(37,32,20,.10);--ui-shadow-soft:0 3px 12px rgba(37,32,20,.07);

  /* brass seal accent */
  --ui-accent:#a97426;--ui-accent-2:#c99946;--ui-accent-soft:#f1e2bd;
  --ui-success:#3f7d54;--ui-warning:#a5701f;--ui-danger:#a23b2e;

  /* dark ink chrome (sidebar / topbar keep this in both themes) */
  --ui-sidebar:#1c160f;--ui-sidebar-2:#241c12;--ui-sidebar-text:#d9cdac;

  /* report accent set (kpi icons) */
  --report-blue:#5c6f8a;--report-cyan:#2f7a86;--report-green:#3f7d54;--report-violet:#8a6a2e;

  --ui-radius:14px;--ui-radius-sm:10px;--sidebar-w:268px;--topbar-h:74px;

  --font-display:'Fraunces','Source Serif 4',Georgia,serif;
  --font-body:'IBM Plex Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Cascadia Code',ui-monospace,monospace;
}

html[data-theme="dark"]{
  --ui-bg:#0c0f14;--ui-surface:#151a21;--ui-surface-2:#1b222a;--ui-surface-3:#212a34;
  --ui-border:#2b3540;--ui-border-strong:#3d4a57;
  --ui-text:#efe8d8;--ui-muted:#9aa1a8;--ui-dim:#6d747c;
  --ui-hover:#1e2731;--ui-input:#10151b;--ui-table-head:#171e26;
  --ui-shadow:0 16px 38px rgba(0,0,0,.44);--ui-shadow-soft:0 4px 16px rgba(0,0,0,.32);
  --ui-accent:#d6a24c;--ui-accent-2:#e6bd72;--ui-accent-soft:#3a2f19;
  --ui-success:#57a373;--ui-warning:#d19a3d;--ui-danger:#d1665a;
  --ui-sidebar:#08090c;--ui-sidebar-2:#0f1319;--ui-sidebar-text:#cbc2ab;
  --report-blue:#8b9bb4;--report-cyan:#5aa8b3;--report-green:#57a373;--report-violet:#c9994c;
}

*{box-sizing:border-box}
html,body{background:var(--ui-bg)!important;color:var(--ui-text)!important}
body,.app-layout,.main-content,.panel{background:var(--ui-bg)!important;color:var(--ui-text)!important}
body{font-family:var(--font-body)!important;letter-spacing:.005em}

/* ---------- Typography: masthead serif + ledger mono ---------- */
.brand-text h1,.page-header h3,.saas-page-head h3,.card-head h4,.settings-title h4,
.section-head h4,.modal-head h3,.login-brand h2,.dashboard-welcome h4,
.report-section-title h4,.report-filter-top h4,.notice-body h4,.mini-head h4{
  font-family:var(--font-display)!important;font-weight:600!important;letter-spacing:-.012em!important;
}
.stat-num,.index-cell,.backup-name,.report-serial,code,.settings-card code,
input[type="date"],#reportsPanel .report-row-index{
  font-family:var(--font-mono)!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;
}
#dispatchBody td:nth-child(1),#dispatchBody td:nth-child(2),#dispatchBody td:nth-child(3),
#receivedBody td:nth-child(1),#receivedBody td:nth-child(2),#receivedBody td:nth-child(3),
#reportsPanel td:nth-child(1),#reportsPanel td:nth-child(2){font-family:var(--font-mono)}

/* ---------- Base surfaces ---------- */
.topbar{background:color-mix(in srgb,var(--ui-surface) 93%,transparent)!important;
  box-shadow:0 1px 0 var(--ui-border)!important;border-bottom:1px solid var(--ui-border)!important}
.sidebar{box-shadow:2px 0 0 var(--ui-border)!important}
.topbar,.sidebar,.modal-card,.settings-card,.stat-card,.system-card,.quick-card,.list-card,
.activity-card,.notification-drawer,.toolbar,.filter-bar,.notice-card,.backup-table-wrap,
.table-wrap,.quick-page-card,.dashboard-welcome,.report-section,.report-filter-card,.card{
  background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;
  box-shadow:var(--ui-shadow-soft)!important;
}
.system-grid,.feature-kpis{background:transparent!important}

/* ---------- Brand + sidebar ledger spine ---------- */
.sidebar{background:linear-gradient(180deg,var(--ui-sidebar),var(--ui-sidebar-2))!important;color:var(--ui-sidebar-text)!important}
.sidebar:before{
  content:"JD OFFICE SUITE";display:flex;align-items:center;height:44px;margin:0 4px 20px;padding:0 14px;
  border:1px solid color-mix(in srgb,var(--ui-accent) 40%,transparent);border-radius:9px;
  background:color-mix(in srgb,var(--ui-accent) 12%,transparent);
  font:700 11px/1 var(--font-mono);letter-spacing:.16em;color:var(--ui-accent-2);text-transform:uppercase;
}
.sidebar-label{color:color-mix(in srgb,var(--ui-sidebar-text) 55%,transparent)!important;font-family:var(--font-mono)!important;letter-spacing:.14em!important}
.tab{position:relative!important;color:var(--ui-sidebar-text)!important}
.tab:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.tab.active{background:color-mix(in srgb,var(--ui-accent) 22%,transparent)!important;color:#fff!important;box-shadow:none!important}
.tab.active::before{content:"";position:absolute;left:-2px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ui-accent-2)}
.tab-badge{background:rgba(255,255,255,.12)!important;color:#f1e2bd!important}
.tab.active .tab-badge{background:var(--ui-accent)!important;color:#1c160f!important}

/* ---------- Circular seal badges (signature element) ---------- */
.logo,.page-badge,.stat-icon,.system-icon,.report-kpi-icon,.report-section-icon,
.quick-page-card>b,.quick-action b{
  border-radius:50%!important;background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb,var(--ui-accent) 34%,var(--ui-surface)),
    color-mix(in srgb,var(--ui-accent) 14%,var(--ui-surface)))!important;
  color:var(--ui-accent)!important;font-weight:700!important;
  box-shadow:0 0 0 3px var(--ui-surface),0 0 0 4px color-mix(in srgb,var(--ui-accent) 45%,transparent)!important;
}
.logo{color:#fff!important;background:radial-gradient(circle at 34% 30%,var(--ui-accent-2),var(--ui-accent))!important}
.stat-icon.blue,.stat-icon.cyan,.stat-icon.green,.stat-icon.amber{
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--ui-accent) 34%,var(--ui-surface)),
    color-mix(in srgb,var(--ui-accent) 14%,var(--ui-surface)))!important;color:var(--ui-accent)!important;
}
.stat-icon.cyan{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--report-cyan) 34%,var(--ui-surface)),color-mix(in srgb,var(--report-cyan) 14%,var(--ui-surface)))!important;color:var(--report-cyan)!important}
.stat-icon.green{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--ui-success) 34%,var(--ui-surface)),color-mix(in srgb,var(--ui-success) 14%,var(--ui-surface)))!important;color:var(--ui-success)!important}
.stat-icon.amber{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--ui-warning) 34%,var(--ui-surface)),color-mix(in srgb,var(--ui-warning) 14%,var(--ui-surface)))!important;color:var(--ui-warning)!important}
.report-kpi.total .report-kpi-icon{color:var(--report-violet)!important;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--report-violet) 34%,var(--ui-surface)),color-mix(in srgb,var(--report-violet) 14%,var(--ui-surface)))!important}
.report-kpi.dispatch .report-kpi-icon{color:var(--report-blue)!important;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--report-blue) 34%,var(--ui-surface)),color-mix(in srgb,var(--report-blue) 14%,var(--ui-surface)))!important}
.report-kpi.received .report-kpi-icon{color:var(--report-green)!important;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--report-green) 34%,var(--ui-surface)),color-mix(in srgb,var(--report-green) 14%,var(--ui-surface)))!important}
.report-kpi.emails .report-kpi-icon{color:var(--report-cyan)!important;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--report-cyan) 34%,var(--ui-surface)),color-mix(in srgb,var(--report-cyan) 14%,var(--ui-surface)))!important}

/* ---------- Ledger double-rule headings ---------- */
.page-header,.saas-page-head{
  border-bottom:4px double color-mix(in srgb,var(--ui-accent) 35%,var(--ui-border-strong))!important;
  padding-bottom:14px!important;margin-bottom:20px!important;
}
.table-wrap thead th,.backup-table thead th,#reportsPanel th{
  border-bottom:3px double var(--ui-border-strong)!important;
  font-family:var(--font-mono)!important;color:var(--ui-muted)!important;background:var(--ui-table-head)!important;
}
.card-head,.settings-title,.section-head{border-bottom:1px solid var(--ui-border)!important}

/* ---------- Text colour pass ---------- */
.brand-text h1,.page-header h3,.saas-page-head h3,.card-head h4,.settings-title h4,.section-head h4,
.modal-head h3,.stat-num,.quick-page-card strong,.dashboard-welcome h4,.report-section h4,
.field label,.master-form label,.settings-card label,.switch-line span,#reportsPanel .report-subject,
#reportsPanel .report-empty b{color:var(--ui-text)!important}
.brand-text small,.page-header h3 small,.saas-page-head h3 small,.stat-lbl,.stat-hint,.field-help,
.quick-page-card small,.dashboard-welcome p,.report-filters label,.empty,.backup-row small,
.checkbox-copy small,.notice-body p,.system-card p{color:var(--ui-muted)!important}

/* ---------- Buttons ---------- */
.btn,.primary,.ghost{font-family:var(--font-body)!important;border-radius:var(--ui-radius-sm)!important;font-weight:650!important}
.btn-primary,.primary{
  border:0!important;background:linear-gradient(135deg,var(--ui-accent-2),var(--ui-accent))!important;
  color:#1c160f!important;box-shadow:0 8px 18px color-mix(in srgb,var(--ui-accent) 32%,transparent)!important;
}
.btn-primary:hover,.primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.ghost,.mini,.icon,.icon-btn,.attach-chip,.editor-tools button,#userChip{
  background:var(--ui-surface-2)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;
}
.ghost:hover,.mini:hover,.icon:hover,.icon-btn:hover,.attach-chip:hover,.editor-tools button:hover{
  border-color:var(--ui-accent)!important;color:var(--ui-accent)!important;background:var(--ui-hover)!important;
}
.mini.danger{color:var(--ui-danger)!important;border-color:color-mix(in srgb,var(--ui-danger) 35%,var(--ui-border))!important;background:color-mix(in srgb,var(--ui-danger) 8%,var(--ui-surface))!important}

/* ---------- Inputs ---------- */
input,select,textarea{
  font-family:var(--font-body)!important;border:1px solid var(--ui-border-strong)!important;
  background:var(--ui-input)!important;color:var(--ui-text)!important;border-radius:var(--ui-radius-sm)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 16%,transparent)!important;
}
input::placeholder,textarea::placeholder{color:var(--ui-dim)!important}
.checkbox-box{background:var(--ui-input)!important;border-color:var(--ui-border-strong)!important}
.checkbox-control input:checked + .checkbox-box{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
.number-confirm input,.check-row input[type="checkbox"]{accent-color:var(--ui-accent)!important}

/* ---------- Tables ---------- */
table,thead,tbody,tr,th,td{border-color:var(--ui-border)!important}
table{background:var(--ui-surface)!important;color:var(--ui-text)!important}
td{background:var(--ui-surface)!important;color:var(--ui-text)!important}
tbody tr:hover td{background:var(--ui-hover)!important}
.index-cell{color:var(--ui-muted)!important;font-weight:700!important}

/* ---------- Chips / badges ---------- */
.status-chip{background:color-mix(in srgb,var(--ui-success) 14%,var(--ui-surface))!important;color:var(--ui-success)!important;border:1px solid color-mix(in srgb,var(--ui-success) 32%,var(--ui-border))!important}
.soft-chip{background:var(--ui-surface-2)!important;color:var(--ui-muted)!important}
.status-pill,.reason-tag,.attach-chip{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important;border:1px solid color-mix(in srgb,var(--ui-accent) 30%,var(--ui-border))!important}
.status-pill.inactive{background:var(--ui-surface-2)!important;color:var(--ui-muted)!important;border-color:var(--ui-border)!important}
.pub-badge{background:color-mix(in srgb,var(--ui-success) 16%,var(--ui-surface))!important;color:var(--ui-success)!important}
.pub-badge.hidden{background:color-mix(in srgb,var(--ui-danger) 14%,var(--ui-surface))!important;color:var(--ui-danger)!important}
.smtp-status.enabled{background:color-mix(in srgb,var(--ui-success) 16%,var(--ui-surface))!important;color:var(--ui-success)!important;border-color:color-mix(in srgb,var(--ui-success) 35%,transparent)!important}
.health-dot{background:var(--ui-success)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-success) 22%,transparent)!important}
.recipient-count-badge,.report-count-badge{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important}
.recipient-summary::before{color:var(--ui-accent)!important}
.report-live-dot{background:var(--ui-success)!important}

/* ---------- Info / helper boxes ---------- */
.info-box,.helper-box,.security-note,.feature-notice,.schedule-block,.box-number-field{
  background:var(--ui-accent-soft)!important;color:color-mix(in srgb,var(--ui-accent) 70%,var(--ui-text))!important;
  border:1px solid color-mix(in srgb,var(--ui-accent) 30%,var(--ui-border))!important;
}
.helper-box code{background:var(--ui-surface)!important;color:var(--ui-accent)!important}
.box-number-hint{background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface))!important;color:var(--ui-success)!important}

/* ---------- Modals / overlays ---------- */
.modal{background:color-mix(in srgb,var(--ui-sidebar) 70%,transparent)!important}
.modal-card{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important}
.modal-head{background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-border)!important}
.modal-head-left small{color:var(--ui-accent)!important;font-family:var(--font-mono)!important}
.form-actions{background:var(--ui-surface-2)!important;border-top:1px solid var(--ui-border)!important}
.popup{background:var(--ui-surface)!important;border:1px solid var(--ui-accent-soft)!important}
.popup small{color:var(--ui-accent)!important}

/* ---------- Login ---------- */
.login-overlay{
  background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--ui-accent) 22%,transparent),transparent 34%),
    linear-gradient(150deg,var(--ui-sidebar),#2a2013)!important;backdrop-filter:blur(8px)!important;
}
.login-card{background:var(--ui-surface)!important;color:var(--ui-text)!important;box-shadow:0 34px 90px rgba(0,0,0,.4)!important}
.login-brand small{color:var(--ui-accent)!important;font-family:var(--font-mono)!important}
.login-brand h2{color:var(--ui-text)!important}
.login-card label{color:var(--ui-text)!important}
.login-help{color:var(--ui-dim)!important}

/* ---------- Notification drawer / toast ---------- */
.notification-drawer{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important}
#toast{background:var(--ui-sidebar)!important;color:#f1e2bd!important;font-family:var(--font-body)!important}
#toast.success{background:var(--ui-success)!important;color:#fff!important}
#toast.error{background:var(--ui-danger)!important;color:#fff!important}

/* ---------- Report panel accent gradient strip ---------- */
#reportsPanel .report-filter-top{
  background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface)),var(--ui-surface))!important;
  border-bottom:1px solid var(--ui-border)!important;
}
#reportsPanel .report-filter-top small{color:var(--ui-accent)!important;font-family:var(--font-mono)!important}
#reportsPanel .report-section .card-head{background:var(--ui-surface-2)!important}
#reportsPanel .report-generated-bar{background:var(--ui-surface-2)!important;border-top:1px solid var(--ui-border)!important}

/* ---------- Misc hard-coded legacy accents pulled onto brand palette ---------- */
.lang-btn.active{background:var(--ui-accent)!important;color:#1c160f!important;box-shadow:0 3px 10px color-mix(in srgb,var(--ui-accent) 35%,transparent)!important}
.hindi-toggle.active span{background:var(--ui-accent)!important}
.hindi-toggle.active b{color:var(--ui-accent)!important}
.hindi-typing-toolbar{background:var(--ui-accent-soft)!important;border-color:color-mix(in srgb,var(--ui-accent) 30%,transparent)!important}
.sender-tip-trigger{background:var(--ui-accent-soft)!important;border-color:color-mix(in srgb,var(--ui-accent) 32%,transparent)!important;color:var(--ui-accent)!important}
.sender-tip-heading em{background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important}
.sender-tip-person span{color:var(--ui-accent)!important}
.number-save-result{background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface))!important;color:var(--ui-success)!important;border-color:color-mix(in srgb,var(--ui-success) 30%,transparent)!important}
.saved-button{background:var(--ui-success)!important}
.number-confirm:has(input:checked){color:var(--ui-success)!important}

/* ---------- Responsive tweaks kept from base breakpoints; theme only ---------- */
@media(max-width:1180px){:root{--sidebar-w:236px}}

/* V59: Movement / Audit Trail + Financial Year Archive */
.fy-settings-block{margin:14px 0 18px;padding:16px;border:1px solid var(--border,#d0d5dd);border-radius:18px;background:linear-gradient(135deg,rgba(79,70,229,.07),rgba(14,165,233,.05))}
.fy-settings-block .time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}
.archive-list .backup-row,.archive-detail{margin-top:12px}.archive-detail h5{margin:18px 0 8px;color:var(--text,#101828)}
.audit-trail-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;padding:14px;border:1px solid var(--border,#d0d5dd);border-radius:14px;background:rgba(79,70,229,.06)}
.audit-trail-head small{color:var(--dim,#667085)}
.status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:3px 8px;border-radius:999px;background:rgba(34,197,94,.12);color:#15803d;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.02em}.status-pill.inactive{background:rgba(245,158,11,.13);color:#a16207}

/* ===== SOURCE: public/register-layout-v61.css ===== */
/* V61 Register Layout Fix
   User request: no horizontal scroll; Dispatch + Received register must fit in one view like earlier.
   Keeps filter bar in one line and converts wide register into compact full-width layout. */

/* Top filter/search box: proper single-line register filter card */
#dispatchPanel > .toolbar,
#receivedPanel > .toolbar{
  display:grid!important;
  grid-template-columns:minmax(260px, 1fr) 172px 112px!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 18px!important;
  padding:15px 16px!important;
  border:1px solid var(--ui-border, var(--border, #d0d5dd))!important;
  border-radius:16px!important;
  background:var(--ui-surface, var(--card, #fff))!important;
  box-shadow:0 6px 18px rgba(16,24,40,.06)!important;
}
#dispatchPanel > .toolbar input,
#receivedPanel > .toolbar input,
#dispatchPanel > .toolbar select,
#receivedPanel > .toolbar select{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:13px!important;
  line-height:42px!important;
  box-sizing:border-box!important;
}
#dispatchPanel > .toolbar input:first-child,
#receivedPanel > .toolbar input:first-child{
  flex:initial!important;
  min-width:0!important;
  width:100%!important;
}
#dispatchPanel > .toolbar button,
#receivedPanel > .toolbar button{
  width:100%!important;
  height:42px!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:11px!important;
}

/* Compact register: fit every column in one card, no left-right scroll bar. */
#dispatchPanel > .table-wrap,
#receivedPanel > .table-wrap{
  width:100%!important;
  max-width:100%!important;
  min-height:260px!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  border:1px solid var(--ui-border, var(--border, #d0d5dd))!important;
  border-radius:16px!important;
  background:var(--ui-surface, var(--card, #fff))!important;
  box-shadow:0 10px 24px rgba(16,24,40,.07)!important;
}
#dispatchPanel > .table-wrap table,
#receivedPanel > .table-wrap table{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  margin:0!important;
}
#dispatchPanel > .table-wrap thead,
#receivedPanel > .table-wrap thead{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
}
#dispatchPanel > .table-wrap th,
#receivedPanel > .table-wrap th{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  height:44px!important;
  padding:8px 6px!important;
  vertical-align:middle!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  line-height:1.15!important;
  border-bottom:2px solid var(--ui-border-strong, var(--border2, #cfd8e6))!important;
  background:var(--ui-table-head, #f8fafc)!important;
}
#dispatchPanel > .table-wrap td,
#receivedPanel > .table-wrap td{
  height:50px!important;
  padding:8px 6px!important;
  vertical-align:middle!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  text-overflow:ellipsis!important;
  max-width:none!important;
  font-size:10px!important;
  border-top:1px solid var(--ui-border, var(--border, #e3e8f0))!important;
}
#dispatchPanel > .table-wrap tbody tr:first-child td,
#receivedPanel > .table-wrap tbody tr:first-child td{border-top:0!important;}
#dispatchPanel > .table-wrap tbody tr,
#receivedPanel > .table-wrap tbody tr{background:var(--ui-surface, var(--card, #fff))!important;}
#dispatchPanel > .table-wrap tbody tr:hover td,
#receivedPanel > .table-wrap tbody tr:hover td{background:var(--ui-hover, #f1f5f9)!important;}

/* Remove sticky identifier columns from V60 so table stays one-piece and no alignment break occurs. */
#dispatchPanel th:nth-child(1),#dispatchPanel td:nth-child(1),
#dispatchPanel th:nth-child(2),#dispatchPanel td:nth-child(2),
#receivedPanel th:nth-child(1),#receivedPanel td:nth-child(1),
#receivedPanel th:nth-child(2),#receivedPanel td:nth-child(2){
  position:static!important;
  left:auto!important;
  z-index:auto!important;
  box-shadow:none!important;
}
#dispatchPanel th:nth-child(1),#dispatchPanel th:nth-child(2),
#receivedPanel th:nth-child(1),#receivedPanel th:nth-child(2){
  background:var(--ui-table-head, #f8fafc)!important;
}

/* Dispatch Register column ratio — total fits 100% */
#dispatchPanel th:nth-child(1),#dispatchPanel td:nth-child(1){width:4.2%!important;text-align:center!important;}
#dispatchPanel th:nth-child(2),#dispatchPanel td:nth-child(2){width:7.0%!important;}
#dispatchPanel th:nth-child(3),#dispatchPanel td:nth-child(3){width:5.6%!important;}
#dispatchPanel th:nth-child(4),#dispatchPanel td:nth-child(4){width:6.4%!important;}
#dispatchPanel th:nth-child(5),#dispatchPanel td:nth-child(5){width:8.8%!important;}
#dispatchPanel th:nth-child(6),#dispatchPanel td:nth-child(6){width:7.4%!important;}
#dispatchPanel th:nth-child(7),#dispatchPanel td:nth-child(7){width:4.6%!important;}
#dispatchPanel th:nth-child(8),#dispatchPanel td:nth-child(8){width:7.2%!important;}
#dispatchPanel th:nth-child(9),#dispatchPanel td:nth-child(9){width:5.0%!important;}
#dispatchPanel th:nth-child(10),#dispatchPanel td:nth-child(10){width:5.5%!important;}
#dispatchPanel th:nth-child(11),#dispatchPanel td:nth-child(11){width:5.1%!important;}
#dispatchPanel th:nth-child(12),#dispatchPanel td:nth-child(12){width:5.0%!important;}
#dispatchPanel th:nth-child(13),#dispatchPanel td:nth-child(13){width:5.0%!important;}
#dispatchPanel th:nth-child(14),#dispatchPanel td:nth-child(14){width:5.0%!important;}
#dispatchPanel th:nth-child(15),#dispatchPanel td:nth-child(15){width:4.6%!important;}
#dispatchPanel th:nth-child(16),#dispatchPanel td:nth-child(16){width:6.0%!important;}
#dispatchPanel th:nth-child(17),#dispatchPanel td:nth-child(17){width:5.2%!important;}
#dispatchPanel th:nth-child(18),#dispatchPanel td:nth-child(18){width:7.4%!important;}

/* Letters Received Register column ratio — total fits 100% */
#receivedPanel th:nth-child(1),#receivedPanel td:nth-child(1){width:5.0%!important;text-align:center!important;}
#receivedPanel th:nth-child(2),#receivedPanel td:nth-child(2){width:8.2%!important;}
#receivedPanel th:nth-child(3),#receivedPanel td:nth-child(3){width:6.4%!important;}
#receivedPanel th:nth-child(4),#receivedPanel td:nth-child(4){width:7.2%!important;}
#receivedPanel th:nth-child(5),#receivedPanel td:nth-child(5){width:11.8%!important;}
#receivedPanel th:nth-child(6),#receivedPanel td:nth-child(6){width:13.2%!important;}
#receivedPanel th:nth-child(7),#receivedPanel td:nth-child(7){width:7.0%!important;}
#receivedPanel th:nth-child(8),#receivedPanel td:nth-child(8){width:7.0%!important;}
#receivedPanel th:nth-child(9),#receivedPanel td:nth-child(9){width:6.2%!important;}
#receivedPanel th:nth-child(10),#receivedPanel td:nth-child(10){width:6.0%!important;}
#receivedPanel th:nth-child(11),#receivedPanel td:nth-child(11){width:6.0%!important;}
#receivedPanel th:nth-child(12),#receivedPanel td:nth-child(12){width:8.4%!important;}
#receivedPanel th:nth-child(13),#receivedPanel td:nth-child(13){width:5.2%!important;}
#receivedPanel th:nth-child(14),#receivedPanel td:nth-child(14){width:8.4%!important;}

/* Compact chips/buttons so Attachment + Actions do not force scroll. */
#dispatchPanel .actions,
#receivedPanel .actions{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
  max-width:100%!important;
}
#dispatchPanel .mini,
#receivedPanel .mini{
  min-height:22px!important;
  height:auto!important;
  padding:4px 5px!important;
  border-radius:7px!important;
  font-size:8.5px!important;
  line-height:1!important;
  white-space:normal!important;
}
#dispatchPanel .attach-chip,
#receivedPanel .attach-chip{
  width:100%!important;
  max-width:100%!important;
  min-height:24px!important;
  justify-content:center!important;
  padding:4px 4px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  line-height:1.05!important;
  white-space:normal!important;
}
#dispatchPanel .attach-chip small,
#receivedPanel .attach-chip small{display:none!important;}
#dispatchPanel .status-pill,
#receivedPanel .status-pill{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  justify-content:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:5px 6px!important;
  font-size:8.5px!important;
}
#dispatchPanel .linked-received-from small,
#receivedPanel .linked-received-from small{
  font-size:7.5px!important;
}
#dispatchPanel .empty,
#receivedPanel .empty{
  height:180px!important;
  text-align:center!important;
  vertical-align:middle!important;
  color:var(--ui-muted, var(--muted, #667085))!important;
}

@media(max-width:900px){
  #dispatchPanel > .toolbar,
  #receivedPanel > .toolbar{
    grid-template-columns:1fr!important;
    padding:12px!important;
  }
  #dispatchPanel > .table-wrap,
  #receivedPanel > .table-wrap{
    overflow-x:auto!important;
  }
  #dispatchPanel > .table-wrap table{min-width:1180px!important;}
  #receivedPanel > .table-wrap table{min-width:980px!important;}
}

/* ===== SOURCE: public/office-corporate-v67.css ===== */
/* V67 Corporate Office Theme — professional, calm, high-contrast */
:root{
  --ui-bg:#f3f6fa;--ui-surface:#ffffff;--ui-surface-2:#f7f9fc;--ui-surface-3:#edf2f7;
  --ui-border:#d9e2ec;--ui-border-strong:#bdc9d6;--ui-text:#172033;--ui-muted:#607086;--ui-dim:#8c99aa;
  --ui-hover:#eef4fb;--ui-input:#ffffff;--ui-table-head:#edf3f8;
  --ui-accent:#1769aa;--ui-accent-2:#2384c6;--ui-accent-soft:#e3f0fa;
  --ui-success:#1f7a55;--ui-warning:#a86512;--ui-danger:#c13f3f;
  --ui-sidebar:#17263a;--ui-sidebar-2:#102033;--ui-sidebar-text:#d8e4ef;
  --report-blue:#1769aa;--report-cyan:#167d96;--report-green:#1f7a55;--report-violet:#6256a5;
  --ui-shadow:0 8px 24px rgba(23,32,51,.07);--ui-shadow-soft:0 2px 8px rgba(23,32,51,.06);
  --ui-radius:10px;--ui-radius-sm:8px;
  --font-display:'IBM Plex Sans','Inter','Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Inter','Segoe UI',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --ui-bg:#0f1722;--ui-surface:#172230;--ui-surface-2:#1c2938;--ui-surface-3:#243346;
  --ui-border:#304156;--ui-border-strong:#465a72;--ui-text:#edf4fb;--ui-muted:#aab8c8;--ui-dim:#78889b;
  --ui-hover:#213247;--ui-input:#111b28;--ui-table-head:#1d2b3b;
  --ui-accent:#57a6db;--ui-accent-2:#78bce7;--ui-accent-soft:#173a55;
  --ui-success:#5db88d;--ui-warning:#e0a34f;--ui-danger:#ed7777;
  --ui-sidebar:#0b1420;--ui-sidebar-2:#101b29;--ui-sidebar-text:#dce7f1;
}
body{font-family:var(--font-body)!important;background:var(--ui-bg)!important}
.brand-text h1,.page-header h3,.saas-page-head h3,.card-head h4,.settings-title h4,.section-head h4,.modal-head h3,.login-brand h2,.dashboard-welcome h4{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:-.02em!important}
.topbar{background:color-mix(in srgb,var(--ui-surface) 96%,transparent)!important;border-bottom:1px solid var(--ui-border)!important;box-shadow:0 2px 8px rgba(23,32,51,.05)!important}
.sidebar{background:linear-gradient(180deg,var(--ui-sidebar),var(--ui-sidebar-2))!important;box-shadow:2px 0 10px rgba(15,28,44,.11)!important}
.sidebar:before{content:"OFFICE REGISTER"!important;height:40px!important;margin-bottom:14px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:8px!important;background:rgba(255,255,255,.055)!important;color:#9fc7e5!important;font-family:var(--font-body)!important;letter-spacing:.12em!important}
.logo,.page-badge,.stat-icon,.system-icon,.report-kpi-icon,.report-section-icon,.quick-page-card>b,.quick-action b{border-radius:9px!important;background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important;box-shadow:none!important}
.logo{background:linear-gradient(135deg,var(--ui-accent-2),var(--ui-accent))!important;color:#fff!important}
.page-header,.saas-page-head{border-bottom:1px solid var(--ui-border)!important;padding-bottom:14px!important}
.tab{border-radius:8px!important}.tab:hover{background:rgba(255,255,255,.07)!important}.tab.active{background:rgba(35,132,198,.20)!important;color:#fff!important}.tab.active::before{background:#55a9df!important;width:3px!important}.tab.active .tab-badge{background:#2b83ba!important;color:#fff!important}
.card,.toolbar,.table-wrap,.stat-card,.settings-card,.system-card,.quick-page-card,.report-section,.report-filter-card,.modal-card,.notification-drawer{border:1px solid var(--ui-border)!important;border-radius:10px!important;box-shadow:var(--ui-shadow-soft)!important}
.table-wrap thead th,.backup-table thead th,#reportsPanel th{background:var(--ui-table-head)!important;border-bottom:1px solid var(--ui-border-strong)!important;font-family:var(--font-body)!important;font-weight:700!important;color:#4b5c70!important;text-transform:uppercase!important;letter-spacing:.045em!important;font-size:11px!important}
html[data-theme="dark"] .table-wrap thead th,html[data-theme="dark"] .backup-table thead th,html[data-theme="dark"] #reportsPanel th{color:#b7c6d5!important}
tbody tr:hover{background:var(--ui-hover)!important}
.btn-primary,.primary{background:linear-gradient(135deg,var(--ui-accent-2),var(--ui-accent))!important;border:1px solid var(--ui-accent)!important;color:#fff!important;box-shadow:0 3px 8px rgba(23,105,170,.16)!important}.btn-primary:hover,.primary:hover{filter:brightness(.96);transform:translateY(-1px)}
.ghost,.btn-light{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;color:var(--ui-text)!important}.ghost:hover,.btn-light:hover{background:var(--ui-hover)!important;border-color:#9fb3c8!important;color:var(--ui-accent)!important}
input,select,textarea,.form-control,.form-select{border-radius:8px!important;border-color:var(--ui-border-strong)!important;background:var(--ui-input)!important;color:var(--ui-text)!important}input:focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus{border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 15%,transparent)!important}
.stat-card{border-top:3px solid var(--ui-accent)!important}.stat-num{color:var(--ui-text)!important}.stat-lbl{color:var(--ui-muted)!important}
.language-switch{background:var(--ui-surface-2)!important;border:1px solid var(--ui-border)!important;border-radius:8px!important}.lang-btn.active{background:var(--ui-accent)!important;color:#fff!important}
.theme-toggle{border-radius:8px!important}.page-badge{font-size:17px!important}
.login-overlay{background:linear-gradient(135deg,#10243a,#1d4f73)!important}.login-card{border-radius:14px!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 28px 70px rgba(0,0,0,.3)!important}
#toast.success{background:#1f7a55!important}#toast.error{background:#b83e3e!important}
@media(max-width:900px){.sidebar:before{display:none!important}}

/* V70 notification cleanup fix */
.notification-head-actions{display:flex;align-items:center;gap:8px}
.notification-head-actions #closeNotifications{width:34px;height:34px;display:grid;place-items:center;border-radius:9px}
.notification-head-actions #clearNotifications:disabled{opacity:.5;cursor:not-allowed}
.notification-row{border-left:3px solid var(--oc-accent,#2563eb)}
.notification-row.success{border-left-color:#16a34a}.notification-row.warning{border-left-color:#d97706}.notification-row.error{border-left-color:#dc2626}

/* ===== SOURCE: public/font-size-v69.css ===== */
/* V69 Font Size Balance — larger, consistent and layout-safe */
:root{
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:20px;
}

html{font-size:16px!important;}
body{font-size:var(--fs-md)!important;line-height:1.45!important;}

/* Navigation and header */
.brand-text small,.sidebar-label,.card-head small,.section-head small,.settings-title small,.modal-head-left small{font-size:var(--fs-xs)!important;}
.brand-text h1{font-size:17px!important;}
.tab,.top-actions button,.ghost,.primary,.btn,.mini{font-size:13px!important;}
.page-header h3,.saas-page-head h3{font-size:24px!important;}
.page-header h3 small,.saas-page-head h3 small{font-size:13px!important;}

/* Forms and controls */
label,.field label,.master-form label,.settings-card label,.report-filters label{font-size:12px!important;}
input,select,textarea,.form-control,.form-select,
.field input,.field select,.field textarea,
.settings-card input,.settings-card select,.settings-card textarea,
.master-form input,.master-form select,.master-form textarea{font-size:14px!important;}
button,.btn,.primary,.ghost{font-size:13px!important;}

/* Cards, dashboard and reports */
.stat-num{font-size:30px!important;}
.stat-lbl{font-size:13px!important;}
.stat-hint,.quick-page-card small,.quick-action small,.system-card p{font-size:12px!important;}
.card-head h4,.section-head h4,.settings-title h4{font-size:17px!important;}
.quick-page-card strong,.notice-body h4{font-size:15px!important;}
.notice-body p,.popup p,.feature-notice-copy,.recipient-summary{font-size:13px!important;}

/* Standard tables */
table{font-size:13px!important;}
.table-wrap thead th,.backup-table thead th,#reportsPanel th{font-size:12px!important;}
th{font-size:12px!important;}
td{font-size:13px!important;}
.status-chip,.soft-chip,.reason-tag{font-size:11px!important;}

/* Dispatch and received register: increased but still fits desktop width */
#dispatchPanel > .table-wrap th,
#receivedPanel > .table-wrap th{
  font-size:9.5px!important;
  line-height:1.18!important;
  padding:8px 5px!important;
}
#dispatchPanel > .table-wrap td,
#receivedPanel > .table-wrap td{
  font-size:11px!important;
  line-height:1.3!important;
  padding:8px 5px!important;
}
#dispatchPanel .mini,
#receivedPanel .mini,
#dispatchPanel .attach-chip,
#receivedPanel .attach-chip,
#dispatchPanel .status-pill,
#receivedPanel .status-pill{
  font-size:9.5px!important;
}
#dispatchPanel .linked-received-from small,
#receivedPanel .linked-received-from small{font-size:8.5px!important;}

/* Login and modal */
.login-brand small{font-size:11px!important;}
.login-brand h2{font-size:26px!important;}
.login-brand p,.login-card label{font-size:13px!important;}
.login-card input{font-size:14px!important;}
.modal-head h3{font-size:20px!important;}

/* Keep mobile proportionate */
@media(max-width:640px){
  body{font-size:14px!important;}
  .brand-text h1{font-size:16px!important;}
  .page-header h3,.saas-page-head h3{font-size:20px!important;}
  input,select,textarea,.form-control,.form-select{font-size:14px!important;}
  table{font-size:12px!important;}
}

/* Preserve compact print output */
@media print{
  body{font-size:11px!important;}
  table,th,td{font-size:9px!important;}
}

/* V76 SMTP frontend visibility */
.tab[aria-disabled="true"],.quick-page-card[aria-disabled="true"]{opacity:.72}
.access-message{max-width:760px;margin:24px auto;padding:28px;text-align:center}
.access-message p{color:var(--muted);margin:8px 0 0}

/* V77: keep SMTP entry immediately visible */
.smtp-top-shortcut{white-space:nowrap;font-weight:700}
@media(max-width:1100px){.smtp-top-shortcut{font-size:0;padding:9px 11px}.smtp-top-shortcut::before{content:"✉";font-size:18px}}

/* V78 WhatsApp settings */
.wa-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.wa-contact-card{grid-column:1/-1}.compact-form{grid-template-columns:repeat(4,minmax(0,1fr))}.wa-btn{border-color:#22c55e!important;color:#15803d!important}.wa-send-card{max-width:720px}.wa-settings-grid textarea{resize:vertical;min-height:110px}@media(max-width:900px){.wa-settings-grid{grid-template-columns:1fr}.wa-contact-card{grid-column:auto}.compact-form{grid-template-columns:1fr 1fr}}@media(max-width:600px){.compact-form{grid-template-columns:1fr}}


/* V83 WhatsApp multi-recipient checkbox selection */
.wa-recipient-list{max-height:190px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:#fff;padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.wa-recipient-option{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;margin:0}.wa-recipient-option:hover{background:#f8fafc}.wa-recipient-option input{margin-top:3px}.wa-recipient-option span{display:flex;flex-direction:column;min-width:0}.wa-recipient-option strong{font-size:13px}.wa-recipient-option small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.wa-recipient-tools{display:flex;align-items:center;gap:8px;margin-top:8px}.wa-recipient-tools span{margin-left:auto;font-weight:700;font-size:12px;color:var(--muted)}@media(max-width:600px){.wa-recipient-list{grid-template-columns:1fr}}

/* V85 WhatsApp recipient list alignment fix */
.wa-recipient-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:240px;
}
.wa-recipient-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:58px;
  gap:12px;
  padding:10px 12px;
  box-sizing:border-box;
}
.wa-recipient-option input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  flex:0 0 18px;
  width:18px!important;
  height:18px!important;
  min-width:18px;
  max-width:18px;
  margin:0;
  padding:0;
  cursor:pointer;
}
.wa-recipient-option span{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.wa-recipient-option strong{
  display:block;
  line-height:1.25;
}
.wa-recipient-option small{
  display:block;
  line-height:1.35;
}


/* V86 WhatsApp recipient drop-up/down panel */
.wa-recipient-field{border:0!important;padding:0!important;background:transparent!important}
.wa-recipient-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.wa-recipient-toggle:hover{background:#f8fafc}
.wa-recipient-toggle small{color:var(--muted);font-weight:600}
.wa-recipient-toggle-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}
.wa-recipient-toggle-meta b{font-size:12px;color:var(--muted)}
.wa-recipient-arrow{font-size:22px;line-height:1;transition:transform .2s ease;transform:rotate(0deg)}
.wa-recipient-toggle.is-open .wa-recipient-arrow{transform:rotate(180deg)}
.wa-recipient-panel{margin-top:8px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:8px}
.wa-recipient-panel[hidden]{display:none!important}
.wa-recipient-panel .wa-recipient-list{border:0;border-radius:0;padding:0;max-height:240px}
.wa-recipient-panel .wa-recipient-tools{padding-top:8px;border-top:1px solid #eef2f7}


/* V89 WhatsApp recipient checkbox alignment */
.wa-recipient-option{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:12px!important;
  min-height:64px!important;
  padding:10px 12px!important;
}
.wa-recipient-option input[type="checkbox"]{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
}
.wa-recipient-option span{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}


/* V98: Show in Dispatch status tooltip */
.checkbox-control{position:relative}
.dispatch-status-tooltip{
  position:absolute;
  left:42px;
  bottom:calc(100% + 10px);
  z-index:1200;
  width:min(360px,calc(100vw - 80px));
  padding:12px 14px;
  border:1px solid #b8ddc4;
  border-radius:10px;
  background:#f0fff4;
  box-shadow:0 10px 28px rgba(15,23,42,.18);
  color:#14532d;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.dispatch-status-tooltip.show{opacity:1;transform:translateY(0)}
.dispatch-status-tooltip::after{
  content:"";
  position:absolute;
  left:18px;
  top:100%;
  border:8px solid transparent;
  border-top-color:#b8ddc4;
}
.dispatch-status-tooltip strong{display:block;font-size:14px;margin-bottom:3px}
.dispatch-status-tooltip span{display:block;font-size:12px;line-height:1.45;color:#326243}
@media (max-width:640px){
  .dispatch-status-tooltip{left:0;width:min(320px,calc(100vw - 48px))}
}

/* V106: Automatic desktop zoom / viewport adjustment
   Keeps the interface balanced at 80%, 100%, 125% and common laptop widths. */
:root{
  --sidebar-w:clamp(220px,14.5vw,258px);
  --content-max:1540px;
  --content-pad-x:clamp(18px,2.15vw,34px);
  --content-pad-y:clamp(20px,2vw,30px);
}

.main-content{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:var(--content-pad-y) var(--content-pad-x) 44px;
}

.panel.active{
  width:100%;
  min-width:0;
}

/* Prevent very wide screens / 80% browser zoom from stretching empty pages. */
@media (min-width:1800px){
  :root{--content-max:1480px;--sidebar-w:250px}
  .main-content{padding-top:26px}
}

@media (min-width:2200px){
  :root{--content-max:1420px;--sidebar-w:246px}
}

/* Comfortable laptop and 125% zoom behaviour. */
@media (min-width:901px) and (max-width:1280px){
  :root{--sidebar-w:224px;--content-pad-x:20px}
  .tab{padding-inline:10px;font-size:12px}
  .topbar{padding-inline:18px}
  .top-actions{gap:6px}
  .top-actions .ghost{padding-inline:10px}
}

/* Let cards/tables fill the available balanced content area. */
.table-wrap,.settings-card,.quick-card,.list-card,.activity-card,
.system-card,.report-section,.storage-layout,.master-layout{
  max-width:100%;
}

/* Better empty-state proportions on sparse screens such as Recycle Bin. */
.panel.active > .table-wrap:only-child,
.panel.active > .settings-card:only-child{
  min-height:clamp(150px,18vh,260px);
}

/* Keep header controls usable instead of overflowing. */
.page-header,.saas-page-head,.top-actions{
  min-width:0;
}
.page-header > *, .saas-page-head > *{min-width:0}
.page-header h3,.saas-page-head h3{overflow-wrap:anywhere}

@media (max-width:900px){
  :root{--content-max:none;--content-pad-x:16px;--content-pad-y:20px}
  .main-content{max-width:none;margin:0;padding:20px 16px 36px}
}

@media (max-width:640px){
  .main-content{padding:16px 12px 30px}
}

/* V115 Daily MIS + QR Scan History SaaS UI */
.mis-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.mis-actions input,.qr-filterbar input,.qr-filterbar select{min-height:40px;border:1px solid #d9e0ea;border-radius:10px;padding:8px 11px;background:#fff;color:#172033}
.mis-hero,.qr-overview{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px 26px;margin-bottom:18px;border:1px solid #e6eaf0;border-radius:18px;background:linear-gradient(135deg,#ffffff,#f6f8ff);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.mis-hero small,.qr-overview small,.mis-card-head small{font-size:11px;font-weight:800;letter-spacing:.09em;color:#64748b}.mis-hero h2,.qr-overview h2{margin:4px 0 5px;font-size:25px;color:#111827}.mis-hero p,.qr-overview p{margin:0;color:#64748b;max-width:720px}
.mis-health{display:flex;align-items:center;gap:10px;min-width:170px;padding:11px 14px;border:1px solid #d9eee3;border-radius:12px;background:#f4fbf7}.mis-health b,.mis-health small{display:block}.mis-health small{margin-top:2px;font-size:11px;color:#64748b}.mis-live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}
.mis-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.mis-kpi{display:flex;gap:12px;align-items:center;min-width:0;padding:17px;border:1px solid #e3e8ef;border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(15,23,42,.045)}.mis-kpi-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#eef2ff;color:#4338ca;font-weight:900;font-size:18px}.mis-kpi small,.mis-kpi em{display:block}.mis-kpi small{font-size:10px;letter-spacing:.06em;font-weight:800;color:#64748b}.mis-kpi strong{display:block;font-size:25px;line-height:1.1;margin:3px 0;color:#111827}.mis-kpi em{font-style:normal;font-size:11px;color:#94a3b8}.mis-kpi.warn .mis-kpi-icon{background:#fff7ed;color:#ea580c}.mis-kpi.danger .mis-kpi-icon{background:#fff1f2;color:#e11d48}.mis-kpi.success .mis-kpi-icon{background:#ecfdf5;color:#059669}
.mis-grid{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(480px,1.2fr);gap:16px;margin-bottom:16px}.mis-card{padding:18px!important}.mis-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.mis-card-head h4{margin:3px 0 0;font-size:17px}.mis-pill{padding:5px 9px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:11px;font-weight:800;white-space:nowrap}.mis-pill.danger{background:#fff1f2;color:#be123c}
.mis-bars{display:grid;gap:14px}.mis-bar-row{display:grid;grid-template-columns:92px 1fr 38px;gap:10px;align-items:center;font-size:12px}.mis-bar-row b{font-size:12px}.mis-bar-track{height:9px;border-radius:99px;background:#eef2f6;overflow:hidden}.mis-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#4f46e5,#7c3aed)}.mis-bar-row:nth-child(2) .mis-bar-fill{background:linear-gradient(90deg,#f59e0b,#f97316)}.mis-bar-row:nth-child(3) .mis-bar-fill{background:linear-gradient(90deg,#ef4444,#e11d48)}.mis-bar-row:nth-child(4) .mis-bar-fill{background:linear-gradient(90deg,#10b981,#22c55e)}
.mis-table-wrap{overflow:auto;border:1px solid #e7ebf0;border-radius:13px}.mis-table{width:100%;border-collapse:collapse;min-width:700px}.mis-table th{padding:10px 12px;background:#f8fafc;color:#64748b;text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #e7ebf0}.mis-table td{padding:11px 12px;border-bottom:1px solid #eef1f5;font-size:12px;color:#334155}.mis-table tr:last-child td{border-bottom:0}.mis-table .empty-row{text-align:center;color:#94a3b8;padding:28px}.mis-status{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f1f5f9;font-size:10px;font-weight:800}.mis-status.overdue{background:#fff1f2;color:#be123c}.mis-status.closed{background:#ecfdf5;color:#047857}.mis-status.pending{background:#fff7ed;color:#c2410c}
.qr-overview{background:linear-gradient(135deg,#111827,#1f2a44);color:#fff}.qr-overview small,.qr-overview p{color:#cbd5e1}.qr-overview h2{color:#fff}.qr-security-chip{padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700;white-space:nowrap}.qr-security-chip span{color:#34d399}.qr-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.qr-history-card{padding:0!important;overflow:hidden}.qr-filterbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:14px;border-bottom:1px solid #e7ebf0}.qr-search{display:flex;align-items:center;gap:7px;flex:1;min-width:240px;border:1px solid #d9e0ea;border-radius:10px;padding:0 10px;background:#fff}.qr-search input{border:0!important;outline:0;flex:1;padding-left:0}.qr-history-table{min-width:980px}.qr-action-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:10px;font-weight:800}.qr-action-badge.download{background:#ecfdf5;color:#047857}.qr-action-badge.qr-scan{background:#f0f9ff;color:#0369a1}.qr-history-foot{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;color:#64748b;font-size:11px}.qr-history-foot small{color:#94a3b8}
@media(max-width:1200px){.mis-kpi-grid{grid-template-columns:repeat(3,1fr)}.qr-kpis{grid-template-columns:repeat(3,1fr)}.mis-grid{grid-template-columns:1fr}}
@media(max-width:700px){.mis-hero,.qr-overview{align-items:flex-start;flex-direction:column;padding:18px}.mis-actions{width:100%}.mis-actions input{flex:1}.mis-kpi-grid,.qr-kpis{grid-template-columns:repeat(2,1fr)}.mis-kpi{padding:13px}.mis-kpi strong{font-size:21px}.qr-filterbar>*{width:100%}.qr-search{min-width:0}.qr-history-foot{flex-direction:column}.mis-head{align-items:flex-start!important}}
@media print{body *{visibility:hidden!important}#dailyMisPanel,#dailyMisPanel *{visibility:visible!important}#dailyMisPanel{position:absolute;left:0;top:0;width:100%;padding:12px}.sidebar,.topbar,.mis-actions{display:none!important}.mis-kpi-grid{grid-template-columns:repeat(3,1fr)}.mis-grid{grid-template-columns:1fr 1fr}.mis-card,.mis-kpi,.mis-hero{box-shadow:none!important}}

/* V117 Smart attachment preview */
.image-preview-stage{display:flex;align-items:center;justify-content:center;min-height:280px;max-height:68vh;padding:16px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;overflow:auto}
#previewContent .attachment-image-preview{width:auto;max-width:100%;height:auto;max-height:64vh;object-fit:contain;margin:auto;border-radius:8px;box-shadow:0 4px 18px rgba(15,23,42,.10)}
#previewContent .attachment-frame{width:100%;height:62vh;border:1px solid var(--line);border-radius:10px;background:#fff}
#previewContent .attachment-text-frame{background:#fff}
.attachment-preview-unavailable{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#334155}
.attachment-preview-unavailable .attachment-preview-icon{font-size:42px;line-height:1}.attachment-preview-unavailable b{font-size:16px;color:#0f172a}.attachment-preview-unavailable span{max-width:100%;font-size:14px;font-weight:700;word-break:break-word}.attachment-preview-unavailable small{font-size:12px;color:#64748b}
@media(max-width:640px){.image-preview-stage{min-height:220px;max-height:56vh;padding:10px}#previewContent .attachment-image-preview{max-height:52vh}#previewContent .attachment-frame{height:55vh}.attachment-preview-unavailable{min-height:220px;padding:20px}}