@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/material-icons.woff2) format('woff2');
}
/* === Voz ERP — estilos (Material-like, dirigidos por variables de tema) === */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --topBarBackground:#1E293B; --topBarText:#fff; }
html, body { height: 100%; }
body {
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  background: var(--contentBackground);
  color: var(--textPrimary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.material-icons, .micon {
  font-family: 'Material Icons';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; vertical-align: middle;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); background-clip: padding-box; }

/* ---------- LOGIN ---------- */
#login {
  position: fixed; inset: 0; background: #0F172A;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 420px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 16px; padding: 40px;
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center;
}
.login-logo { width: 80px; height: 80px; border-radius: 50%; background: #EFF6FF; display: flex; align-items: center; justify-content: center; }
.login-logo .micon { font-size: 48px; color: #2563EB; }
.login-card h1 { font-size: 28px; font-weight: 700; color: #0F172A; letter-spacing: -.5px; margin-top: 24px; }
.login-sub { color: #64748B; font-size: 14px; margin-top: 8px; margin-bottom: 36px; }
.login-field { position: relative; width: 100%; margin-bottom: 16px; }
.login-field .micon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 20px; }
.login-field input {
  width: 100%; height: 52px; padding: 0 14px 0 46px; font-size: 15px;
  background: #F8FAFC; border: 1.5px solid transparent; border-radius: 8px; color: #0F172A; outline: none;
}
.login-field input:focus { border-color: #2563EB; }
.login-btn {
  width: 100%; height: 48px; margin-top: 16px; background: #2563EB; color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .5px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.login-btn:hover { background: #1D4ED8; }
.login-hint { margin-top: 20px; font-size: 12px; color: #94A3B8; text-align: center; line-height: 1.6; }
.login-hint b { color: #64748B; }
.login-lang { position: absolute; top: 24px; right: 24px; }
.lang-pill { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; color: #fff; font-size: 13px; }

/* ---------- TOP BAR ---------- */
#app { display: none; flex-direction: column; height: 100vh; }
.topbar {
  height: 60px; flex: 0 0 60px; background: var(--topBarBackground); color: var(--topBarText);
  display: flex; align-items: center; padding: 0 8px 0 16px; gap: 4px; z-index: 30;
}
.topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.topbar-brand .micon { color: var(--topBarText); }
.topbar-spacer { flex: 1; }
.topbar-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--topBarIcon); }
.topbar-icon-btn:hover { background: rgba(255,255,255,.1); }
.topbar-icon-btn .micon { font-size: 20px; }
.lang-flag { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.topbar-lang { display: flex; align-items: center; gap: 4px; padding: 0 10px; cursor: pointer; color: var(--topBarIcon); }
.config-pill { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,.12); border-radius: 6px; color: var(--topBarText); font-size: 12px; font-weight: 500; cursor: pointer; }
.config-pill .micon { font-size: 14px; color: var(--topBarIcon); }
.topbar-user { display: flex; flex-direction: column; align-items: flex-end; padding: 0 12px; }
.topbar-user .u-name { font-size: 13px; font-weight: 700; }
.topbar-user .u-comp { font-size: 11px; color: var(--topBarTextSecondary); }

/* ---------- SHELL ---------- */
.shell { flex: 1; display: flex; min-height: 0; position: relative; }
.sidebar {
  background: var(--sidebarBackground); border-right: 1px solid var(--sidebarBorder);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1); flex: 0 0 auto;
}
.sidebar-header { background: var(--sidebarHeaderBackground); padding: 20px 12px 20px 20px; }
.sidebar-header-top { display: flex; align-items: flex-start; justify-content: space-between; }
.sidebar-avatar { padding: 10px; border-radius: 8px; background: var(--sidebarHeaderAvatarBg); display: flex; }
.sidebar-avatar .micon { font-size: 32px; color: var(--sidebarHeaderText); }
.sidebar-collapse { color: var(--sidebarHeaderIcon); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sidebar-collapse:hover { background: rgba(255,255,255,.12); }
.sidebar-username { font-weight: 600; font-size: 15px; color: var(--sidebarHeaderText); margin-top: 16px; }
.sidebar-company { color: var(--sidebarHeaderSubtext); font-size: 12px; margin-top: 4px; }
.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-top: 12px; }
.menu-tile {
  margin: 2px 12px; border-radius: 6px; display: flex; align-items: center; gap: 0;
  padding: 9px 12px; cursor: pointer; min-height: 40px;
}
.menu-tile .micon { font-size: 20px; color: var(--sidebarSectionIcon); }
.menu-tile .tile-label { font-size: 13px; font-weight: 500; color: var(--sidebarSectionText); margin-left: 14px; white-space: nowrap; }
.menu-tile:hover { background: var(--sidebarItemHoverBackground); }
.menu-tile.selected { background: var(--sidebarItemSelectedBackground); }
.menu-tile.selected .micon { color: var(--sidebarItemSelectedIcon); }
.menu-tile.selected .tile-label { color: var(--sidebarItemSelectedText); font-weight: 600; }
.menu-section-head {
  display: flex; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; min-height: 44px;
}
.menu-section-head .drag { color: var(--sidebarDragHandle); font-size: 18px; margin-right: 8px; cursor: grab; }
.menu-section-head .sec-icon { color: var(--sidebarSectionIcon); font-size: 20px; }
.menu-section-head .sec-title { font-weight: 600; font-size: 13px; color: var(--sidebarSectionText); margin-left: 14px; flex: 1; white-space: nowrap; }
.menu-section-head .expand { color: var(--sidebarSectionIcon); font-size: 22px; transition: transform .2s; }
.menu-section-head.collapsed .expand { transform: rotate(-90deg); }
.menu-subitem {
  margin: 2px 12px; border-radius: 6px; display: flex; align-items: center;
  padding: 7px 12px 7px 48px; cursor: pointer; min-height: 36px;
}
.menu-subitem .sub-label { font-size: 13px; font-weight: 500; color: var(--sidebarItemText); flex: 1; white-space: nowrap; }
.menu-subitem .drag-handle { color: var(--sidebarDragHandle); font-size: 18px; opacity: 0; cursor: grab; }
.menu-subitem:hover { background: var(--sidebarItemHoverBackground); }
.menu-subitem:hover .drag-handle { opacity: 1; }
.menu-subitem.selected { background: var(--sidebarItemSelectedBackground); }
.menu-subitem.selected .sub-label { color: var(--sidebarItemSelectedText); font-weight: 600; }
.menu-section-items { overflow: hidden; }
.menu-section-items.collapsed { display: none; }
.sidebar-config { border-top: 1px solid var(--sidebarConfigBorder); padding: 8px 0; }
.sidebar-resize { width: 5px; cursor: col-resize; background: transparent; flex: 0 0 auto; }
.sidebar-resize:hover { background: var(--accentSubtle); }
.sidebar-collapsed-btn {
  position: absolute; left: 0; top: 16px; background: var(--topBarBackground); color: #fff;
  border-radius: 0 8px 8px 0; padding: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 20; display: flex;
}
.content { flex: 1; overflow: auto; background: var(--contentBackground); min-width: 0; }
.sidebar-backdrop { display: none; }
.sidebar.drawer { position: absolute; z-index: 45; top: 0; bottom: 0; left: 0; height: 100%; width: min(300px, 82vw); box-shadow: 4px 0 24px rgba(0,0,0,.28); transform: translateX(-100%); }
.sidebar.drawer.open { transform: translateX(0); }
.sidebar-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.5); z-index: 44; opacity: 0; pointer-events: none; transition: opacity .28s; }
.sidebar-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

/* ---------- common buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; font-size: 14px; font-weight: 600; padding: 10px 16px; transition: filter .12s, background .12s; }
.btn .micon { font-size: 18px; }
.btn-primary { background: var(--buttonPrimaryBackground); color: var(--buttonPrimaryText); }
.btn-primary:hover { filter: brightness(.93); }
.btn-secondary { background: var(--textSecondary); color: #fff; }
.btn-success { background: var(--statusSuccess); color: #fff; }
.btn-outline-danger { border: 1px solid var(--statusError); color: var(--statusError); background: transparent; }
.btn-outline-danger:hover { background: color-mix(in srgb, var(--statusError) 8%, transparent); }
.btn-text { color: var(--textSecondary); padding: 8px 10px; font-weight: 500; }
.btn-text:hover { background: rgba(100,116,139,.08); }

/* ---------- DASHBOARD ---------- */
.dash { padding: 24px; height: 100%; display: flex; flex-direction: column; }
.dash-h1 { font-size: 28px; font-weight: 700; color: var(--textPrimary); }
.dash-sub { font-size: 14px; color: var(--textSecondary); margin-top: 8px; }
.kpi-grid { display: grid; gap: 24px; margin-top: 32px; }
.kpi-card { background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.02); }
.kpi-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kpi-ico .micon { font-size: 28px; }
.kpi-body { flex: 1; min-width: 0; }
.kpi-title { font-size: 13px; font-weight: 600; color: var(--textSecondary); }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--textPrimary); margin-top: 4px; }
.kpi-trend { padding: 4px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dash-bottom { flex: 1; display: flex; gap: 24px; margin-top: 32px; min-height: 0; }
.panel { background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,.02); display: flex; flex-direction: column; min-height: 0; }
.panel-title { font-size: 16px; font-weight: 700; color: var(--textPrimary); margin-bottom: 20px; }
.panel-scroll { flex: 1; overflow-y: auto; padding-right: 8px; }
.act-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.act-ico { padding: 10px; border-radius: 8px; display: flex; }
.act-ico .micon { font-size: 18px; }
.act-main { flex: 1; min-width: 0; }
.act-title { font-size: 14px; font-weight: 700; color: var(--textPrimary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-meta { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--textSecondary); }
.act-meta .micon { font-size: 12px; }
.act-date { font-size: 12px; font-weight: 500; color: var(--textSecondary); white-space: nowrap; }
.qa-section { border-bottom: 1px solid transparent; }
.qa-head { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; }
.qa-badge { padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); display: flex; }
.qa-badge .micon { font-size: 16px; color: var(--accent); }
.qa-title { font-size: 14px; font-weight: 600; color: var(--textPrimary); flex: 1; }
.qa-item { display: flex; align-items: center; gap: 8px; padding: 8px; margin-left: 12px; border-radius: 8px; cursor: pointer; }
.qa-item:hover { background: var(--tableRowHoverBackground); }
.qa-item .micon.lead { font-size: 16px; color: var(--textSecondary); }
.qa-item .qa-label { font-size: 13px; color: var(--textPrimary); flex: 1; }
.qa-item .micon.add { font-size: 16px; color: var(--accent); }

