:root {
  --navy-950: #101828;
  --navy-900: #152237;
  --navy-800: #20324d;
  --navy-700: #344b6b;
  --blue-700: #175cd3;
  --blue-600: #2673dd;
  --blue-100: #dceaff;
  --blue-50: #f0f6ff;
  --teal-600: #0e9384;
  --teal-100: #d5f5ef;
  --red-600: #d92d20;
  --red-100: #fee4e2;
  --amber-600: #dc6803;
  --amber-100: #fef0c7;
  --green-600: #039855;
  --green-100: #d1fadf;
  --gray-950: #101828;
  --gray-800: #1d2939;
  --gray-700: #344054;
  --gray-600: #475467;
  --gray-500: #667085;
  --gray-400: #98a2b3;
  --gray-300: #d0d5dd;
  --gray-200: #eaecf0;
  --gray-100: #f2f4f7;
  --gray-50: #f9fafb;
  --white: #fff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, .18);
  --radius: 12px;
  --sidebar-width: 258px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--gray-950);
  background: #f5f7fa;
  font-size: 14px;
  line-height: 1.45;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.app-loading, .auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(38, 115, 221, .2), transparent 32%),
    radial-gradient(circle at 85% 90%, rgba(14, 147, 132, .18), transparent 34%),
    linear-gradient(145deg, #eef4fc, #f8fafc 55%, #eef7f5);
}

.loading-card { text-align: center; color: var(--gray-600); }
.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  letter-spacing: -.5px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--blue-600), #1555af);
  box-shadow: 0 10px 24px rgba(23, 92, 211, .25);
}
.loading-card .brand-mark { margin: 0 auto 14px; }

.auth-card {
  width: min(100%, 460px);
  padding: 34px;
  border: 1px solid rgba(208, 213, 221, .75);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-lg);
}

.auth-brand { display: flex; gap: 13px; align-items: center; margin-bottom: 30px; }
.auth-brand h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.auth-brand p { margin: 2px 0 0; color: var(--gray-500); font-size: 12px; }
.auth-card h2 { margin: 0 0 7px; font-size: 26px; letter-spacing: -.6px; }
.auth-lead { margin: 0 0 24px; color: var(--gray-600); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: white;
}

