:root {
  color-scheme: light;
  --ink: #17191c;
  --muted: #747a82;
  --line: #e4e7eb;
  --surface: #f6f7f8;
  --paper: #ffffff;
  --brand: #17191c;
  --accent: #efb319;
  --accent-soft: #fff8df;
  --blue: #176cf3;
  --danger: #a33a3a;
  --danger-soft: #fff1f1;
  --ready: #13835f;
  --shadow: 0 14px 35px rgba(28, 36, 48, 0.07);
  --sidebar-width: 248px;
  --font-size-min: 10px;
  --font-size-base: 14px;
  --erp-table-font-size: 12px;
  --erp-table-heading-font-size: 11px;
  --erp-table-row-height: 42px;
  --erp-table-cell-padding-y: 5px;
}

/* VAT sales ledger */
.sales-summary-grid article strong { font-variant-numeric: tabular-nums; }
.sales-filter-panel .accounting-quick-filter > div { flex-wrap: wrap; overflow: visible; }
.sales-ledger-heading { align-items: flex-end; display: flex; justify-content: space-between; }
.sales-page-size { align-items: center; display: flex; gap: 6px; }
.sales-page-size a { border: 1px solid #d8dde5; border-radius: 8px; color: #596273; padding: 7px 10px; text-decoration: none; }
.sales-page-size a.is-active { background: #25282d; border-color: #25282d; color: #fff; }
.sales-ledger-table { min-width: 900px; }
.sales-ledger-table th:nth-child(1) { width: 150px; }
.sales-ledger-table th:nth-child(2) { width: 280px; }
.sales-ledger-table th:nth-child(n+3) { width: 160px; }
.sales-ledger-table thead a { color: inherit; text-decoration: none; }
.sales-ledger-table .is-negative { color: #d9485f; }
@media (max-width: 760px) { .sales-ledger-heading { align-items: stretch; flex-direction: column; gap: 12px; } }

* { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--surface);
}

body {
  margin: 0;
  max-width: 100%;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 3%, rgba(239, 179, 25, 0.05), transparent 34rem),
    var(--surface);
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }

.sidebar-toggle {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.erp-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 62px minmax(0, 1fr);
  overflow-x: clip;
  transition: grid-template-columns 0.2s ease;
}

.sidebar-toggle:checked + .erp-shell {
  grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  top: 62px;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: var(--sidebar-width);
  height: auto;
  padding: 18px 13px 0;
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #dbe3ef;
  background:
    radial-gradient(circle at 20% 0%, rgba(239, 179, 25, 0.05), transparent 17rem),
    linear-gradient(180deg, #1b2737, #151e2b 72%, #121a25);
  transition: opacity 0.18s ease, transform 0.2s ease;
}

.sidebar-toggle:checked + .erp-shell .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

.sidebar-nav {
  min-height: 0;
  padding-bottom: 14px;
  display: grid;
  gap: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.nav-section-label {
  margin: 20px 11px 4px;
  color: #8493a6;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.nav-home,
.nav-group summary {
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 10px;
  color: #d6e1ef;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
}

.nav-home + .nav-group,
.nav-group + .nav-group {
  margin-top: 8px;
}

.nav-home:hover,
.nav-home.is-active,
.nav-group[open] summary {
  color: #fff;
  background: linear-gradient(90deg, rgba(239, 179, 25, 0.12), rgba(255, 255, 255, 0.06));
  box-shadow: inset 2px 0 #e6ad19;
}

.nav-group summary {
  justify-content: space-between;
  list-style: none;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary > span:first-child { display: flex; align-items: center; gap: 10px; }
.nav-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #e5ebf3;
  background: rgba(255, 255, 255, 0.055);
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
}

.nav-icon--person::before,
.nav-icon--person::after,
.nav-icon--clock::before,
.nav-icon--clock::after,
.nav-icon--cash::before,
.nav-icon--cash::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.nav-icon--person::before {
  top: 4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.nav-icon--person::after {
  bottom: 4px;
  left: 50%;
  width: 15px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 2px 2px;
  transform: translateX(-50%);
}

.nav-icon--clock::before {
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.nav-icon--clock::after {
  top: 7px;
  left: 13px;
  width: 6px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 0 0 0 2px;
}

.nav-icon--won {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: 16px;
  font-weight: 950;
}

.nav-icon--cash::before {
  top: 50%;
  left: 50%;
  width: 19px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: translate(-50%, -50%);
}

.nav-icon--cash::after {
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.nav-home:hover .nav-icon,
.nav-home.is-active .nav-icon,
.nav-group[open] summary .nav-icon {
  border-color: rgba(239, 179, 25, 0.72);
  color: #ffd35c;
  background: rgba(239, 179, 25, 0.11);
}
.nav-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #53647a;
}
.nav-home.is-active .nav-dot,
.nav-group[open] summary .nav-dot { background: var(--accent); }
.chevron { color: #8393a8; transition: transform 0.2s ease; }
.nav-group[open] .chevron { transform: rotate(180deg); }

.nav-children {
  margin: 4px 0 11px 28px;
  padding: 3px 0 3px 18px;
  display: grid;
  gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.nav-children a {
  position: relative;
  min-height: 39px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #aebdce;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

.nav-children a:hover,
.nav-children a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.nav-children a.is-active {
  color: #201700;
  background:
    linear-gradient(135deg, #ffe58e 0%, #f6c743 48%, #e7a711 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.48),
    0 7px 18px rgba(109, 75, 0, 0.24);
  font-weight: 850;
}

.nav-subgroup {
  display: block;
}

.nav-subgroup + .nav-subgroup {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-subgroup-label {
  min-height: 24px;
  padding: 4px 9px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #f5ca55;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
  transition: color 0.16s ease, background 0.16s ease;
}

.nav-subgroup-label::-webkit-details-marker {
  display: none;
}

.nav-subgroup-label:hover {
  color: #ffe18a;
  background: rgba(255, 255, 255, 0.05);
}

.nav-subgroup-chevron {
  flex: 0 0 auto;
  color: #8fa0b5;
  font-size: 11px;
  transition: transform 0.16s ease, color 0.16s ease;
}

.nav-subgroup[open] > .nav-subgroup-label .nav-subgroup-chevron {
  color: #f5ca55;
  transform: rotate(180deg);
}

.nav-subgroup-children {
  margin: 1px 0 2px 9px;
  padding-left: 7px;
  display: grid;
  gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.nav-subgroup-children > a {
  padding-left: 10px;
}

.sidebar-bottom {
  flex: 0 0 auto;
  margin-top: auto;
}

.sidebar-security {
  margin: 14px 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-security > div { display: grid; gap: 2px; }
.sidebar-security strong { font-size: 12px; }
.sidebar-security small { color: #8fa0b5; font-size: 10px; }
.security-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ready);
  box-shadow: 0 0 0 4px rgba(19, 131, 95, 0.11);
}

.sidebar-user {
  margin: 0 -13px;
  padding: 16px 18px 19px;
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
}
.sidebar-user small { color: #82a2ce; font-size: 11px; }
.sidebar-user strong { color: #fff; font-size: 13px; }
.sidebar-user strong span { color: #f1bd36; font-weight: 750; }
.sidebar-user p { margin: 0; color: #b8c5d5; font-size: 12px; }

.workspace-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - 62px);
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
}

.workspace-topbar {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 0 14px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f6f8fb;
  background:
    radial-gradient(circle at 9% 0%, rgba(239, 179, 25, 0.06), transparent 24rem),
    #0f1726;
}

.topbar-brand { display: flex; align-items: center; gap: 11px; }
.menu-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  align-content: center;
  gap: 4px;
  place-items: center;
  border: 1px solid #3b4758;
  border-radius: 9px;
  cursor: pointer;
}
.menu-toggle span { width: 14px; height: 2px; border-radius: 4px; background: #dfe7f2; }
.topbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; letter-spacing: 0.28em; }
.topbar-logo img { width: 35px; height: 35px; border-radius: 6px; object-fit: cover; }
.topbar-logo strong { padding-bottom: 3px; border-bottom: 2px solid rgba(239, 179, 25, 0.55); font-size: 15px; }
.topbar-division { color: #8998ab; font-size: 11px; }
.topbar-page { display: grid; gap: 2px; text-align: center; }
.topbar-page small { color: #8091a6; font-size: var(--font-size-min); letter-spacing: 0.12em; }
.topbar-page strong { font-size: 13px; }
.topbar-logout {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #3b4758;
  border-radius: 9px;
  color: #f4f6f9;
  background: #202b3b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.main {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

footer {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 18px 0 24px;
  color: #999fa6;
  font-size: 11px;
}

.page-heading {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin: 0;
  color: #9b7200;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page-heading h1,
.section-heading h1 {
  margin: 9px 0 0;
  font-size: clamp(29px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.page-heading p:not(.eyebrow),
.section-heading > p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.access-badge {
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dcece6;
  border-radius: 999px;
  color: #167252;
  background: #f3fbf8;
  font-size: 12px;
  font-weight: 800;
}

.access-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ready);
}

.overview-grid,
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.overview-card {
  min-height: 170px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  text-decoration: none;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.overview-card:hover { transform: translateY(-2px); border-color: #cfd3d8; }
.overview-card-primary { background: linear-gradient(140deg, #fffdf4, #fff 58%); }
.card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #493500;
  background: #ffdc69;
  font-size: 19px;
  font-weight: 900;
}
.card-copy { display: grid; gap: 6px; }
.card-copy small { color: #9a9fa6; font-size: 10px; font-weight: 850; letter-spacing: 0.12em; }
.card-copy strong { font-size: 22px; }
.card-copy > span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.card-arrow { color: #9a9fa6; font-size: 20px; }

.notice-panel {
  margin-top: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e7e2ce;
  border-radius: 13px;
  background: #fffcf3;
}
.notice-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #9b7200;
  font-size: 13px;
  font-weight: 900;
}
.notice-panel strong { font-size: 14px; }
.notice-panel p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.button {
  width: fit-content;
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: #30343a; }
.button-quiet { border-color: var(--line); color: var(--ink); background: #fff; }
.button-full { width: 100%; }

.status-strip {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.status-strip > div { padding: 19px 20px; display: grid; gap: 5px; }
.status-strip > div + div { border-left: 1px solid var(--line); }
.status-strip small { color: var(--muted); font-size: 11px; }
.status-strip strong { font-size: 16px; }
.status-strip span { color: #92979e; font-size: 11px; }
.status-strip .status-positive { color: var(--ready); }

.panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow);
}
.panel-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.panel-heading h2 { margin: 7px 0 0; font-size: 20px; letter-spacing: -0.03em; }
.panel-note { color: var(--muted); font-size: 11px; }

.workflow-list { margin: 0; padding: 0; display: grid; list-style: none; }
.workflow-list li {
  min-height: 74px;
  padding: 14px 4px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #eef0f2;
}
.workflow-list li:first-child { border-top: 0; }
.workflow-number { color: #aa7d00; font-size: 12px; font-weight: 900; }
.workflow-list strong { font-size: 14px; }
.workflow-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.workflow-owner {
  padding: 5px 8px;
  border-radius: 999px;
  color: #646a72;
  background: #f2f3f4;
  font-size: 10px;
  font-weight: 800;
}
.workflow-list.compact li { min-height: 66px; }
.workflow-panel { margin-top: 18px; }

.check-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}
.check-list li {
  position: relative;
  padding-left: 20px;
  color: #555b63;
  font-size: 13px;
}
.check-list li::before {
  position: absolute;
  left: 0;
  color: var(--ready);
  content: "✓";
  font-weight: 900;
}

.empty-state {
  min-height: 330px;
  padding: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px dashed #cfd4da;
  border-radius: 15px;
  background: #fff;
}
.empty-state-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #7a5a00;
  background: var(--accent-soft);
  font-size: 22px;
}
.empty-state h2 { margin: 0; font-size: 20px; }
.empty-state p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.empty-state code { overflow-wrap: anywhere; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th,
.data-table td { padding: 12px; border-bottom: 1px solid #eceef0; text-align: left; white-space: nowrap; }
.data-table th { color: #71777e; background: #f7f8f9; font-size: 11px; }
.panel-empty { color: var(--muted); font-size: 13px; }

/*
 * Wide data workspace standard
 * Apply `wide-data-page` to pages whose primary result is a wide table.
 * The application shell never scrolls horizontally; only the table viewport does.
 */
.wide-data-page .workspace-shell {
  background:
    radial-gradient(circle at 92% 0%, rgba(239, 179, 25, 0.06), transparent 42rem),
    linear-gradient(110deg, #f6f7f8 0%, #f6f7f8 58%, #faf9f4 100%);
}

.wide-data-page .main {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 42px 24px 70px;
}

.wide-data-page footer {
  width: 100%;
  max-width: none;
  padding: 18px 24px 24px;
}

.employee-heading { margin-bottom: 22px; }

.employee-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.employee-register-open {
  min-height: 38px;
  gap: 4px;
}

.employee-reference-open {
  min-height: 38px;
  border-color: #d9c685;
  color: #604800;
  background: #fffdf5;
}

.employee-download {
  min-height: 38px;
  gap: 5px;
  text-decoration: none;
}

.employee-notice {
  margin: -4px 0 16px;
  padding: 11px 14px;
  border: 1px solid #cce7dd;
  border-radius: 10px;
  color: #146348;
  background: #f2fbf7;
  font-size: 13px;
  font-weight: 750;
}

.employee-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.employee-toolbar {
  min-height: 74px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.employee-list-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.employee-list-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #565c64;
  font-size: 12px;
  font-weight: 800;
}

.employee-list-filters select {
  min-width: 102px;
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.employee-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.employee-count span { color: var(--muted); font-size: 11px; }
.employee-count strong { font-size: 15px; }
.employee-count small { color: #9a9fa6; font-size: 11px; }

.employee-type-summary {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.employee-type-summary a {
  padding: 7px 11px;
  border-radius: 999px;
  color: #7f858c;
  background: #f5f6f7;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.employee-type-summary strong { font-size: 13px; }

.employee-type-summary a:hover {
  color: #4f3a00;
  background: #fff3c9;
  transform: translateY(-1px);
}

.employee-type-summary a.is-active {
  color: #5e4500;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(198, 146, 8, 0.16);
}

.button:disabled { opacity: 0.45; cursor: not-allowed; }

.employee-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 520px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  contain: inline-size;
  background: #fff;
}

.employee-table {
  width: max(100%, 1680px);
  min-width: 0;
  table-layout: auto;
}

.employee-table th,
.employee-table td {
  height: 44px;
  padding: 8px 14px;
}

.employee-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: #dde1e5;
  color: #5f656d;
  background: #f7f8f9;
  font-size: 11px;
  font-weight: 800;
}

.employee-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.employee-sort:hover { color: #17191c; }
.sort-indicator { color: #a1a6ad; font-size: var(--font-size-min); }
[aria-sort="ascending"] .sort-indicator,
[aria-sort="descending"] .sort-indicator { color: #9b7200; }

.employee-table tbody tr { transition: background-color 140ms ease; }
.employee-table tbody tr:hover { background: #f2f3f4; }
.employee-table tbody tr.employee-edit-row {
  cursor: pointer;
}
.employee-table tbody tr.employee-edit-row:hover,
.employee-table tbody tr.employee-edit-row:focus-visible {
  background: #e9ebed;
  outline: none;
}
.employee-table tbody tr.employee-edit-row:focus-visible {
  box-shadow: inset 3px 0 #d19a00;
}
.employee-table .employee-name { font-weight: 800; }
.employee-table .employee-status { font-weight: 800; }
.employee-table .employee-status-active { color: #176b50; }
.employee-table .employee-status-leave { color: #9a6900; }
.employee-table .employee-status-retired { color: #c33b3b; }
.employee-table .employee-pay-value {
  color: #6c5206;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.salary-demo-banner {
  min-height: 42px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f0dfad;
  color: #73570a;
  background: #fffaf0;
  font-size: 12px;
}

.salary-demo-banner strong {
  padding: 4px 8px;
  border-radius: 999px;
  color: #4f3a00;
  background: #ffeaa2;
  font-size: 11px;
  white-space: nowrap;
}

.employee-empty-filter {
  min-height: 420px;
  display: grid;
  place-content: center;
  text-align: center;
}
.employee-empty-filter strong { font-size: 16px; }
.employee-empty-filter p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.pagination {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-top: 1px solid var(--line);
}

.pagination a {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #666c73;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.pagination a:hover { background: #f2f3f4; }
.pagination a.is-active {
  color: #4f3a00;
  background: var(--accent-soft);
}

.employee-dialog {
  width: min(920px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 80px rgba(8, 13, 21, 0.3);
}

.employee-dialog::backdrop {
  background: rgba(8, 13, 21, 0.66);
  backdrop-filter: blur(2px);
}

.employee-dialog > form,
.employee-dialog-body { padding: 24px; }

.employee-edit-dialog {
  width: min(980px, calc(100% - 28px));
}

.employee-edit-dialog .employee-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-dialog-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.employee-dialog-heading h2 {
  margin: 7px 0 0;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.employee-dialog-heading p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.dialog-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #676d74;
  background: #fff;
  cursor: pointer;
  font-size: 21px;
}

.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.employee-form-grid label { gap: 7px; color: #4f555c; font-size: 12px; }
.required-mark {
  color: #d62929;
  font-weight: 900;
}
.employee-form-grid input,
.employee-form-grid select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #dfe3e7;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.employee-form-grid input:focus,
.employee-form-grid select:focus {
  border-color: #c69208;
  box-shadow: 0 0 0 3px rgba(239, 179, 25, 0.14);
}

.childcare-schedule {
  grid-column: 1 / -1;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) repeat(3, minmax(130px, 1fr));
  align-items: end;
  gap: 12px;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  background: #f7f8f9;
}

.childcare-schedule.is-enabled {
  border-color: #e2bd51;
  background: #fffaf0;
}

.childcare-schedule .childcare-toggle {
  min-height: 42px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d7dade;
  border-radius: 8px;
  color: #30343a;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.childcare-schedule .childcare-toggle input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #c69208;
}

.childcare-schedule > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #777d84;
  font-size: 11px;
  line-height: 1.5;
}

.employee-protected-field input {
  color: #8a9097;
  background: #f5f6f7;
}

.employee-form-note {
  margin: 18px 0 0;
  color: #7c8289;
  font-size: 11px;
  line-height: 1.6;
}

.employee-dialog-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.employee-detail-tabs {
  margin: 0 0 22px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.employee-detail-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #777d84;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.employee-detail-tabs button:hover { color: var(--ink); }
.employee-detail-tabs button.is-active {
  color: #5f4704;
  border-bottom-color: var(--accent);
}

[data-employee-panel][hidden] { display: none; }
[data-reference-panel][hidden] { display: none; }

.employee-reference-dialog {
  width: min(720px, calc(100% - 28px));
}

.organization-heading {
  margin-bottom: 22px;
}

.organization-panel {
  max-width: 920px;
  padding: 0 24px 24px;
}

.organization-panel .employee-reference-tabs {
  margin-bottom: 24px;
}

.organization-panel .employee-reference-panel-heading h2 {
  margin: 0;
  font-size: 18px;
}

.organization-panel .employee-reference-table-wrap {
  max-height: none;
}

.employee-reference-add-dialog {
  width: min(460px, calc(100% - 28px));
}

.employee-reference-warning {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid #efdfa9;
  border-radius: 10px;
  color: #6f550a;
  background: #fffaf0;
  font-size: 12px;
  line-height: 1.5;
}

.employee-reference-panel-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.employee-reference-panel-heading h3 {
  margin: 0;
  font-size: 16px;
}

.employee-reference-panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.employee-reference-table-wrap {
  max-height: min(440px, 52vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.employee-reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.employee-reference-table th,
.employee-reference-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eceef0;
  text-align: left;
}

.employee-reference-table th {
  position: sticky;
  top: 0;
  color: #727880;
  background: #f7f8f9;
  font-size: 11px;
}

.employee-reference-table tr:last-child td { border-bottom: 0; }
.employee-reference-table th:last-child,
.employee-reference-table td:last-child {
  width: 72px;
  text-align: center;
}

.employee-reference-delete-form { margin: 0; }
.employee-reference-delete {
  width: 32px;
  height: 32px;
  border: 1px solid #ead6d6;
  border-radius: 8px;
  color: #a93c3c;
  background: #fff8f8;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.employee-reference-delete:hover {
  border-color: #dda7a7;
  background: #fff0f0;
}

.employee-reference-name-field {
  display: grid;
  gap: 8px;
  color: #4f555c;
  font-size: 12px;
  font-weight: 750;
}

.employee-reference-name-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  outline: none;
}

.employee-reference-name-field input:focus {
  border-color: #c69208;
  box-shadow: 0 0 0 3px rgba(239, 179, 25, 0.14);
}

.salary-current-card {
  margin-bottom: 20px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #eadcae;
  border-radius: 12px;
  background: linear-gradient(120deg, #fffdf6, #fff8df);
}

.salary-current-card div {
  display: grid;
  gap: 5px;
}

.salary-current-card span {
  color: #80755a;
  font-size: 11px;
  font-weight: 750;
}

.salary-current-card strong {
  color: #342b16;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.salary-current-card small {
  padding: 6px 9px;
  border-radius: 999px;
  color: #73570a;
  background: #ffeaa2;
  font-size: 10px;
  font-weight: 800;
}

.salary-history-heading,
.salary-history-register-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.salary-history-heading h3,
.salary-history-register-heading h3 {
  margin: 0;
  font-size: 16px;
}

.salary-history-heading p,
.salary-history-register-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.salary-history-table-wrap {
  margin-top: 12px;
  max-height: 270px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.salary-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.salary-history-table th,
.salary-history-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eceef0;
  text-align: left;
  white-space: nowrap;
}

.salary-history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #6b7178;
  background: #f7f8f9;
  font-size: 10px;
}

.salary-history-table td {
  color: #555b62;
  font-variant-numeric: tabular-nums;
}

.salary-history-table .salary-after {
  color: #3f310d;
  font-weight: 800;
}

.salary-history-table .salary-rate {
  color: #176b50;
  font-weight: 800;
}

.salary-history-table .salary-reason {
  min-width: 200px;
  white-space: normal;
}

.salary-history-table .salary-interval {
  min-width: 92px;
  color: #3f454d;
  font-weight: 800;
  text-align: center;
}

.salary-history-empty {
  margin: 0;
  padding: 34px 16px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.salary-history-register {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.salary-history-register-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.salary-history-register-grid label {
  display: grid;
  gap: 7px;
  color: #4f555c;
  font-size: 12px;
  font-weight: 750;
}

.salary-history-register-grid input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #dfe3e7;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.salary-history-register-grid input:focus {
  border-color: #c69208;
  box-shadow: 0 0 0 3px rgba(239, 179, 25, 0.14);
}

.salary-history-register-grid input:disabled {
  color: #7c8289;
  background: #f5f6f7;
}

.salary-history-register-grid .salary-reason-field {
  grid-column: 1 / -1;
}

.section-placeholder {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.back-link { width: fit-content; color: var(--muted); text-decoration: none; font-size: 13px; }
.section-heading { max-width: 700px; margin-top: 34px; }
.empty-panel {
  max-width: 700px;
  margin-top: 30px;
  padding: 20px;
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.empty-panel p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--ready); }
.status-dot-hold { background: var(--accent); }

.year-filter {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.year-filter label {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.year-filter select {
  min-width: 104px;
  height: 38px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.module-checks { margin-top: 18px; }

.operational-heading { margin-bottom: 18px; }

.operational-tabs {
  margin: 0 0 16px;
  padding: 5px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(22, 27, 34, 0.05);
}

.operational-tabs a {
  min-width: 108px;
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #686e75;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.operational-tabs a:hover {
  color: #4f3a00;
  background: #fff9e7;
}

.operational-tabs a.is-active {
  color: #4f3a00;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(198, 146, 8, 0.18);
}

.operational-panel {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.operational-panel .panel-heading {
  min-height: 76px;
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.operational-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: 68vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.operational-table {
  width: max(100%, 1500px);
  font-size: 12px;
}

.attendance-table { width: max(100%, 2380px); }

.operational-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: #dde1e5;
  color: #5f656d;
  background: #f7f8f9;
  font-size: 11px;
}

.operational-table tbody tr:hover { background: #f7f8f9; }
.operational-table .operational-name { font-weight: 800; }
.operational-table .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.operational-empty {
  min-height: 330px;
  display: grid;
  place-content: center;
  text-align: center;
}

.operational-empty strong { font-size: 16px; }
.operational-empty p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ledger-access-badge {
  width: fit-content;
  margin-top: 14px;
}

.payroll-ledger-preview {
  filter: blur(1.5px);
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
}

.payroll-ledger-preview-panel {
  min-height: 510px;
  padding: 24px;
}

.ledger-preview-toolbar,
.ledger-preview-row {
  border-radius: 7px;
  background: #e3e6e9;
}

.ledger-preview-toolbar {
  width: 42%;
  height: 42px;
  margin-bottom: 24px;
}

.ledger-preview-row {
  height: 28px;
  margin-top: 12px;
}

.ledger-preview-row:nth-child(3n) { width: 82%; }
.ledger-preview-row:nth-child(4n) { width: 64%; }

.payroll-ledger-lock-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12, 16, 20, 0.64);
  backdrop-filter: blur(2px);
}

.payroll-ledger-lock-card {
  width: min(390px, 100%);
  padding: 34px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.ledger-lock-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #e8eaed;
  border-radius: 15px;
  color: #7b828a;
  background: #f5f6f7;
  font-size: 25px;
}

.payroll-ledger-lock-card h1 {
  margin: 8px 0 0;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.payroll-ledger-lock-card > p:not(.eyebrow) {
  max-width: 290px;
  margin: 10px 0 0;
  color: #747b83;
  font-size: 13px;
  line-height: 1.65;
}

.ledger-code-label {
  width: 100%;
  margin-top: 22px;
}

.ledger-code-input {
  width: 204px;
  min-height: 54px;
  margin: 0 auto;
  padding: 0 6px 0 17px;
  border: 1px solid #d8dde2;
  border-radius: 13px;
  color: #15191e;
  background: #fff;
  font-family: monospace;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 14px;
  text-align: center;
}

.ledger-code-input:focus {
  border-color: #c89200;
  box-shadow: 0 0 0 4px rgba(239, 179, 25, 0.16);
}

.payroll-ledger-lock-card .ledger-unlock-error {
  color: #c43a3a;
  font-weight: 750;
}

.payroll-ledger-lock-card .ledger-unlock-help {
  color: #8a9097;
}

.ledger-lock-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ledger-lock-actions .button {
  min-width: 84px;
  text-decoration: none;
}

/* Login */
.page-shell { min-height: 100vh; }
.login-page {
  color: #edf2ff;
  background:
    radial-gradient(circle at 4% 0%, rgba(255, 191, 0, 0.22), transparent 31rem),
    radial-gradient(circle at 92% 100%, rgba(238, 155, 0, 0.12), transparent 34rem),
    linear-gradient(135deg, #181306 0%, #090a0d 52%, #151006 100%);
}
.login-page .main {
  width: min(1120px, calc(100% - 36px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0;
}
.auth-layout {
  min-height: calc(100vh - 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: 30px;
}
.auth-intro {
  min-height: 378px;
  padding: 30px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 204, 58, 0.25);
  border-radius: 16px;
  background: rgba(8, 9, 12, 0.28);
}
.login-logo-shell {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 219, 112, 0.42);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(85, 73, 35, 0.4));
}
.login-logo-shell img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.auth-intro .eyebrow { color: #d3a82e; }
.auth-intro h1 { margin: 13px 0 0; color: #f5f3ec; font-size: clamp(30px, 3.2vw, 36px); letter-spacing: -0.035em; }
.auth-intro > p { margin: 20px 0 0; color: #918b7c; font-size: 16px; }
.login-notes { margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: #ded9cc; list-style: none; font-size: 15px; }
.login-notes li { position: relative; padding-left: 17px; }
.login-notes li::before { position: absolute; left: 0; color: #f3ba22; content: "•"; font-weight: 900; }
.auth-card {
  width: 100%;
  max-width: 500px;
  padding: 30px;
  display: grid;
  gap: 18px;
  justify-self: end;
  border-radius: 15px;
  color: #102348;
  background: #f7f7f8;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}
.auth-card h2 { margin: 0 0 4px; font-size: 22px; }
label { display: grid; gap: 9px; font-size: 14px; font-weight: 750; }
input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #bdd0ee;
  border-radius: 9px;
  color: #0d1a30;
  background: #e8f0fd;
  outline: none;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 113, 247, 0.14); }
.auth-card .button-primary { min-height: 45px; background: var(--blue); font-size: 16px; }
.alert {
  padding: 11px 13px;
  border: 1px solid #f0cccc;
  border-radius: 8px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 13px;
}

@media (max-width: 900px) {
  :root { --sidebar-width: 210px; }
  .overview-grid, .split-grid { grid-template-columns: 1fr; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .auth-layout { grid-template-columns: 1fr; gap: 18px; }
  .auth-intro { min-height: auto; }
  .auth-card { max-width: none; }
  .employee-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .employee-type-summary { width: 100%; margin-left: 0; }
  .employee-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .childcare-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salary-current-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salary-current-card small { grid-column: 1 / -1; width: fit-content; }
  .salary-history-register-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .erp-shell,
  .sidebar-toggle:checked + .erp-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 62px;
    left: 0;
    z-index: 9;
    width: min(82vw, var(--sidebar-width));
    height: calc(100vh - 62px);
    box-shadow: 18px 0 45px rgba(4, 10, 18, 0.28);
  }
  .workspace-shell { grid-column: 1; }
  .workspace-topbar { padding-right: 10px; }
  .topbar-division,
  .topbar-page { display: none; }
  .topbar-logo strong { display: none; }
  .main, footer { width: min(100% - 28px, 1180px); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .wide-data-page .main { width: 100%; padding: 32px 10px 55px; }
  .wide-data-page footer { width: 100%; padding: 18px 10px 24px; }
  .employee-heading-actions { width: 100%; justify-content: space-between; }
  .workflow-list li { grid-template-columns: 32px 1fr; }
  .workflow-owner { grid-column: 2; width: fit-content; }
  .empty-state { padding: 28px; align-items: flex-start; flex-direction: column; }
  .employee-count { width: 100%; }
  .employee-list-filters { width: 100%; flex-wrap: wrap; }
  .employee-form-grid { grid-template-columns: 1fr; }
  .employee-edit-dialog .employee-form-grid { grid-template-columns: 1fr; }
  .childcare-schedule { grid-template-columns: 1fr; }
  .employee-table-wrap { min-height: 420px; }
  .salary-demo-banner { align-items: flex-start; flex-direction: column; }
  .salary-current-card,
  .salary-history-register-grid { grid-template-columns: 1fr; }
  .salary-history-table-wrap { max-height: 330px; }
  .operational-tabs { width: 100%; }
  .operational-tabs a { min-width: 0; flex: 1; }
}

.payroll-ledger-heading { align-items: flex-end; }

.notice-banner {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid #ead48a;
  border-radius: 12px;
  background: #fff8dd;
  color: #6b5200;
  font-weight: 700;
}

.payroll-period-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 31, 42, 0.045);
}

.payroll-period-primary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.payroll-period-label {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.payroll-payment-date {
  color: #59616d;
  font-weight: 700;
}

.payroll-payment-date strong { color: var(--ink); }

.payroll-period-state {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
}

.payroll-period-state.is-waiting {
  border: 1px solid #ffc6c6;
  background: #fff1f1;
  color: #c62828;
}

.payroll-period-state.is-draft {
  border: 1px solid #efd37b;
  background: #fff8d9;
  color: #8b6500;
}

.payroll-period-state.is-confirmed {
  border: 1px solid #a9dec7;
  background: #eefbf5;
  color: #067647;
}

.payroll-source-section {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 31, 42, 0.05);
}

.payroll-source-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 15px;
}

.payroll-source-heading h2 { margin: 3px 0 0; font-size: 20px; }
.payroll-source-heading > p { margin: 0; color: var(--muted); }

.payroll-source-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payroll-source-refresh {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #59616d;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.payroll-source-refresh:hover {
  border-color: #d5ab21;
  color: #8b6800;
  background: #fff9e8;
}

.payroll-source-refresh.is-refreshing {
  animation: payroll-source-spin .8s linear infinite;
}

@keyframes payroll-source-spin {
  to { transform: rotate(360deg); }
}

.payroll-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.payroll-source-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e1e5ea;
  border-radius: 13px;
  background: #fafbfc;
}

.payroll-source-card.is-ready { border-color: #b7dfcc; background: #f4fbf8; }
.payroll-source-card.is-demo { border-color: #ead48a; background: #fffaf0; }
.payroll-source-card.is-running { border-color: #e2bd3e; background: #fff8dd; }
.payroll-source-card.is-error { border-color: #ffc6c6; background: #fff4f4; }
.payroll-source-card.is-unavailable { border-color: #ead48a; background: #fffaf0; }

.payroll-source-card.is-running .payroll-source-icon {
  position: relative;
  color: transparent;
}

.payroll-source-card.is-running .payroll-source-icon::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 3px solid #f2d36a;
  border-top-color: #8b6800;
  border-radius: 50%;
  animation: payroll-source-spin .75s linear infinite;
}

.payroll-source-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.payroll-source-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d6dbe1;
  border-radius: 9px;
  background: #fff;
  color: #8b6800;
  font-size: 17px;
  font-weight: 900;
}

.payroll-source-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eceff2;
  color: #59616d;
  font-size: 12px;
  font-weight: 900;
}

.payroll-source-card.is-ready .payroll-source-status {
  background: #dff5e9;
  color: #067647;
}

.payroll-source-card.is-demo .payroll-source-status {
  background: #fff0b8;
  color: #7b5a00;
}

.payroll-source-card.is-running .payroll-source-status {
  background: #ffe89a;
  color: #6b5200;
}

.payroll-source-card.is-error .payroll-source-status {
  background: #ffe0e0;
  color: #b42318;
}
.payroll-source-card.is-unavailable .payroll-source-status {
  color: #8a6200;
  background: #fff0b8;
}

.payroll-source-card > strong { display: block; font-size: 16px; }
.payroll-source-card > p { min-height: 20px; margin: 7px 0 0; color: var(--muted); }
.payroll-source-action { width: 100%; margin-top: 13px; }
.payroll-source-manual-note {
  display: block;
  min-height: 40px;
  margin-top: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.payroll-helper-status-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  right: 0;
  bottom: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.payroll-local-helper-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.accounting-source-card > p {
  min-height: 42px;
  line-height: 1.55;
}

.accounting-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.accounting-source-actions .payroll-source-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 0;
  padding-inline: 10px;
  text-align: center;
}

.accounting-source-actions .payroll-source-action:only-child {
  grid-column: 1 / -1;
}

.ledger-empty-state {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
}

.ledger-empty-state form { display: flex; gap: 10px; }
.ledger-empty-state h2 { margin: 4px 0 8px; }
.ledger-empty-state p { margin: 0; }

.ledger-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: #8b6800;
  font-size: 30px;
}

.ledger-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ledger-summary-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 31, 42, 0.05);
}

.ledger-summary-grid small,
.ledger-summary-grid span { display: block; color: var(--muted); }
.ledger-summary-grid strong { display: block; margin: 7px 0 4px; font-size: 20px; }
.ledger-summary-grid .ledger-confirmed { color: #067647; }
.ledger-summary-grid .ledger-draft { color: #9a6700; }

.payroll-ledger-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.ledger-panel-heading {
  align-items: flex-start;
  padding-left: 22px;
  padding-right: 22px;
}

.ledger-meta { margin: 7px 0 0; color: var(--muted); font-size: 13px; }

.ledger-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ledger-actions form { margin: 0; }
.ledger-reopen-reason {
  width: min(220px, 34vw);
  min-width: 150px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.ledger-reopen-reason:focus {
  border-color: var(--focus-border);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}
.button-dark { border-color: #20242b; background: #20242b; color: #fff; }

.ledger-download-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}

.ledger-download-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.ledger-download-dialog__heading,
.ledger-download-dialog__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
}

.ledger-download-dialog__heading {
  border-bottom: 1px solid var(--line);
}

.ledger-download-dialog__heading h2 {
  margin: 4px 0 6px;
  font-size: 23px;
}

.ledger-download-dialog__heading p:last-child,
.ledger-download-dialog__footer p {
  margin: 0;
  color: var(--muted);
}

.ledger-download-dialog__close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ledger-download-options {
  display: grid;
  gap: 12px;
  padding: 22px 26px;
}

.ledger-download-option {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 84px;
  padding: 15px 16px;
  border: 1px solid #dfe3e8;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.ledger-download-option[href]:hover {
  border-color: #d3a400;
  background: #fffbeb;
  transform: translateY(-1px);
}

.ledger-download-option__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #eef7f1;
  color: #067647;
  font-size: 13px;
  font-weight: 900;
}

.ledger-download-option__icon.is-douzone {
  background: #fff4c7;
  color: #8a6100;
  font-size: 20px;
}

.ledger-download-option strong,
.ledger-download-option small {
  display: block;
}

.ledger-download-option strong {
  margin-bottom: 5px;
  font-size: 16px;
}

.ledger-download-option small {
  color: var(--muted);
  line-height: 1.45;
}

.ledger-download-option__arrow {
  font-size: 22px;
}

.ledger-download-option.is-disabled {
  background: #f5f6f7;
  color: #69717c;
}

.ledger-download-option__status {
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9ecef;
  color: #59616c;
  font-size: 12px;
  font-weight: 800;
}

.ledger-download-dialog__footer {
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  background: #fafafa;
}

.ledger-download-dialog__footer p {
  max-width: 450px;
  font-size: 12px;
  line-height: 1.5;
}

.payroll-grid-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  contain: inline-size;
  border-top: 1px solid var(--line);
  scrollbar-color: #aeb5bf #eef1f4;
}

.payroll-grid {
  width: max(100%, 2920px);
  min-width: 2920px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
}

.payroll-grid th,
.payroll-grid td {
  width: 92px;
  min-width: 92px;
  padding: 9px 8px;
  border-right: 1px solid #edf0f3;
  border-bottom: 1px solid #e7eaee;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  background: #fff;
}

.payroll-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f5f6f8;
  color: #414852;
  font-size: 11px;
  text-align: center;
}

.payroll-grid .ledger-row-number {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 44px;
  width: 44px;
  text-align: center;
  background: #f8f9fa;
}

.payroll-grid th:nth-child(2),
.payroll-grid td:nth-child(2) {
  position: sticky;
  left: 44px;
  z-index: 2;
  width: 108px;
  min-width: 108px;
  text-align: left;
  background: #fffdf4;
}

.payroll-grid thead th:nth-child(2) { z-index: 5; background: #f5f1df; }
.payroll-grid th:nth-child(3),
.payroll-grid td:nth-child(3) {
  position: sticky;
  left: 152px;
  z-index: 2;
  width: 88px;
  min-width: 88px;
  text-align: left;
  background: #fff;
  box-shadow: 1px 0 #e4e7eb;
}

.payroll-grid thead th:nth-child(3) {
  z-index: 5;
  background: #f5f6f8;
}

.payroll-grid th:nth-child(4),
.payroll-grid td:nth-child(4) {
  width: 94px;
  min-width: 94px;
}

.payroll-grid th:nth-child(5),
.payroll-grid td:nth-child(5) {
  width: 78px;
  min-width: 78px;
}

.payroll-grid th:nth-child(6),
.payroll-grid td:nth-child(6),
.payroll-grid th:nth-child(7),
.payroll-grid td:nth-child(7),
.payroll-grid th:nth-child(8),
.payroll-grid td:nth-child(8) {
  width: 80px;
  min-width: 80px;
}

.payroll-grid th:last-child,
.payroll-grid td:last-child {
  width: 190px;
  min-width: 190px;
  text-align: left;
}

.payroll-grid .ledger-group-identity { text-align: left; }
.payroll-grid .ledger-group-attendance { background: #f7fbff; }
.payroll-grid .ledger-group-payment { background: #fffef8; }
.payroll-grid .ledger-group-deduction { background: #fbfcfe; }
.payroll-grid .ledger-group-total,
.payroll-grid tfoot th { background: #f1f3f5; font-weight: 800; }

.payroll-grid tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid #c8cdd4;
}

.payroll-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #cfd5dc;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: inherit;
}

.payroll-grid input:focus {
  outline: 2px solid rgba(233, 179, 0, 0.28);
  border-color: #c59600;
}

.payroll-grid.is-editing td { padding: 6px; }
.ledger-no-rows { height: 130px; color: var(--muted); text-align: center !important; }

.confirmation-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 17px 20px;
  border: 1px solid #a9dec7;
  border-radius: 14px;
  background: #eefbf5;
}

.confirmation-banner > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #067647;
  color: #fff;
  font-weight: 900;
}

.confirmation-banner p { margin: 4px 0 0; color: #4f6b5f; }

.transfer-errors {
  margin: 0 22px 18px;
  padding: 14px 16px;
  border: 1px solid #f0b8b8;
  border-radius: 12px;
  background: #fff3f3;
  color: #a92323;
}

.transfer-errors ul { margin: 8px 0 0; padding-left: 20px; }
.transfer-grid {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.transfer-grid th,
.transfer-grid td { position: static !important; min-width: auto; text-align: center !important; }
.transfer-grid th:nth-child(1),
.transfer-grid td:nth-child(1) { width: 44px; }
.transfer-grid th:nth-child(2),
.transfer-grid td:nth-child(2) { width: 78px; }
.transfer-grid th:nth-child(3),
.transfer-grid td:nth-child(3) { width: 30%; }
.transfer-grid th:nth-child(4),
.transfer-grid td:nth-child(4) { width: 23%; }
.transfer-grid th:nth-child(5),
.transfer-grid td:nth-child(5) { width: auto; }

.transfer-grid-wrap { overflow-x: hidden; }
.transfer-grid th,
.transfer-grid td {
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-workflow {
  position: relative;
  margin: 0 auto 18px;
  max-width: 1180px;
  padding: 14px 18px;
  border: 1px solid #dde2e8;
  border-radius: 12px;
  background: #fff;
}

.payroll-workflow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payroll-workflow__step {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 4px 16px 4px 0;
  color: #8a929d;
}

.payroll-workflow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 8px;
  width: 28px;
  height: 1px;
  background: #d7dce2;
}

.payroll-workflow__marker {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #d4d9df;
  border-radius: 50%;
  background: #f7f8fa;
  color: #78818d;
  font-size: 12px;
  font-weight: 800;
}

.payroll-workflow__step > span:last-child { min-width: 0; }
.payroll-workflow__step strong,
.payroll-workflow__step small { display: block; }
.payroll-workflow__step strong { color: #59616c; font-size: 13px; }
.payroll-workflow__step small {
  margin-top: 2px;
  overflow: hidden;
  color: #8a929d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-workflow__step.is-complete .payroll-workflow__marker {
  border-color: #19875f;
  background: #19875f;
  color: #fff;
}
.payroll-workflow__step.is-complete .payroll-workflow__marker::before { content: "✓"; }
.payroll-workflow__step.is-complete .payroll-workflow__marker { font-size: 0; }
.payroll-workflow__step.is-complete .payroll-workflow__marker::before { font-size: 13px; }
.payroll-workflow__step.is-current strong { color: #14181d; }
.payroll-workflow__step.is-current .payroll-workflow__marker {
  border-color: #14181d;
  background: #14181d;
  color: #fff;
}
.payroll-workflow__step.is-warning .payroll-workflow__marker {
  border-color: #d69700;
  background: #fff4d2;
  color: #8c6300;
}
.payroll-workflow__step.is-warning strong,
.payroll-workflow__step.is-warning small { color: #8c6300; }

.payroll-workflow__busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: rgb(255 255 255 / 92%);
  color: #20252b;
}
.payroll-workflow__busy[hidden] { display: none; }
.payroll-workflow__busy > span {
  width: 18px;
  height: 18px;
  border: 2px solid #d2d7dd;
  border-top-color: #20252b;
  border-radius: 50%;
  animation: payroll-workflow-spin .7s linear infinite;
}
@keyframes payroll-workflow-spin { to { transform: rotate(360deg); } }

@media (max-width: 840px) {
  .payroll-workflow__steps { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .payroll-workflow__step::after { display: none; }
}

@media (max-width: 520px) {
  .payroll-workflow__steps { grid-template-columns: 1fr; }
  .transfer-grid-wrap { overflow-x: hidden; }
  .transfer-grid { min-width: 0; }
  .transfer-grid th,
  .transfer-grid td { padding-left: 4px; padding-right: 4px; }
  .transfer-grid th:nth-child(1),
  .transfer-grid td:nth-child(1) { width: 34px; }
  .transfer-grid th:nth-child(2),
  .transfer-grid td:nth-child(2) { width: 58px; }
}

.period-history-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.period-history-list a {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.period-history-list a:hover { border-color: #d3ac26; background: #fffdf4; }
.period-history-list span { color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
  .payroll-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Accounting ledger system: bank, corporate card and purchase invoices share
   one review rhythm while retaining source-specific columns. */
.accounting-ledger-page .main,
.accounting-sales-page .main,
.accounting-category-page .main {
  padding-top: 22px;
}

.accounting-ledger-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accounting-ledger-context .workspace-page-context-actions {
  gap: 10px;
}

.accounting-ledger-workbar {
  min-height: 48px;
  margin-bottom: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #e2e5e9;
  border-radius: 10px;
  background: #fff;
}

.accounting-ledger-workbar > div,
.accounting-ledger-workbar .accounting-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.accounting-ledger-workbar span:not(.accounting-state-badge) {
  color: #697078;
  font-size: 12px;
}

.accounting-ledger-workbar form { margin: 0; }
.accounting-ledger-workbar .button { min-height: 31px; padding: 5px 10px; font-size: 12px; }

.accounting-unified-filter {
  margin-bottom: 0;
  padding: 10px 14px 11px;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

.accounting-unified-filter .accounting-saved-views {
  min-height: 38px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.accounting-unified-filter .accounting-saved-views a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.accounting-unified-filter .accounting-saved-views b {
  color: #c0363f;
  font-size: 11px;
}

.accounting-unified-filter .accounting-saved-views a.is-active b { color: #fff; }

.accounting-ledger-filterbar .accounting-search-field {
  flex: 1 1 250px;
  min-width: 210px;
  max-width: 360px;
}

.accounting-ledger-filterbar select {
  min-width: 108px;
  padding-inline: 9px 28px;
  border: 1px solid #dfe2e5;
  border-radius: 7px;
  color: #34383c;
  background: #fff;
}

.accounting-filter-reset {
  color: #6d747c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.accounting-unified-ledger {
  margin-top: 0;
  overflow: hidden;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: none;
}

.accounting-unified-ledger .accounting-result-heading {
  min-height: 58px;
  padding: 10px 14px;
}

.accounting-unified-ledger .accounting-result-heading h2 {
  margin: 1px 0 0;
  font-size: 19px;
}

.accounting-unified-ledger .accounting-result-heading .eyebrow {
  margin: 0;
  color: #8a9097;
  font-size: 10px;
}

.bank-result-totals {
  margin: 5px 0 0;
  display: flex;
  gap: 14px;
  color: #697078;
  font-size: 12px;
}

.bank-result-totals b { color: #2c3136; }
.bank-result-totals span:first-child b { color: #087d61; }
.bank-result-totals span:nth-child(2) b { color: #c92f3a; }

.accounting-unified-ledger .operational-table-wrap {
  max-height: calc(100dvh - 290px);
  min-height: 300px;
  overflow: auto;
}

.accounting-unified-ledger .accounting-ledger-table {
  width: max-content;
  min-width: 100%;
}

.accounting-unified-ledger .accounting-ledger-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.accounting-unified-ledger .accounting-ledger-table th,
.accounting-unified-ledger .accounting-ledger-table td {
  height: 42px;
  padding: 5px 9px;
  vertical-align: middle;
  white-space: nowrap;
}

.accounting-unified-ledger .accounting-column-groups th {
  height: 28px;
  padding-block: 4px !important;
}

.accounting-unified-ledger .accounting-ledger-table tbody tr:hover > td {
  background: #eef6ff;
}

.accounting-unified-ledger .accounting-ledger-table input,
.accounting-unified-ledger .accounting-ledger-table select {
  height: 30px;
  min-width: 118px;
  padding: 3px 8px;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  color: #282d33;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.accounting-unified-ledger .accounting-note-cell input { min-width: 175px; }
.accounting-unified-ledger .accounting-counterparty-cell select { min-width: 170px; margin: 0; }
.accounting-unified-ledger .accounting-category-cell select { min-width: 140px; }
.accounting-unified-ledger .accounting-row-form { display: none; }
.accounting-row-save {
  min-height: 29px;
  margin-left: 0;
  padding: 4px 8px;
  border: 1px solid #2f3133;
  border-radius: 6px;
  color: #fff;
  background: #2f3133;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.accounting-unified-ledger .accounting-status-action { min-width: 118px; }
.accounting-unified-ledger .accounting-card-cell { min-width: 150px; }
.accounting-unified-ledger .accounting-description { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.accounting-unified-ledger .numeric-cell { min-width: 96px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .accounting-ledger-workbar { align-items: flex-start; flex-direction: column; }
  .accounting-ledger-filterbar .accounting-search-field { flex-basis: 100%; max-width: none; }
  .accounting-unified-ledger .operational-table-wrap { max-height: none; }
}

@media (max-width: 720px) {
  .payroll-ledger-heading { align-items: stretch; }
  .payroll-period-commandbar,
  .payroll-period-primary,
  .payroll-source-heading { align-items: flex-start; flex-direction: column; }
  .payroll-source-grid { grid-template-columns: 1fr; }
  .ledger-summary-grid,
  .period-history-list { grid-template-columns: 1fr; }
  .ledger-panel-heading { gap: 14px; }
  .ledger-actions { justify-content: flex-start; }
  .accounting-source-actions { grid-template-columns: 1fr; }
}

/* Dense accounting ledger: one uninterrupted review surface inspired by modern ERP ledgers. */
.accounting-guide-popover { position: relative; display: inline-block; }
.accounting-guide-popover summary { color: #667085; cursor: pointer; list-style: none; font-size: 13px; }
.accounting-guide-popover summary::-webkit-details-marker { display: none; }
.accounting-guide-popover > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  padding: 14px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgb(15 23 42 / 12%);
}
.accounting-guide-popover p { margin: 6px 0 0; color: #667085; line-height: 1.55; }
.accounting-period-mode-tabs { display: inline-flex; padding: 2px; border: 1px solid #dfe3e8; border-radius: 8px; background: #f7f8fa; }
.accounting-period-mode-tabs a,
.accounting-period-mode-tabs span { min-width: 34px; padding: 6px 9px; border-radius: 6px; color: #667085; text-align: center; text-decoration: none; }
.accounting-period-mode-tabs a.is-active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgb(15 23 42 / 10%); font-weight: 700; }
.accounting-period-mode-tabs .is-disabled {
  color: #aeb4bb;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
  user-select: none;
}
.accounting-range-navigation { display: inline-flex; align-items: center; gap: 9px; }
.accounting-range-navigation a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #dfe3e8; border-radius: 50%; color: #111827; text-decoration: none; }
.accounting-range-navigation strong { min-width: 170px; text-align: center; font-size: 14px; }
.accounting-bank-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; }
.accounting-bank-actionbar > div { display: flex; align-items: center; gap: 10px; color: #667085; }
.accounting-filter-panel.is-bank-ledger { padding: 10px 14px; border-radius: 10px 10px 0 0; box-shadow: none; }
.accounting-filter-panel.is-bank-ledger .accounting-saved-views { padding-bottom: 9px; border-bottom: 1px solid #eceff3; }
.accounting-ledger-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 9px; }
.accounting-ledger-filterbar select,
.accounting-ledger-filterbar .button,
.accounting-ledger-filterbar .accounting-filter-reset { min-height: 34px; }
.accounting-ledger-filterbar select { max-width: 170px; padding: 5px 28px 5px 10px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; }
.accounting-ledger-filterbar select:disabled { color: #98a2b3; background: #f8f9fb; }
.accounting-ledger-filterbar .accounting-search-field { width: min(310px, 100%); }
.accounting-segmented-filter { display: inline-flex; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 8px; }
.accounting-segmented-filter a { padding: 7px 10px; color: #667085; text-decoration: none; }
.accounting-segmented-filter a + a { border-left: 1px solid #dfe3e8; }
.accounting-segmented-filter a.is-active { background: #f0f2f5; color: #111827; font-weight: 700; }
.accounting-filter-reset { display: inline-flex; align-items: center; color: #667085; text-decoration: none; }
.accounting-review-panel.is-bank-ledger { margin-top: 0; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: none; }
.accounting-review-panel.is-bank-ledger .accounting-result-heading { min-height: 54px; padding-block: 9px; }
.bank-result-totals { display: flex; gap: 14px; margin: 4px 0 0; color: #667085; }
.bank-result-totals span:first-child b { color: #039855; }
.bank-result-totals span:nth-child(2) b { color: #344054; }
.accounting-column-groups th { padding: 7px 10px !important; border-bottom-color: #d0d5dd !important; color: #475467; text-align: left; font-weight: 700; }
.accounting-column-groups th:last-child { border-left: 1px solid #d0d5dd; }
.accounting-review-panel.is-bank-ledger .accounting-review-table { min-width: 1480px; }
.accounting-review-panel.is-bank-ledger .accounting-review-table tbody tr:hover { background: #eef6ff; }
.accounting-bank-account { min-width: 172px; white-space: nowrap; }
.accounting-bank-identity { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.accounting-bank-logo,
.accounting-bank-logo-fallback { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; }
.accounting-bank-logo { display: block; object-fit: contain; }
.accounting-bank-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9edf2;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
}
.accounting-bank-copy { display: grid; min-width: 0; line-height: 1.18; }
.accounting-bank-copy strong { overflow: hidden; max-width: 145px; text-overflow: ellipsis; }
.accounting-bank-copy small {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 500;
}
.accounting-row-save { margin-left: 6px; padding: 4px 7px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; cursor: pointer; }
.accounting-review-panel.is-bank-ledger .accounting-note-cell input { min-width: 120px; height: 30px; padding: 4px 7px; }
.accounting-review-panel.is-bank-ledger .accounting-category-cell select,
.accounting-review-panel.is-bank-ledger .accounting-counterparty-cell select { min-width: 130px; height: 30px; padding-block: 3px; }

@media (max-width: 980px) {
  .workspace-page-context-actions { flex-wrap: wrap; }
  .accounting-range-navigation strong { min-width: 130px; }
  .accounting-ledger-filterbar .accounting-search-field { flex: 1 1 100%; }
}

.sales-provider-implementation {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 12px;
  white-space: nowrap;
}
.sales-provider-implementation.is-migration_ready { background: #fffaeb; color: #b54708; }
.sales-provider-implementation.is-implemented { background: #e8f7f0; color: #126e4f; }
.sales-provider-implementation.is-review_required { background: #fff6dc; color: #8a5c00; }
.sales-collector-boundary { margin-bottom: 18px; }
.sales-collector-boundary p { margin: 5px 0 0; }
.brand-cafe24 { background: #1d4ed8; color: #fff; }

.workspace-shell button[aria-busy="true"],
.workspace-shell [role="button"][aria-busy="true"],
.topbar-actions button[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.78;
}

.workspace-shell button[aria-busy="true"]::after,
.workspace-shell [role="button"][aria-busy="true"]::after,
.topbar-actions button[aria-busy="true"]::after {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  display: inline-block;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  content: "";
  animation: management-action-spin 0.72s linear infinite;
}

@keyframes management-action-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Shared nested-table scroll contract.
 * Horizontal overflow stays inside the table viewport, while vertical wheel
 * input may continue into the surrounding page as soon as the table reaches
 * its top or bottom edge.
 */
.table-scroll,
[class*="table-wrap"] {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* Annual accounting source dashboard */
.accounting-dashboard-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.accounting-year-selector {
  align-items: center;
  display: flex;
  gap: 10px;
}

.accounting-year-selector label {
  color: var(--muted);
  font-weight: 800;
}

.accounting-year-selector select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #172033;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 0 40px 0 14px;
}

.accounting-dashboard-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.accounting-dashboard-summary article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(23, 32, 51, .05);
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 18px 20px;
}

.accounting-dashboard-summary article::before {
  background: #687487;
  border-radius: 99px;
  content: "";
  height: 4px;
  width: 34px;
}

.accounting-dashboard-summary article.is-confirmed::before { background: #159b72; }
.accounting-dashboard-summary article.is-uploaded::before { background: #e3a500; }
.accounting-dashboard-summary article.is-waiting::before { background: #cd8d21; }
.accounting-dashboard-summary article.is-missing::before { background: #d45b5b; }
.accounting-dashboard-summary span { color: var(--muted); font-weight: 700; }
.accounting-dashboard-summary strong { font-size: 20px; }

.accounting-source-matrix-panel {
  overflow: hidden;
  padding: 0;
}

.accounting-source-matrix-heading {
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 22px 24px 18px;
}

.accounting-source-matrix-heading h2 { margin: 3px 0 5px; }
.accounting-source-matrix-heading p { margin: 0; }

.accounting-source-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.accounting-source-legend span {
  align-items: center;
  color: #5f6978;
  display: inline-flex;
  font-weight: 700;
  gap: 6px;
}

.accounting-source-legend i {
  background: #c6cbd3;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.accounting-source-legend .is-confirmed i { background: #159b72; }
.accounting-source-legend .is-uploaded i { background: #e3a500; }
.accounting-source-legend .is-waiting i { background: #cd8d21; }
.accounting-source-legend .is-missing i { background: #d45b5b; }
.accounting-source-legend .is-future i { background: #aeb5c0; }

.accounting-collector-message {
  background: #fafbfc;
  border-bottom: 1px solid var(--line);
  color: #5f6978;
  margin: 0;
  padding: 10px 24px;
}

.accounting-collector-message.is-error { color: #b42318; }

.accounting-source-matrix-wrap {
  max-width: 100%;
  overflow: auto;
  padding: 16px;
  scrollbar-color: #aeb5be transparent;
  scrollbar-width: thin;
}

.accounting-source-matrix-wrap::-webkit-scrollbar {
  height: 7px;
}

.accounting-source-matrix-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.accounting-source-matrix-wrap::-webkit-scrollbar-thumb {
  background: #aeb5be;
  border-radius: 99px;
}

.accounting-source-matrix {
  --accounting-source-label-width: 72px;
  display: grid;
  gap: 8px;
  grid-template-columns: var(--accounting-source-label-width) repeat(12, minmax(154px, 1fr));
  min-width: 2016px;
}

.accounting-source-corner,
.accounting-source-month-heading,
.accounting-source-row-heading {
  align-items: center;
  background: #f5f7fa;
  border-radius: 9px;
  display: flex;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
}

.accounting-source-corner,
.accounting-source-row-heading {
  box-shadow: -16px 0 0 #fff, 8px 0 12px rgba(23, 32, 51, .06);
  left: 0;
  position: sticky;
  z-index: 5;
}

.accounting-source-row-heading {
  align-items: center;
  background: #eef1f4;
  border: 1px solid #dfe4e9;
  color: #263142;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 112px;
  padding: 8px 4px;
  text-align: center;
}

.accounting-source-row-icon {
  align-items: center;
  background: rgba(255, 196, 31, .14);
  border: 1px solid rgba(255, 196, 31, .5);
  border-radius: 8px;
  color: #ffc41f;
  display: inline-flex;
  font-size: 14px;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.accounting-source-month-heading.is-frozen-month,
.accounting-source-month-card.is-frozen-month {
  box-shadow: 8px 0 12px rgba(23, 32, 51, .06);
  left: calc(var(--accounting-source-label-width) + 8px);
  position: sticky;
  z-index: 3;
}

.accounting-source-month-heading.is-frozen-month {
  z-index: 4;
}

.accounting-source-row-icon::before { content: "▦"; }
.accounting-source-row-heading.is-bank .accounting-source-row-icon::before { content: "↔"; }
.accounting-source-row-heading.is-sales .accounting-source-row-icon::before { content: "＋"; }
.accounting-source-row-heading.is-purchase .accounting-source-row-icon::before { content: "－"; }

.accounting-source-month-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #172033;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  padding: 11px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.accounting-source-month-card:hover,
a.accounting-source-month-card:focus-visible {
  box-shadow: 0 9px 22px rgba(23, 32, 51, .11);
  transform: translateY(-2px);
}

.accounting-source-month-card.is-confirmed { background: #effaf6; border-color: #9edbc7; }
.accounting-source-month-card.is-uploaded { background: #fff9e9; border-color: #efd17b; }
.accounting-source-month-card.is-waiting { background: #fffaf0; border-color: #e8c98f; }
.accounting-source-month-card.is-missing { background: #fff7f7; border-color: #efc4c4; }
.accounting-source-month-card.is-future { background: #f7f8fa; color: #8b94a1; }
.accounting-source-month-card.is-collecting { border-color: #d6a800; box-shadow: 0 0 0 2px rgba(214, 168, 0, .12); }

.accounting-source-month-card-top {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.accounting-source-month-card-top > strong {
  font-size: 18px;
  line-height: 1.2;
}

.accounting-source-month-card-top > span {
  background: #e8ebef;
  border-radius: 99px;
  color: #687487;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.accounting-source-month-card.is-confirmed .accounting-source-month-card-top > span { background: #d7f2e8; color: #087358; }
.accounting-source-month-card.is-uploaded .accounting-source-month-card-top > span { background: #ffedb7; color: #8d6200; }
.accounting-source-month-card.is-waiting .accounting-source-month-card-top > span { background: #f8e8c9; color: #805711; }
.accounting-source-month-card.is-missing .accounting-source-month-card-top > span { background: #fde3e3; color: #a83e3e; }
.accounting-source-month-card > small { color: #687487; display: block; }

.accounting-source-card-metrics {
  display: grid;
  gap: 3px;
  margin: 7px 0 3px;
}

.accounting-source-card-metrics .accounting-source-amount {
  color: #263142;
  display: grid;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 3px;
}

.accounting-source-card-metrics .accounting-source-amount.is-multiline {
  gap: 1px;
}

.accounting-source-card-metrics small {
  color: #687487;
  display: block;
  font-size: 12px;
  line-height: 1.4;
}

.accounting-source-storage-status {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.accounting-source-storage-status > span {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}

.accounting-source-storage-status > span.is-ready {
  background: #d7f2e8;
  color: #087358;
}

.accounting-source-storage-status > span.is-missing {
  background: #fde3e3;
  color: #a83e3e;
}

.accounting-source-storage-status > span.is-pending {
  background: #e8ebef;
  color: #687487;
}

.accounting-source-storage-status > i {
  color: #9aa2ad;
  font-size: 11px;
  font-style: normal;
}

.accounting-source-card-actions {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  width: 100%;
}

.accounting-source-card-actions a,
.accounting-source-card-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd5dd;
  border-radius: 7px;
  color: #263142;
  display: inline-flex;
  flex: 1;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 4px 7px;
  text-decoration: none;
  white-space: nowrap;
}

.accounting-source-card-actions > :only-child { grid-column: 1 / -1; }

.accounting-source-card-actions button { cursor: pointer; }
.accounting-source-card-actions button:hover,
.accounting-source-card-actions a:hover { border-color: #b28b00; }
.accounting-source-card-actions button:disabled { cursor: wait; opacity: .72; }
.accounting-source-card-actions button.is-running::before {
  animation: accounting-collector-spin .75s linear infinite;
  border: 2px solid #d9dde3;
  border-radius: 50%;
  border-top-color: #8b6b00;
  content: "";
  height: 11px;
  margin-right: 5px;
  width: 11px;
}

@keyframes accounting-collector-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .accounting-dashboard-heading,
  .accounting-source-matrix-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .accounting-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-year-selector select { flex: 1; }
}

@media (max-width: 560px) {
  .accounting-dashboard-summary { grid-template-columns: 1fr; }
}

/* Restrained premium hover for clickable, card-shaped actions only. */
.ui-elevated-action {
  transition: border-color .16s ease, box-shadow .16s ease,
    transform .16s ease, background-image .16s ease;
}

.ui-elevated-action:hover,
.ui-elevated-action:focus-visible {
  background-image: linear-gradient(
    145deg,
    rgba(255, 196, 31, .11),
    rgba(255, 255, 255, 0) 68%
  );
  border-color: #dfbd49;
  box-shadow: 0 12px 27px rgba(63, 48, 4, .11);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ui-elevated-action {
    transition: none;
  }

  .ui-elevated-action:hover,
  .ui-elevated-action:focus-visible {
    transform: none;
  }
}

/* Management reports */
.report-heading {
  align-items: flex-end;
}

.report-filter-panel {
  padding: 20px 22px;
}

.report-filter-form {
  display: grid;
  grid-template-columns: minmax(360px, 1.5fr) minmax(330px, 1fr) auto;
  gap: 22px;
  align-items: end;
}

.report-period-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 22px minmax(140px, 1fr);
  align-items: end;
  gap: 8px;
}

.report-period-fields label {
  display: grid;
  gap: 8px;
  color: #4e5560;
  font-size: 13px;
  font-weight: 800;
}

.report-period-input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #d8dde3;
  border-radius: 9px;
  color: #1f242b;
  background: #fff;
  font-size: 15px;
}

.report-period-input:focus {
  outline: 3px solid rgba(239, 179, 25, 0.15);
  border-color: #c89a16;
}

.report-period-separator {
  height: 42px;
  display: grid;
  place-items: center;
  color: #9aa1aa;
}

.employment-filter {
  min-width: 0;
  min-height: 66px;
  margin: 0;
  padding: 24px 14px 9px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
}

.employment-filter legend {
  padding: 0 4px;
  color: #4e5560;
  font-size: 13px;
  font-weight: 800;
}

.employment-filter label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #343941;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.employment-filter input {
  width: 17px;
  height: 17px;
  accent-color: #c99100;
}

.report-kpis {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.report-kpis article {
  min-width: 0;
  padding: 18px 20px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 36, 48, 0.045);
}

.report-kpis span,
.report-kpis small {
  color: var(--muted);
  font-size: 13px;
}

.report-kpis strong {
  overflow: hidden;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-kpis strong.is-positive { color: #087555; }
.report-kpis strong.is-negative { color: #b53535; }

.report-chart-panel {
  overflow: hidden;
}

.report-source-badge {
  padding: 7px 10px;
  border: 1px solid #e9d38a;
  border-radius: 999px;
  color: #745600;
  background: #fff9df;
  font-size: 12px;
  font-weight: 800;
}

.report-chart-shell {
  width: 100%;
  padding: 8px 18px 0;
  overflow-x: auto;
}

.report-bar-chart,
.report-line-chart {
  width: 100%;
  min-width: 620px;
  height: 360px;
  display: block;
}

.report-line-chart {
  cursor: default;
}

.report-chart-tooltip {
  position: fixed;
  z-index: 100;
  min-width: 148px;
  padding: 11px 13px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(183, 131, 0, 0.28);
  border-radius: 11px;
  color: #34312a;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 34px rgba(28, 36, 48, 0.16);
  pointer-events: none;
  font-size: 12px;
}

.report-chart-tooltip[hidden] {
  display: none;
}

.report-chart-tooltip strong {
  margin-bottom: 3px;
  color: #725300;
  font-size: 13px;
}

.report-chart-tooltip span {
  color: #60666e;
}

.report-chart-tooltip .chart-tooltip-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: inherit;
}

.report-chart-tooltip .chart-tooltip-marker {
  width: 9px;
  height: 9px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  background: var(--chart-tooltip-color);
}

.report-chart-tooltip .chart-tooltip-label,
.report-chart-tooltip .chart-tooltip-value {
  color: inherit;
  white-space: nowrap;
}

.report-chart-tooltip .chart-tooltip-value {
  padding-left: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-data-table-wrap {
  max-height: 270px;
  overflow: auto;
  border-top: 1px solid #eef0f3;
}

.report-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.report-data-table th,
.report-data-table td {
  padding: 10px 22px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
}

.report-data-table th:last-child,
.report-data-table td:last-child {
  text-align: right;
}

.report-data-table th {
  position: sticky;
  top: 0;
  color: #59606a;
  background: #f7f8f9;
  font-size: 12px;
}

.pay-basis-switch {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #e2e5e8;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(28, 36, 48, 0.05);
}

.pay-basis-switch > span {
  color: #9298a0;
  font-size: 13px;
  font-weight: 800;
}

.pay-basis-switch > span.is-active { color: #20242a; }

.ios-switch {
  position: relative;
  width: 46px;
  height: 26px;
  display: inline-block;
}

.ios-switch input {
  position: absolute;
  opacity: 0;
}

.ios-switch > span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d6d9de;
  cursor: pointer;
  transition: background 0.18s ease;
}

.ios-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease;
}

.ios-switch input:checked + span { background: #191d23; }
.ios-switch input:checked + span::after { transform: translateX(20px); }
.ios-switch input:focus-visible + span { outline: 3px solid rgba(239, 179, 25, 0.35); }

@media (max-width: 1050px) {
  .report-filter-form {
    grid-template-columns: 1fr auto;
  }
  .report-period-fields { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .report-heading { align-items: flex-start; }
  .report-filter-form { grid-template-columns: 1fr; }
  .report-period-fields { grid-column: auto; }
  .employment-filter {
    min-height: auto;
    flex-wrap: wrap;
  }
  .report-kpis { grid-template-columns: 1fr; }
  .report-chart-shell { padding-inline: 8px; }
}

/* Main management dashboard */
.dashboard-heading {
  align-items: center;
}

.dashboard-today {
  padding: 10px 14px;
  display: grid;
  gap: 3px;
  border: 1px solid #e0e3e7;
  border-radius: 11px;
  background: #fff;
  text-align: right;
  box-shadow: 0 8px 24px rgba(28, 36, 48, 0.04);
}

.dashboard-today small {
  color: #9b7200;
  font-size: 10px;
  font-weight: 900;
}

.dashboard-today strong {
  font-size: 14px;
}

.dashboard-top-grid,
.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-analytics-grid {
  margin-top: 18px;
}

.dashboard-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(28, 36, 48, 0.055);
}

.dashboard-card-heading {
  min-height: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-card-heading h2 {
  margin: 6px 0 0;
  font-size: 19px;
  letter-spacing: -0.035em;
}

.dashboard-card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: #775700;
  background: #fff3c5;
  font-size: 17px;
}

.dashboard-ready-badge {
  padding: 6px 9px;
  border: 1px solid #e5e7ea;
  border-radius: 999px;
  color: #747a82;
  background: #f7f8f9;
  font-size: 10px;
  font-weight: 850;
}

.dashboard-card-description {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.calendar-toolbar {
  margin: 18px 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.calendar-toolbar button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #e0e3e7;
  border-radius: 50%;
  color: #555b63;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.calendar-toolbar button:hover {
  border-color: #d4a51e;
  background: #fffaf0;
}

.calendar-toolbar button:focus-visible {
  outline: 3px solid rgba(239, 179, 25, 0.25);
}

.calendar-toolbar strong {
  min-width: 92px;
  text-align: center;
  font-size: 16px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  padding-bottom: 6px;
  color: #777d85;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.calendar-weekdays span:first-child {
  color: #d75858;
}

.calendar-day {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #3e444b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calendar-day.is-sunday {
  color: #d75858;
}

.calendar-day.is-outside {
  color: #c3c7cc;
}

.calendar-day.is-today {
  width: 29px;
  min-height: 29px;
  place-self: center;
  border-radius: 9px;
  color: #191c20;
  background: #f3c84f;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(185, 135, 0, 0.2);
}

.calendar-empty {
  margin-top: 13px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #eceef0;
}

.calendar-empty > div {
  display: grid;
  gap: 3px;
}

.calendar-empty span {
  color: #a07808;
  font-size: var(--font-size-min);
  font-weight: 900;
}

.calendar-empty strong {
  font-size: 11px;
}

.calendar-empty p {
  margin: 0;
  padding: 11px 13px;
  border-radius: 9px;
  color: #8a9097;
  background: #f7f8f9;
  font-size: 11px;
}

.accounting-preview-grid {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.accounting-preview-grid > div {
  min-height: 104px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: linear-gradient(145deg, #fafbfb, #fff);
}

.accounting-preview-grid > a {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  color: inherit;
  background: linear-gradient(145deg, #fafbfb, #fff);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.accounting-preview-grid > a:hover {
  border-color: #e0c568;
  box-shadow: 0 10px 24px rgba(47, 38, 8, 0.08);
  transform: translateY(-1px);
}

.accounting-preview-grid span {
  color: #666d75;
  font-size: 11px;
  font-weight: 800;
}

.accounting-preview-grid > a span {
  color: #666d75;
  font-size: 11px;
  font-weight: 800;
}

.accounting-preview-grid strong {
  font-size: 23px;
}

.accounting-preview-grid > a strong {
  overflow: hidden;
  font-size: clamp(16px, 1.35vw, 22px);
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-preview-grid small {
  color: #a0a5ab;
  font-size: 10px;
}

.accounting-preview-grid > a small {
  color: #8d939b;
  font-size: 10px;
}

.dashboard-ready-badge.is-live {
  border-color: #cde8dd;
  color: #116c51;
  background: #effaf6;
}

.dashboard-close-progress {
  margin-top: 12px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
  border: 1px solid #e8e2cf;
  border-radius: 12px;
  background: #fffdf7;
}

.dashboard-close-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-close-progress span,
.dashboard-close-progress small {
  color: #747a82;
  font-size: 11px;
  font-weight: 750;
}

.dashboard-close-progress strong {
  color: #8b6400;
  font-size: 14px;
}

.dashboard-close-progress progress {
  width: 100%;
  height: 7px;
  grid-column: 1 / -1;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #ebecef;
}

.dashboard-close-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #ebecef;
}

.dashboard-close-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #e0a612, #f5c746);
}

.dashboard-close-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #e0a612, #f5c746);
}

.dashboard-work-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.dashboard-queue-count {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #6f5000;
  background: #fff1bd;
  font-weight: 900;
}

.dashboard-queue-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.dashboard-queue-item {
  min-width: 0;
  min-height: 78px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #e7e9ec;
  border-radius: 12px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.dashboard-queue-item:hover {
  border-color: #d9b84c;
  background: #fffdf6;
}

.dashboard-queue-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8f969f;
  box-shadow: 0 0 0 5px rgba(143, 150, 159, 0.1);
}

.dashboard-queue-item.is-warning .dashboard-queue-marker {
  background: #d49b0b;
  box-shadow: 0 0 0 5px rgba(212, 155, 11, 0.12);
}

.dashboard-queue-item.is-danger .dashboard-queue-marker {
  background: #d75b5b;
  box-shadow: 0 0 0 5px rgba(215, 91, 91, 0.11);
}

.dashboard-queue-item.is-ready .dashboard-queue-marker {
  background: #16936c;
  box-shadow: 0 0 0 5px rgba(22, 147, 108, 0.11);
}

.dashboard-queue-item small {
  color: #997000;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dashboard-queue-item strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.dashboard-queue-item p {
  margin: 3px 0 0;
  color: #767d86;
  font-size: 12px;
}

.dashboard-queue-action {
  color: #745600;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-queue-empty {
  min-height: 112px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px dashed #d9dedf;
  border-radius: 12px;
  background: #f9fbfa;
}

.dashboard-queue-empty > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #15926b;
  font-weight: 900;
}

.dashboard-queue-empty p {
  margin: 4px 0 0;
  color: #7d838b;
  font-size: 12px;
}

.dashboard-quick-actions nav {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}

.dashboard-quick-actions nav a {
  min-height: 61px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: inherit;
  background: #f7f8f9;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.dashboard-quick-actions nav a:hover {
  border-color: #e4ca72;
  background: #fffaf0;
}

.quick-action-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #ead38a;
  border-radius: 10px;
  color: #765600;
  background: #fff2be;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-quick-actions nav strong,
.dashboard-quick-actions nav small {
  display: block;
}

.dashboard-quick-actions nav strong {
  font-size: 13px;
}

.dashboard-quick-actions nav small {
  margin-top: 2px;
  color: #818790;
  font-size: 10px;
}

.dashboard-quick-actions nav b {
  color: #9aa0a7;
}

.large-expense-placeholder {
  margin-top: 10px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px dashed #e1d6ad;
  border-radius: 11px;
  background: #fffdf6;
}

.large-expense-placeholder > span {
  width: 23px;
  height: 23px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #b48708;
  font-size: 12px;
  font-weight: 900;
}

.large-expense-placeholder strong {
  font-size: 11px;
}

.large-expense-placeholder p {
  margin: 3px 0 0;
  color: #898e95;
  font-size: 10px;
}

.dashboard-kpi {
  max-width: 52%;
  overflow: hidden;
  color: #282c32;
  font-size: 20px;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-chart-legend {
  min-height: 28px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  color: #6f757d;
  font-size: 10px;
}

.dashboard-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-line {
  width: 17px;
  height: 3px;
  display: inline-block;
  border-radius: 999px;
}

.legend-box {
  width: 10px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
}

.legend-total { background: #1d9a70; }
.legend-hires { background: #4388f5; }
.legend-leavers { background: #ee6f70; }
.legend-payroll { background: #d29c00; }
.dashboard-chart-note { margin-left: auto; color: #9da2a8; }

.dashboard-chart-shell {
  width: 100%;
  overflow-x: auto;
}

.dashboard-workforce-chart,
.dashboard-payroll-chart {
  width: 100%;
  min-width: 500px;
  height: 270px;
  display: block;
  cursor: default;
}

.dashboard-chart-tooltip {
  min-width: 154px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: rgba(22, 24, 27, 0.9);
  box-shadow: 0 12px 30px rgba(18, 20, 23, 0.24);
}

.dashboard-chart-tooltip strong,
.dashboard-chart-tooltip span {
  color: #fff;
}

.dashboard-chart-summary {
  min-height: 38px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid #eceef0;
  color: #7b8188;
  font-size: 10px;
}

.dashboard-chart-summary strong {
  color: #33383f;
}

.dashboard-chart-summary a {
  margin-left: auto;
  color: #7b5a00;
  text-decoration: none;
  font-weight: 850;
}

.dashboard-no-access {
  margin: 34px 0;
  padding: 30px;
  border-radius: 12px;
  color: #858b92;
  background: #f7f8f9;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 960px) {
  .dashboard-top-grid,
  .dashboard-analytics-grid,
  .dashboard-work-grid {
    grid-template-columns: 1fr;
  }
}

/* Professional module workspace */
.workspace-module-heading {
  align-items: center;
}

.workspace-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.workspace-title-line h1 {
  margin-bottom: 0;
}

.workspace-module-status {
  padding: 5px 9px;
  border: 1px solid #dfe3e7;
  border-radius: 999px;
  color: #6f7680;
  background: #f7f8f9;
  font-size: 11px;
  font-weight: 850;
}

.workspace-module-status.is-partial {
  border-color: #d7e8df;
  color: #126c51;
  background: #eff9f5;
}

.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-with-icon > span {
  font-size: 17px;
  line-height: 1;
}

.workspace-overview-banner {
  margin-bottom: 18px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #eadcae;
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(255, 247, 215, 0.96), rgba(255, 255, 255, 0.97)),
    #fff;
}

.workspace-overview-banner > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.workspace-overview-icon {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: #6f5100;
  background: #f4c843;
  font-size: 18px;
  font-weight: 900;
}

.workspace-overview-banner strong {
  font-size: 13px;
}

.workspace-overview-banner p {
  margin: 3px 0 0;
  color: #6f737a;
  font-size: 12px;
}

.workspace-overview-label {
  color: #977000;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.workspace-process-panel {
  overflow: hidden;
}

.workspace-stepper {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.workspace-stepper li {
  position: relative;
  min-width: 0;
  padding: 19px 20px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #e5e8eb;
  background: #fbfcfc;
}

.workspace-stepper li:first-child {
  border-radius: 13px 0 0 13px;
}

.workspace-stepper li:last-child {
  border-radius: 0 13px 13px 0;
}

.workspace-stepper li + li {
  border-left: 0;
}

.workspace-stepper li > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #765700;
  background: #fff0b8;
  font-size: 12px;
  font-weight: 950;
}

.workspace-stepper strong {
  font-size: 14px;
}

.workspace-stepper p {
  margin: 5px 0 0;
  color: #737a83;
  font-size: 12px;
  line-height: 1.55;
}

.workspace-module-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  gap: 18px;
}

.workspace-capability-list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.workspace-capability-list > div {
  min-height: 78px;
  padding: 14px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  border: 1px solid #e7e9ec;
  border-radius: 12px;
  background: #fff;
}

.workspace-capability-state {
  padding: 5px 7px;
  border-radius: 7px;
  color: #725400;
  background: #fff1bd;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.workspace-capability-list strong {
  font-size: 13px;
}

.workspace-capability-list p {
  margin: 4px 0 0;
  color: #767d86;
  font-size: 12px;
}

.workspace-related-panel nav {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.workspace-related-panel nav a {
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  color: #34393f;
  background: #fafbfb;
  text-decoration: none;
  font-weight: 800;
}

.workspace-related-panel nav a:hover {
  border-color: #dfbd4a;
  color: #6d5000;
  background: #fffaf0;
}

.workspace-release-note {
  margin-top: 16px;
  padding: 14px;
  border-radius: 11px;
  color: #5d6269;
  background: #f5f6f7;
}

.workspace-release-note strong {
  color: #33383f;
  font-size: 12px;
}

.workspace-release-note p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .workspace-stepper,
  .workspace-module-grid {
    grid-template-columns: 1fr;
  }

  .workspace-stepper li,
  .workspace-stepper li:first-child,
  .workspace-stepper li:last-child {
    border: 1px solid #e5e8eb;
    border-radius: 12px;
  }

  .workspace-stepper li + li {
    margin-top: 8px;
  }

  .workspace-overview-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*
 * Shared ERP table density contract
 *
 * Every current and future data table inside the protected workspace inherits
 * the same typography and one-line row height. Page-specific rules may still
 * control column widths, alignment, sticky cells, and colors, but not density.
 */
.workspace-shell table {
  font-size: var(--erp-table-font-size);
  line-height: 1.35;
}

.workspace-shell table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  height: var(--erp-table-row-height);
  padding-block: var(--erp-table-cell-padding-y);
  vertical-align: middle;
}

.workspace-shell table > thead > tr > th {
  font-size: var(--erp-table-heading-font-size);
  line-height: 1.3;
}

.workspace-shell .payroll-grid.is-editing td {
  padding-block: 3px;
}

.workspace-shell .payroll-grid.is-editing input {
  height: 34px;
}

.workspace-shell td.ledger-no-rows {
  height: 130px;
}

.nav-integrations {
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 10px 10px;
}

.integration-page-heading {
  align-items: center;
}

.integration-notice {
  margin: -10px 0 18px;
}

.integration-security-banner {
  margin-bottom: 20px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid #e7d699;
  border-radius: 15px;
  background:
    radial-gradient(circle at 0 0, rgba(239, 179, 25, 0.12), transparent 20rem),
    #fffdf6;
}

.integration-security-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #ead48c;
  border-radius: 11px;
  background: #fff7d8;
  font-size: 17px;
}

.integration-security-banner strong {
  font-size: 15px;
}

.integration-security-banner p {
  margin: 5px 0 0;
  color: #727780;
  font-size: 13px;
  line-height: 1.6;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.integration-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(239, 179, 25, 0.055), transparent 16rem),
    #fff;
  box-shadow: var(--shadow);
}

.integration-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.integration-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #ecd89e;
  border-radius: 12px;
  color: #795500;
  background: #fff9e7;
  font-size: 17px;
  font-weight: 900;
}

.integration-card-heading span {
  color: #a27500;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.integration-card-heading h2 {
  margin: 2px 0 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.integration-status {
  padding: 6px 9px;
  border-radius: 999px;
  color: #8a9098;
  background: #f0f2f4;
  font-size: 11px;
  white-space: nowrap;
}

.integration-status.is-configured {
  color: #167252;
  background: #eaf8f2;
}

.integration-description {
  min-height: 43px;
  margin: 16px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.integration-form {
  display: grid;
  gap: 13px;
}

.integration-field {
  display: grid;
  gap: 7px;
  color: #4d535b;
  font-size: 13px;
  font-weight: 800;
}

.integration-field span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.integration-field em {
  padding: 2px 6px;
  border-radius: 999px;
  color: #167252;
  background: #eaf8f2;
  font-size: 10px;
  font-style: normal;
}

.integration-field input {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  border: 1px solid #d9dde2;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  outline: none;
  font-size: 14px;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.integration-field input:focus {
  border-color: #d9a10d;
  box-shadow: 0 0 0 3px rgba(239, 179, 25, 0.15);
}

.integration-local-note {
  margin: -3px 0 0;
  color: #747a82;
  font-size: 12px;
  line-height: 1.55;
}

.integration-local-note[data-state="configured"] {
  color: #167252;
}

.integration-local-note[data-state="error"] {
  color: #b23a3a;
}

.integration-api-list {
  display: grid;
  gap: 12px;
}

.integration-api-row {
  position: relative;
  padding: 15px 46px 15px 15px;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr);
  gap: 12px;
  border: 1px solid #e2e5e8;
  border-radius: 12px;
  background: #fafbfc;
}

.integration-api-remove {
  position: absolute;
  top: 13px;
  right: 12px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #ecd2d2;
  border-radius: 8px;
  color: #a33b3b;
  background: #fff8f8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.integration-api-remove:hover {
  border-color: #dda7a7;
  background: #fff0f0;
}

.integration-api-add {
  justify-self: start;
}

.integration-clear,
.integration-enabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #727880;
  cursor: pointer;
  font-size: 12px;
}

.integration-clear input,
.integration-enabled input {
  width: 16px;
  height: 16px;
  accent-color: #d89c00;
}

.integration-card-footer {
  margin-top: 5px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eceef1;
}

.integration-enabled span {
  color: #3f454d;
  font-size: 13px;
  font-weight: 800;
}

.integration-updated {
  color: #969ba2;
  font-size: 10px;
}

.integration-error {
  margin-top: 0;
}

.sales-integration-guide {
  margin-bottom: 24px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.sales-integration-guide strong {
  font-size: 14px;
}

.sales-integration-guide p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.sales-integration-guide > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #59616b;
  background: #eef1f4;
  font-size: 11px;
  font-weight: 800;
}

.sales-integration-guide > span[data-state="configured"] {
  color: #126e4f;
  background: #e9f7f1;
}

.sales-integration-guide > span[data-state="error"] {
  color: #a73333;
  background: #fff0f0;
}

.sales-integration-section {
  margin-bottom: 26px;
}

.sales-integration-section > header {
  margin-bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.sales-integration-section h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.sales-integration-list {
  display: grid;
  gap: 8px;
}

.sales-integration-row {
  border: 1px solid #dfe3e7;
  border-radius: 11px;
  background: #fff;
  overflow: clip;
}

.sales-integration-row[open] {
  border-color: #bfc5cc;
  box-shadow: 0 8px 24px rgba(30, 38, 48, 0.07);
}

.sales-integration-row > summary {
  min-height: 68px;
  padding: 10px 15px;
  display: grid;
  grid-template-columns: 40px minmax(220px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  list-style: none;
}

.sales-integration-row > summary::-webkit-details-marker {
  display: none;
}

.sales-integration-row > summary:hover {
  background: #f7f8f9;
}

.sales-provider-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dce0e4;
  border-radius: 10px;
  color: #fff;
  background: #343a40;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.sales-provider-logo.brand-coupang { background: #cb3341; }
.sales-provider-logo.brand-naver { background: #03c75a; }
.sales-provider-logo.brand-elevenst { background: #e51b23; }
.sales-provider-logo.brand-esm { background: #1e4f91; }
.sales-provider-logo.brand-ssg { background: #ec1c24; }
.sales-provider-logo.brand-ably { color: #171717; background: #fff; }
.sales-provider-logo.brand-zigzag { background: #222; }
.sales-provider-logo.brand-kakao { color: #242424; background: #fee500; }
.sales-provider-logo.brand-toss,
.sales-provider-logo.brand-tosspay { background: #2563eb; }
.sales-provider-logo.brand-todays { background: #32b9ea; }
.sales-provider-logo.brand-danal { background: #ef3b6d; }
.sales-provider-logo.brand-payco { background: #e83845; }
.sales-provider-logo.brand-daou { background: #315ca8; }
.sales-provider-logo.brand-wehago { background: #2f7369; }

.sales-provider-title {
  min-width: 0;
}

.sales-provider-title strong,
.sales-provider-title small {
  display: block;
}

.sales-provider-title strong {
  font-size: 14px;
}

.sales-provider-title small {
  margin-top: 4px;
  overflow: hidden;
  color: #7c838c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-provider-mode,
.sales-provider-status {
  padding: 5px 8px;
  border-radius: 999px;
  color: #666e77;
  background: #f0f2f4;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.sales-provider-status.is-configured {
  color: #126e4f;
  background: #e8f7f0;
}

.sales-provider-action {
  color: #343a40;
  font-size: 12px;
  font-weight: 800;
}

.sales-integration-form {
  padding: 18px;
  border-top: 1px solid #e6e8eb;
  background: #fafbfc;
}

.sales-integration-copy {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sales-integration-copy p {
  margin: 0;
  color: #606873;
  font-size: 12px;
}

.sales-integration-copy a {
  flex: 0 0 auto;
  color: #3b4653;
  font-size: 12px;
  font-weight: 800;
}

.sales-integration-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales-integration-footer {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sales-integration-footer p {
  margin: 0;
  color: #747b84;
  font-size: 12px;
}

.sales-integration-footer p[data-state="configured"] { color: #126e4f; }
.sales-integration-footer p[data-state="error"] { color: #ae3535; }

.other-integration-form .sales-integration-copy,
.other-integration-review .sales-integration-copy {
  align-items: flex-start;
}

.other-integration-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.other-integration-boundary {
  flex: 0 0 auto;
  color: #68717b;
  font-size: 12px;
  font-weight: 700;
}

.other-integration-review .sales-integration-copy > div {
  min-width: 0;
}

.other-integration-review .sales-integration-copy strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.other-integration-review .sales-integration-copy a {
  padding: 8px 11px;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  background: #fff;
}

.other-integration-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.other-integration-checklist span {
  padding: 10px 12px;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  color: #4d5660;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.other-integration-review .integration-local-note {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .other-integration-fields,
  .other-integration-checklist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sales-integration-row > summary {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .sales-provider-mode,
  .sales-provider-action {
    display: none;
  }

  .sales-integration-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .sales-integration-guide,
  .sales-integration-copy,
  .sales-integration-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-provider-status {
    display: none;
  }
}

@media (max-width: 860px) {
  .integration-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .integration-page-heading {
    align-items: flex-start;
  }

  .integration-card {
    padding: 18px;
  }

  .integration-card-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-api-row {
    grid-template-columns: 1fr;
  }

  .integration-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .dashboard-heading {
    align-items: flex-start;
  }
  .dashboard-today {
    width: 100%;
    text-align: left;
  }
  .dashboard-card {
    padding: 18px;
  }
  .accounting-preview-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-workforce-chart,
  .dashboard-payroll-chart {
    min-width: 460px;
  }
}

/* Workspace chrome */
:root {
  --sidebar-width: 276px;
}

.workspace-topbar {
  padding-right: 18px;
  gap: 18px;
}

.topbar-brand {
  min-width: 0;
  gap: 10px;
}

.topbar-logo {
  gap: 9px;
  letter-spacing: 0.3em;
}

.topbar-logo img {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
}

.topbar-logo strong {
  position: relative;
  padding: 0 1px 5px 3px;
  border-bottom: 0;
  font-size: 17px;
  white-space: nowrap;
}

.topbar-logo strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #f5c64d 0%,
    rgba(239, 179, 25, 0.88) 55%,
    rgba(239, 179, 25, 0.14) 100%
  );
  box-shadow: 0 0 10px rgba(239, 179, 25, 0.2);
}

.topbar-division {
  padding-left: 2px;
  color: #d5b865;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
}

.topbar-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.session-control {
  min-height: 40px;
  padding: 3px 4px 3px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #3b4758;
  border-radius: 999px;
  color: #dfe7f2;
  background: #172131;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.session-control strong {
  color: #fff;
}

.session-control button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #e4aa0e;
  border-radius: 999px;
  color: #211900;
  background: linear-gradient(180deg, #f6cc54, #e7ad17);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.session-control button:hover {
  filter: brightness(1.05);
}

.session-control button:disabled {
  cursor: wait;
  opacity: 0.8;
}

.session-control.is-expiring {
  border-color: #bf5757;
  background: #321d25;
}

.company-only-badge {
  padding: 8px 11px;
  border-radius: 999px;
  color: #cdd7e5;
  background: #202b3b;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.announcement-menu {
  position: relative;
}

.notification-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #3b4758;
  border-radius: 50%;
  color: #fff;
  background: #202b3b;
  cursor: pointer;
  font-size: 16px;
}

.notification-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-button[aria-expanded="true"],
.notification-button:hover {
  border-color: rgba(239, 179, 25, 0.7);
  background: #2a3546;
}

.notification-count {
  position: absolute;
  right: -4px;
  bottom: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #0f1726;
  border-radius: 999px;
  color: #fff;
  background: #df3f45;
  font-size: 10px;
  line-height: 1;
}

.announcement-panel {
  position: absolute;
  top: calc(100% + 11px);
  right: -70px;
  z-index: 40;
  width: min(390px, calc(100vw - 28px));
  max-height: min(610px, calc(100vh - 84px));
  padding: 13px;
  overflow-y: auto;
  border: 1px solid #dfe4ea;
  border-radius: 17px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 22px 55px rgba(15, 23, 38, 0.22);
}

.announcement-panel[hidden] {
  display: none;
}

.announcement-panel-heading {
  padding: 3px 3px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f3;
}

.announcement-panel-heading small {
  color: #a07808;
  font-size: var(--font-size-min);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.announcement-panel-heading h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.announcement-panel-heading button {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #dce1e7;
  border-radius: 999px;
  color: #5d6570;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.announcement-list {
  padding-top: 10px;
  display: grid;
  gap: 9px;
}

.announcement-item {
  padding: 14px;
  border: 1px solid #e2e6eb;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbfcfd, #f7f9fb);
}

.announcement-item > strong {
  display: block;
  font-size: 14px;
}

.announcement-item > p {
  margin: 7px 0 13px;
  color: #5f6670;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.announcement-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.announcement-item small {
  color: #9299a3;
  font-size: 10px;
}

.announcement-item button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #e6b95d;
  border-radius: 999px;
  color: #875c00;
  background: #fffaf0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.announcement-empty {
  margin: 0;
  padding: 34px 12px;
  border-radius: 12px;
  color: #9299a3;
  background: #f7f8fa;
  text-align: center;
  font-size: 12px;
}

.topbar-user-name {
  color: #f5f7fa;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.nav-itsus-label {
  margin-top: 3px;
  color: #d5b865;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.nav-external {
  margin-bottom: 10px;
}

.nav-external-primary {
  margin-top: 0;
  margin-bottom: 8px;
  color: #dce6f2;
  background: rgba(255, 255, 255, 0.025);
}

.sidebar-security {
  margin: 8px 0;
  padding: 13px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.055);
}

.sidebar-security-heading {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px !important;
}

.sidebar-security-heading strong {
  color: #d9b957;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.sidebar-security dl {
  margin: 11px 0 0;
  display: grid;
  gap: 9px;
}

.sidebar-security dl > div {
  display: grid;
  gap: 3px;
}

.sidebar-security dt {
  color: #8ea1b8;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-security dd {
  margin: 0;
  color: #e4e9f0;
  font-size: 12px;
  line-height: 1.4;
}

.allowed-account-list {
  display: grid;
  gap: 1px;
  color: #f1c552 !important;
  font-family: Consolas, "SFMono-Regular", monospace;
}

.sidebar-protected-note {
  margin-top: 11px;
  padding-top: 10px;
  display: grid;
  gap: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-protected-note strong {
  color: #fff;
  font-size: 13px;
}

.sidebar-protected-note small {
  color: #96a7ba;
  font-size: 11px;
  line-height: 1.4;
}

.sidebar-user {
  padding-top: 14px;
  padding-bottom: 16px;
  gap: 5px;
}

.sidebar-user small {
  font-size: 12px;
}

.sidebar-user strong {
  font-size: 15px;
}

.sidebar-user p {
  font-size: 13px;
}

@media (max-height: 820px) {
  .nav-section-label {
    margin-top: 13px;
  }
  .nav-home,
  .nav-group summary {
    min-height: 42px;
  }
  .nav-children {
    margin-bottom: 7px;
  }
  .nav-children a {
    min-height: 35px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .sidebar-security dl {
    gap: 6px;
  }
  .sidebar-protected-note {
    margin-top: 8px;
    padding-top: 8px;
  }
  .sidebar-user {
    padding-top: 11px;
    padding-bottom: 12px;
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 258px;
  }
  .company-only-badge,
  .topbar-user-name {
    display: none;
  }
}

@media (max-width: 760px) {
  .workspace-topbar {
    gap: 8px;
  }
  .topbar-division {
    display: none;
  }
  .topbar-actions {
    gap: 6px;
  }
  .session-control {
    padding-left: 9px;
    gap: 6px;
  }
  .session-control > span {
    font-size: 0;
  }
  .session-control > span strong {
    font-size: 11px;
  }
  .session-control button {
    padding: 0 9px;
    font-size: 11px;
  }
  .announcement-panel {
    position: fixed;
    top: 68px;
    right: 12px;
  }
}

/* Final navigation overrides: keep the primary rail visible when folded. */
.sidebar-toggle:checked + .erp-shell {
  grid-template-columns: var(--sidebar-primary-width) minmax(0, 1fr);
}

.sidebar-toggle:checked + .erp-shell .sidebar {
  width: var(--sidebar-primary-width);
  grid-template-columns: var(--sidebar-primary-width) 0;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sidebar-toggle:checked + .erp-shell .sidebar-secondary {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar-account-tools {
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
}

.sidebar-account-tools .session-control {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 0 7px 0 10px;
  font-size: 12px;
}

.sidebar-account-tools .session-control button,
.sidebar-logout {
  font-size: 12px;
}

.sidebar-account-tools .notification-button {
  width: 40px;
  height: 36px;
  min-height: 36px;
}

.sidebar-logout {
  width: 100%;
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .sidebar-toggle:checked + .erp-shell {
    grid-template-columns: var(--sidebar-primary-width) minmax(0, 1fr);
  }
}

/* Two-rail navigation contract: the pause control hides only the detail rail. */
.sidebar-toggle:checked + .erp-shell {
  grid-template-columns: var(--sidebar-primary-width) minmax(0, 1fr);
}

.sidebar-toggle:checked + .erp-shell .sidebar {
  width: var(--sidebar-primary-width);
  grid-template-columns: var(--sidebar-primary-width) 0;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sidebar-toggle:checked + .erp-shell .sidebar-secondary {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar-account-tools {
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
}

.sidebar-account-tools .session-control {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 0 7px 0 10px;
  font-size: 12px;
}

.sidebar-account-tools .session-control button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.sidebar-account-tools .notification-button {
  width: 40px;
  height: 36px;
  min-height: 36px;
}

.sidebar-account-tools form {
  min-width: 0;
}

.sidebar-logout {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.nav-subgroup > summary {
  cursor: pointer;
  user-select: none;
}

.accounting-category-master-panel .panel-heading {
  align-items: end;
}

.accounting-category-directory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.accounting-category-directory {
  min-width: 0;
  height: min(68vh, 980px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.accounting-category-directory > header {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
}

.accounting-category-directory > header strong {
  font-size: 14px;
}

.accounting-category-directory > header span {
  color: var(--muted);
  font-size: 12px;
}

.accounting-category-directory .operational-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
}

.accounting-category-directory .accounting-category-table {
  min-width: 640px;
}

@media (max-width: 1280px) {
  .accounting-category-directory-grid {
    grid-template-columns: 1fr;
  }

  .accounting-category-directory {
    height: min(58vh, 760px);
  }
}

.accounting-category-search {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.accounting-category-search input {
  width: min(280px, 45vw);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.accounting-category-table td:nth-child(2) strong,
.accounting-category-table td:nth-child(2) small {
  display: block;
}

.accounting-category-table .accounting-category-group-cell {
  min-width: 132px;
  color: #3f454d;
  font-weight: 750;
  background: #f7f8f9;
}

.accounting-category-table tr.is-group-start td {
  border-top-color: #bfc4ca;
}

.accounting-category-table .accounting-state-badge.is-cash-flow {
  color: #4f5b67;
  background: #eef1f4;
  border-color: #d8dde2;
}

.category-locked-label {
  color: #737a82;
  font-size: 12px;
  font-weight: 700;
}

.category-system-label {
  margin-top: 2px;
  color: #9a6700;
}

.accounting-category-table tr.is-inactive {
  color: #8a8f96;
  background: #fafafa;
}

.accounting-category-dialog {
  width: min(560px, calc(100vw - 32px));
}

.accounting-category-dialog form {
  display: grid;
  gap: 18px;
}

.accounting-category-dialog header,
.accounting-category-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.accounting-category-dialog header > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.accounting-category-dialog label {
  display: grid;
  gap: 7px;
  font-weight: 750;
}

.accounting-category-dialog input,
.accounting-category-dialog select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.danger-confirmation-copy {
  padding: 14px;
  border: 1px solid #f2b8b5;
  border-radius: 10px;
  background: #fff5f5;
}

.danger-confirmation-copy p,
.field-help {
  margin: 6px 0 0;
  color: var(--muted);
}

.button-danger {
  border-color: #c84242;
  color: #fff;
  background: #c84242;
}

.button-danger:hover {
  background: #aa3030;
}

@media (max-width: 760px) {
  .sidebar-toggle:checked + .erp-shell {
    grid-template-columns: var(--sidebar-primary-width) minmax(0, 1fr);
  }
}

/* Corporate card master
 * Shared data-page contract: 12px body, 11px header, 42px rows, table-only overflow.
 */
.corporate-card-page .main {
  max-width: none;
}

.corporate-card-heading {
  align-items: flex-end;
}

.corporate-card-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.corporate-card-search-panel,
.corporate-card-list-panel {
  padding: 0;
  overflow: hidden;
}

.corporate-card-search-heading,
.corporate-card-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.corporate-card-search-heading h2,
.corporate-card-list-heading h2 {
  margin: 3px 0 5px;
  font-size: 22px;
}

.corporate-card-search-heading p,
.corporate-card-list-heading p {
  margin: 0;
  color: #6b7280;
}

.corporate-card-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 560px);
}

.corporate-card-search-form label {
  flex: 1;
}

.corporate-card-search-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.corporate-card-search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-block: 1px solid #eef0f4;
  background: #fafbfc;
}

.corporate-card-search-summary span,
.corporate-card-security-note {
  color: #7a8392;
  font-size: 12px;
}

.corporate-card-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  padding: 16px 24px 22px;
}

.corporate-card-result {
  padding: 16px;
  border: 1px solid #e0e5ec;
  border-radius: 12px;
  background: #fff;
}

.corporate-card-result > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.corporate-card-result > div strong {
  font-size: 16px;
  letter-spacing: .03em;
}

.corporate-card-result dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}

.corporate-card-result dl div {
  min-width: 0;
}

.corporate-card-result dt {
  margin-bottom: 3px;
  color: #8a93a1;
  font-size: 11px;
}

.corporate-card-result dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corporate-card-search-ready,
.corporate-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 104px;
  padding: 20px;
  border-top: 1px solid #eef0f4;
  color: #697383;
  text-align: center;
}

.corporate-card-search-ready > span {
  font-size: 32px;
  color: #bd8d00;
}

.corporate-card-search-ready p {
  margin: 0;
}

.corporate-card-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.corporate-card-summary > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid #dfe4eb;
  border-radius: 14px;
  background: #fff;
  color: #596273;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(15, 23, 42, .035);
}

.corporate-card-summary > *.is-active {
  border-color: #e5b41e;
  background: linear-gradient(135deg, #fff9df, #fff);
  color: #111827;
}

.corporate-card-summary strong {
  color: #111827;
  font-size: 19px;
}

.corporate-card-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.corporate-card-table {
  width: 100%;
  min-width: 1600px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--erp-table-font-size);
}

.corporate-card-table th,
.corporate-card-table td {
  height: var(--erp-table-row-height);
  padding: var(--erp-table-cell-padding-y) 10px;
  border-bottom: 1px solid #e7eaf0;
  text-align: left;
  white-space: nowrap;
}

.corporate-card-table th {
  height: 38px;
  background: #f6f7f9;
  color: #626b79;
  font-size: var(--erp-table-heading-font-size);
  font-weight: 700;
}

.corporate-card-table th a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.corporate-card-table tbody tr:hover {
  background: #f8f9fb;
}

.card-number-cell,
.card-account-cell {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.card-limit-cell {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.card-status--active {
  background: #e6f7ef;
  color: #08704d;
}

.card-status--deleted {
  background: #feecec;
  color: #bb2b2b;
}

.corporate-card-state-button {
  padding: 5px 9px;
  border: 1px solid #d6dce5;
  border-radius: 7px;
  background: #fff;
  color: #4c5666;
  font: inherit;
  cursor: pointer;
}

.corporate-card-state-button:hover {
  border-color: #c89b13;
  color: #8a6700;
}

.corporate-card-table-empty {
  height: 110px !important;
  color: #7b8492;
  text-align: center !important;
}

.corporate-card-dialog {
  width: min(920px, calc(100vw - 36px));
}

.corporate-card-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
  max-height: min(62vh, 640px);
  padding: 3px 2px 8px;
  overflow-y: auto;
}

.corporate-card-form-grid label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.corporate-card-form-grid input,
.corporate-card-form-grid select,
.corporate-card-form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
}

.corporate-card-form-grid textarea {
  resize: vertical;
}

.corporate-card-form-wide,
.corporate-card-form-full {
  grid-column: 1 / -1;
}

.required-mark {
  color: #dc2626;
}

@media (max-width: 900px) {
  .corporate-card-search-heading,
  .corporate-card-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .corporate-card-search-form {
    min-width: 0;
  }

  .corporate-card-summary {
    grid-template-columns: 1fr;
  }

  .corporate-card-result dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .corporate-card-search-form {
    align-items: stretch;
    flex-direction: column;
  }

  .corporate-card-search-results {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

  .corporate-card-form-grid {
    grid-template-columns: 1fr;
  }

  .corporate-card-form-grid > * {
    grid-column: 1 !important;
  }
}

@media (max-width: 540px) {
  .topbar-logo strong {
    display: none;
  }
  .session-control button {
    display: none;
  }
  .topbar-logout {
    padding: 0 10px;
    font-size: 11px;
  }
}

/* Shared management form system
   Add data-ui-controls to a form or dialog to reuse these controls. */
:root {
  --ui-control-height: 52px;
  --ui-control-radius: 11px;
  --ui-control-border: #d8dde3;
  --ui-control-hover: #b9c0c8;
  --ui-control-focus: #c18a00;
  --ui-control-ring: rgba(239, 179, 25, 0.16);
  --ui-popover-shadow: 0 20px 55px rgba(15, 21, 30, 0.2);
}

[data-ui-controls] {
  --ui-label-color: #3d434b;
  --ui-muted-color: #7b828b;
}

[data-ui-controls] label {
  gap: 9px;
  color: var(--ui-label-color);
  font-size: 14px;
  font-weight: 750;
}

[data-ui-controls] input:not([type="checkbox"]):not(.ui-native-control),
[data-ui-controls] select:not(.ui-native-control) {
  min-height: var(--ui-control-height);
  padding: 0 14px;
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: #fff;
  font-size: 15px;
  font-weight: 650;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

[data-ui-controls] input:not([type="checkbox"]):not(.ui-native-control):hover,
[data-ui-controls] select:not(.ui-native-control):hover {
  border-color: var(--ui-control-hover);
}

[data-ui-controls] input:not([type="checkbox"]):not(.ui-native-control):focus,
[data-ui-controls] select:not(.ui-native-control):focus {
  border-color: var(--ui-control-focus);
  box-shadow: 0 0 0 4px var(--ui-control-ring);
}

.ui-control-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ui-native-control {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.ui-select-native-control {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  padding: 0 42px 0 14px !important;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #20252b;
  background: #fff;
  opacity: 1;
  outline: none;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.ui-native-select-shell:hover .ui-select-native-control {
  border-color: var(--ui-control-hover);
  background: #fdfdfd;
}

.ui-select-native-control:focus {
  border-color: var(--ui-control-focus);
  box-shadow: 0 0 0 4px var(--ui-control-ring);
}

.ui-native-select-shell.is-placeholder .ui-select-native-control {
  color: #9299a2;
  font-weight: 600;
}

.ui-select-native-control:disabled {
  color: #8b929b;
  background: #f3f5f7;
  cursor: not-allowed;
}

.ui-native-select-shell > .ui-control-chevron {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 18px;
  margin: 0;
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.ui-native-select-shell:focus-within > .ui-control-chevron {
  border-color: #846100;
}

.ui-control-trigger {
  width: 100%;
  min-height: var(--ui-control-height);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #20252b;
  background: #fff;
  outline: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.ui-control-trigger:hover {
  border-color: var(--ui-control-hover);
  background: #fdfdfd;
}

.ui-control-trigger:focus,
.ui-control-trigger[aria-expanded="true"] {
  border-color: var(--ui-control-focus);
  box-shadow: 0 0 0 4px var(--ui-control-ring);
}

.ui-control-trigger:disabled {
  color: #8b929b;
  background: #f3f5f7;
  cursor: not-allowed;
}

.ui-control-trigger.is-placeholder {
  color: #9299a2;
  font-weight: 600;
}

.ui-control-trigger > span:nth-child(1):not(.ui-calendar-icon),
.ui-select-trigger > span:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-control-chevron {
  width: 9px;
  height: 9px;
  margin-left: auto;
  flex: 0 0 9px;
  border-right: 1.8px solid #535a63;
  border-bottom: 1.8px solid #535a63;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.ui-select-trigger[aria-expanded="true"] .ui-control-chevron {
  transform: translateY(2px) rotate(225deg);
}

.ui-calendar-icon {
  position: relative;
  width: 17px;
  height: 16px;
  flex: 0 0 17px;
  border: 1.7px solid #4c535c;
  border-radius: 4px;
}

.ui-calendar-icon::before {
  content: "";
  position: absolute;
  top: 3px;
  right: -1.7px;
  left: -1.7px;
  border-top: 1.7px solid #4c535c;
}

.ui-calendar-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 3px;
  width: 7px;
  height: 4px;
  border-right: 1.7px solid #4c535c;
  border-left: 1.7px solid #4c535c;
}

.ui-date-trigger > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-date-clear-button {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.ui-date-clear-button:hover {
  background: #f0f2f4;
}

.ui-date-clear-button::before,
.ui-date-clear-button::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: #59616b;
}

.ui-date-clear-button::before {
  transform: rotate(45deg);
}

.ui-date-clear-button::after {
  transform: rotate(-45deg);
}

.ui-date-shell.has-clear .ui-date-trigger {
  padding-right: 48px;
}

.ui-popover {
  position: fixed;
  inset: auto;
  z-index: 1000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  color: #20252b;
  background: #fff;
  box-shadow: var(--ui-popover-shadow);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

.ui-select-popover {
  max-height: min(330px, calc(100vh - 24px));
  padding: 7px;
  overflow-y: auto;
}

.ui-select-option {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 9px;
  color: #3e454d;
  background: transparent;
  outline: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}

.ui-select-option:hover,
.ui-select-option:focus {
  color: #1f2328;
  background: #f3f4f5;
}

.ui-select-option.is-selected {
  color: #4c3900;
  background: #fff5ce;
  font-weight: 850;
}

.ui-select-option.is-selected::after {
  content: "✓";
  margin-left: auto;
  color: #a87500;
  font-weight: 900;
}

.ui-select-option:disabled {
  color: #a7adb4;
  cursor: not-allowed;
}

.ui-calendar-popover {
  padding: 14px;
}

.ui-calendar-heading {
  min-height: 38px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
}

.ui-calendar-heading strong {
  text-align: center;
  font-size: 16px;
}

.ui-calendar-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e4e8;
  border-radius: 9px;
  color: #4d545c;
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.ui-calendar-nav:hover,
.ui-calendar-nav:focus {
  border-color: #d3b45f;
  color: #4e3b05;
  background: #fff9e7;
  outline: none;
}

.ui-calendar-weekdays,
.ui-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.ui-calendar-weekdays {
  margin-top: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #eceef1;
}

.ui-calendar-weekdays span {
  color: #858c94;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.ui-calendar-weekdays span:first-child {
  color: #c95151;
}

.ui-calendar-grid {
  padding-top: 7px;
  gap: 2px;
}

.ui-calendar-day {
  aspect-ratio: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #343a41;
  background: transparent;
  outline: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.ui-calendar-day:hover,
.ui-calendar-day:focus {
  background: #f1f2f4;
}

.ui-calendar-day.is-outside {
  color: #b9bec4;
}

.ui-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px #d4aa37;
  color: #8a6400;
  font-weight: 850;
}

.ui-calendar-day.is-selected {
  color: #fff;
  background: #22272d;
  box-shadow: none;
  font-weight: 850;
}

.ui-calendar-day:disabled {
  color: #d5d8dc;
  background: transparent;
  cursor: not-allowed;
}

.ui-calendar-footer {
  min-height: 43px;
  margin-top: 9px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid #eceef1;
}

.ui-calendar-footer button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.ui-calendar-clear {
  margin-right: auto;
  color: #a33a3a;
}

.ui-calendar-today {
  color: #493700;
  border-color: #e2c46e !important;
  background: #fff8df !important;
}

.employee-dialog {
  width: min(1010px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(8, 13, 21, 0.34);
}

.employee-dialog::backdrop {
  background: rgba(13, 18, 25, 0.62);
  backdrop-filter: blur(4px);
}

.employee-dialog > form,
.employee-dialog-body {
  padding: 30px 32px 28px;
}

.employee-edit-dialog {
  width: min(1100px, calc(100% - 40px));
}

.employee-dialog-heading {
  margin-bottom: 24px;
}

.employee-dialog-heading h2 {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.15;
}

.employee-dialog-heading p:not(.eyebrow) {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.employee-dialog .eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.employee-dialog .dialog-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  font-size: 24px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.employee-dialog .dialog-close:hover {
  border-color: #cbd0d6;
  background: #f5f6f7;
}

.employee-dialog .employee-form-grid,
.employee-edit-dialog .employee-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 18px;
}

.employee-dialog .employee-form-grid label {
  gap: 9px;
  font-size: 14px;
}

.employee-dialog .employee-protected-field input {
  color: #858c95;
  background: #f3f5f7;
}

.employee-dialog .employee-form-note {
  margin-top: 21px;
  font-size: 13px;
  line-height: 1.6;
}

.employee-dialog .employee-dialog-actions {
  margin-top: 25px;
  gap: 10px;
}

.employee-dialog .employee-dialog-actions .button {
  min-height: 48px;
  padding: 0 19px;
  border-radius: 11px;
  font-size: 15px;
}

.employee-dialog .employee-detail-tabs {
  margin-bottom: 25px;
}

.employee-dialog .employee-detail-tabs button {
  min-height: 48px;
  padding: 0 18px;
  font-size: 15px;
}

.employee-dialog .childcare-schedule {
  padding: 16px;
  border-radius: 13px;
}

.employee-dialog .childcare-schedule .childcare-toggle {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  font-size: 14px;
}

.employee-dialog .childcare-schedule > p {
  font-size: 12px;
}

@media (max-width: 680px) {
  .employee-dialog,
  .employee-edit-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 17px;
  }

  .employee-dialog > form,
  .employee-dialog-body {
    padding: 21px 18px 18px;
  }

  .employee-dialog-heading {
    margin-bottom: 20px;
  }

  .employee-dialog-heading h2 {
    font-size: 24px;
  }

  .employee-dialog .employee-form-grid,
  .employee-edit-dialog .employee-form-grid {
    grid-template-columns: 1fr;
  }

  .employee-dialog .employee-dialog-actions {
    position: sticky;
    bottom: -18px;
    z-index: 3;
    margin: 24px -18px -18px;
    padding: 14px 18px 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.92);
  }

  .employee-dialog .employee-dialog-actions .button {
    flex: 1;
  }

  .ui-calendar-popover {
    padding: 12px;
  }
}

.period-navigation {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.period-navigation-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe3e7;
  border-radius: 50%;
  color: #30343a;
  background: #fff;
  box-shadow: 0 5px 14px rgba(22, 27, 34, 0.05);
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.period-navigation-arrow:hover {
  border-color: #dfb029;
  background: #fff9e8;
  transform: translateY(-1px);
}

.period-navigation-arrow.is-disabled {
  color: #c7cbd0;
  background: #f5f6f7;
  box-shadow: none;
}

.period-navigation-latest {
  min-width: 54px;
  padding: 8px 4px;
  border-radius: 9px;
  color: #525960;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  transition:
    color 0.16s ease,
    background 0.16s ease;
}

.period-navigation-latest:hover {
  color: #171b20;
  background: rgba(245, 183, 0, 0.12);
}

.period-navigation-current {
  min-width: 178px;
  padding: 8px 18px;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.period-navigation-current:hover {
  background: rgba(245, 183, 0, 0.09);
}

.period-navigation-current strong {
  font-size: 21px;
  letter-spacing: -0.035em;
}

.period-navigation-current span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.period-navigation-picker {
  position: relative;
}

.period-navigation-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 35;
  width: min(320px, calc(100vw - 28px));
  padding: 15px;
  border: 1px solid #dfe3e7;
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 15px 34px rgba(12, 18, 27, 0.17);
  transform: translateX(-50%);
}

.period-navigation-popover[hidden] {
  display: none;
}

.period-navigation-popover::before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid #dfe3e7;
  border-left: 1px solid #dfe3e7;
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.period-navigation-popover form {
  position: relative;
  z-index: 1;
}

.period-navigation-popover-heading {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.period-navigation-popover-heading > strong {
  font-size: 14px;
}

.period-navigation-popover-heading button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e3e7;
  border-radius: 8px;
  color: #626870;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.period-navigation-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.period-navigation-field {
  display: grid;
  gap: 8px;
  color: #4f555d;
  font-size: 13px;
  font-weight: 800;
}

.period-navigation-field select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 13px;
  border: 1px solid #dadddf;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 14px;
}

.period-navigation-popover-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.period-navigation-popover-actions .button {
  min-height: 38px;
  padding: 8px 17px;
}

.attendance-insight-grid {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.attendance-insight-card {
  min-height: 132px;
  padding: 18px 19px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #e1e4e7;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 183, 0, 0.08), transparent 48%),
    #fff;
  box-shadow: 0 8px 22px rgba(22, 27, 34, 0.045);
}

.attendance-insight-label {
  margin-bottom: 11px;
  color: #6f757d;
  font-size: 12px;
  font-weight: 800;
}

.accounting-heading {
  align-items: flex-end;
}

.accounting-summary-grid {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.accounting-summary-grid.is-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.accounting-summary-grid article {
  min-height: 112px;
  padding: 18px 20px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid #e1e4e7;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 183, 0, 0.08), transparent 50%),
    #fff;
  box-shadow: 0 8px 22px rgba(22, 27, 34, 0.045);
}

.accounting-summary-grid article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.accounting-summary-grid article strong {
  color: var(--ink);
  font-size: 23px;
  letter-spacing: -0.035em;
}

.accounting-summary-grid article small {
  color: #8a9097;
  font-size: 11px;
}

.accounting-summary-grid article.is-success strong {
  color: #087d61;
}

.accounting-summary-grid article.is-warning strong,
.accounting-summary-grid article.is-review strong {
  color: #9a6a00;
}

.accounting-summary-grid article.is-danger strong {
  color: #c23c3c;
}

.accounting-summary-grid article.is-withdrawal strong,
.numeric-cell.is-withdrawal {
  color: #c54444;
}

.accounting-summary-grid article.is-deposit strong,
.numeric-cell.is-deposit {
  color: #087d61;
}

.accounting-panel-actions,
.accounting-panel-actions form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accounting-panel-actions .button[disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}

.accounting-closing-state {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.accounting-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #5f646b;
  background: #eef0f2;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.accounting-state-badge.is-confirmed,
.accounting-state-badge.is-success {
  color: #08755c;
  background: #e5f7f0;
}

.accounting-state-badge.is-auto_suggested,
.accounting-state-badge.is-review_required,
.accounting-state-badge.is-draft {
  color: #805700;
  background: #fff0bc;
}

.accounting-state-badge.is-unknown {
  color: #b53535;
  background: #ffe8e8;
}

.accounting-filter-row {
  padding: 14px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.accounting-filter-row form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.accounting-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.accounting-filter-row select,
.accounting-review-cell select,
.accounting-review-cell input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dce0e4;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.accounting-description {
  width: 270px;
  max-width: 270px;
}

.accounting-description strong,
.accounting-description small,
.accounting-review-cell > strong,
.accounting-review-cell > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-description small,
.accounting-review-cell > small {
  margin-top: 4px;
  color: var(--muted);
}

.accounting-review-cell {
  min-width: 390px;
}

.accounting-review-cell form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 1fr) auto;
  gap: 7px;
}

.accounting-review-table tr.is-auto_suggested {
  background: rgba(245, 183, 0, 0.035);
}

.accounting-review-table tr.is-review_required,
.accounting-review-table tr.is-unknown {
  background: rgba(215, 64, 64, 0.025);
}

.accounting-policy-note {
  margin-top: 20px;
}

.closing-readiness-panel {
  margin-bottom: 18px;
  padding: 22px;
}

.closing-readiness-heading,
.closing-readiness-card-title,
.accounting-bank-account-filter,
.bank-account-actions {
  display: flex;
  align-items: center;
}

.closing-readiness-heading {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.closing-readiness-heading h2 { margin: 3px 0 5px; }
.closing-readiness-heading p { margin: 0; color: var(--muted); }

.closing-readiness-overall {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  color: #9a5b00;
  background: #fff3cf;
}

.closing-readiness-overall.is-ready { color: #087358; background: #e5f8f1; }

.closing-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.closing-readiness-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.closing-readiness-card:hover {
  transform: translateY(-2px);
  border-color: #d5a400;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.closing-readiness-card.is-ready { border-color: #bce7d8; }
.closing-readiness-card.is-missing { background: #fbfcfd; }
.closing-readiness-card-title { gap: 10px; }
.closing-readiness-card-title > div { display: grid; gap: 1px; }
.closing-readiness-card-title small { color: var(--muted); }
.closing-readiness-state { margin-left: auto; font-weight: 800; color: #9a5b00; }
.closing-readiness-card.is-ready .closing-readiness-state { color: #087358; }
.closing-readiness-card.is-missing .closing-readiness-state { color: #7a8493; }

.closing-readiness-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff4c7;
  color: #805d00;
  font-weight: 900;
}
.closing-readiness-icon::before { content: "₩"; }
.closing-readiness-icon.is-card::before { content: "▣"; }
.closing-readiness-icon.is-bank::before { content: "↔"; }
.closing-readiness-icon.is-purchase::before { content: "▤"; }

.closing-readiness-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin: 16px 0 14px;
  padding: 0;
  color: #7a8493;
}

.closing-readiness-steps li { display: flex; align-items: center; gap: 6px; }
.closing-readiness-steps li > span { width: 8px; height: 8px; border-radius: 50%; background: #ccd2da; }
.closing-readiness-steps li.is-done { color: #087358; font-weight: 700; }
.closing-readiness-steps li.is-done > span { background: #13a77b; box-shadow: 0 0 0 3px #e0f6ef; }
.closing-readiness-link { display: block; padding-top: 11px; border-top: 1px solid var(--line); font-weight: 800; }

.accounting-bank-account-filter {
  gap: 10px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.accounting-bank-account-filter label { font-weight: 800; }
.accounting-bank-account-filter select { min-width: 290px; min-height: 38px; }
.accounting-bank-account-filter a { color: #745600; font-weight: 800; }
.bank-account-switcher {
  width: 100%;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bank-account-switcher-item {
  min-width: 132px;
  min-height: 52px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  column-gap: 7px;
  align-content: center;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  color: #30363d;
  background: #fff;
}

.bank-account-switcher-item:hover,
.bank-account-switcher-item.is-active {
  border-color: #7d858e;
  background: #f5f6f7;
}

.bank-account-switcher-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #8b939c;
}

.bank-account-switcher-item strong,
.bank-account-switcher-item small {
  grid-column: 2;
}

.bank-account-switcher-item strong { font-size: 12px; }
.bank-account-switcher-item small {
  margin-top: 2px;
  color: #777f88;
  font-size: 11px;
  white-space: nowrap;
}

.bank-name-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.bank-name-badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b939c;
  content: "";
}

.bank-tone-ibk .bank-account-switcher-dot,
.bank-name-badge.bank-tone-ibk::before { background: #1369b3; }
.bank-tone-kb .bank-account-switcher-dot,
.bank-name-badge.bank-tone-kb::before { background: #d7a500; }
.bank-tone-nh .bank-account-switcher-dot,
.bank-name-badge.bank-tone-nh::before { background: #16864b; }
.bank-tone-shinhan .bank-account-switcher-dot,
.bank-name-badge.bank-tone-shinhan::before { background: #2764b8; }
.bank-tone-woori .bank-account-switcher-dot,
.bank-name-badge.bank-tone-woori::before { background: #24a9e6; }
.bank-tone-post .bank-account-switcher-dot,
.bank-name-badge.bank-tone-post::before { background: #e0472f; }
.bank-account-actions { gap: 7px; white-space: nowrap; }
.bank-account-actions form { margin: 0; }
.bank-account-primary-label { display: flex !important; align-items: center; gap: 9px; }
.bank-account-primary-label input { width: 18px; height: 18px; }

@media (max-width: 980px) {
  .closing-readiness-grid { grid-template-columns: 1fr; }
  .closing-readiness-heading { align-items: flex-start; flex-direction: column; }
  .accounting-bank-account-filter { align-items: stretch; flex-direction: column; }
  .accounting-bank-account-filter select { min-width: 0; width: 100%; }
}

.accounting-policy-note p {
  margin: 8px 0 0;
}

.accounting-view-switch {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 4px;
  display: flex;
  gap: 3px;
  border: 1px solid #dce1e6;
  border-radius: 12px;
  background: #fff;
}

.accounting-view-switch a {
  min-width: 72px;
  padding: 8px 15px;
  border-radius: 9px;
  color: #697078;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.accounting-view-switch a.is-active {
  color: #191b1e;
  background: linear-gradient(135deg, #ffe58d, #f5bd25);
  box-shadow: 0 4px 12px rgba(194, 139, 0, 0.16);
}

.period-navigation-current.is-static {
  cursor: default;
}

.accounting-statement-panel {
  overflow: hidden;
}

.accounting-statement-table {
  min-width: 1080px;
  table-layout: fixed;
}

.accounting-statement-table th:first-child {
  width: 25%;
}

.accounting-statement-table th:not(:first-child),
.accounting-statement-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.accounting-statement-table .statement-change-column {
  width: 9%;
}

.accounting-statement-table .statement-period-column.is-current,
.accounting-statement-table td.is-current {
  background: #fffaf0;
}

.accounting-statement-table thead .statement-period-column {
  line-height: 1.3;
}

.accounting-statement-table tr.is-section td {
  color: #171a1e;
  background: #f3f4f5;
  font-weight: 900;
  border-top-color: #cbd0d5;
}

.accounting-statement-table tr.is-total td {
  color: #171a1e;
  background: #fff8dc;
  font-weight: 900;
  border-top: 1px solid #e8c24e;
}

.accounting-statement-table tr.is-detail td:first-child {
  padding-left: 36px;
  color: #666d75;
}

.accounting-statement-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accounting-statement-line small {
  width: 24px;
  color: #9ba1a8;
  font-size: 10px;
  font-weight: 700;
}

.accounting-statement-line strong {
  font-size: inherit;
}

.accounting-change {
  font-weight: 850;
}

.accounting-change.is-up {
  color: #c33f3f;
}

.accounting-change.is-down {
  color: #176bc0;
}

.accounting-filter-panel {
  margin-bottom: 16px;
  padding: 14px 18px;
}

.accounting-quick-filter {
  min-width: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.accounting-quick-filter + .accounting-quick-filter {
  border-top: 1px solid #edf0f2;
}

.accounting-quick-filter > strong {
  padding-top: 7px;
  color: #5e656d;
  font-size: 12px;
}

.accounting-quick-filter > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.accounting-quick-filter.is-scrollable > div {
  max-height: none;
  height: auto;
  overflow: visible;
}

.accounting-quick-filter a {
  min-height: 30px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dfe3e7;
  border-radius: 999px;
  color: #555d65;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.accounting-quick-filter a:hover {
  border-color: #d2a52d;
  color: #29251b;
}

.accounting-quick-filter a.is-active {
  border-color: #e0ae25;
  color: #1d1b16;
  background: linear-gradient(135deg, #ffe7a0, #f5c33d);
}


.accounting-analysis-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, 0.92fr);
  gap: 14px;
}

.accounting-chart-panel,
.accounting-pivot-panel {
  min-width: 0;
  overflow: hidden;
}

.accounting-chart-panel .panel-heading > strong {
  color: #8c6600;
  font-size: 18px;
}

.bank-chart-total {
  display: grid;
  gap: 3px;
  text-align: right;
  font-size: 12px !important;
}

.bank-chart-total span:first-child {
  color: #c54444;
}

.bank-chart-total span:last-child {
  color: #087d61;
}

.bank-chart-legend {
  padding: 0 18px 6px;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  color: #646b72;
  font-size: 11px;
  font-weight: 800;
}

.bank-chart-legend span::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 3px;
  content: "";
}

.bank-chart-legend .is-withdrawal::before {
  background: #dc6666;
}

.bank-chart-legend .is-deposit::before {
  background: #2cae8c;
}

.accounting-bar-chart {
  padding: 4px 18px 18px;
  display: grid;
  gap: 9px;
}

.accounting-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(100px, 1fr) 116px;
  align-items: center;
  gap: 10px;
}

.accounting-bar-row > span,
.accounting-bar-row > .accounting-insight-category-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4f565e;
  font-weight: 750;
}

.accounting-insight-category-link {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.accounting-insight-category-link:hover,
.accounting-insight-category-link:focus-visible {
  color: #111827;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accounting-bar-row > div {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0f2f4;
}

.accounting-bar-row i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, #edb51c, #ffd96b);
}

.accounting-bar-track progress {
  display: block;
  width: 100%;
  height: 16px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #f0f2f4;
}

.accounting-bar-track progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #f0f2f4;
}

.accounting-bar-track progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #edb51c, #ffd96b);
}

.accounting-bar-track progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #edb51c, #ffd96b);
}

.accounting-bar-row > strong {
  text-align: right;
  font-size: 12px;
}

.bank-flow-row {
  grid-template-columns: minmax(90px, 150px) minmax(100px, 1fr) 150px;
}

.accounting-bar-row > .bank-flow-bars {
  height: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  overflow: visible;
  background: transparent;
}

.bank-flow-bars progress {
  width: 100%;
  height: 11px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #f0f2f4;
}

.bank-flow-bars progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #f0f2f4;
}

.bank-flow-bars progress::-webkit-progress-value {
  border-radius: 999px;
}

.bank-flow-bars progress::-moz-progress-bar {
  border-radius: 999px;
}

.bank-flow-bars progress.is-withdrawal::-webkit-progress-value {
  background: linear-gradient(90deg, #b94747, #e98b8b);
}

.bank-flow-bars progress.is-withdrawal::-moz-progress-bar {
  background: linear-gradient(90deg, #b94747, #e98b8b);
}

.bank-flow-bars progress.is-deposit::-webkit-progress-value {
  background: linear-gradient(90deg, #087d61, #45c6a2);
}

.bank-flow-bars progress.is-deposit::-moz-progress-bar {
  background: linear-gradient(90deg, #087d61, #45c6a2);
}

.bank-flow-row > strong {
  display: grid;
  gap: 1px;
}

.bank-flow-row > strong span:first-child {
  color: #b94747;
}

.bank-flow-row > strong span:last-child {
  color: #087d61;
}

.accounting-pivot-panel .operational-table-wrap {
  max-height: none;
  overflow: visible;
}

.accounting-pivot-panel table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.accounting-result-heading {
  min-height: 72px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

#transaction-list {
  scroll-margin-top: 76px;
}

.accounting-workflow-toolbar {
  margin-bottom: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.accounting-workflow-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.accounting-workflow-toolbar p {
  margin: 0;
  color: var(--muted-text);
}

.accounting-source-copy {
  display: grid;
  gap: 3px;
}

.accounting-source-copy small {
  color: #767d85;
  font-size: 12px;
  font-weight: 750;
}

.accounting-result-heading h2 {
  margin: 3px 0 0;
}

.accounting-result-heading > strong {
  font-size: 17px;
}

.accounting-result-tools,
.accounting-page-size-form {
  display: flex;
  align-items: center;
  gap: 9px;
}

.accounting-result-tools > strong {
  font-size: 14px;
  white-space: nowrap;
}

.accounting-page-size-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.accounting-page-size-form select {
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid #dce0e4;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.accounting-page-size-form .button {
  min-height: 34px;
  padding: 7px 11px;
}

.accounting-review-table {
  min-width: 1540px;
}

/* Accounting workspace: compact page context and Clobe-style review controls. */
.workspace-page-context {
  position: sticky;
  top: 0;
  z-index: 24;
  min-height: 62px;
  margin: -22px -24px 14px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e1e4e8;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(9px);
}

.workspace-page-context-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 12px;
}

.workspace-page-context-title small {
  grid-column: 1 / -1;
  color: #8a9097;
  font-size: 11px;
  font-weight: 750;
}

.workspace-page-context-title strong {
  color: #202124;
  font-size: 18px;
  line-height: 1.2;
}

.workspace-page-context-title span {
  overflow: hidden;
  color: #777d84;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-page-context-actions,
.accounting-period-mode-tabs,
.accounting-saved-views,
.accounting-clobe-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-page-context-actions {
  flex: 0 0 auto;
}

.accounting-period-mode-tabs {
  padding: 3px;
  border: 1px solid #e0e3e6;
  border-radius: 9px;
  background: #f7f8f9;
}

.accounting-period-mode-tabs span,
.accounting-period-mode-tabs b {
  min-width: 29px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #8d9399;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.accounting-period-mode-tabs b {
  color: #fff;
  background: #2f3133;
}

.accounting-period-context > .period-navigation {
  margin-bottom: 12px;
}

.accounting-saved-views {
  padding-bottom: 10px;
  border-bottom: 1px solid #eceef0;
}

.accounting-saved-views a,
.accounting-saved-views button {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid #dfe2e5;
  border-radius: 999px;
  color: #555b61;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.accounting-saved-views a.is-active {
  border-color: #2f3133;
  color: #fff;
  background: #2f3133;
}

.accounting-saved-views button {
  width: 30px;
  padding: 0;
  font-size: 17px;
}

.accounting-clobe-filterbar {
  padding: 10px 0 2px;
  flex-wrap: wrap;
}

.accounting-clobe-filterbar select,
.accounting-clobe-filterbar input {
  height: 34px;
  border: 1px solid #dfe2e5;
  border-radius: 8px;
  color: #34383c;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.accounting-clobe-filterbar select {
  min-width: 126px;
  padding: 0 30px 0 10px;
}

.accounting-search-field {
  min-width: min(320px, 100%);
  position: relative;
}

.accounting-search-field span {
  position: absolute;
  left: 11px;
  top: 8px;
  color: #7c838a;
}

.accounting-search-field input {
  width: 100%;
  padding: 0 12px 0 31px;
}

.operational-table tbody tr {
  transition: background-color 120ms ease;
}

.operational-table tbody tr:hover > td {
  background-color: #f5f6f7;
}

.accounting-category-table.is-clobe-directory {
  width: auto;
  min-width: min(100%, 680px);
  table-layout: auto;
}

.accounting-category-table.is-clobe-directory th,
.accounting-category-table.is-clobe-directory td {
  width: auto;
  text-align: left;
  white-space: nowrap;
}

.accounting-category-table.is-clobe-directory th:nth-child(3),
.accounting-category-table.is-clobe-directory td:nth-child(3) {
  white-space: normal;
}

.accounting-category-table.is-clobe-directory .accounting-category-group-cell {
  padding-top: 14px;
  vertical-align: top;
  color: #34383c;
  background: #fafafa;
  font-weight: 800;
}

.accounting-category-name-cell strong,
.accounting-category-name-cell small,
.accounting-category-usage-cell strong,
.accounting-category-usage-cell small {
  display: block;
}

.accounting-category-name-cell small,
.accounting-category-usage-cell small {
  margin-top: 2px;
  overflow: hidden;
  color: #8a9096;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .workspace-page-context {
    position: relative;
    margin: -16px -16px 12px;
    padding: 10px 16px;
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-page-context-title {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .workspace-page-context-title small { grid-column: auto; }
  .workspace-page-context-title span { white-space: normal; }
  .workspace-page-context-actions { width: 100%; flex-wrap: wrap; }
}

.accounting-card-cell strong,
.accounting-card-cell small {
  display: inline;
  white-space: nowrap;
}

.accounting-card-cell small {
  margin-left: 6px;
  color: var(--muted-text);
}

.accounting-deduction-cell select {
  min-width: 82px;
}

.accounting-status-action {
  white-space: nowrap;
}

.accounting-status-action .button {
  min-height: 30px;
  padding: 5px 9px;
}

.numeric-cell.is-negative,
.numeric-cell.is-negative strong {
  color: #c92f3a;
}

.bank-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bank-flow-badge {
  min-width: 42px;
  min-height: 25px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #697078;
  background: #eef0f2;
  font-size: 11px;
  font-weight: 850;
}

.bank-flow-badge.is-withdrawal {
  color: #ad3838;
  background: #ffe9e9;
}

.bank-flow-badge.is-deposit {
  color: #08755c;
  background: #e5f7f0;
}

.accounting-account-label {
  color: #535a62;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}

.accounting-payment-match-cell {
  min-width: 188px;
}

.accounting-payment-match-cell > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  white-space: nowrap;
}

.accounting-payment-match-cell form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.accounting-payment-match-cell .button {
  min-height: 28px;
  padding: 4px 9px;
}

.accounting-pagination {
  background: #fff;
}

.accounting-category-cell {
  min-width: 150px;
}

.accounting-note-cell {
  min-width: 250px;
}

.accounting-category-cell select,
.accounting-deduction-cell select,
.accounting-note-cell input {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #dce0e4;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.accounting-note-cell .button {
  min-height: 32px;
  padding: 6px 10px;
  flex: 0 0 auto;
}

.accounting-deduction-badge {
  display: inline-flex;
  min-height: 24px;
  padding: 4px 8px;
  align-items: center;
  border-radius: 999px;
  color: #6c7279;
  background: #edf0f2;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.accounting-deduction-badge.is-deductible {
  color: #08755c;
  background: #e4f7ef;
}

.accounting-deduction-badge.is-non_deductible {
  color: #ad3737;
  background: #ffe8e8;
}

.accounting-counterparty-search {
  padding-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid #edf0f2;
}

.accounting-counterparty-search label {
  width: min(420px, 100%);
  display: grid;
  gap: 6px;
  color: #5e656d;
  font-size: 12px;
  font-weight: 800;
}

.accounting-counterparty-search input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dce0e4;
  border-radius: 9px;
  font: inherit;
}

.accounting-counterparty-table {
  min-width: 1960px;
}

.accounting-counterparty-table tbody tr[data-counterparty-edit-open] {
  cursor: pointer;
}

.accounting-counterparty-table tbody tr[data-counterparty-edit-open] td {
  transition: background-color 120ms ease;
}

.accounting-counterparty-table tbody tr[data-counterparty-edit-open]:hover td,
.accounting-counterparty-table tbody tr[data-counterparty-edit-open]:focus-visible td {
  background: #f0f2f4;
}

.accounting-counterparty-table tbody tr[data-counterparty-edit-open]:focus-visible {
  outline: 2px solid #d09b0d;
  outline-offset: -2px;
}

.accounting-counterparty-table .accounting-rule-actions {
  cursor: default;
}

.accounting-master-description {
  width: 220px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-rule-actions,
.accounting-rule-actions form {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.button-danger-quiet {
  border-color: #f1c6c6;
  color: #b53636;
  background: #fff7f7;
}

.management-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(8, 13, 19, 0.28);
}

.management-dialog::backdrop {
  background: rgba(13, 18, 24, 0.58);
  backdrop-filter: blur(2px);
}

.management-dialog > form {
  padding: 24px;
}

.management-dialog-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.management-dialog-heading h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.management-dialog-heading > button {
  width: 38px;
  height: 38px;
  border: 1px solid #dfe3e7;
  border-radius: 11px;
  background: #fff;
  font-size: 22px;
  cursor: pointer;
}

.management-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.management-form-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f565e;
  font-weight: 750;
}

.management-form-grid label.is-full {
  grid-column: 1 / -1;
}

.management-form-grid label > span b {
  color: #dc3131;
}

.management-form-grid input,
.management-form-grid select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #d8dde2;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.management-dialog-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-help {
  color: var(--muted);
}

@media (max-width: 1120px) {
  .accounting-summary-grid,
  .accounting-summary-grid.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accounting-panel-actions,
  .accounting-filter-row,
  .accounting-filter-row form {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-analysis-grid {
    grid-template-columns: 1fr;
  }

  .accounting-result-heading,
  .accounting-result-tools {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .accounting-summary-grid,
  .accounting-summary-grid.is-compact {
    grid-template-columns: 1fr;
  }

  .accounting-quick-filter {
    grid-template-columns: 1fr;
  }

  .accounting-bar-row {
    grid-template-columns: 90px minmax(80px, 1fr);
  }

  .accounting-bar-row > strong {
    grid-column: 2;
  }

  .accounting-page-size-form {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .management-form-grid {
    grid-template-columns: 1fr;
  }

  .management-form-grid label.is-full {
    grid-column: auto;
  }
}

.attendance-insight-card strong {
  color: #20252b;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.attendance-insight-card small {
  margin-top: 8px;
  color: #858b93;
  font-size: 11px;
  line-height: 1.45;
}

.attendance-insight-card.is-warning {
  border-color: rgba(211, 156, 3, 0.28);
}

.attendance-insight-card.is-warning .attendance-insight-label,
.attendance-insight-card.is-warning strong {
  color: #8a6400;
}

.attendance-insight-card.is-danger {
  border-color: rgba(199, 65, 65, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(199, 65, 65, 0.065), transparent 48%),
    #fff;
}

.attendance-insight-card.is-danger .attendance-insight-label,
.attendance-insight-card.is-danger strong {
  color: #a43636;
}

@media (max-width: 1080px) {
  .attendance-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .period-navigation {
    margin-top: 3px;
  }

  .period-navigation-current {
    min-width: 152px;
    padding-inline: 10px;
  }

  .period-navigation-current strong {
    font-size: 19px;
  }

  .period-navigation-latest {
    min-width: 48px;
    padding-inline: 2px;
  }

  .attendance-insight-grid {
    grid-template-columns: 1fr;
  }

  .attendance-insight-card {
    min-height: 112px;
  }
}

/* DaouOffice-inspired sidebar information architecture.
   The ITSUS dark + yellow palette remains the visual source of truth. */
:root {
  --sidebar-width: 248px;
}

.sidebar {
  padding: 20px 16px 0;
}

.sidebar-nav {
  gap: 0;
  padding: 0 3px 16px 0;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.sidebar-portal-heading {
  min-height: 42px;
  padding: 0 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-portal-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-portal-heading strong {
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.25;
}

.sidebar-portal-heading small {
  color: #d5b865;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.sidebar-inline-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 4px);
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.sidebar-inline-toggle:hover {
  border-color: rgba(239, 179, 25, 0.58);
  background: rgba(239, 179, 25, 0.08);
}

.sidebar-inline-toggle span {
  width: 4px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: #b7c3d2;
}

.sidebar-menu-search {
  min-height: 40px;
  margin: 20px 0 15px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  color: #9caabd;
  background: rgba(8, 14, 23, 0.16);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.sidebar-menu-search:focus-within {
  border-color: rgba(239, 179, 25, 0.58);
  background: rgba(8, 14, 23, 0.32);
  box-shadow: 0 0 0 3px rgba(239, 179, 25, 0.07);
}

.sidebar-menu-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.sidebar-menu-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #f4f7fb;
  background: transparent;
  font-size: 14px;
}

.sidebar-menu-search input::placeholder {
  color: #7f8da0;
}

.nav-app-label {
  width: max-content;
  margin: 5px 5px 8px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #1e1a0f;
  background: linear-gradient(180deg, #f6cf64, #e6ad18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-transform: none;
}

.nav-home,
.nav-group summary {
  min-height: 36px;
  padding: 0 8px;
  gap: 9px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
}

.nav-home + .nav-group,
.nav-group + .nav-group {
  margin-top: 3px;
}

.nav-home:hover,
.nav-group summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.nav-home.is-active,
.nav-group[open] summary {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(239, 179, 25, 0.17), rgba(255, 255, 255, 0.055));
  box-shadow: inset 2px 0 #efb319;
}

.nav-group summary > span:first-child {
  gap: 9px;
}

.nav-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border: 0;
  border-radius: 6px;
  color: #cbd5e2;
  background: transparent;
  font-size: 14px;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.nav-icon--person::before {
  top: 2px;
  width: 7px;
  height: 7px;
  border-width: 1.7px;
}

.nav-icon--person::after {
  bottom: 2px;
  width: 15px;
  height: 8px;
  border-width: 1.7px;
}

.nav-icon--clock::before {
  width: 17px;
  height: 17px;
  border-width: 1.7px;
}

.nav-icon--clock::after {
  top: 4px;
  left: 10px;
  width: 5px;
  height: 7px;
  border-bottom-width: 1.7px;
  border-left-width: 1.7px;
}

.nav-icon--cash::before {
  width: 19px;
  height: 13px;
  border-width: 1.7px;
}

.nav-icon--cash::after {
  width: 6px;
  height: 6px;
  border-width: 1.5px;
}

.nav-home:hover .nav-icon,
.nav-home.is-active .nav-icon,
.nav-group summary:hover .nav-icon,
.nav-group[open] summary .nav-icon {
  border-color: transparent;
  color: #f4c94f;
  background: rgba(239, 179, 25, 0.08);
}

.chevron {
  padding-right: 2px;
  font-size: 12px;
}

.nav-children {
  margin: 1px 0 5px 18px;
  padding: 2px 0 2px 20px;
  gap: 0;
  border-left-color: rgba(255, 255, 255, 0.13);
}

.nav-children a {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 7px;
  color: #b5c2d2;
  font-size: 14px;
  line-height: 1.35;
}

.nav-children a.is-active {
  color: #1f1805;
  background:
    linear-gradient(110deg, #f9d66f 0%, #efb51f 62%, #d89907 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.45),
    0 5px 12px rgba(79, 53, 0, 0.18);
}

.nav-integrations {
  margin-top: 11px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 8px 8px;
}

.nav-search-empty {
  margin: 13px 4px;
  padding: 13px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #8191a5;
  text-align: center;
  font-size: 12px;
}

.sidebar-bottom {
  margin-right: -3px;
}

.sidebar-user {
  margin-right: -16px;
  margin-left: -16px;
}

@media (max-height: 820px) {
  .sidebar {
    padding-top: 14px;
  }

  .sidebar-menu-search {
    margin-top: 12px;
    margin-bottom: 10px;
  }

  .sidebar-portal-heading small,
  .sidebar-security dl,
  .sidebar-protected-note {
    display: none;
  }

  .sidebar-security {
    padding: 9px 12px;
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 240px;
  }
}
/* Security and retention controls share the ERP form/table scale. */
.security-workspace {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 72px;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.security-card {
  border: 1px solid #dde2e8;
  border-radius: 18px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.security-card h2 {
  margin: 4px 0 16px;
}

.security-policy-list {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
}

.security-policy-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf0f3;
  padding-bottom: 10px;
}

.security-policy-list dt {
  color: #667085;
}

.security-policy-list dd {
  margin: 0;
  font-weight: 700;
}

.security-inline-form,
.mfa-form {
  display: grid;
  gap: 14px;
}

.security-inline-form label,
.mfa-form label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.security-inline-form input,
.mfa-form input {
  min-height: 46px;
  border: 1px solid #d7dce2;
  border-radius: 10px;
  padding: 0 13px;
  font: inherit;
}

.retention-card {
  margin-top: 18px;
}

.retention-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}

.retention-table th,
.retention-table td {
  border-bottom: 1px solid #e4e7ec;
  padding: 10px 12px;
  text-align: left;
}

.retention-table th:last-child,
.retention-table td:last-child {
  text-align: right;
}

.security-warning {
  margin-top: 18px;
  border-radius: 10px;
  background: #fff8e1;
  color: #7a5700;
  padding: 12px 14px;
}

.security-emphasis {
  font-size: 1.35rem;
  font-weight: 800;
}

.mfa-workspace {
  max-width: 760px;
}

.mfa-card {
  margin-top: 24px;
}

.security-steps {
  line-height: 1.8;
}

.mfa-qr-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px 0;
  border: 1px solid #e1e5ea;
  border-radius: 16px;
  background: #fff;
  padding: 22px;
}

.mfa-qr-panel p {
  margin: 0;
  color: #303740;
}

.mfa-qr-code {
  display: block;
  width: min(256px, 100%);
  height: auto;
  aspect-ratio: 1;
  border: 10px solid #fff;
  border-radius: 10px;
}

.mfa-manual-setup {
  margin: 18px 0;
}

.mfa-manual-setup > summary {
  cursor: pointer;
  font-weight: 800;
  color: #755600;
}

.mfa-manual-setup > p {
  margin-bottom: 0;
  color: #5f6874;
}

.mfa-secret {
  margin: 18px 0;
  border: 1px dashed #c28b00;
  border-radius: 12px;
  background: #fff9e8;
  padding: 18px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
}

.mfa-uri code {
  display: block;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .security-workspace {
    width: min(100% - 24px, 1180px);
    padding-top: 24px;
  }
  .security-grid {
    grid-template-columns: 1fr;
  }
}

/* DaouOffice-style neutral workspace shell.
 * Primary navigation: 200px light-gray rail.
 * Secondary navigation: 260px white module panel.
 * The product chrome uses white, gray, and black; color is reserved for
 * semantic success, warning, and danger states inside business content.
 */
:root {
  --ink: #1c1c1c;
  --muted: #6b7280;
  --line: #e5e7eb;
  --surface: #f7f7f8;
  --paper: #ffffff;
  --brand: #252525;
  --accent: #333333;
  --accent-soft: #f2f2f2;
  --sidebar-primary-width: 200px;
  --sidebar-secondary-width: 260px;
  --sidebar-width: calc(var(--sidebar-primary-width) + var(--sidebar-secondary-width));
}

body.erp-page {
  color: var(--ink);
  background: var(--surface);
}

.workspace-topbar {
  min-height: 60px;
  padding-right: 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #1c1c1c;
  background: #fff;
  box-shadow: none;
}

.erp-shell {
  grid-template-rows: 60px minmax(0, 1fr);
}

.sidebar {
  top: 60px;
  width: var(--sidebar-width);
  padding: 0;
  display: grid;
  grid-template-columns: var(--sidebar-primary-width) var(--sidebar-secondary-width);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid #e5e7eb;
  color: #1c1c1c;
  background: #fff;
  box-shadow: none;
}

.topbar-brand {
  gap: 10px;
}

.menu-toggle {
  border-color: #d8dadd;
  color: #1c1c1c;
  background: #fff;
}

.menu-toggle:hover {
  background: #f2f2f2;
}

.menu-toggle span {
  background: #333;
}

.topbar-logo img {
  border-color: #e5e7eb;
}

.topbar-logo strong {
  color: #1c1c1c;
}

.topbar-logo strong::after {
  background: #333;
  box-shadow: none;
}

.topbar-division,
.topbar-user-name {
  color: #555;
}

.session-control {
  border-color: #d8dadd;
  color: #555;
  background: #fff;
}

.session-control strong {
  color: #1c1c1c;
}

.session-control button,
.topbar-logout {
  border-color: #333;
  color: #fff;
  background: #333;
}

.session-control button:hover,
.topbar-logout:hover {
  border-color: #111;
  background: #111;
  filter: none;
}

.session-control.is-expiring {
  border-color: #b94b4b;
  background: #fff5f5;
}

.company-only-badge {
  color: #555;
  background: #f2f2f2;
}

.notification-button {
  border-color: #d8dadd;
  color: #333;
  background: #fff;
}

.notification-button[aria-expanded="true"],
.notification-button:hover {
  border-color: #aaa;
  background: #f2f2f2;
}

.notification-count {
  border-color: #fff;
}

.sidebar-primary {
  min-width: 0;
  min-height: 0;
  padding: 20px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-right: 1px solid #e4e5e5;
  color: #1c1c1c;
  background: #f2f2f2;
  scrollbar-color: #c9c9c9 transparent;
}

.sidebar-primary-heading {
  min-height: 40px;
  padding: 0 10px 14px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}

.sidebar-primary-company-link {
  grid-column: 1 / 3;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.sidebar-primary-company-link:hover {
  color: #111;
  background: #e8e8e8;
}

.sidebar-grid-icon {
  width: 16px;
  height: 16px;
  background:
    radial-gradient(circle, currentColor 1.5px, transparent 1.7px) 0 0 / 6px 6px;
}

.sidebar-inline-toggle {
  width: 30px;
  height: 30px;
  border-color: transparent;
  color: #777;
  background: transparent;
}

.sidebar-inline-toggle:hover {
  border-color: #d0d0d0;
  background: #e8e8e8;
}

.sidebar-inline-toggle span {
  color: #555;
}

.sidebar-primary-list {
  min-height: 0;
  padding-top: 8px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-primary-item {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  color: #1c1c1c;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}

.sidebar-panel--empty {
  padding: 0;
}

.sidebar-primary-item:hover {
  background: #e7e7e7;
}

.sidebar-primary-item.is-active {
  color: #fff;
  background: #333;
}

.sidebar-primary .nav-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border: 0;
  border-radius: 0;
  color: currentColor;
  background: transparent;
}

.sidebar-primary .nav-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-primary .nav-icon--person::before {
  top: 1px;
}

.sidebar-primary .nav-icon--person::after {
  bottom: 1px;
}

.sidebar-primary .nav-icon--clock::after {
  top: 3px;
  left: 9px;
}

.sidebar-primary-item:hover .nav-icon,
.sidebar-primary-item.is-active .nav-icon {
  color: currentColor;
  background: transparent;
}

.sidebar-primary-footer {
  margin-top: auto;
  padding: 14px 10px 2px;
  display: grid;
  gap: 3px;
  border-top: 1px solid #dedede;
}

.sidebar-primary-footer a {
  margin-bottom: 8px;
  color: #555;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-primary-footer strong {
  font-size: 13px;
}

.sidebar-primary-footer small {
  overflow: hidden;
  color: #777;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.sidebar-secondary {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #1c1c1c;
  background: #fff;
}

.sidebar-secondary-toolbar {
  flex: 0 0 auto;
  padding: 20px 20px 12px;
}

.sidebar-menu-search {
  min-height: 36px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #777;
  background: #fff;
}

.sidebar-menu-search:focus-within {
  border-color: #777;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.sidebar-menu-search input {
  height: 34px;
  color: #1c1c1c;
}

.sidebar-menu-search input::placeholder {
  color: #999;
}

.sidebar-secondary-panels {
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.sidebar-panel {
  height: 100%;
  padding: 0 20px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
}

.sidebar-panel[hidden] {
  display: none;
}

.sidebar-panel-heading {
  min-height: 62px;
  padding: 0 2px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid #ececec;
}

.sidebar-panel-heading small {
  color: #888;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sidebar-panel-heading h2 {
  margin: 2px 0 0;
  color: #1c1c1c;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.sidebar-menu-section,
.nav-subgroup {
  padding: 16px 0 4px;
}

.sidebar-menu-section + .sidebar-menu-section,
.nav-subgroup + .sidebar-menu-section,
.sidebar-menu-section + .nav-subgroup,
.nav-subgroup + .nav-subgroup {
  margin-top: 8px;
  border-top: 1px solid #eeeeee;
}

.sidebar-menu-section h3,
.nav-subgroup-label {
  min-height: 24px;
  margin: 0 0 5px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  color: #555;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.nav-subgroup-children,
.sidebar-menu-section {
  border-left: 0;
}

.nav-subgroup-children {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.nav-subgroup-children > a,
.sidebar-menu-link {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: #333;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.nav-subgroup-children > a:hover,
.sidebar-menu-link:hover {
  color: #111;
  background: #f2f2f2;
}

.nav-subgroup-children > a.is-active,
.sidebar-menu-link.is-active {
  color: #fff;
  background: #333;
  box-shadow: none;
}

.sidebar-search-results {
  padding-top: 16px;
  display: grid;
  gap: 5px;
}

.sidebar-search-results a {
  padding: 10px;
  display: grid;
  gap: 2px;
  border-radius: 8px;
  color: #1c1c1c;
  text-decoration: none;
}

.sidebar-search-results a:hover {
  background: #f2f2f2;
}

.sidebar-search-results strong {
  font-size: 13px;
}

.sidebar-search-results small {
  color: #888;
  font-size: 11px;
}

.nav-search-empty {
  margin: 14px 0;
  border-color: #d9d9d9;
  color: #888;
  background: #fafafa;
}

.sidebar-policy-summary {
  margin-top: 18px;
  padding: 14px;
  display: grid;
  gap: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f7f7f7;
}

.sidebar-policy-summary span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-policy-summary small {
  color: #777;
  font-size: 11px;
}

.sidebar-policy-summary strong {
  font-size: 11px;
}

.sidebar-allowed-accounts {
  margin-top: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border-top: 1px solid #e5e7eb;
  color: #555;
}

.sidebar-allowed-accounts small {
  color: #888;
  font-size: 10px;
  font-weight: 800;
}

.sidebar-allowed-accounts span {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 11px;
}

.eyebrow,
.workflow-number,
[aria-sort="descending"] .sort-indicator,
.mfa-manual-setup > summary {
  color: #555;
}

.overview-card-primary,
.notice-panel {
  border-color: #e5e7eb;
  background: #fff;
}

.card-icon {
  color: #222;
  background: #e5e7eb;
}

.notice-icon {
  background: #333;
}

.accounting-bar-row i,
.accounting-bar-track progress::-webkit-progress-value,
.accounting-bar-track progress::-moz-progress-bar {
  background: linear-gradient(90deg, #444, #a1a1a1);
}

.mfa-secret {
  border-color: #999;
  background: #f7f7f7;
}

@media (max-width: 1100px) {
  :root {
    --sidebar-primary-width: 184px;
    --sidebar-secondary-width: 248px;
    --sidebar-width: calc(var(--sidebar-primary-width) + var(--sidebar-secondary-width));
  }
}

@media (max-width: 760px) {
  :root {
    --sidebar-width: min(94vw, 460px);
    --sidebar-primary-width: min(40vw, 184px);
    --sidebar-secondary-width: calc(var(--sidebar-width) - var(--sidebar-primary-width));
  }

  .sidebar {
    top: 60px;
    width: var(--sidebar-width);
    height: calc(100vh - 60px);
    grid-template-columns: var(--sidebar-primary-width) var(--sidebar-secondary-width);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.18);
  }

  .sidebar-primary {
    padding-right: 6px;
    padding-left: 6px;
  }

  .sidebar-primary-heading {
    padding-right: 6px;
    padding-left: 6px;
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .sidebar-primary-heading .sidebar-inline-toggle {
    display: none;
  }

  .sidebar-primary-item {
    padding-right: 8px;
    padding-left: 8px;
  }

  .sidebar-secondary-toolbar,
  .sidebar-panel {
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Exact DaouOffice shell reference: the navigation begins at the top edge.
 * There is no separate product-colored header. Account and session actions
 * stay available in the bottom of the first navigation rail.
 */
:root {
  --sidebar-primary-width: 216px;
  --sidebar-secondary-width: 286px;
  --sidebar-width: calc(var(--sidebar-primary-width) + var(--sidebar-secondary-width));
}

html,
body.erp-page {
  background: #fff;
}

.erp-shell {
  min-height: 100vh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.sidebar-toggle:checked + .erp-shell {
  grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
  top: 0;
  height: 100vh;
  grid-column: 1;
  grid-row: 1;
}

.workspace-shell {
  min-height: 100vh;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: minmax(0, 1fr) auto;
  border-left: 0;
  background: #fff;
}

.workspace-topbar {
  display: none;
}

.sidebar-primary {
  padding: 12px 8px 10px;
  background: #f3f3f3;
}

.sidebar-primary-brand {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  gap: 9px;
  grid-template-columns: minmax(0, auto) 2px minmax(0, 1fr);
  min-height: 46px;
  margin: 0 10px 6px;
  padding: 0 2px;
  border-radius: 8px;
  color: #282828;
  text-decoration: none;
}

.sidebar-primary-brand img {
  display: block;
  height: 20px;
  max-width: 96px;
  object-fit: contain;
  width: auto;
}

.sidebar-primary-brand > span {
  align-self: center;
  background: linear-gradient(180deg, #efb319, #f5cf61);
  border-radius: 99px;
  height: 20px;
  width: 2px;
}

.sidebar-primary-brand strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-primary-brand:hover,
.sidebar-primary-brand:focus-visible {
  background: #e8e8e8;
}

.sidebar-primary-brand:hover strong,
.sidebar-primary-brand:focus-visible strong {
  color: #765700;
}

.sidebar-primary-heading {
  min-height: 66px;
  padding: 0 12px;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  border-bottom: 1px solid #d9d9d9;
}

.sidebar-primary-list {
  padding-top: 10px;
  gap: 1px;
}

.sidebar-primary-item {
  min-height: 36px;
  padding: 0 12px;
  gap: 12px;
  border-radius: 8px;
  font-weight: 650;
}

.sidebar-primary-item:hover {
  background: #e5e5e5;
}

.sidebar-primary-item.is-active {
  color: #fff;
  background: #333;
}

.sidebar-primary-footer {
  margin-top: auto;
  padding: 12px 10px 2px;
  gap: 8px;
}

.sidebar-primary-footer > a {
  margin: 0;
}

.sidebar-user-summary {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sidebar-user-summary strong,
.sidebar-user-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px auto;
  align-items: center;
  gap: 5px;
}

.sidebar-account-tools .session-control {
  min-width: 0;
  min-height: 32px;
  padding: 0 4px 0 8px;
  gap: 4px;
  border: 1px solid #d7d7d7;
  border-radius: 7px;
  background: #fff;
  font-size: 10px;
}

.sidebar-account-tools .session-control span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-tools .session-control button {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  color: #333;
  background: #ededed;
  font-size: 10px;
}

.sidebar-account-tools .notification-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-color: #d7d7d7;
  border-radius: 7px;
}

.sidebar-account-tools .notification-button svg {
  width: 16px;
  height: 16px;
}

.sidebar-logout {
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid #d7d7d7;
  border-radius: 7px;
  color: #333;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-logout:hover {
  border-color: #999;
  background: #e8e8e8;
}

.sidebar-account-tools .announcement-panel {
  position: fixed;
  right: auto;
  bottom: 12px;
  left: 208px;
  z-index: 40;
}

.sidebar-secondary {
  position: relative;
  border-right: 1px solid #dedede;
}

.sidebar-secondary-toolbar {
  position: absolute;
  top: 82px;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 0 26px;
}

.sidebar-menu-search {
  min-height: 42px;
  border-color: #333;
  border-radius: 14px;
}

.sidebar-menu-search input {
  height: 40px;
}

.sidebar-secondary-panels {
  height: 100%;
}

.sidebar-panel {
  padding: 12px 26px 28px;
}

.sidebar-panel-heading {
  min-height: 66px;
  padding: 0;
  justify-content: center;
  border-bottom: 0;
}

.sidebar-panel-heading small {
  display: none;
}

.sidebar-panel-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.sidebar-panel-heading + .sidebar-menu-section,
.sidebar-panel-heading + .nav-subgroup,
.sidebar-panel-heading + .sidebar-search-results {
  margin-top: 66px;
}

.sidebar-menu-section,
.nav-subgroup {
  padding-top: 10px;
}

.sidebar-menu-section + .sidebar-menu-section,
.nav-subgroup + .sidebar-menu-section,
.sidebar-menu-section + .nav-subgroup,
.nav-subgroup + .nav-subgroup {
  margin-top: 10px;
  border-top-color: #ededed;
}

.nav-subgroup-children > a,
.sidebar-menu-link {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.nav-subgroup-children > a.is-active,
.sidebar-menu-link.is-active {
  color: #fff;
  background: #333;
  font-weight: 750;
}

/* Keep the secondary navigation hierarchy immediately readable: subgroup
 * labels stay on the panel axis and only their leaf links move inward. */
.sidebar-panel .nav-subgroup-children {
  width: calc(100% - 14px);
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid #dcdfe4;
}

.sidebar-panel .nav-subgroup-children > a {
  padding-right: 8px;
  padding-left: 12px;
}

.sidebar-menu-pending {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  border-radius: 6px;
  color: #b3b8bf;
  cursor: not-allowed;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.sidebar-menu-pending > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-menu-pending > small {
  flex: 0 0 auto;
  color: #c1c5ca;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-panel .nav-subgroup-children > .sidebar-menu-pending {
  padding-right: 8px;
  padding-left: 12px;
}

.main {
  width: min(1480px, calc(100% - 64px));
  padding-top: 34px;
  background: #fff;
}

footer {
  width: min(1480px, calc(100% - 64px));
  border-top: 1px solid #eee;
}

@media (max-width: 1100px) {
  :root {
    --sidebar-primary-width: 200px;
    --sidebar-secondary-width: 264px;
  }
}

@media (max-width: 760px) {
  :root {
    --sidebar-width: min(96vw, 502px);
    --sidebar-primary-width: min(41vw, 200px);
    --sidebar-secondary-width: calc(var(--sidebar-width) - var(--sidebar-primary-width));
  }

  .sidebar {
    top: 0;
    height: 100vh;
  }

  .sidebar-primary-heading {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .sidebar-account-tools {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .sidebar-account-tools form {
    grid-column: 1 / -1;
  }

  .sidebar-logout {
    width: 100%;
  }

  .sidebar-secondary-toolbar,
  .sidebar-panel {
    padding-right: 16px;
    padding-left: 16px;
  }

  .main,
  footer {
    width: min(100% - 28px, 1480px);
  }
}

/* DaouOffice-style full navigation fold.  The whole two-rail sidebar leaves
 * the viewport and a compact, fixed restore control remains available. */
.sidebar-toggle:checked + .erp-shell {
  grid-template-columns: 0 minmax(0, 1fr);
}
.sidebar-toggle:checked + .erp-shell .sidebar {
  width: var(--sidebar-width);
  grid-template-columns: var(--sidebar-primary-width) var(--sidebar-secondary-width);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}
.sidebar-toggle:checked + .erp-shell .sidebar-secondary {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.sidebar-unfold-button {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 50;
  min-height: 40px;
  padding: 0 14px;
  display: none;
  align-items: center;
  gap: 10px;
  border: 1px solid #d7d7d7;
  border-radius: 9px;
  color: #242424;
  background: #fff;
  box-shadow: 0 8px 22px rgb(0 0 0 / 10%);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.sidebar-unfold-button:hover {
  border-color: #a8a8a8;
  background: #f5f5f5;
}
.sidebar-unfold-button .sidebar-grid-icon {
  flex: 0 0 16px;
}
.sidebar-toggle:checked + .erp-shell .sidebar-unfold-button {
  display: inline-flex;
}
.sidebar-account-tools {
  grid-template-columns: 40px minmax(90px, 1fr);
  gap: 7px;
}
.sidebar-account-tools .session-control {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 0 7px 0 10px;
  font-size: 12px;
}
.sidebar-account-tools .session-control button {
  flex: 0 0 auto;
  margin-left: auto;
}
.sidebar-account-tools .session-control button,
.sidebar-logout { font-size: 12px; }
.sidebar-account-tools .notification-button {
  width: 40px;
  height: 36px;
  min-height: 36px;
}
.sidebar-logout {
  width: 100%;
  min-width: 90px;
  min-height: 36px;
  padding-right: 10px;
  padding-left: 10px;
  overflow: visible;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sidebar-toggle:checked + .erp-shell {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .sidebar-unfold-button {
    top: 12px;
    left: 12px;
  }
}

/* Final workspace grid contract: no site-wide top bar.  Product identity lives
 * at the top of the primary navigation so business content starts immediately. */
.erp-shell {
  grid-template-rows: minmax(0, 1fr);
}

.sidebar {
  grid-row: 1;
  top: 0;
  height: 100vh;
}

.workspace-shell {
  grid-row: 1;
  min-height: 100vh;
}

/* Spreadsheet-backed monthly closing statement */
.accounting-reference-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.accounting-reference-heading-actions {
  flex: 0 0 auto;
}

.accounting-reference-status {
  align-items: center;
  background: linear-gradient(110deg, #fff9df 0%, #fffdf7 70%, #ffffff 100%);
  border: 1px solid #ead790;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 12px 16px;
}

.accounting-reference-status > div,
.accounting-reference-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.accounting-reference-status-dot {
  background: #0ca678;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(12 166 120 / 12%);
  height: 8px;
  width: 8px;
}

.accounting-reference-status span:not(.accounting-reference-status-dot) {
  color: #6b7280;
}

.accounting-reference-panel {
  overflow: hidden;
  padding: 0;
}

.accounting-reference-panel-heading {
  padding: 20px 22px 16px;
}

.accounting-reference-table-wrap {
  border-top: 1px solid #e5e7eb;
  isolation: isolate;
  max-height: calc(100vh - 150px);
  overflow: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
}

.accounting-reference-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: var(--statement-table-min-width, 1792px);
  table-layout: fixed;
  font-family: inherit;
  letter-spacing: normal;
}

.accounting-reference-table th,
.accounting-reference-table td {
  height: 42px;
  font-family: inherit;
  letter-spacing: normal;
}

.accounting-reference-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.accounting-reference-table thead {
  position: relative;
  z-index: 6;
}

.accounting-reference-table thead tr:first-child {
  position: relative;
  z-index: 2;
}

.accounting-reference-table thead .accounting-reference-lane-headings {
  position: relative;
  z-index: 1;
}

.accounting-reference-table thead tr:first-child th {
  height: 36px;
}

.accounting-reference-table thead .accounting-reference-lane-headings th {
  height: 32px;
  top: 36px;
}

.accounting-reference-table .accounting-reference-account-column {
  background: #fff;
  left: 0;
  min-width: 300px;
  position: sticky;
  width: 300px;
  z-index: 2;
}

.accounting-reference-table thead .accounting-reference-account-column {
  background: #f8f9fb;
  z-index: 4;
}

.accounting-reference-table .numeric-cell {
  text-align: right;
}

.accounting-reference-page .accounting-reference-table .accounting-reference-month-group {
  background: #f8f9fb;
  border-left: 1px solid #dce1e7;
  min-width: 228px;
  text-align: center;
  transition: background-color 140ms ease, width 140ms ease;
  width: 228px;
}

.accounting-reference-page .accounting-reference-table .accounting-reference-month-group.is-collapsed {
  min-width: 52px;
  width: 52px;
}

.accounting-reference-month-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  gap: 5px;
  height: 28px;
  justify-content: center;
  padding: 0 7px;
  white-space: nowrap;
}

.accounting-reference-month-toggle:hover {
  background: rgba(17, 24, 39, 0.06);
}

.accounting-reference-month-toggle:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #667085;
  outline: 0;
}

.accounting-reference-month-toggle-icon {
  color: #778193;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  width: 10px;
}

.accounting-reference-table .accounting-reference-month-group.is-current {
  background: #e4f3df;
}

.accounting-reference-page .accounting-reference-table .numeric-cell {
  font-size: 11px;
  padding-inline: 4px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-detail-amount,
.accounting-reference-page .accounting-reference-table .numeric-cell.is-summary-amount {
  min-width: 88px;
  width: 88px;
}

.accounting-reference-table .numeric-cell.is-detail-amount {
  border-left: 1px solid #dce1e7;
}

.accounting-reference-table .numeric-cell.is-summary-amount {
  background: #fafbfc;
  font-weight: 700;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-ratio {
  color: #758093;
  min-width: 52px;
  width: 52px;
}

.accounting-reference-page .accounting-reference-table [data-statement-month-index][hidden] {
  display: none !important;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-month-collapsed-lane {
  color: transparent;
  min-width: 52px;
  padding-inline: 0;
  width: 52px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-month-collapsed-lane > * {
  visibility: hidden;
}

.accounting-reference-table .numeric-cell small {
  color: #8a93a2;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.accounting-reference-table .numeric-cell.is-current {
  background: #edf8e9;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-year-total {
  background: #fff2bd;
  box-shadow: -5px 0 10px rgba(50, 42, 12, 0.08);
  color: #5f4700;
  font-weight: 750;
  position: sticky;
  right: 0;
  min-width: 124px;
  width: 124px;
  z-index: 2;
}

.accounting-reference-table thead .numeric-cell.is-year-total {
  background: #f8d66d;
  background-clip: padding-box;
  border-left: 1px solid #dec058;
  box-shadow: -8px 0 14px rgba(50, 42, 12, 0.14);
  color: #2f2608;
  isolation: isolate;
  z-index: 10;
}

.accounting-reference-table tr.is-total td {
  background: #fff3cb;
  border-top: 1px solid #e8c24e;
  font-weight: 700;
}

.accounting-reference-table tr.is-total .accounting-reference-account-column {
  background: #fff3cb;
}

.accounting-reference-table tr.is-subtotal td {
  background: #f3f8f4;
  font-weight: 700;
}

.accounting-reference-table tr.is-subtotal .accounting-reference-account-column {
  background: #f3f8f4;
}

.accounting-reference-table tr.is-detail td {
  color: #5e6774;
}

.accounting-reference-table tr.is-detail .accounting-reference-account-column {
  background: #fcfcfd;
}

.accounting-reference-table tbody td.is-current {
  background: #edf8e9;
}

.accounting-reference-table tbody td.is-current.is-summary-amount {
  background: #e7f4e3;
}

.accounting-reference-table tbody td.is-year-total {
  background: #fff2bd;
}

.accounting-reference-table tr.is-level-2 td,
.accounting-reference-table tr.is-level-2 .accounting-reference-account-column {
  background: #f3f4f5;
  color: #6f7782;
  font-style: italic;
  font-weight: 500;
}

.accounting-reference-table tr.is-level-2 td.is-current {
  background: #e7f2e5;
}

.accounting-reference-table tr.is-level-2 td.is-year-total {
  background: #f8edc2;
}

.accounting-reference-table tr[data-statement-group] {
  cursor: pointer;
}

.accounting-reference-table tr[data-statement-group]:hover td,
.accounting-reference-table tr[data-statement-group]:focus-visible td {
  filter: brightness(0.975);
}

.accounting-reference-table tr[data-statement-group]:focus-visible {
  outline: 2px solid #d8ab00;
  outline-offset: -2px;
}

.accounting-reference-line {
  align-items: center;
  display: flex;
  gap: 8px;
  padding-left: 0;
  white-space: nowrap;
}

.accounting-reference-page .accounting-reference-table tr.is-level-1 .accounting-reference-line {
  padding-left: 18px;
}

.accounting-reference-page .accounting-reference-table tr.is-level-2 .accounting-reference-line {
  padding-left: 36px;
}

.accounting-reference-page .accounting-reference-table tr.is-level-3 .accounting-reference-line {
  padding-left: 54px;
}

.accounting-reference-table tr.is-major-section td {
  border-top-color: #c8ced7;
  background: #eef2f7;
  color: #172033;
  font-weight: 800;
}

.accounting-reference-table tr.is-major-section .accounting-reference-account-column {
  background: #eef2f7;
}

.accounting-reference-table tr.is-level-1:not(.is-major-section) .accounting-reference-account-trigger {
  font-weight: 700;
}

.accounting-reference-table tr.is-level-2 .accounting-reference-account-trigger {
  color: #5e6774;
  font-weight: 500;
}

.accounting-reference-account-trigger {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  padding: 2px 0;
  text-align: left;
}

.accounting-reference-account-trigger:hover,
.accounting-reference-account-trigger:focus-visible {
  color: #15181c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accounting-reference-line small {
  color: #a0a7b1;
  flex: 0 0 24px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.accounting-reference-row-chevron,
.accounting-reference-toggle-placeholder {
  align-items: center;
  display: inline-flex;
  flex: 0 0 14px;
  height: 20px;
  justify-content: center;
  width: 14px;
}

.accounting-reference-row-chevron {
  color: #667085;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(0deg);
  transition: color 120ms ease, transform 120ms ease;
}

.accounting-reference-row-chevron.is-expanded {
  color: #15181c;
  transform: rotate(90deg);
}

.accounting-reference-table tr[data-statement-group] {
  cursor: pointer;
}

.accounting-reference-table tr[data-statement-group]:hover > td {
  background-color: #f4f5f7;
}

.accounting-reference-table .is-negative {
  color: #d9485f;
}

/* Comparative annual financial statements */
.financial-statement-year-form {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.financial-statement-year-form label {
  color: #667085;
  font-weight: 700;
}

.financial-statement-year-form select {
  min-width: 132px;
}

.financial-statement-tabs {
  align-items: flex-end;
  border-bottom: 1px solid #dce1e7;
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.financial-statement-tabs a {
  border-bottom: 3px solid transparent;
  color: #667085;
  flex: 0 0 auto;
  font-weight: 700;
  padding: 12px 16px 10px;
  text-decoration: none;
}

.financial-statement-tabs a:hover,
.financial-statement-tabs a:focus-visible {
  color: #172033;
}

.financial-statement-tabs a.is-active {
  border-bottom-color: #e4ad00;
  color: #172033;
}

.financial-statement-table {
  min-width: 900px;
  table-layout: fixed;
}

.financial-statement-table .accounting-reference-account-column {
  min-width: 500px;
  width: 500px;
}

.financial-statement-table .numeric-cell {
  min-width: 200px;
  width: 200px;
}

.financial-statement-table thead .numeric-cell {
  background: #f8f9fb;
  text-align: center;
}

.financial-statement-table thead .numeric-cell.is-current {
  background: #e4f3df;
}

.financial-statement-table tbody .numeric-cell.is-current {
  background: #edf8e9;
}

.financial-statement-table tbody tr.is-total td {
  background: #eef2f7;
  color: #172033;
}

.financial-statement-table tbody tr.is-total td.is-current {
  background: #e1eee0;
}

.financial-statement-table .is-empty-value {
  color: #a0a7b1;
}

@media (max-width: 760px) {
  .financial-statement-year-form {
    align-items: stretch;
    flex-direction: column;
  }

  .financial-statement-year-form select {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .accounting-reference-heading,
  .accounting-reference-status {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-reference-heading-actions .button {
    width: 100%;
  }
}

.accounting-evidence-trigger {
  appearance: none;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 1px 0;
}

.accounting-evidence-trigger:hover,
.accounting-evidence-trigger:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

.accounting-evidence-trigger.is-negative {
  color: var(--danger, #c83c3c);
}

.accounting-evidence-dialog {
  max-width: 1360px;
  width: min(1360px, calc(100vw - 40px));
}

.accounting-evidence-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.accounting-evidence-context > div {
  background: #f7f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.accounting-evidence-context span,
.accounting-evidence-source-card span,
.accounting-evidence-source-card small,
.accounting-evidence-totals span {
  color: #6b7280;
  font-size: 12px;
}

.accounting-evidence-context strong {
  font-size: 14px;
}

.accounting-evidence-context strong.is-negative {
  color: var(--danger, #c83c3c);
}

.accounting-evidence-source-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  margin-bottom: 12px;
}

.accounting-evidence-source-card {
  align-items: flex-start;
  appearance: none;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  color: #17191c;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 78px;
  padding: 10px 12px;
  text-align: left;
}

.accounting-evidence-source-card strong {
  font-size: 18px;
}

.accounting-evidence-source-card.is-active {
  background: #fffaf0;
  border-color: #d7a800;
  box-shadow: inset 3px 0 #d7a800;
}

.accounting-evidence-toolbar {
  align-items: center;
  border-bottom: 1px solid #e2e5e9;
  border-top: 1px solid #e2e5e9;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}

.accounting-evidence-search {
  flex: 1 1 360px;
  max-width: 520px;
}

.accounting-evidence-search input {
  background: #fff;
  border: 1px solid #cfd4da;
  border-radius: 8px;
  font: inherit;
  height: 38px;
  padding: 0 12px;
  width: 100%;
}

.accounting-evidence-search input:focus {
  border-color: #9a7600;
  box-shadow: 0 0 0 3px rgba(215, 168, 0, 0.14);
  outline: none;
}

.accounting-evidence-flow-tabs {
  background: #f2f3f5;
  border-radius: 8px;
  display: inline-flex;
  padding: 3px;
}

.accounting-evidence-flow-tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #5f6670;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-width: 58px;
  padding: 7px 10px;
}

.accounting-evidence-flow-tabs button.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  color: #17191c;
}

.accounting-evidence-body {
  max-height: min(48vh, 520px);
  min-height: 180px;
  overflow: auto;
}

.accounting-evidence-table-wrap {
  max-height: min(48vh, 520px);
}

.accounting-evidence-table {
  min-width: 1100px;
}

.accounting-evidence-table th:nth-child(6),
.accounting-evidence-table td:nth-child(6) {
  min-width: 170px;
}

.accounting-evidence-table th:nth-child(7),
.accounting-evidence-table td:nth-child(7) {
  min-width: 220px;
  white-space: normal;
}

.accounting-evidence-table th:nth-child(8),
.accounting-evidence-table td:nth-child(8),
.accounting-evidence-table th:nth-child(9),
.accounting-evidence-table td:nth-child(9) {
  min-width: 112px;
  text-align: right;
}

.accounting-evidence-table td.is-recognition,
.accounting-evidence-table td.is-payment {
  font-weight: 700;
  white-space: nowrap;
}

.accounting-evidence-table td.is-recognition {
  color: #087a4a;
}

.accounting-evidence-table td.is-payment {
  color: #8a5b00;
}

.accounting-evidence-status span {
  background: #eef0f3;
  border-radius: 999px;
  color: #58616d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

.accounting-evidence-status span.is-confirmed {
  background: #e7f6ef;
  color: #087a4a;
}

.accounting-evidence-totals {
  background: #f7f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
}

.accounting-evidence-totals[hidden] {
  display: none;
}

.accounting-evidence-totals > div {
  background: #fff;
  display: grid;
  gap: 4px;
  padding: 10px 14px;
}

.accounting-evidence-totals strong {
  font-size: 16px;
  text-align: right;
}

.accounting-evidence-totals strong.is-negative {
  color: var(--danger, #c83c3c);
}

.accounting-evidence-reconciliation-note {
  background: #fff9e8;
  border: 1px solid #ead79b;
  border-radius: 8px;
  color: #66531a;
  font-size: 12px;
  line-height: 1.55;
  margin: 12px 0 0;
  padding: 9px 12px;
}

@media (max-width: 720px) {
  .accounting-evidence-dialog {
    width: calc(100vw - 24px);
  }

  .accounting-evidence-context,
  .accounting-evidence-totals {
    grid-template-columns: 1fr;
  }

  .accounting-evidence-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-evidence-search {
    max-width: none;
  }
}

/* Clobe-inspired closing analysis: compact navigation, summary-first reading, right detail sheet. */
@media (min-width: 1101px) {
  :root {
    --sidebar-secondary-width: 248px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --sidebar-secondary-width: 232px;
  }
}

.accounting-cashflow-page .main {
  padding-inline: 20px;
}

.accounting-flow-controls {
  align-items: center;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 12px;
  min-height: 48px;
  padding: 7px 10px 7px 14px;
}

.accounting-flow-control-group,
.accounting-flow-control-actions,
.accounting-flow-checkbox,
.accounting-flow-unit-tabs {
  align-items: center;
  display: flex;
}

.accounting-flow-control-group,
.accounting-flow-control-actions {
  gap: 10px;
}

.accounting-flow-control-label {
  color: #535a64;
  font-size: 12px;
  font-weight: 700;
}

.accounting-flow-control-chip {
  background: #f5f6f7;
  border-radius: 999px;
  color: #747b85;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.accounting-flow-control-chip.is-active {
  background: #24272b;
  color: #fff;
}

.accounting-flow-checkbox {
  color: #4f5660;
  cursor: pointer;
  font-size: 12px;
  gap: 6px;
}

.accounting-flow-checkbox input {
  accent-color: #24272b;
  height: 15px;
  margin: 0;
  width: 15px;
}

.accounting-flow-unit-tabs {
  background: #f1f3f5;
  border-radius: 8px;
  gap: 2px;
  padding: 3px;
}

.accounting-flow-unit-tabs button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #69717c;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-width: 56px;
  padding: 6px 9px;
}

.accounting-flow-unit-tabs button.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  color: #202328;
}

.accounting-flow-overview-panel {
  overflow: hidden;
  padding: 0;
}

.accounting-flow-section-heading {
  align-items: flex-end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 20px 14px;
}

.accounting-flow-section-heading h2 {
  font-size: 19px;
  margin: 3px 0 4px;
}

.accounting-flow-section-heading p:not(.eyebrow) {
  color: #717985;
  margin: 0;
}

.accounting-flow-unit-label {
  color: #737b86;
  font-size: 12px;
  white-space: nowrap;
}

.accounting-flow-overview-wrap {
  border-top: 1px solid #e4e7eb;
  overflow-x: auto;
}

.accounting-flow-overview-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max(100%, 920px);
  table-layout: fixed;
}

.accounting-flow-overview-table th,
.accounting-flow-overview-table td {
  border-bottom: 1px solid #eceef1;
  height: 42px;
  padding: 7px 12px;
}

.accounting-flow-overview-table thead th {
  background: #f7f8f9;
  color: #616975;
  font-size: 11px;
  text-align: right;
}

.accounting-flow-overview-table thead th:first-child,
.accounting-flow-overview-table tbody th {
  left: 0;
  min-width: 220px;
  position: sticky;
  text-align: left;
  width: 220px;
  z-index: 2;
}

.accounting-flow-overview-table thead th:first-child {
  z-index: 3;
}

.accounting-flow-overview-table tbody th {
  background: #fff;
  color: #34383e;
  font-size: 12px;
}

.accounting-flow-overview-table td {
  background: #fff;
  text-align: right;
}

.accounting-flow-overview-table .is-current {
  background: #eef8eb;
}

.accounting-flow-overview-table tr.is-total th,
.accounting-flow-overview-table tr.is-total td {
  background: #f5f7f8;
  font-weight: 800;
}

.accounting-flow-overview-table tr.is-total td.is-current {
  background: #e7f3e4;
}

.accounting-flow-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.accounting-reference-panel {
  border-radius: 10px;
  box-shadow: none;
}

.accounting-reference-panel-heading {
  padding: 17px 20px 13px;
}

.accounting-reference-page .accounting-reference-table .accounting-reference-account-column {
  min-width: 232px;
  width: 232px;
}

.accounting-reference-page .accounting-reference-table .accounting-reference-month-group {
  min-width: 184px;
  width: 184px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-detail-amount,
.accounting-reference-page .accounting-reference-table .numeric-cell.is-summary-amount {
  min-width: 72px;
  width: 72px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-ratio {
  min-width: 40px;
  width: 40px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell.is-year-total {
  min-width: 112px;
  width: 112px;
}

.accounting-reference-page .accounting-reference-table .numeric-cell {
  font-variant-numeric: tabular-nums;
  padding-inline: 3px;
}

/* Clobe-style closing ledger: compact hierarchy, flat rows, no sheet row gutter. */
.accounting-cashflow-page .accounting-reference-table-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.accounting-cashflow-page .accounting-reference-table th,
.accounting-cashflow-page .accounting-reference-table td {
  border-bottom: 1px solid #e8eaed;
  border-right: 0;
}

.accounting-cashflow-page .accounting-reference-table thead th {
  background: #f7f8fa;
  color: #525866;
  font-size: 11px;
  font-weight: 600;
}

.accounting-cashflow-page .accounting-reference-table .accounting-reference-month-group,
.accounting-cashflow-page .accounting-reference-table .numeric-cell.is-detail-amount {
  border-left: 1px solid #e1e4e8;
}

.accounting-cashflow-page .accounting-reference-table tbody tr:not(.is-major-section):not(.is-total):hover > td {
  background-color: #f7f9fb;
}

.accounting-cashflow-page .accounting-reference-table tr.is-major-section td {
  background: #eef1f4;
  border-top: 1px solid #d9dde3;
  color: #20242b;
}

.accounting-cashflow-page .accounting-reference-table tr.is-subtotal td {
  background: #f7f8fa;
  color: #303640;
}

.accounting-cashflow-page .accounting-reference-table tr.is-total td {
  background: #f2f4f6;
  border-top: 1px solid #d9dde3;
  color: #20242b;
}

.accounting-cashflow-page .accounting-reference-table tr.is-detail td,
.accounting-cashflow-page .accounting-reference-table tr.is-detail .accounting-reference-account-column {
  background: #fff;
  color: #667085;
}

.accounting-cashflow-page .accounting-reference-table tr.is-level-2 td,
.accounting-cashflow-page .accounting-reference-table tr.is-level-2 .accounting-reference-account-column {
  background: #fafafa;
}

.accounting-cashflow-page .accounting-reference-line {
  gap: 4px;
  min-width: 0;
}

.accounting-cashflow-page .accounting-reference-line {
  padding-right: 6px;
}

.accounting-cashflow-page .accounting-reference-table tr.is-level-1 .accounting-reference-line {
  padding-left: 12px;
}

.accounting-cashflow-page .accounting-reference-table tr.is-level-2 .accounting-reference-line {
  padding-left: 24px;
}

.accounting-cashflow-page .accounting-reference-table tr.is-level-3 .accounting-reference-line {
  padding-left: 36px;
}

.accounting-cashflow-page .accounting-reference-row-chevron,
.accounting-cashflow-page .accounting-reference-toggle-placeholder {
  flex-basis: 12px;
  width: 12px;
}

.accounting-cashflow-page .accounting-reference-row-chevron {
  color: #8a9099;
  font-size: 16px;
  font-weight: 500;
}

.accounting-cashflow-page .accounting-reference-account-trigger {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-cashflow-page .accounting-reference-account-trigger:hover,
.accounting-cashflow-page .accounting-reference-account-trigger:focus-visible {
  text-decoration: none;
}

/* Keep period cues above the neutral row treatment. */
.accounting-cashflow-page .accounting-reference-table tbody td.is-current,
.accounting-cashflow-page .accounting-reference-table tbody tr:hover > td.is-current {
  background: #edf8e9;
}

.accounting-cashflow-page .accounting-reference-table tbody td.is-current.is-summary-amount,
.accounting-cashflow-page .accounting-reference-table tbody tr:hover > td.is-current.is-summary-amount {
  background: #e5f3e1;
}

.accounting-cashflow-page .accounting-reference-table tbody td.is-year-total,
.accounting-cashflow-page .accounting-reference-table tbody tr:hover > td.is-year-total {
  background: #fff2bd;
}

.accounting-cashflow-page .accounting-reference-table thead .numeric-cell.is-year-total {
  background: #f8d66d;
}

.accounting-evidence-dialog.accounting-evidence-sheet {
  border-radius: 16px 0 0 16px;
  display: none;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  height: calc(100dvh - 60px);
  inset: 60px 0 0 auto;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  position: fixed;
  width: min(1480px, calc(100vw - var(--sidebar-width)));
}

.accounting-evidence-dialog.accounting-evidence-sheet[open] {
  display: grid;
}

.accounting-evidence-dialog.accounting-evidence-sheet::backdrop {
  backdrop-filter: none;
  background: rgba(18, 22, 27, 0.5);
}

.accounting-evidence-sheet .management-dialog-heading {
  border-bottom: 1px solid #e4e7eb;
  margin: 0;
  padding: 16px 20px 13px;
}

.accounting-evidence-sheet .management-dialog-heading h2 {
  font-size: 21px;
}

.accounting-evidence-sheet .accounting-evidence-context,
.accounting-evidence-sheet .accounting-evidence-source-summary,
.accounting-evidence-sheet .accounting-evidence-toolbar,
.accounting-evidence-sheet .accounting-evidence-totals,
.accounting-evidence-sheet .accounting-evidence-reconciliation-note {
  margin-left: 18px;
  margin-right: 18px;
}

.accounting-evidence-sheet .accounting-evidence-context {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 9px;
  margin-top: 12px;
}

.accounting-evidence-sheet .accounting-evidence-context > div {
  border-radius: 7px;
  padding: 8px 10px;
}

.accounting-evidence-sheet .accounting-evidence-source-summary {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-bottom: 9px;
}

.accounting-evidence-sheet .accounting-evidence-source-card {
  min-height: 66px;
  padding: 8px 10px;
}

.accounting-evidence-sheet .accounting-evidence-source-card strong {
  font-size: 16px;
}

.accounting-evidence-sheet .accounting-evidence-toolbar {
  padding: 8px 0;
}

.accounting-evidence-sheet .accounting-evidence-body {
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 0 18px;
}

.accounting-evidence-sheet .accounting-evidence-table-wrap {
  max-height: none;
  min-height: 100%;
}

.accounting-evidence-sheet .accounting-evidence-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.accounting-evidence-sheet .accounting-evidence-table {
  min-width: 1180px;
}

.accounting-evidence-sheet .accounting-evidence-table input,
.accounting-evidence-sheet .accounting-evidence-table select {
  background: #fff;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  color: #252a31;
  font: inherit;
  height: 32px;
  min-width: 120px;
  padding: 4px 8px;
  width: 100%;
}

.accounting-evidence-sheet .accounting-evidence-table input:disabled,
.accounting-evidence-sheet .accounting-evidence-table select:disabled {
  background: transparent;
  border-color: transparent;
  color: #4f5660;
  opacity: 1;
}

.accounting-evidence-sheet .accounting-evidence-table td:nth-child(5) {
  min-width: 190px;
}

.accounting-evidence-sheet .accounting-evidence-table td:nth-child(7) {
  min-width: 170px;
}

.accounting-evidence-row-action {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 150px;
  white-space: nowrap;
}

.accounting-evidence-row-action .button {
  min-height: 30px;
  padding: 5px 9px;
}

.accounting-evidence-sheet .accounting-evidence-totals {
  margin-top: 9px;
}

.accounting-evidence-sheet .accounting-evidence-reconciliation-note {
  margin-bottom: 12px;
  margin-top: 9px;
}

@media (max-width: 1100px) {
  .accounting-evidence-dialog.accounting-evidence-sheet {
    border-radius: 14px 0 0 14px;
    height: calc(100dvh - 24px);
    inset: 12px 0 0 auto;
    width: calc(100vw - 18px);
  }

  .accounting-evidence-sheet .accounting-evidence-context {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .accounting-cashflow-page .main {
    padding-inline: 10px;
  }

  .accounting-flow-controls,
  .accounting-flow-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-flow-control-actions {
    justify-content: space-between;
  }

  .accounting-flow-overview-table thead th:first-child,
  .accounting-flow-overview-table tbody th {
    min-width: 170px;
    width: 170px;
  }

  .accounting-evidence-sheet .accounting-evidence-context {
    grid-template-columns: 1fr 1fr;
  }
}

/* Unified accordion navigation.
 * Business areas and their child menus share one compact rail so the data
 * workspace does not pay for a permanently open adjacent navigation panel. */
:root {
  --sidebar-primary-width: 264px;
  --sidebar-secondary-width: 0px;
  --sidebar-width: var(--sidebar-primary-width);
}

.sidebar--unified {
  grid-template-columns: minmax(0, 1fr);
  width: var(--sidebar-width);
}

.sidebar--unified .sidebar-primary {
  width: 100%;
  padding: 12px 9px 10px;
  border-right: 0;
}

.sidebar--unified .sidebar-primary-heading {
  min-height: 58px;
  padding: 0 9px 10px;
}

.sidebar--unified .sidebar-primary-list {
  padding: 7px 1px 12px;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: #c8cbd0 transparent;
}

.sidebar--unified .sidebar-secondary {
  display: none !important;
}

.sidebar--unified .sidebar-secondary-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 4px 4px 9px;
  background: #f3f3f3;
}

.sidebar--unified .sidebar-menu-search {
  min-height: 36px;
  border-color: #d4d6d9;
  border-radius: 8px;
  background: #fff;
}

.sidebar--unified .sidebar-menu-search input {
  height: 34px;
  font-size: 13px;
}

.sidebar--unified .sidebar-primary-item {
  position: relative;
  min-height: 38px;
  padding: 0 11px;
  gap: 10px;
  border-radius: 7px;
  color: #30343a;
  font-size: 14px;
  font-weight: 700;
}

.sidebar--unified button.sidebar-primary-item::after {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid #737a84;
  border-bottom: 1.5px solid #737a84;
  content: "";
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.sidebar--unified button.sidebar-primary-item.is-expanded::after {
  transform: rotate(225deg);
}

.sidebar--unified .sidebar-primary-item:hover {
  color: #111;
  background: #e6e7e9;
}

.sidebar--unified .sidebar-primary-item.is-active {
  color: #111;
  background: transparent;
  font-weight: 850;
}

.sidebar--unified .sidebar-primary-item.is-active:hover {
  background: #e6e7e9;
}

.sidebar--unified .sidebar-panel {
  height: auto;
  padding: 0 5px 8px 38px;
  overflow: visible;
  background: transparent;
}

.sidebar--unified .sidebar-panel[hidden],
.sidebar--unified .is-search-hidden {
  display: none !important;
}

.sidebar--unified .sidebar-panel-heading,
.sidebar--unified .sidebar-search-panel {
  display: none;
}

.sidebar--unified .sidebar-panel-heading + .sidebar-menu-section,
.sidebar--unified .sidebar-panel-heading + .nav-subgroup,
.sidebar--unified .sidebar-panel-heading + .sidebar-search-results {
  margin-top: 0;
}

.sidebar--unified .sidebar-menu-section,
.sidebar--unified .nav-subgroup {
  margin: 0;
  padding: 1px 0 3px;
  border-top: 0;
}

.sidebar--unified .sidebar-menu-section + .sidebar-menu-section,
.sidebar--unified .nav-subgroup + .sidebar-menu-section,
.sidebar--unified .sidebar-menu-section + .nav-subgroup,
.sidebar--unified .nav-subgroup + .nav-subgroup {
  margin-top: 1px;
  border-top: 0;
}

.sidebar--unified .sidebar-menu-section h3,
.sidebar--unified .nav-subgroup-label {
  min-height: 29px;
  margin: 0;
  padding: 4px 7px;
  color: #666d76;
  font-size: 12px;
  font-weight: 750;
}

.sidebar--unified .sidebar-panel .nav-subgroup-children {
  width: calc(100% - 8px);
  margin: 0 0 2px 8px;
  padding: 0 0 0 8px;
  border-left: 1px solid #d6d9dd;
}

.sidebar--unified .nav-subgroup-children > a,
.sidebar--unified .sidebar-menu-link,
.sidebar--unified .sidebar-menu-pending {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 13px;
}

.sidebar--unified .nav-subgroup-children > a.is-active,
.sidebar--unified .sidebar-menu-link.is-active {
  color: #17191c;
  background: #dfe1e4;
  box-shadow: none;
  font-weight: 800;
}

.sidebar--unified .sidebar-primary-footer {
  padding: 10px 8px 2px;
  border-top-color: #d9dadd;
  background: #f3f3f3;
}

.sidebar-toggle:checked + .erp-shell .sidebar--unified {
  width: var(--sidebar-width);
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  :root {
    --sidebar-primary-width: min(88vw, 276px);
    --sidebar-width: var(--sidebar-primary-width);
  }

  .sidebar--unified {
    grid-template-columns: minmax(0, 1fr);
    width: var(--sidebar-width);
  }

  .sidebar--unified .sidebar-primary-heading .sidebar-inline-toggle {
    display: grid;
  }
}
/* Shared accounting transaction review: inline counterparties and evidence. */
.accounting-counterparty-cell select {
  display: block;
  width: min(220px, 100%);
  margin-top: 5px;
}

.accounting-inline-link {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted, #667085);
  font: inherit;
  cursor: pointer;
}

.accounting-inline-link:hover { color: #111827; text-decoration: underline; }
.accounting-evidence-open { margin-top: 6px; width: 100%; }

.accounting-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgb(15 23 42 / 22%);
}

.accounting-evidence-drawer {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(720px, calc(100vw - 40px));
  height: 100dvh;
  padding: 24px;
  background: #fff;
  border-left: 1px solid #dfe3e8;
  box-shadow: -20px 0 50px rgb(15 23 42 / 14%);
}

.accounting-evidence-drawer[hidden],
.accounting-drawer-scrim[hidden] {
  display: none !important;
}

.accounting-drawer-head,
.accounting-drawer-actions,
.accounting-evidence-totals {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accounting-drawer-head { justify-content: space-between; padding-bottom: 16px; }
.accounting-drawer-head h2 { margin: 2px 0 6px; }
.accounting-drawer-head p { margin: 0; color: #667085; }
.accounting-evidence-totals { padding: 12px 0 16px; border-block: 1px solid #eceff3; }
.accounting-evidence-totals span { min-width: 0; flex: 1; }
.accounting-evidence-totals small,
.accounting-evidence-totals strong { display: block; }
.accounting-evidence-totals small { margin-bottom: 4px; color: #667085; }
.accounting-evidence-totals strong { font-size: 17px; }
.accounting-evidence-totals .is-negative { color: #dc2626; }
.accounting-evidence-list { overflow: auto; padding: 16px 2px; }
.accounting-evidence-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  cursor: pointer;
}
.accounting-evidence-card:hover { border-color: #aab2bd; background: #fafbfc; }
.accounting-evidence-card:has(input:checked) { border-color: #111827; background: #f8fafc; }
.accounting-evidence-card-copy,
.accounting-evidence-card-copy > span { display: block; }
.accounting-evidence-card-copy > span:first-child { display: flex; justify-content: space-between; gap: 10px; }
.accounting-evidence-card-copy time,
.accounting-evidence-card-copy small { color: #667085; }
.accounting-evidence-card-copy small { display: block; margin: 5px 0; }
.accounting-evidence-card-copy b { font-size: 15px; }
.accounting-evidence-tags { display: flex; flex-direction: column; gap: 4px; }
.accounting-evidence-tags em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.accounting-drawer-actions { justify-content: flex-end; padding-top: 14px; border-top: 1px solid #eceff3; }
.accounting-drawer-actions p { flex: 1; margin: 0; color: #667085; }
.accounting-counterparty-create-dialog { width: min(620px, calc(100vw - 32px)); }
.accounting-counterparty-create-dialog textarea { resize: vertical; }

@media (max-width: 720px) {
  .accounting-evidence-drawer { width: 100vw; padding: 16px; }
  .accounting-evidence-totals { align-items: stretch; flex-direction: column; }
  .accounting-evidence-card { grid-template-columns: auto minmax(0, 1fr); }
  .accounting-evidence-tags { grid-column: 2; flex-direction: row; }
}

/* Shared dense-ledger contract: bank, card and invoice screens keep the same
   context -> saved views -> filters -> ledger rhythm. */
.accounting-page .workspace-page-context {
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.accounting-page .workspace-page-context-title {
  grid-template-columns: auto auto minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
}

.accounting-page .workspace-page-context-title small {
  display: none;
}

.accounting-page .workspace-page-context-title strong {
  font-size: 18px;
}

.accounting-page .accounting-guide-popover {
  position: relative;
}

.accounting-page .accounting-guide-popover summary {
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}

.accounting-page .accounting-guide-popover > div {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgb(15 23 42 / 14%);
}

.accounting-page .accounting-guide-popover p {
  margin: 6px 0 0;
  color: #667085;
  line-height: 1.55;
}

.accounting-page .accounting-period-mode-tabs a {
  min-width: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  color: #8d9399;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.accounting-page .accounting-period-mode-tabs a.is-active {
  color: #fff;
  background: #2f3133;
}

.accounting-page .accounting-range-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
}

.accounting-page .accounting-range-navigation a {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  color: #111827;
  text-decoration: none;
}

.accounting-page .accounting-range-navigation strong {
  min-width: 150px;
  text-align: center;
}

.accounting-page .accounting-filter-panel.is-bank-ledger {
  margin-bottom: 0;
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

.accounting-page .accounting-ledger-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  flex-wrap: wrap;
}

.accounting-page .accounting-ledger-filterbar select,
.accounting-page .accounting-ledger-filterbar input,
.accounting-page .accounting-ledger-filterbar .button {
  height: 32px;
  min-height: 32px;
  font-size: 12px;
}

.accounting-page .accounting-segmented-filter {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
}

.accounting-page .accounting-segmented-filter a {
  padding: 7px 9px;
  color: #667085;
  text-decoration: none;
}

.accounting-page .accounting-segmented-filter a.is-active {
  color: #111827;
  background: #f2f4f7;
  font-weight: 750;
}

.accounting-page .accounting-review-panel.is-bank-ledger {
  margin-top: 0;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: none;
}

.accounting-page .accounting-review-panel.is-bank-ledger .accounting-review-table {
  min-width: 1480px;
}

.accounting-page .accounting-column-groups th {
  padding: 6px 10px !important;
  border-bottom: 1px solid #d0d5dd !important;
  color: #475467;
  background: #f8fafc;
  text-align: left;
  font-weight: 750;
}

.accounting-page .accounting-column-groups th:last-child {
  border-left: 1px solid #d0d5dd;
}

.accounting-page .accounting-review-panel.is-bank-ledger tbody tr:hover {
  background: #eef6ff;
}

@media (max-width: 1100px) {
  .accounting-page .workspace-page-context {
    align-items: flex-start;
    flex-direction: column;
  }
  .accounting-page .workspace-page-context-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Final accounting-ledger cascade. These selectors intentionally live after
   legacy accounting rules so every source ledger keeps one visual contract. */
.accounting-ledger-page .accounting-unified-filter {
  margin-bottom: 0;
  padding: 10px 14px 11px;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

.accounting-ledger-page .accounting-unified-ledger {
  margin-top: 0;
  overflow: hidden;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: none;
}

.accounting-ledger-page .accounting-unified-ledger .operational-table-wrap {
  max-height: calc(100dvh - 290px);
  min-height: 300px;
  overflow: auto;
}

.accounting-ledger-page .accounting-unified-ledger .accounting-ledger-table {
  width: max-content;
  min-width: 100%;
}

.accounting-ledger-page .accounting-unified-ledger .accounting-ledger-table th,
.accounting-ledger-page .accounting-unified-ledger .accounting-ledger-table td {
  height: 42px;
  padding: 5px 9px;
  vertical-align: middle;
  white-space: nowrap;
}

.accounting-ledger-page .accounting-unified-ledger .accounting-ledger-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.accounting-ledger-page .accounting-unified-ledger .accounting-column-groups th {
  height: 28px;
  padding-block: 4px !important;
}

.accounting-ledger-page .accounting-unified-ledger tbody tr:hover > td {
  background: #eef6ff;
}

.accounting-ledger-page .accounting-unified-ledger input,
.accounting-ledger-page .accounting-unified-ledger select {
  height: 30px;
  padding: 3px 8px;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  color: #282d33;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.accounting-ledger-page .accounting-unified-ledger .accounting-note-cell input { min-width: 175px; }
.accounting-ledger-page .accounting-unified-ledger .accounting-counterparty-cell { min-width: 178px; }
.accounting-ledger-page .accounting-unified-ledger .accounting-category-cell select { min-width: 140px; }
.accounting-ledger-page .accounting-unified-ledger .accounting-description { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.accounting-ledger-page .accounting-unified-ledger .numeric-cell { min-width: 96px; font-variant-numeric: tabular-nums; }
.accounting-ledger-page .accounting-row-form { display: none; }
.accounting-ledger-page .accounting-status-action { min-width: 70px; }
.accounting-ledger-page .accounting-evidence-drawer[hidden],
.accounting-ledger-page .accounting-drawer-scrim[hidden] { display: none !important; }

.accounting-counterparty-trigger {
  display: inline-flex;
  width: 100%;
  min-width: 170px;
  height: 30px;
  padding: 3px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  color: #282d33;
  background: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.accounting-ledger-page .accounting-category-cell select,
.accounting-counterparty-trigger {
  height: 30px;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  color: #282d33;
  background-color: #fff;
  font: inherit;
  font-size: 12px;
}

.accounting-state-badge.is-saving { color: #805b00; background: #fff3cd; }

.accounting-counterparty-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accounting-counterparty-trigger:focus-visible {
  border-color: #5b8def;
  outline: 2px solid rgb(91 141 239 / 18%);
}

.accounting-counterparty-popover {
  position: fixed;
  z-index: 1350;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(410px, calc(100dvh - 24px));
  padding: 8px;
  overflow: hidden;
  border: 1px solid #d8dde3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgb(15 23 42 / 18%);
}

.accounting-counterparty-popover[hidden] { display: none !important; }
.accounting-counterparty-search { display: block; margin-bottom: 6px; }
.accounting-counterparty-search input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #cfd5dc;
  border-radius: 7px;
  font: inherit;
}
.accounting-counterparty-options { min-height: 42px; overflow-y: auto; }
.accounting-counterparty-options button,
.accounting-counterparty-add {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  color: #343a40;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.accounting-counterparty-options button:hover { background: #f1f3f5; }
.accounting-counterparty-add {
  margin-top: 6px;
  border: 1px solid #d8dde3;
  text-align: center;
  font-weight: 800;
}
.accounting-counterparty-add:hover { border-color: #9da5ae; background: #f8f9fa; }
.accounting-counterparty-empty { margin: 8px 6px; color: #7a828a; font-size: 12px; }

/* Accounting automation rule workflow.  The editor, preview and apply result
   intentionally stay in one modal so transaction review context is retained. */
.automation-rule-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: visible;
}
.automation-rule-dialog > form { min-width: 0; }
.automation-rule-form-section {
  padding: 18px 22px;
  border-top: 1px solid #e7eaee;
}
.automation-rule-form-section h3,
.automation-rule-preview-toolbar h3 { margin: 0 0 6px; font-size: 18px; }
.automation-rule-form-section > p,
.automation-rule-preview-toolbar p { margin: 0; color: #667085; }
.automation-rule-meta-grid,
.automation-action-grid {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.automation-rule-meta-grid label,
.automation-action-grid label,
.automation-rule-counterparty-fields label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #343a40;
  font-size: 12px;
  font-weight: 750;
}
.automation-rule-meta-grid input,
.automation-rule-meta-grid select,
.automation-action-grid input,
.automation-action-grid select,
.automation-rule-counterparty-fields input,
.automation-counterparty-trigger {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  color: #20252a;
  background: #fff;
  font: inherit;
}
.automation-action-grid label.is-disabled { color: #9aa1a9; }
.automation-action-grid label.is-disabled select { color: #9aa1a9; background: #f5f6f7; }
.automation-action-memo { grid-column: 1 / -1; }
.automation-counterparty-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.automation-counterparty-trigger:hover,
.automation-counterparty-trigger[aria-expanded="true"] { border-color: #8e969f; background: #f8f9fa; }
.automation-condition-list { display: grid; margin: 14px 0 10px; gap: 8px; }
.automation-condition-row {
  display: grid;
  grid-template-columns: minmax(132px, .8fr) minmax(130px, .75fr) minmax(170px, 1.4fr) minmax(150px, 1fr) 36px;
  gap: 8px;
  align-items: center;
}
.automation-condition-row select,
.automation-condition-row input {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.automation-condition-row [hidden] { display: none; }
.automation-condition-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  color: #69717a;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.automation-condition-remove:hover { color: #b42318; background: #fff1f0; }
.automation-rule-preview-stage { padding: 18px 22px 22px; }
.automation-rule-preview-toolbar {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.automation-rule-preview-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.automation-rule-preview-scroll {
  max-height: min(390px, calc(100dvh - 300px));
  overflow: auto;
  border: 1px solid #e1e5e9;
  border-radius: 10px;
  overscroll-behavior: contain;
}
.automation-rule-inline-preview-table { width: 100%; margin: 0; }
.automation-rule-inline-preview-table thead { position: sticky; z-index: 1; top: 0; }
.automation-rule-inline-preview-table th { background: #f5f6f7; }
.automation-rule-inline-preview-table th:nth-child(1),
.automation-rule-inline-preview-table td:nth-child(1) { width: 84px; }
.automation-rule-inline-preview-table th:nth-child(2),
.automation-rule-inline-preview-table td:nth-child(2) { width: 108px; }
.automation-rule-inline-preview-table th:nth-child(3),
.automation-rule-inline-preview-table td:nth-child(3) { width: 104px; }
.automation-rule-inline-preview-table th:last-child,
.automation-rule-inline-preview-table td:last-child { width: 130px; }
.automation-rule-preview-note { margin: 9px 2px 0; color: #667085; font-size: 12px; }
.automation-rule-counterparty-popover { z-index: 2300; width: min(360px, calc(100vw - 28px)); }
.automation-rule-counterparty-dialog { width: min(520px, calc(100vw - 32px)); }
.automation-rule-counterparty-fields { display: grid; padding: 18px 22px; gap: 13px; }

@media (max-width: 720px) {
  .automation-rule-dialog { width: calc(100vw - 20px); }
  .automation-rule-meta-grid,
  .automation-action-grid { grid-template-columns: 1fr; }
  .automation-action-memo { grid-column: auto; }
  .automation-condition-row { grid-template-columns: 1fr 1fr 36px; }
  .automation-condition-row [data-rule-value],
  .automation-condition-row [data-rule-value-to] { grid-column: 1 / 3; }
  .automation-condition-row .automation-condition-remove { grid-column: 3; grid-row: 1; }
  .automation-rule-preview-toolbar { align-items: stretch; flex-direction: column; }
  .automation-rule-preview-actions { justify-content: flex-end; }
}

.accounting-sales-inline-totals { margin-left: auto; }
.accounting-sales-inline-totals span { padding-left: 12px; border-left: 1px solid #e1e5e9; }
.accounting-sales-inline-totals b { margin-left: 4px; color: #20252a; font-size: 14px; }
.sales-evidence-filterbar > strong { margin-right: 4px; font-size: 12px; }
.accounting-filter-chip,
.sales-page-size a {
  display: inline-flex;
  min-height: 30px;
  padding: 5px 10px;
  align-items: center;
  border: 1px solid #dfe2e5;
  border-radius: 999px;
  color: #5f666d;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.accounting-filter-chip.is-active,
.sales-page-size a.is-active { border-color: #2f3133; color: #fff; background: #2f3133; }
.sales-page-size { display: flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
  .accounting-ledger-page .accounting-unified-ledger .operational-table-wrap { max-height: none; }
  .accounting-sales-inline-totals { margin-left: 0; }
}

/* Shared anchored period-range control. Monthly ledgers use the same contract;
   daily sources can opt into the day mode without creating another modal. */
.period-range-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-range-modes {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: #f2f4f6;
}

.period-range-modes a,
.period-range-modes span {
  display: inline-flex;
  min-width: 34px;
  padding: 6px 9px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #667085;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.period-range-modes a.is-active,
.period-range-modes span.is-active { color: #fff; background: #282d33; }
.period-range-modes .is-disabled {
  color: #aeb4bb;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
  user-select: none;
}
.period-navigation-modes { flex: 0 0 auto; }
.period-range-anchor { position: relative; }
.period-range-trigger {
  display: inline-flex;
  min-height: 36px;
  padding: 7px 12px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  color: #20252a;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.period-range-trigger:hover { border-color: #9da5ae; background: #f8f9fa; }
.period-range-trigger > span { color: #667085; font-size: 11px; }
.period-range-popover {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  left: 0;
  width: min(560px, calc(100vw - 40px));
  max-height: min(620px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid #d8dde3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 46px rgb(15 23 42 / 18%);
}
.period-range-popover[hidden] { display: none !important; }
.period-range-popover form { display: grid; grid-template-columns: 154px minmax(0, 1fr); min-height: 420px; }
.period-range-presets {
  display: flex;
  padding: 18px 12px;
  flex-direction: column;
  gap: 3px;
  background: #f7f8f9;
}
.period-range-presets > strong { padding: 0 10px 9px; font-size: 14px; }
.period-range-presets button {
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: #343a40;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.period-range-presets button:hover { background: #e9ecef; }
.period-range-selection {
  display: grid;
  min-width: 0;
  padding: 18px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.period-range-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.period-range-values div { display: grid; gap: 5px; }
.period-range-values span { color: #667085; font-size: 12px; font-weight: 700; }
.period-range-values strong { padding: 9px 10px; border-radius: 7px; background: #f5f6f7; font-size: 13px; }
.period-range-help { margin: 9px 0 5px; color: #667085; font-size: 12px; }
.period-range-grid { min-height: 0; padding-right: 4px; overflow-y: auto; }
.period-range-grid section { margin-top: 10px; }
.period-range-grid section > strong { display: block; margin-bottom: 5px; font-size: 13px; }
.period-range-grid section > div,
.period-range-grid.is-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.period-range-grid.is-month-grid section > div { grid-template-columns: repeat(3, 1fr); }
.period-range-grid.is-quarter-grid section > div { grid-template-columns: repeat(2, 1fr); }
.period-range-grid.is-day-grid section { padding-bottom: 8px; border-bottom: 1px solid #eef0f2; }
.period-range-weekdays,
.period-range-days { display: grid; grid-template-columns: repeat(7, minmax(30px, 1fr)); gap: 2px; }
.period-range-weekdays { margin-bottom: 2px; color: #8a929b; text-align: center; font-size: 11px; font-weight: 700; }
.period-range-weekdays span,
.period-range-days > span { display: grid; min-height: 32px; place-items: center; }
.period-range-days > span.is-disabled { color: #c1c6cc; }
.period-range-grid button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  color: #343a40;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.period-range-grid button:hover { background: #eef1f4; }
.period-range-grid button.is-in-range { background: #eef1f4; }
.period-range-grid button.is-start,
.period-range-grid button.is-end { color: #fff; background: #282d33; font-weight: 800; }
.period-range-actions { display: flex; padding-top: 12px; justify-content: flex-end; gap: 8px; }

.accounting-sales-summary-grid {
  display: grid;
  margin-bottom: 10px;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
}
.accounting-sales-summary-grid > div {
  padding: 13px 15px;
  border: 1px solid #e1e5e9;
  border-radius: 10px;
  background: #fff;
}
.accounting-sales-summary-grid span { display: block; margin-bottom: 5px; color: #667085; font-size: 12px; }
.accounting-sales-summary-grid strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.sales-tax-invoice-row td { background: #fffaf0; }
.sales-tax-invoice-row td:nth-child(2) small { display: block; margin-top: 3px; color: #805b00; font-size: 11px; }

@media (max-width: 900px) {
  .period-range-picker { align-items: flex-start; flex-direction: column; }
  .period-range-popover { position: fixed; top: 72px; left: 20px; }
  .accounting-sales-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}