/* ---------- LIST ---------- */
.list-card { margin: 16px; background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.02); display: flex; flex-direction: column; height: calc(100% - 32px); overflow: hidden; }
.list-toolbar { display: flex; align-items: center; padding: 12px 16px; gap: 12px; }
.list-title { font-size: 18px; font-weight: 700; color: var(--textPrimary); }
.toolbar-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.toolbar-divider { width: 1px; height: 24px; background: var(--divider); margin: 0 4px; }
.anulado-toggle { display: flex; height: 36px; padding: 3px; background: var(--contentBackground); border: 1px solid var(--surfaceBorder); border-radius: 6px; }
.anulado-opt { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--textSecondary); cursor: pointer; }
.anulado-opt .micon { font-size: 14px; }
.anulado-opt.active { background: var(--surfaceBackground); color: var(--textPrimary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.anulado-opt.active .micon { color: var(--topBarBackground); }
.views-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--surfaceBorder); border-radius: 6px; background: var(--surfaceBackground); font-size: 13px; font-weight: 500; color: var(--textSecondary); cursor: pointer; }
.views-btn.active { background: var(--tableRowSelectedBackground); color: var(--accent); }
.views-btn.active .micon { color: var(--accent); }
.views-btn .micon { font-size: 16px; color: var(--textSecondary); }
.search-box { position: relative; width: 240px; height: 36px; }
.search-box .micon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--sidebarDragHandle); }
.search-box input { width: 100%; height: 36px; padding: 0 10px 0 32px; font-size: 13px; background: var(--contentBackground); border: none; border-radius: 6px; outline: none; color: var(--textPrimary); }
.toolbar-iconbtn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--textSecondary); }
.toolbar-iconbtn:hover { background: rgba(100,116,139,.08); }
.toolbar-iconbtn .micon { font-size: 20px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; background: var(--accentSubtle); color: var(--accent); border-radius: 16px; font-size: 12px; font-weight: 500; }
.filter-chip .micon { font-size: 14px; cursor: pointer; }
.list-progress { height: 2px; background: var(--tableBorder); overflow: hidden; }
.list-progress > div { height: 100%; width: 30%; background: var(--accent); animation: indet 1.1s infinite; }
@keyframes indet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.table-wrap { flex: 1; overflow: auto; }
.erp-table { border-collapse: collapse; width: max-content; min-width: 100%; }
.erp-table thead th {
  position: sticky; top: 0; z-index: 2; height: 45px; background: var(--tableHeaderBackground);
  text-align: left; font-size: 12px; font-weight: 700; color: var(--tableHeaderText);
  padding: 0 16px; white-space: nowrap; border-bottom: 1px solid var(--tableBorder); user-select: none; cursor: pointer;
  position: sticky;
}
.erp-table thead th .th-inner { display: flex; align-items: center; gap: 4px; }
.erp-table thead th .micon { font-size: 14px; color: var(--accent); }
.col-resizer { position: absolute; right: 0; top: 0; width: 8px; height: 100%; cursor: col-resize; }
.erp-table thead th { position: sticky; }
.erp-table tbody td { padding: 12px 16px; font-size: 13px; color: var(--textPrimary); border-bottom: 1px solid var(--tableBorder); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
.erp-table tbody tr { cursor: pointer; background: var(--tableRowBackground); }
.erp-table tbody tr:hover { background: var(--tableRowHoverBackground); }
.erp-table tbody tr.selected { background: var(--tableRowSelectedBackground); }
.erp-table tbody tr.anulado td { color: var(--textSecondary); background: color-mix(in srgb, var(--statusError) 5%, transparent); }
.cell-null { color: #cbd5e1; font-style: italic; }
.cell-money { color: var(--textPrimary); }
.badge-estado { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.badge-bool-yes { color: var(--statusSuccess); font-weight: 700; }
.badge-bool-no { color: var(--statusError); }
.chk { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.col-check { width: 50px; text-align: center; }
.empty-msg { text-align: center; padding: 48px; color: var(--textSecondary); }
.pagination { display: flex; align-items: center; padding: 8px 16px; border-top: 1px solid var(--tableBorder); gap: 4px; }
.pg-total { font-size: 13px; color: var(--textSecondary); }
.pg-badge { padding: 4px 8px; background: var(--accentSubtle); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.pg-btn { width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.pg-btn:disabled { color: var(--textSecondary); opacity: .4; cursor: default; }
.pg-btn .micon { font-size: 18px; }
.pg-input { width: 52px; height: 30px; text-align: center; font-size: 13px; border: 1px solid var(--inputBorder); border-radius: 4px; background: var(--inputBackground); color: var(--textPrimary); outline: none; }
.pg-input:focus { border-color: var(--inputFocusedBorder); }

/* ---------- FORM ---------- */
.form-screen { display: flex; flex-direction: column; height: 100%; background: var(--surfaceBackground); }
.form-header { display: flex; align-items: center; padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--surfaceBorder); background: var(--surfaceBackground); flex-wrap: wrap; }
.form-back { color: var(--textSecondary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.form-back:hover { background: rgba(100,116,139,.1); }
.form-title { font-size: 18px; font-weight: 700; color: var(--textPrimary); flex: 1; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-actions { display: flex; align-items: center; gap: 12px; }
.save-ind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.save-ind.saved { color: var(--statusSuccess); }
.save-ind.saving { color: var(--textPrimary); }
.save-ind.unsaved { color: var(--sidebarDragHandle); }
.save-ind.error { color: var(--statusError); }
.save-ind .micon { font-size: 18px; }
.vdiv { width: 1px; height: 24px; background: var(--surfaceBorder); }
.status-badge { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.form-body { flex: 1; overflow: auto; padding: 16px; }
.form-section { margin-bottom: 8px; }
.section-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px; cursor: pointer; user-select: none; }
.section-head .micon { font-size: 22px; color: var(--textSecondary); transition: transform .2s; }
.section-head.collapsed .micon { transform: rotate(-90deg); }
.section-title { font-size: 15px; font-weight: 600; color: var(--textPrimary); }
.section-fields { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px; }
.section-fields.collapsed { display: none; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--inputLabel); }
.field-label .req { color: var(--statusError); margin-left: 2px; }
.field-input, .field-fake {
  height: 44px; padding: 0 12px; font-size: 14px; background: var(--inputBackground);
  border: 1px solid var(--inputBorder); border-radius: 8px; color: var(--inputText); outline: none; width: 100%;
}
.field-input:focus { border-color: var(--inputFocusedBorder); border-width: 1.5px; }
.field-input:disabled, .field-input[readonly] { background: var(--inputDisabledBackground); color: var(--textSecondary); cursor: default; }
textarea.field-input { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.field-helper { font-size: 11px; color: var(--textSecondary); }
.field-ref { position: relative; }
.field-ref input { padding-right: 40px; cursor: pointer; }
.field-ref .ref-search { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.field-ref .ref-search:hover { background: var(--accentSubtle); }
.switch { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #cbd5e1; transition: background .2s; cursor: pointer; flex: 0 0 auto; }
.switch.on { background: var(--accent); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on::after { left: 22px; }
.switch-row { display: flex; align-items: center; gap: 12px; height: 44px; }
.img-input { width: 250px; }
.img-box { width: 100%; height: 160px; border: 2px dashed var(--inputBorder); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--textSecondary); cursor: pointer; background: var(--inputBackground); }
.img-box .micon { font-size: 40px; }
.img-box span { font-size: 12px; }
.file-box { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--inputBorder); border-radius: 8px; background: var(--inputBackground); color: var(--textSecondary); font-size: 13px; cursor: pointer; }

/* document layout */
.doc-totals { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; padding: 16px 8px; }
.lines-title { font-size: 12px; font-weight: 700; color: var(--textSecondary); letter-spacing: .5px; padding: 16px 8px 8px; }
.lines-table { width: 100%; border-collapse: collapse; }
.lines-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--tableHeaderText); background: var(--tableHeaderBackground); padding: 10px 12px; border-bottom: 1px solid var(--tableBorder); }
.lines-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--tableBorder); color: var(--textPrimary); }
.lines-table th.num, .lines-table td.num { text-align: right; }

/* ---------- CONFIG ---------- */
.config-card { margin: 16px; background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.02); display: flex; height: calc(100% - 32px); overflow: hidden; }
.config-sidebar { width: 260px; flex: 0 0 260px; background: var(--configSidebarBackground); border-right: 1px solid var(--configSidebarBorder); display: flex; flex-direction: column; }
.cfg-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.cfg-sidebar-head h2 { font-size: 16px; font-weight: 700; color: var(--textPrimary); margin: 0; }
.cfg-collapse-btn { display: none; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; color: var(--textSecondary); flex-shrink: 0; }
.cfg-collapse-btn:hover { background: rgba(100,116,139,.12); }
.config-tab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; border-left: 3px solid transparent; color: var(--textSecondary); }
.config-tab .micon { font-size: 20px; }
.config-tab span { font-size: 14px; font-weight: 500; }
.config-tab.active { background: var(--configSidebarItemSelectedBackground); border-left-color: var(--configSidebarItemSelectedIndicator); color: var(--textPrimary); }
.config-tab.active .micon { color: var(--configSidebarItemSelectedIndicator); }
.config-tab.active span { font-weight: 600; }
.config-content { flex: 1; padding: 32px; overflow: auto; }
.config-h { display: flex; align-items: center; gap: 12px; }
.config-h .micon { font-size: 28px; color: var(--textPrimary); }
.config-h h1 { font-size: 24px; font-weight: 700; color: var(--textPrimary); }
.config-hr { border: none; border-top: 1px solid var(--divider); margin: 24px 0; }
.theme-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.theme-card { width: 200px; padding: 16px; background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 10px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.02); transition: border-color .2s; }
.theme-card.active { border: 2px solid var(--configSidebarItemSelectedIndicator); padding: 15px; }
.theme-palette { display: flex; border-radius: 6px; overflow: hidden; height: 36px; }
.theme-palette > div { flex: 1; }
.theme-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.theme-card-foot .micon { font-size: 18px; color: var(--textSecondary); }
.theme-name { font-size: 14px; font-weight: 500; color: var(--textSecondary); flex: 1; }
.theme-card.active .theme-name { font-weight: 700; color: var(--textPrimary); }
.theme-card.active .theme-card-foot .lead { color: var(--configSidebarItemSelectedIndicator); }
.theme-check { color: var(--configSidebarItemSelectedIndicator); }
.sec-card { border: 1px solid var(--surfaceBorder); border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
.sec-card-head { background: var(--tableHeaderBackground); border-bottom: 1px solid var(--tableBorder); padding: 12px 16px; font-size: 11px; font-weight: 700; color: var(--textSecondary); }
.sec-card-body { padding: 24px; }
.pwd-field { margin-bottom: 12px; }
.pwd-field label { display: block; font-size: 12px; font-weight: 600; color: var(--textSecondary); margin-bottom: 6px; }
.pwd-field .pwd-input { width: 340px; max-width: 100%; height: 44px; padding: 0 12px; font-size: 13px; border: 1px solid var(--inputBorder); border-radius: 8px; background: var(--inputBackground); color: var(--textPrimary); outline: none; }
.config-note { font-size: 13px; color: var(--textSecondary); margin-bottom: 16px; }

/* import/export tables */
.ie-sectitle { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--textPrimary); }
.ie-sectitle .micon { font-size: 20px; color: var(--textPrimary); }
.ie-table { border: 1px solid var(--surfaceBorder); border-radius: 8px; overflow: hidden; max-width: 760px; }
.ie-thead { display: flex; background: var(--tableHeaderBackground); border-bottom: 1px solid var(--tableBorder); }
.ie-thead .ie-modcell, .ie-thead .ie-cell { font-size: 11px; font-weight: 700; color: var(--textSecondary); padding: 10px 0; }
.ie-thead .ie-modcell { padding-left: 16px; }
.ie-row { display: flex; align-items: center; border-bottom: 1px solid var(--tableBorder); }
.ie-row.last { border-bottom: none; }
.ie-modcell { flex: 1; padding: 12px 16px; font-size: 13px; color: var(--textPrimary); }
.ie-cell { width: 90px; display: flex; align-items: center; justify-content: center; }
.ie-cell-wide { width: 120px; }
.ie-act { width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.ie-act:hover { background: rgba(100,116,139,.1); }

/* document templates */
.tpl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--surfaceBorder); border-radius: 20px; background: var(--surfaceBackground); font-size: 13px; font-weight: 500; color: var(--textSecondary); cursor: pointer; }
.tpl-chip.active { background: var(--accent); border-color: var(--accent); color: var(--buttonPrimaryText); font-weight: 600; }
.tpl-badge { padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tpl-badge.on { background: rgba(255,255,255,.25); color: var(--buttonPrimaryText); }
.tpl-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tpl-type-name { font-size: 15px; font-weight: 600; color: var(--textPrimary); }
.tpl-type-count { font-size: 12px; color: var(--textSecondary); margin-top: 2px; }
.tpl-table { border: 1px solid var(--surfaceBorder); border-radius: 8px; overflow: hidden; }
.tpl-thead { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--tableHeaderBackground); border-bottom: 1px solid var(--tableBorder); font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--textSecondary); }
.tpl-actions-head { width: 200px; text-align: center; }
.tpl-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--tableBorder); }
.tpl-row.last { border-bottom: none; }
.docx-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; background: #EBF3FB; border: 1px solid #BDD7EE; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.docx-ico .micon { font-size: 20px; color: #2E74B5; }
.docx-ico span { font-size: 7px; font-weight: 700; color: #2E74B5; letter-spacing: .2px; }
.tpl-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--textPrimary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-name-edit { flex: 1; display: flex; align-items: center; gap: 6px; }
.tpl-input { flex: 1; height: 38px; padding: 0 10px; font-size: 14px; border: 1px solid var(--inputBorder); border-radius: 6px; background: var(--inputBackground); color: var(--inputText); outline: none; }
.tpl-input:focus { border-color: var(--inputFocusedBorder); border-width: 2px; }
.tpl-iconbtn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tpl-iconbtn:hover { background: rgba(100,116,139,.1); }
.tpl-iconbtn .micon { font-size: 20px; }
.tpl-actions { width: 200px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tpl-act { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.tpl-act:hover { background: rgba(100,116,139,.08); }
.tpl-act:nth-child(1) { color: var(--accent); }
.tpl-act:nth-child(2) { color: var(--statusError); }
.tpl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 56px 24px; text-align: center; color: var(--textSecondary); }
.tpl-empty .micon { font-size: 52px; opacity: .25; }
.tpl-empty div { font-size: 14px; line-height: 1.5; }

/* sidebar drag-reorder */
.menu-section-head.dragging, .menu-subitem.dragging { opacity: .4; }
.menu-section-head.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.menu-subitem.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.menu-section-head .drag, .menu-subitem .drag-handle { cursor: grab; }
.menu-section-head .drag:active, .menu-subitem .drag-handle:active { cursor: grabbing; }
.placeholder-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--textSecondary); gap: 12px; text-align: center; }
.placeholder-msg .micon { font-size: 64px; opacity: .3; }