.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 24px; }
.sidebar-brand .brand-mark { width: 42px; height: 42px; border-radius: 11px; }
.sidebar-brand strong { display: block; font-size: 17px; }
.sidebar-brand span { display: block; margin-top: 1px; color: #9fb0c8; font-size: 11px; }

.nav-group-label {
  padding: 13px 11px 7px;
  color: #7890af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.nav-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  color: #cbd5e1;
  background: transparent;
  text-align: left;
  transition: .16s ease;
}
.nav-button:hover { color: white; background: rgba(255, 255, 255, .07); }
.nav-button.active { color: white; background: rgba(38, 115, 221, .28); box-shadow: inset 3px 0 0 #5ba0ff; }
.nav-icon { width: 20px; text-align: center; font-size: 16px; }
.nav-spacer { flex: 1; }

.sidebar-user {
  margin-top: 16px;
  padding: 14px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-user-main { display: flex; align-items: center; gap: 10px; }
.avatar {
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #3f7fda, #0e9384);
  font-size: 12px;
  font-weight: 800;
}
.sidebar-user strong { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sidebar-user span { display: block; color: #8da2bf; font-size: 10px; }
.logout-button {
  margin-left: auto;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 8px;
  color: #b8c5d8;
  background: transparent;
}
.logout-button:hover { color: white; background: rgba(255, 255, 255, .09); }

.main-shell { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--gray-200);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
}
.topbar-title h1 { margin: 0; font-size: 21px; letter-spacing: -.35px; }
.topbar-title p { margin: 2px 0 0; color: var(--gray-500); font-size: 12px; }
.topbar-actions { display: flex; gap: 9px; align-items: center; }

.content { padding: 25px 28px 42px; }
.content-wide { padding-inline: 20px; }

.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  color: var(--gray-700);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { border-color: var(--gray-400); background: var(--gray-50); }
.btn-primary { border-color: var(--blue-600); color: white; background: var(--blue-600); }
.btn-primary:hover { border-color: var(--blue-700); background: var(--blue-700); }
.btn-danger { border-color: #f3b7b3; color: var(--red-600); background: #fff8f7; }
.btn-danger:hover { border-color: var(--red-600); background: var(--red-100); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-sm { min-height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 12px; }
.icon-btn { width: 36px; padding: 0; }

.grid { display: grid; gap: 18px; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.two-col { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }

.stat-card, .panel {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.stat-card { position: relative; overflow: hidden; padding: 18px 19px; }
.stat-card::after { content: ""; position: absolute; width: 70px; height: 70px; right: -25px; top: -25px; border-radius: 50%; background: var(--blue-50); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-700); background: var(--blue-50); font-size: 16px; }
.stat-label { margin-top: 13px; color: var(--gray-500); font-size: 12px; }
.stat-value { margin-top: 2px; font-size: 27px; font-weight: 750; letter-spacing: -.7px; }
.stat-value-money { font-size: 21px; line-height: 1.45; }
.stat-foot { margin-top: 4px; color: var(--gray-500); font-size: 11px; }

.section-space { margin-top: 20px; }
.panel-header {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
}
.panel-title { margin: 0; font-size: 15px; }
.panel-subtitle { margin: 2px 0 0; color: var(--gray-500); font-size: 11px; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }

.quick-actions { display: grid; gap: 10px; }
.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  color: var(--gray-800);
  background: white;
  text-align: left;
}
.quick-action:hover { border-color: #b8cff0; background: var(--blue-50); }
.quick-action .qa-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-700); background: var(--blue-100); }
.quick-action strong { display: block; font-size: 12px; }
.quick-action small { display: block; margin-top: 1px; color: var(--gray-500); }

.toolbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.search-box { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-box input { width: 100%; padding-left: 36px; }
.search-box::before { content: "⌕"; position: absolute; left: 12px; top: 8px; color: var(--gray-500); font-size: 18px; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
  background: var(--gray-50);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .55px;
  text-align: left;
  text-transform: uppercase;
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafcff; }
.cell-title { font-weight: 650; }
.cell-sub { display: block; margin-top: 2px; color: var(--gray-500); font-size: 11px; }
.table-actions { display: flex; justify-content: flex-end; gap: 5px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-draft { color: var(--amber-600); background: var(--amber-100); }
.badge-ready, .badge-active { color: var(--green-600); background: var(--green-100); }
.badge-sent { color: var(--blue-700); background: var(--blue-100); }
.badge-open { color: var(--amber-600); background: var(--amber-100); }
.badge-paid { color: var(--green-600); background: var(--green-100); }
.badge-cancelled { color: var(--red-600); background: var(--red-100); }
.badge-locked { color: var(--red-600); background: var(--red-100); }
.badge-admin { color: #6941c6; background: #ebe9fe; }
.badge-editor { color: var(--blue-700); background: var(--blue-100); }
.badge-readonly { color: var(--gray-600); background: var(--gray-100); }

.empty-state { padding: 48px 20px; text-align: center; color: var(--gray-500); }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 15px; color: var(--blue-700); background: var(--blue-50); font-size: 23px; }
.empty-state h3 { margin: 0 0 5px; color: var(--gray-800); font-size: 15px; }
.empty-state p { max-width: 420px; margin: 0 auto 16px; font-size: 12px; }

.field { display: grid; gap: 6px; }
.field label, .field-label { color: var(--gray-700); font-size: 11px; font-weight: 700; }
.field-hint { color: var(--gray-500); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid .span-2 { grid-column: 1 / -1; }

input, select, textarea {
  min-height: 39px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  outline: none;
  color: var(--gray-900, #101828);
  background: white;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #6aa3ed; box-shadow: 0 0 0 3px rgba(38, 115, 221, .12); }
input[readonly] { color: var(--gray-600); background: var(--gray-100); }
.required::after { content: " *"; color: var(--red-600); }
.checkbox-line { display: flex; align-items: flex-start; gap: 9px; }
.checkbox-line input { width: 16px; min-height: 16px; margin-top: 2px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, .56);
  backdrop-filter: blur(3px);
}
.modal {
  width: min(100%, 720px);
  max-height: min(90vh, 900px);
  overflow: auto;
  border-radius: 15px;
  background: white;
  box-shadow: var(--shadow-lg);
}
.modal-sm { width: min(100%, 470px); }
.modal-lg { width: min(100%, 920px); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--gray-200); background: white; }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-header p { margin: 3px 0 0; color: var(--gray-500); font-size: 11px; }
.modal-close { width: 33px; height: 33px; border: 0; border-radius: 8px; color: var(--gray-500); background: transparent; }
.modal-close:hover { color: var(--gray-800); background: var(--gray-100); }
.modal-body { padding: 20px; }
.modal-footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--gray-200); background: white; }

.toast-region { position: fixed; z-index: 300; right: 20px; top: 20px; display: grid; gap: 9px; }
.toast { min-width: 270px; max-width: 420px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 10px; background: white; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.success { border-left: 4px solid var(--green-600); }
.toast.error { border-left: 4px solid var(--red-600); }
.toast.info { border-left: 4px solid var(--blue-600); }
.toast strong { display: block; font-size: 12px; }
.toast span { display: block; margin-top: 2px; color: var(--gray-500); font-size: 11px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-7px); } }

.editor-layout { display: grid; grid-template-columns: 300px minmax(680px, 1fr); gap: 17px; align-items: start; }
.invoice-editor-layout { display: grid; grid-template-columns: 315px minmax(760px, 1fr); gap: 17px; align-items: start; }
.editor-side { position: sticky; top: 87px; }
.editor-meta { display: grid; gap: 13px; }
.editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.autosave-status { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--green-600); background: var(--green-100); font-size: 10px; font-weight: 650; }
.autosave-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.autosave-status.dirty { color: var(--amber-600); background: var(--amber-100); }
.autosave-status.saving { color: var(--blue-700); background: var(--blue-100); }

.editor-stage { min-width: 0; }
.rich-toolbar {
  position: sticky;
  top: 70px;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--gray-200);
  border-radius: 10px 10px 0 0;
  background: white;
  box-shadow: var(--shadow-sm);
}
.tool-button { min-width: 31px; height: 31px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--gray-700); background: transparent; font-size: 12px; }
.tool-button:hover { border-color: var(--gray-200); background: var(--gray-100); }
.tool-divider { width: 1px; height: 23px; margin: 0 3px; background: var(--gray-200); }
.toolbar-select { width: auto; min-height: 31px; padding: 4px 24px 4px 8px; font-size: 11px; }

.paper-wrap { overflow: auto; padding: 25px; border: 1px solid var(--gray-200); border-top: 0; border-radius: 0 0 10px 10px; background: #dfe4eb; }
.page-counter { position: sticky; top: 6px; z-index: 4; width: max-content; margin: 0 0 8px auto; padding: 4px 9px; border-radius: 999px; color: white; background: rgba(16, 24, 40, .72); font-size: 10px; }
.letter-paper {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 20mm 20mm 20mm 25mm;
  color: #111;
  background: white;
  box-shadow: 0 7px 22px rgba(16, 24, 40, .16);
  font-family: Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.45;
}
.letter-paper-multipage {
  height: auto;
  background-color: white;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(297mm - 2px), #b8c1ce calc(297mm - 1px), #eef1f5 297mm);
  background-size: 100% 297mm;
}
.letter-paper-multipage .letter-body { min-height: 145mm; }
.letter-head { min-height: 32mm; display: grid; grid-template-columns: 1fr 67mm; gap: 15mm; }
.letter-logo { max-width: 52mm; max-height: 25mm; object-fit: contain; object-position: left top; }
.letter-sender-info { text-align: right; font-size: 8.5pt; line-height: 1.35; }
.letter-sender-info strong { font-size: 10.5pt; }
.letter-window-row { display: grid; grid-template-columns: 90mm 1fr; gap: 12mm; min-height: 47mm; margin-top: 4mm; }
.return-address { padding-bottom: 3mm; border-bottom: 1px solid #555; font-size: 7pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipient-address { padding-top: 4mm; line-height: 1.35; }
.letter-meta-box { padding-top: 6mm; font-size: 9pt; }
.letter-meta-row { display: grid; grid-template-columns: 26mm 1fr; gap: 4mm; margin-bottom: 2mm; }
.letter-meta-row span:first-child { color: #555; }
.letter-subject { margin: 4mm 0 6mm; font-weight: 700; }
.letter-body { min-height: 115mm; outline: none; white-space: normal; }
.letter-body:focus { box-shadow: inset 0 0 0 1px #9fc4f5; }
.letter-signature { display: block; width: auto; height: auto; max-width: 50mm; max-height: 22mm; margin-top: 4mm; border: 0; background: transparent; object-fit: contain; object-position: left bottom; }
.letter-footer { position: absolute; left: 25mm; right: 20mm; bottom: 12mm; padding-top: 3mm; border-top: 1px solid #aaa; color: #555; font-size: 7.5pt; text-align: center; }

.invoice-stage { min-width: 0; display: grid; gap: 17px; }
.invoice-items-scroll { overflow-x: auto; }
.invoice-items-table { min-width: 900px; table-layout: fixed; }
.invoice-items-table th:nth-child(1) { width: 45px; }
.invoice-items-table th:nth-child(2) { width: 34%; }
.invoice-items-table th:nth-child(3) { width: 85px; }
.invoice-items-table th:nth-child(4) { width: 90px; }
.invoice-items-table th:nth-child(5) { width: 110px; }
.invoice-items-table th:nth-child(6) { width: 80px; }
.invoice-items-table th:nth-child(7) { width: 105px; }
.invoice-items-table th:nth-child(8) { width: 45px; }
.invoice-items-table td { padding: 8px; vertical-align: top; }
.invoice-items-table input, .invoice-items-table select, .invoice-items-table textarea { min-height: 34px; padding: 6px 8px; font-size: 12px; }
.invoice-items-table textarea { min-height: 54px; resize: vertical; }
.position-number { padding-top: 16px !important; color: var(--gray-500); text-align: center; font-weight: 700; }
.line-total { padding-top: 16px !important; text-align: right; font-weight: 650; }
.invoice-paper-wrap { border-top: 1px solid var(--gray-200); border-radius: 10px; }
.invoice-paper { min-height: 297mm; padding-top: 18mm; padding-bottom: 24mm; font-size: 10pt; }
.invoice-head { min-height: 29mm; display: grid; grid-template-columns: 1fr 70mm; gap: 15mm; }
.invoice-sender { text-align: right; font-size: 8.5pt; line-height: 1.35; }
.invoice-sender strong { font-size: 11pt; }
.invoice-title-row { display: grid; grid-template-columns: 1fr 62mm; gap: 15mm; min-height: 48mm; margin-top: 3mm; }
.invoice-title-row h2 { margin: 7mm 0 1mm; color: var(--navy-800); font-size: 22pt; letter-spacing: 1.2px; text-align: right; }
.invoice-number { color: #555; font-size: 10pt; text-align: right; }
.invoice-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; margin: 5mm 0 8mm; padding: 4mm; border-radius: 2mm; background: #f5f7fa; }
.invoice-meta div { display: grid; gap: 1mm; }
.invoice-meta span { color: #666; font-size: 7.5pt; }
.invoice-meta strong { font-size: 8.5pt; }
.invoice-intro { margin: 0 0 5mm; }
.invoice-preview-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.invoice-preview-table th { padding: 2.5mm 2mm; border-bottom: 1.5px solid #344b6b; color: #344b6b; font-size: 7.5pt; text-align: left; text-transform: uppercase; }
.invoice-preview-table td { padding: 3mm 2mm; border-bottom: 1px solid #d0d5dd; vertical-align: top; }
.invoice-totals { width: 75mm; display: grid; gap: 2mm; margin: 7mm 0 8mm auto; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 8mm; }
.invoice-grand-total { margin-top: 1mm; padding-top: 3mm; border-top: 2px solid #344b6b; font-size: 12pt; }
.invoice-note { margin: 6mm 0 4mm; padding: 3mm 4mm; border-left: 2px solid #2673dd; background: #f0f6ff; font-size: 8.5pt; }
.invoice-payment { margin: 6mm 0 12mm; }
.invoice-footer { position: absolute; left: 25mm; right: 20mm; bottom: 12mm; padding-top: 3mm; border-top: 1px solid #aaa; color: #555; font-size: 7.2pt; text-align: center; }

.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-item { padding: 12px; border-radius: 9px; background: var(--gray-50); }
.detail-item label { display: block; margin-bottom: 4px; color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.detail-item div { overflow-wrap: anywhere; }

.mandant-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; padding: 15px; border: 1px solid var(--gray-200); border-radius: 11px; background: white; }
.mandant-logo { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--blue-700); background: var(--blue-50); font-weight: 800; }
.mandant-logo img { width: 100%; height: 100%; object-fit: contain; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

.permission-list { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--gray-200); border-radius: 9px; max-height: 180px; overflow: auto; }
.permission-item { display: flex; align-items: center; gap: 8px; }
.permission-item input { width: 15px; min-height: 15px; }

.callout { display: flex; gap: 11px; padding: 13px; border: 1px solid #b8cff0; border-radius: 10px; color: #184985; background: var(--blue-50); }
.callout[hidden] { display: none !important; }
.callout.warning { border-color: #f3c68f; color: #8a4714; background: #fff7ed; }
.callout.danger { border-color: #f4b6b2; color: #9b261d; background: #fff5f4; }
.callout strong { display: block; font-size: 12px; }
.callout p { margin: 2px 0 0; font-size: 11px; }

.settings-section + .settings-section { margin-top: 16px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--gray-200); }
.settings-row:last-child { border-bottom: 0; }
.settings-row h3 { margin: 0; font-size: 13px; }
.settings-row p { margin: 3px 0 0; color: var(--gray-500); font-size: 11px; }

.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--gray-200); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--blue-700); background: var(--blue-50); }
.activity-item strong { display: block; font-size: 11px; }
.activity-item span { color: var(--gray-500); font-size: 10px; }

.version-list { display: grid; gap: 9px; }
.version-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--gray-200); border-radius: 10px; background: white; }
.version-number { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-700); background: var(--blue-50); font-weight: 800; }
.version-item strong, .version-item span, .version-item small { display: block; }
.version-item span, .version-item small { margin-top: 2px; color: var(--gray-500); font-size: 10px; }
.version-preview { min-height: 360px; padding: 25px; border: 1px solid var(--gray-200); background: white; font-family: Arial, sans-serif; line-height: 1.55; }

.template-toolbar { display: flex; gap: 5px; align-items: center; padding: 7px; border: 1px solid var(--gray-300); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--gray-50); }
.template-toolbar select { width: auto; min-height: 31px; margin-left: auto; }
.template-editor { min-height: 300px; padding: 18px; border: 1px solid var(--gray-300); border-radius: 0 0 8px 8px; outline: none; background: white; font-family: Arial, sans-serif; line-height: 1.5; }
.template-editor:focus { border-color: #6aa3ed; box-shadow: 0 0 0 3px rgba(38, 115, 221, .12); }
.callout code { padding: 1px 5px; border-radius: 4px; background: rgba(23, 92, 211, .1); font-family: Consolas, monospace; }

.mobile-menu { display: none; }
.muted { color: var(--gray-500); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.hidden { display: none !important; }

@media (max-width: 1120px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
  .editor-layout, .invoice-editor-layout { grid-template-columns: 1fr; }
  .editor-side { position: static; }
}

@media (max-width: 780px) {
  :root { --sidebar-width: 225px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .main-shell { grid-column: 1 / -1; }
  .topbar { padding: 0 16px; }
  .content { padding: 18px 15px 36px; }
  .mobile-menu { display: inline-flex; }
  .stats-grid, .card-grid, .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .topbar-title p { display: none; }
}

@media print {
  @page { size: A4; margin: 0; }
  body { background: white; }
  body * { visibility: hidden !important; }
  .letter-paper, .letter-paper * { visibility: visible !important; }
  .letter-paper { position: absolute; inset: 0 auto auto 0; width: 210mm; min-height: 297mm; margin: 0; box-shadow: none; }
  .letter-paper-multipage { background: white !important; }
  .letter-body:empty::before { display: none; }
  .invoice-paper-wrap { padding: 0; border: 0; background: white; }
}

/* Save feedback remains visible beside the dialog actions. */
.seluko-save-status{flex:0 0 100%;font-size:13px;line-height:1.4;color:#23548b;overflow-wrap:anywhere}.seluko-save-status.failed{color:#a12d28}.modal-footer:has(.seluko-save-status){flex-wrap:wrap}

.modal{max-width:calc(100vw - 40px)}

/* Calendar on phone: explicit horizontal month navigation and compact agenda. */
.cal-scroll{max-width:100%;overflow-x:auto}.cal-scroll .calendar-panel{min-width:700px}.calendar-event small{display:block;font-size:10px;opacity:.8}.cal-agenda-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #e4e9f2}.cal-agenda-row .calendar-event{white-space:normal;text-align:left;width:100%}@media(max-width:600px){.cal-agenda-row{grid-template-columns:1fr;gap:4px}#calendar-month{max-width:170px}}

#calendar-month{width:170px;flex:0 0 170px}.toolbar-row:has(#calendar-month){justify-content:flex-start}
@media(max-width:700px){.deskora-shell .topbar{flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px}.deskora-shell .topbar-leading{width:100%;min-width:0}.deskora-shell .topbar-actions{width:100%;min-width:0;flex-wrap:wrap}.deskora-shell #topbar-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:0;flex:1}.deskora-shell #topbar-actions .btn{white-space:normal;max-width:100%}}

.filing-search-results{max-height:260px;overflow-y:auto;border:1px solid #ced8ed;border-radius:10px;background:var(--surface,#fff);box-shadow:0 5px 14px #172c4920;margin-top:4px;width:100%;min-width:0}.filing-search-results[hidden]{display:none}.filing-search-results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e5e9f1;background:transparent;color:inherit;padding:12px;min-height:48px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}.filing-search-results button strong,.filing-search-results button small{display:block}.filing-search-results button small{margin-top:4px;color:var(--gray-500);font-size:12px}.filing-search-results button:hover,.filing-search-results button[aria-selected="true"]{background:#edf1ff;color:#182763}.filing-search-results p{padding:12px;margin:0;font-size:13px}

.a162-action-group{border:1px solid var(--border,#dbe2ea);border-radius:8px;margin:8px 0;padding:10px 12px}.a162-action-group summary{cursor:pointer;font-weight:600;padding:6px 0}.a162-action-group .form-grid{margin-top:10px}.a162-action-group .checkbox-line{min-height:44px}