/* ---------- popovers / dialogs ---------- */
.pop-backdrop { position: fixed; inset: 0; z-index: 1000; }
.popover { position: fixed; z-index: 1001; background: var(--surfaceBackground); border: 1px solid var(--surfaceBorder); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; min-width: 200px; overflow: hidden; }
.pop-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--textPrimary); cursor: pointer; border-radius: 6px; }
.pop-item:hover { background: var(--tableRowHoverBackground); }
.pop-item .micon { font-size: 18px; }
.pop-item.danger { color: var(--statusError); }
.pop-head { padding: 8px 12px 6px; font-size: 11px; font-weight: 700; color: var(--textSecondary); letter-spacing: .5px; }
.pop-divider { height: 1px; background: var(--divider); margin: 4px 0; }
.pop-check { width: 16px; }
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.dialog { background: var(--surfaceBackground); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.25); width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden; }
.dialog-title { padding: 20px 24px 12px; font-size: 18px; font-weight: 700; color: var(--textPrimary); display: flex; align-items: center; gap: 8px; }
.dialog-body { padding: 0 24px; overflow: auto; color: var(--textPrimary); font-size: 14px; }
.dialog-actions { padding: 16px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.dialog-search { margin: 12px 0; position: relative; }
.dialog-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--inputBorder); border-radius: 8px; background: var(--inputBackground); color: var(--textPrimary); outline: none; }
.dialog-search .micon { position: absolute; left: 10px; top: 10px; color: var(--textSecondary); font-size: 18px; }
.ref-list { max-height: 360px; overflow: auto; border: 1px solid var(--surfaceBorder); border-radius: 8px; margin-bottom: 16px; }
.ref-row { padding: 12px 16px; border-bottom: 1px solid var(--tableBorder); cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.ref-row:hover { background: var(--tableRowHoverBackground); }
.ref-row .ref-sub { color: var(--textSecondary); font-size: 12px; }

/* ---------- toast ---------- */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: toastin .2s; max-width: 380px; }
.toast .micon { font-size: 20px; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 700px) {
  .dash-bottom { flex-direction: column; }
  .search-box { width: 150px; }
  .topbar { padding: 0 4px 0 4px; gap: 2px; }
  .topbar-brand span { font-size: 16px; }
  .topbar-user { padding: 0 6px; }
  .list-card, .config-card { margin: 8px; height: calc(100% - 16px); }
  .list-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .toolbar-left { flex: 1 1 100%; }
  .toolbar-right { flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; }
  .dash { padding: 16px; }
  .dash-h1 { font-size: 22px; }
  .config-sidebar { width: 200px; flex-basis: 200px; }
  .config-content { padding: 20px; }
  .form-header { gap: 8px; }
  .form-actions { gap: 8px; flex-wrap: wrap; }
  .field { width: 100% !important; }
  .section-fields { flex-direction: column; }
  .section-fields > div { width: 100%; }
  .img-input { width: 100% !important; }
}
@media (max-width: 460px) {
  .config-card { flex-direction: column; }
  .config-sidebar { width: 100%; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--configSidebarBorder); display: flex; overflow-x: auto; }
  .cfg-sidebar-head { padding: 4px; }
  .cfg-sidebar-head h2 { display: none; }
  .config-tab { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 12px 16px; }
  .config-tab.active { border-left: none; border-bottom-color: var(--configSidebarItemSelectedIndicator); }
  .config-tab span { display: none; }
  .kpi-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1023px) {
  .cfg-collapse-btn { display: flex; }
  .config-sidebar.cfg-collapsed { width: 48px !important; flex-basis: 48px !important; min-width: 48px !important; overflow: hidden; }
  .config-sidebar.cfg-collapsed .cfg-sidebar-head { padding: 8px; justify-content: center; }
  .config-sidebar.cfg-collapsed .cfg-sidebar-head h2 { display: none; }
  .config-sidebar.cfg-collapsed #cfgTabs { display: none; }
}
@media (max-width: 699px) {
  .config-sidebar.cfg-mobile-expanded { width: 100% !important; flex-basis: 100% !important; }
  .config-content.cfg-hidden { display: none !important; }
}
/* <460px overrides — AFTER 1023px block to win cascade */
@media (max-width: 460px) {
  .config-sidebar.cfg-collapsed { width: 100% !important; flex-basis: auto !important; min-width: unset !important; height: 48px !important; overflow: hidden; }
  .config-sidebar.cfg-collapsed .cfg-sidebar-head { padding: 4px; justify-content: flex-start; }
  .config-sidebar.cfg-mobile-expanded { flex: 1; flex-direction: column; overflow-x: hidden; overflow-y: auto; border-bottom: 1px solid var(--configSidebarBorder); border-right: none; }
  .config-sidebar.cfg-mobile-expanded .cfg-sidebar-head { padding: 16px 20px; }
  .config-sidebar.cfg-mobile-expanded .cfg-sidebar-head h2 { display: block; }
  .config-sidebar.cfg-mobile-expanded .config-tab { border-left: 3px solid transparent; border-bottom: none; padding: 12px 16px; white-space: normal; }
  .config-sidebar.cfg-mobile-expanded .config-tab span { display: inline; }
  .config-sidebar.cfg-mobile-expanded .config-tab.active { border-left-color: var(--configSidebarItemSelectedIndicator); border-bottom: none; }
}