:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --text: #1d2939;
  --muted: #667085;
  --border: #d0d5dd;
  --accent: #155eef;
  --accent-dark: #0042c2;
  --danger: #c62828;
  --danger-bg: #fdecec;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(180deg, #f8fbff 0%, #eef2f7 100%);
  color: var(--text);
}

.hidden {
  display: none !important;
}

#app {
  display: flex;
  justify-content: center;
  padding: 36px 16px 0;
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

h1, h2, h3, h4 {
  margin-top: 0;
}

header {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 5px 20px rgba(16, 24, 40, 0.06);
}

.main-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.main-controls-left, .main-controls-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.main-controls-right {
  margin-left: auto;
  justify-content: flex-end;
}

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

button {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover { background: #f8fafc; }

#add-income-btn, #incomes-dir-btn, #markup-btn {
  background: rgba(27, 143, 58, 0.14);
  border-color: #2f9e4f;
  color: #1b8f3a;
}

#add-expense-btn, #expenses-dir-btn {
  background: rgba(198, 40, 40, 0.14);
  border-color: #cc4b4b;
  color: #c62828;
}

.primary-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

main {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 5px 20px rgba(16, 24, 40, 0.06);
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-btn {
  min-width: 130px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  font-weight: 700; /* Type name is now bold */
}

.filter-btn.active {
  background: #e0ebff;
  border-color: #8cb4ff;
  color: #0f3aa8;
}

.filter-btn-amount {
  font-weight: 400; /* Amount is now thin */
  font-size: 13px;  /* Amount is smaller */
  opacity: 0.8;
}

.total-display {
  margin: 10px 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px; /* Fixed gap */
  font-size: 17px;
  font-weight: 600;
}

/* Color coding for Totals */
#total-incomes-period, .total-display span:nth-child(1), .total-display span:nth-child(2) {
    color: #1b8f3a !important; /* Incomes Green */
}

#total-expenses {
    color: #c62828 !important; /* Spent Red */
}

.total-earned-positive { color: #1b8f3a !important; }
.total-earned-negative { color: #c62828 !important; }

.share-over-limit {
    color: #c62828 !important;
    font-weight: 700;
}
.total-earned-negative { color: #c62828 !important; }

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border-bottom: 1px solid #eaecf0;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  font-size: 14px;
  color: var(--muted);
  background: #f9fafb;
}

.category-group-row td {
  background: #f7f9fc;
  font-weight: 700;
  border-top: 2px solid #d8dee8;
}

.table-summary-row td {
  background: #f9fafb;
  font-weight: 700;
  border-top: 2px solid #d8dee8;
}

.table-summary-row.is-accent td {
  background: #e0ebff;
  color: #173a96;
}

#box-cost-table th:nth-child(2),
#box-cost-table th:nth-child(3),
#box-cost-table td:nth-child(2),
#box-cost-table td:nth-child(3) {
  text-align: right;
}

.category-toggle-btn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.category-chevron {
  margin-top: 4px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.category-group-row.is-expanded .category-chevron {
  transform: rotate(90deg);
}

.expense-title-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.expense-name { font-weight: 600; }
.expense-category-name { font-size: 12px; color: var(--muted); }

/* --- Progress Bars (KPI) --- */
.multi-progress-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.multi-progress-row {
    display: flex;
    width: 100%;
}

.multi-progress-label {
    display: flex;
    align-items: center;
    gap: 5px; /* Exact gap as requested */
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.multi-progress-label i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.fa-bullseye { background: #fee2e2; color: #ef4444; }
.fa-medal    { background: #fef3c7; color: #f59e0b; }
.fa-trophy   { background: #dbeafe; color: #3b82f6; }
.fa-star     { background: #d1fae5; color: #10b981; }
.fa-crown    { background: #f3e8ff; color: #8b5cf6; }

.multi-progress-bar-wrapper {
    position: relative;
    background: #f0f3f7;
    border-radius: 6px;
    height: 28px;
    overflow: hidden;
}

.multi-progress-fill {
    height: 100%;
    width: 0%;
    transition: width 0.8s ease;
    background-color: var(--accent);
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.25) 8px,
        rgba(255, 255, 255, 0.25) 10px
    );
}

.multi-progress-fill.completed {
    background-color: #10b981;
}

.multi-progress-bonus {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.multi-progress-bonus.reached {
    color: #059669;
}

/* --- Scale Logic --- */
@media (min-width: 769px) {
    .multi-progress-row {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .multi-progress-info {
        width: 180px;
        flex-shrink: 0;
    }

    .multi-progress-row[data-milestone="1m"] .multi-progress-bar-wrapper {
        flex: 2;
    }

    .multi-progress-row:not([data-milestone="1m"]) .multi-progress-bar-wrapper {
        flex: 1;
    }

    .multi-progress-row:not([data-milestone="1m"])::after {
        content: "";
        flex: 1;
    }

    .multi-progress-bonus {
        width: 220px;
        padding-left: 12px;
    }
}

/* --- Mobile Layout --- */
@media (max-width: 768px) {
    .multi-progress-container {
        padding: 15px;
        gap: 25px;
    }

    .multi-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .multi-progress-info {
        width: 100%;
    }

    .multi-progress-label {
        font-size: 1rem;
    }

    .multi-progress-bar-wrapper {
        width: 100% !important;
        height: 32px !important;
        margin: 4px 0;
        flex: none !important;
    }

    .multi-progress-bonus {
        width: 100%;
        text-align: right;
        font-size: 0.95rem;
        margin-top: 2px;
    }
    
    .total-display {
        font-size: 15px;
    }

}

/* Fixed User Icons at Top Right */
.top-fixed-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 1000;
}

.top-fixed-controls .icon-btn {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    background: #fff;
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-fixed-controls .icon-btn:hover {
    background: var(--accent);
    color: #fff;
}

.manager-block-admin {
    border-bottom: 2px solid #f0f3f7;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.manager-header-stats {
    font-size: 1rem;
    font-weight: normal;
    color: var(--muted);
    margin-left: 10px;
}

/* Modals */
#modal-overlay {
  position: fixed; inset: 0;
  background: rgba(16, 24, 40, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 2000;
}

#modal-content {
  width: min(920px, 100%);
  max-height: 92vh; overflow: auto;
  background: var(--panel); border-radius: 14px;
  padding: 24px; position: relative;
}

#modal-content.modal-breakeven {
  width: min(1560px, 100%);
  padding: 22px;
}

#modal-close-btn { position: absolute; top: 12px; right: 12px; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; background: #f2f4f7; }

.modal-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-title-row h2 { margin-bottom: 0; }
.limit-lock-btn { width: 44px; height: 44px; border-radius: 50%; color: var(--muted); flex-shrink: 0; }
.limit-lock-btn.is-active { background: #e0ebff; border-color: #8cb4ff; color: #0f3aa8; }
.form-group { display: grid; gap: 6px; margin-bottom: 16px; }
.form-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-hint { margin: -6px 0 16px; font-size: 12px; color: var(--muted); }
input, select, textarea { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 16px; }
.button-group { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.limits-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; background: #fff; }
.limits-editor-table { min-width: 700px; }
.limits-editor-table th, .limits-editor-table td { white-space: nowrap; }
.limits-editor-table th:first-child, .limits-editor-table td:first-child { min-width: 180px; white-space: normal; }
.limits-editor-table input { min-width: 120px; }
.limit-month-amount.is-locked { border-color: #8cb4ff; background: #eef4ff; }
.markup-months-wrap { margin-bottom: 16px; }
.markup-editor-table { min-width: 420px; }
.charts-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%);
  padding: 16px;
}
.breakeven-modal {
  display: grid;
  gap: 18px;
}
.breakeven-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.breakeven-toolbar-group {
  margin-bottom: 0;
}
.breakeven-toolbar select,
.breakeven-toolbar input {
  height: 48px;
}
#breakeven-markup-input[readonly] {
  background: #f8fafc;
  color: #101828;
  font-weight: 700;
}
.breakeven-toolbar input:disabled {
  background: #f8fafc;
  color: #101828;
  font-weight: 700;
  cursor: not-allowed;
}
.breakeven-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
}
.breakeven-balance-card,
.breakeven-chart-card,
.breakeven-stat-card {
  border-radius: 28px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08);
}
.breakeven-balance-card {
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
}
.breakeven-balance-title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.02em;
}
.breakeven-balance-title span {
  display: block;
  margin-top: 8px;
  color: #475467;
  font-size: 14px;
  font-weight: 600;
}
.breakeven-balance-scale {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 14px;
  margin: 22px 0 18px;
  flex: 1;
}
.breakeven-balance-scale-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 0;
  color: #101828;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.breakeven-balance-scale-track {
  position: relative;
  width: 24px;
  height: 100%;
  min-height: 540px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f6f8 0%, #edf1f5 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.05);
}
.breakeven-balance-scale-positive,
.breakeven-balance-scale-negative {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 999px;
}
.breakeven-balance-scale-positive {
  top: 2px;
  bottom: 50%;
  background: linear-gradient(180deg, #22c55e 0%, #33b236 100%);
}
.breakeven-balance-scale-negative {
  top: 50%;
  bottom: 2px;
  background: linear-gradient(180deg, #ff4a4a 0%, #ff2121 100%);
}
.breakeven-balance-scale-zero {
  position: absolute;
  left: -8px;
  right: -8px;
  top: calc(50% - 1px);
  height: 2px;
  background: rgba(16, 24, 40, 0.25);
}
.breakeven-balance-thumb {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: #101828;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.18);
}
.breakeven-balance-value {
  margin-top: auto;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.02em;
}
.breakeven-balance-value.is-positive {
  color: #1b8f3a;
}
.breakeven-balance-value.is-negative {
  color: #d92d20;
}
.breakeven-balance-caption {
  margin-top: 10px;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.breakeven-chart-card {
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}
.breakeven-chart-card h2 {
  margin-bottom: 6px;
  text-align: center;
  font-size: clamp(32px, 3vw, 50px);
  letter-spacing: 0.02em;
}
.breakeven-headline-value {
  margin-bottom: 16px;
  text-align: center;
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.breakeven-headline-value.is-positive {
  color: #1b8f3a;
}
.breakeven-headline-value.is-negative {
  color: #d92d20;
}
.breakeven-chart-wrap {
  min-height: 560px;
}
.breakeven-chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 12px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}
.breakeven-status-note {
  margin: 10px auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff4e5;
  color: #a15c07;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.breakeven-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.breakeven-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.breakeven-legend-dot-income {
  background: #1b8f3a;
}
.breakeven-legend-dot-expenses {
  background: #e85d95;
}
.breakeven-legend-dot-fixed {
  background: #a8acb5;
}
.breakeven-summary {
  display: grid;
  gap: 16px;
}
.breakeven-stat-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 184px;
}
.breakeven-stat-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.breakeven-stat-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.breakeven-stat-icon.is-positive {
  color: #1b8f3a;
  background: rgba(27, 143, 58, 0.12);
}
.breakeven-stat-icon.is-negative {
  color: #d92d20;
  background: rgba(217, 45, 32, 0.1);
}
.breakeven-stat-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.breakeven-stat-value {
  margin-top: 20px;
  font-size: clamp(22px, 1.9vw, 38px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.04em;
  white-space: nowrap;
  word-break: break-word;
}
.breakeven-stat-change {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  justify-items: start;
}
.breakeven-comparison-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 900;
}
.breakeven-comparison-pill.is-positive {
  color: #1b8f3a;
}
.breakeven-comparison-pill.is-negative {
  color: #d92d20;
}
.breakeven-comparison-pill.is-neutral {
  color: #667085;
}
.breakeven-comparison-caption {
  color: #667085;
  font-size: 14px;
  font-weight: 600;
}
.monthly-report-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.monthly-report-toolbar-label {
  font-weight: 700;
}
.report-toolbar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f2f4f7;
  border: 1px solid #e4e7ec;
  color: var(--muted);
  font-weight: 700;
}
.report-toolbar-chip-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.monthly-report-panel {
  margin-bottom: 16px;
}
.monthly-report-chart-wrap {
  min-height: 420px;
}
.monthly-report-table-wrap {
  margin-top: 12px;
}
.monthly-report-table td:nth-child(n + 2),
.monthly-report-table th:nth-child(n + 2) {
  text-align: right;
}
.report-positive {
  color: #1b8f3a;
  font-weight: 700;
}
.report-negative {
  color: #c62828;
  font-weight: 700;
}

@media (max-width: 1320px) {
  .breakeven-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .breakeven-summary {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .form-grid-two {
    grid-template-columns: 1fr;
  }

  #modal-content.modal-breakeven {
    padding: 16px;
  }

  .modal-title-row {
    align-items: flex-start;
  }

  .breakeven-toolbar {
    grid-template-columns: 1fr;
  }

  .breakeven-layout {
    grid-template-columns: 1fr;
  }

  .breakeven-summary {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .breakeven-balance-scale {
    grid-template-columns: 1fr 28px;
  }

  .breakeven-balance-scale-track {
    min-height: 380px;
  }

  .breakeven-chart-card h2 {
    text-align: left;
    font-size: 34px;
  }

  .breakeven-chart-wrap {
    min-height: 380px;
  }

  .monthly-report-chart-wrap {
    min-height: 320px;
  }
}

.dir-row { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dir-title { font-weight: 700; }
.dir-meta { font-size: 12px; color: var(--muted); }
.dir-actions { display: flex; gap: 8px; align-items: center; }

.fixed-buttons {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 900;
}

.fixed-buttons .right-group { display: flex; gap: 10px; pointer-events: auto; }
.fixed-buttons .icon-btn { pointer-events: auto; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 40px; height: 40px; border-radius: 50%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.table-title {
    margin-top: 1em;
}

/* Stage 1: updated login hint */
.login-hint {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}


/* Approved KBK login page v8 */
#app.approved-login-app {
  display: block;
  padding: 0;
}

.approved-login-page {
  min-height: 100vh;
  position: relative;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6,20,42,.28) 0%, rgba(6,20,42,.16) 35%, rgba(6,20,42,.10) 62%, rgba(6,20,42,.16) 100%),
    linear-gradient(180deg, rgba(6,20,42,.10), rgba(6,20,42,.10)),
    url('kbk-login-approved-v8-bg.png') center/cover no-repeat;
}

.approved-login-content {
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 36px 42px 36px;
  position: relative;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.approved-login-card {
  width: min(430px, 100%);
  position: relative;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(223,231,242,.82);
  border-radius: 24px;
  box-shadow: 0 22px 54px rgba(6,20,42,.24);
  padding: 30px 28px 28px;
  overflow: hidden;
}

.approved-login-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg,#0b4db8,#1a73e8,#d5a243);
}

.approved-login-brand { display: flex; justify-content: center; margin-bottom: 14px; }
.approved-login-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(247,250,255,.72);
  border: 1px solid rgba(229,237,247,.95);
}
.approved-login-logo-mark {
  width: 44px;
  height: 34px;
  position: relative;
  border-radius: 9px;
  background: linear-gradient(135deg,#fff 0 45%,#dce8ff 45% 70%,#fff 70%);
  box-shadow: inset 0 -7px 0 rgba(4,35,72,.16);
}
.approved-login-logo-mark:before {
  content: "";
  position: absolute;
  width: 28px;
  height: 10px;
  left: 7px;
  top: 3px;
  background: #f2b35e;
  border-radius: 16px 16px 2px 2px;
  transform: rotate(-25deg);
}
.approved-login-mini strong {
  font-size: 30px;
  letter-spacing: 5px;
  line-height: 1;
  color: #08214b;
}

.approved-login-welcome {
  padding: 2px 6px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(220,228,239,.72);
  margin-bottom: 14px;
}
.approved-login-welcome h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.28;
  color: #081b3d;
}

.approved-login-card h2 {
  margin: 0 0 14px;
  text-align: center;
  font-size: 29px;
  color: #081b3d;
}

.approved-login-field { margin-bottom: 14px; }
.approved-login-field label {
  display: block;
  margin: 0 0 8px;
  font-weight: 850;
  color: #18305a;
}
.approved-login-input-wrap { position: relative; }
.approved-login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7a8aa3;
  font-size: 18px;
}
.approved-login-input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(219,229,240,.95);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  padding: 0 46px 0 44px;
  font-size: 15px;
  font-weight: 700;
  color: #08214b;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(8,27,61,.03);
}
.approved-login-input::placeholder { color: #8b98ae; }
.approved-login-toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #6f7e95;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.approved-login-toggle-pass:hover { color: #173b72; background: transparent; }
.approved-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
  margin-bottom: 18px;
}
.approved-login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #314b74;
  font-weight: 700;
}
.approved-login-remember input { width: 18px; height: 18px; accent-color: #0b58c5; }
.approved-login-submit {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg,#0b58e8,#0053d6);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 28px rgba(11,88,232,.24);
}
.approved-login-submit:hover { background: linear-gradient(90deg,#0b58e8,#0053d6); }
.approved-login-submit:disabled { opacity: .72; cursor: wait; }
.approved-login-secure {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(248,251,255,.74);
  border: 1px solid rgba(227,236,247,.96);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #34507c;
  font-weight: 700;
  line-height: 1.45;
}
.approved-login-lock {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef4ff;
  color: #0b58c5;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .approved-login-content { padding: 18px 18px 24px; justify-content: center; }
  .approved-login-card { width: min(460px, 100%); }
}
@media (max-width: 640px) {
  .approved-login-content { padding: 14px 14px 20px; }
  .approved-login-card { padding: 24px 18px 22px; }
  .approved-login-welcome h1 { font-size: 20px; }
  .approved-login-card h2 { font-size: 24px; }
  .approved-login-row { flex-direction: column; align-items: flex-start; }
}


/* === Approved director dashboard stage 2 === */
#app.approved-director-app{display:block;padding:0;min-height:100vh}
.director-shell{display:flex;min-height:100vh;overflow:hidden;--director-nav:#061f3f;--director-blue:#0b4db8;--director-muted:#637089;--director-line:#dce4ef;--director-card:#fff;--director-green:#09964d;--director-red:#e0182d;--director-shadow:0 6px 18px rgba(8,27,61,.08)}
.director-sidebar{width:250px;background:linear-gradient(180deg,var(--director-nav),#02152e);color:#fff;padding:26px 16px;display:flex;flex-direction:column;gap:22px;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px rgba(2,21,46,.18);z-index:2}
.director-brand{padding:4px 10px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.director-logo-row{display:flex;align-items:center;gap:13px}.director-mark{width:50px;height:40px;position:relative;border-radius:8px;background:linear-gradient(135deg,#fff 0 45%,#d8e8ff 45% 70%,#fff 70%);box-shadow:inset 0 -8px 0 rgba(4,35,72,.18)}.director-mark:before{content:"";position:absolute;width:34px;height:14px;left:8px;top:2px;background:#f2b35e;border-radius:12px 12px 2px 2px;transform:rotate(-25deg)}
.director-brand strong{font-size:35px;letter-spacing:5px;line-height:1}.director-brand small{display:block;margin-top:14px;letter-spacing:2.6px;font-size:11px;line-height:1.45;opacity:.92}
.director-nav{display:flex;flex-direction:column;gap:6px}.director-nav a{display:flex;align-items:center;gap:14px;color:#dbe8ff;text-decoration:none;padding:13px 14px;border-radius:10px;font-weight:650}.director-nav a.active{background:linear-gradient(90deg,#1454ad,#0c3f89);color:#fff;box-shadow:0 8px 18px rgba(20,84,173,.26)}
.director-ico{width:25px;height:25px;border:1.7px solid currentColor;border-radius:6px;display:grid;place-items:center;font-size:14px;flex:0 0 auto}.director-side-note{margin-top:auto;display:flex;gap:11px;align-items:center;padding:12px;color:#cfe0ff;font-weight:700;font-size:13px;line-height:1.25}
.director-main{margin-left:250px;min-height:100vh;width:calc(100% - 250px);padding:28px 28px 40px;background:radial-gradient(circle at 45% 0%,#fff 0,#f5f7fb 42%,#edf2f8 100%);color:#081b3d}
.director-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.director-title h1{margin:0;font-size:28px;letter-spacing:.1px}.director-title p{margin:6px 0 0;color:var(--director-muted);font-weight:600}.director-rate{border:1px solid var(--director-line);background:#fff;box-shadow:var(--director-shadow);border-radius:9px;padding:11px 16px;font-weight:750;color:var(--director-green);display:inline-flex;align-items:center;min-height:42px;font-size:18px;min-width:96px;justify-content:center}
.director-filters{display:flex;justify-content:flex-end;align-items:center;gap:0;margin:8px 0 18px;flex-wrap:wrap}.director-filter-group{display:flex;border:1px solid var(--director-line);border-radius:10px;overflow:hidden;background:#fff}.director-filter{padding:12px 22px;border:0;border-right:1px solid var(--director-line);background:#fff;font-weight:800;color:#12284c}.director-filter:last-child{border-right:0}.director-filter.active{background:#092a5b;color:#fff}.director-date{margin-left:14px;display:flex;align-items:center;gap:12px;color:#40506b;font-weight:700}.director-date-box{background:#fff;border:1px solid var(--director-line);border-radius:9px;padding:12px 17px;min-width:185px;box-shadow:var(--director-shadow);color:#0c2148}
.director-cards{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:16px;margin-bottom:20px}.director-kpi{background:var(--director-card);border:1px solid var(--director-line);border-radius:16px;padding:22px;min-height:152px;box-shadow:var(--director-shadow);display:flex;gap:18px;align-items:flex-start}.director-kpi.clickable{cursor:pointer}.director-kpi.clickable:hover{border-color:#b7c9e3;box-shadow:0 10px 24px rgba(8,27,61,.1)}
.director-kicon{width:50px;height:50px;border-radius:10px;display:grid;place-items:center;color:white;font-size:25px;font-weight:900;box-shadow:inset 0 -10px 14px rgba(0,0,0,.12);flex:0 0 auto}.director-kicon.blue{background:linear-gradient(135deg,#126df0,#023f9f)}.director-kicon.green{background:linear-gradient(135deg,#12b86b,#05773c)}.director-kicon.red{background:linear-gradient(135deg,#f12f40,#b60717)}.director-kicon.purple{background:linear-gradient(135deg,#9d72ef,#5d3bb5)}
.director-kpi h3{margin:5px 0 13px;font-size:16px}.director-value{font-size:24px;font-weight:900;white-space:nowrap}.director-trend{margin-top:18px;font-weight:900}.director-trend .up{color:var(--director-green)}.director-trend .down{color:var(--director-red)}
.director-layout{display:grid;grid-template-columns:310px 1fr 390px;gap:18px}.director-panel,.director-table-card{background:#fff;border:1px solid var(--director-line);border-radius:16px;box-shadow:var(--director-shadow)}.director-panel{padding:20px}.director-panel h2,.director-table-card h2{font-size:20px;margin:0 0 8px}.director-hint{color:var(--director-muted);font-weight:650;line-height:1.35}.director-table-card{padding:20px}.director-table{width:100%;border-collapse:collapse}.director-table th,.director-table td{padding:13px 8px;border-bottom:1px solid var(--director-line);text-align:left}.director-table th{font-size:13px;color:#5e6c84;font-weight:850}.director-table td{font-weight:650}
.director-cost-card{border:1px solid var(--director-line);border-radius:13px;padding:14px 15px;margin-top:14px;box-shadow:0 4px 12px rgba(8,27,61,.05);cursor:pointer;transition:.15s;background:linear-gradient(180deg,#fff,#fbfdff);overflow:hidden}.director-cost-card:hover{border-color:#b6c8e2;box-shadow:0 8px 20px rgba(8,27,61,.08);transform:translateY(-1px)}.director-cost-main{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--director-line)}.director-cost-card .director-kicon{width:40px;height:40px;font-size:20px;flex:0 0 40px}.director-cost-title{font-weight:850;margin-bottom:4px;color:#44536b;font-size:14px}.director-cost-val{font-weight:950;font-size:22px;color:#0b1e43;line-height:1.1}.director-cost-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef3f8;font-weight:850;color:#42516a}.director-cost-row:last-child{border-bottom:0}.director-cost-row>div{display:flex;align-items:center;gap:10px}.director-cost-row span:not(.mini-ico){font-size:14px;line-height:1.2}.director-cost-row strong{font-size:17px;color:#071d3e;white-space:nowrap}.director-cost-row.main strong{font-size:18px;color:#0b4db8}.mini-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#eef5ff;color:#0b55c4;font-size:15px;flex:0 0 28px}.mini-ico.gold{background:#fff5e5;color:#ba7a17}
.director-link{display:inline-flex;margin-top:16px;color:#0b58c5;text-decoration:none;font-weight:900;gap:8px}.pos{color:var(--director-green)!important;font-weight:900}.neg{color:var(--director-red)!important;font-weight:900}
.manager-list{display:flex;flex-direction:column;gap:12px;margin-top:15px}.manager-row{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:13px 14px;border:1px solid var(--director-line);border-radius:13px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 5px 14px rgba(8,27,61,.045)}.manager-place{width:34px;height:34px;border-radius:10px;background:#eef5ff;color:#0b55c4;display:grid;place-items:center;font-weight:950}.manager-row strong{display:block;font-size:15px}.manager-row span{display:block;margin-top:4px;color:var(--director-muted);font-size:13px;font-weight:650}.manager-row b{font-size:16px;white-space:nowrap;color:#071d3e}.manager-bar{grid-column:2/4;height:7px;background:#edf2f8;border-radius:999px;overflow:hidden}.manager-bar i{display:block;height:100%;background:linear-gradient(90deg,#0b55c4,#f2b35e);border-radius:999px}
.director-right .director-panel{min-height:185px}.director-donut-wrap{display:flex;align-items:center;gap:22px;margin-top:14px}.director-donut{width:122px;height:122px;border-radius:50%;display:grid;place-items:center}.director-donut span{background:#fff;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:950}.director-metric-row{padding:10px 0;border-bottom:1px solid var(--director-line);font-weight:750}.director-metric-row strong{display:block;font-size:18px;margin-top:5px}.empty-approved{padding:16px;color:#667085;background:#f8fbff;border-radius:12px;border:1px solid #edf2f8;font-weight:700}
.director-modal-back{position:fixed;inset:0;background:rgba(5,16,35,.12);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.director-modal{width:min(1120px,calc(100vw - 60px));background:#fff;border:1px solid var(--director-line);border-radius:15px;box-shadow:0 22px 70px rgba(5,16,35,.22);padding:22px 28px 24px;pointer-events:auto;max-height:88vh;overflow:auto}.director-modal-head{display:flex;justify-content:space-between;align-items:center}.director-modal h2{margin:0;font-size:22px}.director-close{border:0;background:#fff;font-size:29px;color:#071b3b;cursor:pointer}.director-tabs{display:flex;gap:9px;margin:18px 0 18px;flex-wrap:wrap}.director-tabs.expense-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.director-tab{padding:11px 17px;border:1px solid var(--director-line);border-radius:7px;background:#f8fbff;font-weight:850;color:#0d254e}.director-tabs.expense-tabs .director-tab{padding:11px 12px;text-align:center;white-space:nowrap;font-size:14px}.director-tab.active{background:#092a5b;color:#fff}.director-modal table{width:100%;border-collapse:collapse}.director-modal th,.director-modal td{padding:14px 8px;border-bottom:1px solid var(--director-line);text-align:left}.director-modal th{color:#5e6c84;font-size:13px}.director-modal tfoot td{font-weight:950}.director-modal-actions{text-align:right;margin-top:12px}.ghost{border:1px solid var(--director-line);background:#fff;border-radius:8px;padding:12px 22px;font-weight:850;color:#0b1e43}.chip{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#eef5ff;color:#0a5dc7;margin-right:8px}
@media(max-width:1400px){.director-cards{grid-template-columns:repeat(3,1fr)}.director-layout{grid-template-columns:290px 1fr}.director-right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:980px){.director-sidebar{position:relative;width:100%;min-height:auto}.director-shell{display:block}.director-main{margin-left:0;width:100%;padding:20px}.director-cards,.director-layout,.director-right{grid-template-columns:1fr;display:grid}.director-filters{justify-content:flex-start}.director-date{margin-left:0;margin-top:12px}.director-tabs.expense-tabs{grid-template-columns:1fr}.director-modal{width:calc(100vw - 28px)}}


/* === Stage 2.1 cleanup: hide old floating controls and duplicate markup badge === */
#top-fixed-controls,
.top-fixed-controls {
  display: none !important;
}

.director-rate {
  display: none !important;
}

/* === Stage 2.1 eye icon fix === */
.approved-login-card .toggle-pass,
.toggle-pass {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 20px !important;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}


/* === Stage 2.2: logout button, custom period, final eye icon === */
.director-sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.director-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 850;
  cursor: pointer;
}

.director-logout-btn:hover {
  background: rgba(255,255,255,.14);
}

.director-date-input {
  height: 44px;
  border: 1px solid var(--director-line);
  border-radius: 9px;
  background: #fff;
  padding: 0 13px;
  min-width: 170px;
  box-shadow: var(--director-shadow);
  color: #0c2148;
  font-weight: 800;
}

.director-apply-period {
  height: 44px;
  border: 1px solid #0b58c5;
  border-radius: 9px;
  background: #0b58c5;
  color: #fff;
  font-weight: 900;
  padding: 0 16px;
  box-shadow: var(--director-shadow);
}

.toggle-pass {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 20px !important;
}


/* === Approved cashier-admin dashboard stage 3 === */
#app.approved-cashier-app{display:block;padding:0;min-height:100vh}
.cashier-shell{display:flex;min-height:100vh;overflow:hidden;--cashier-nav:#061f3f;--cashier-blue:#0b4db8;--cashier-muted:#637089;--cashier-line:#dce4ef;--cashier-card:#fff;--cashier-green:#09964d;--cashier-red:#e0182d;--cashier-shadow:0 6px 18px rgba(8,27,61,.08)}
.cashier-sidebar{width:250px;background:linear-gradient(180deg,var(--cashier-nav),#02152e);color:#fff;padding:26px 16px;display:flex;flex-direction:column;gap:22px;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px rgba(2,21,46,.18);z-index:2}
.cashier-brand{padding:4px 10px 22px;border-bottom:1px solid rgba(255,255,255,.12)}.cashier-logo-row{display:flex;align-items:center;gap:13px}.cashier-mark{width:50px;height:40px;position:relative;border-radius:8px;background:linear-gradient(135deg,#fff 0 45%,#d8e8ff 45% 70%,#fff 70%);box-shadow:inset 0 -8px 0 rgba(4,35,72,.18)}.cashier-mark:before{content:"";position:absolute;width:34px;height:14px;left:8px;top:2px;background:#f2b35e;border-radius:12px 12px 2px 2px;transform:rotate(-25deg)}.cashier-brand strong{font-size:35px;letter-spacing:5px;line-height:1}.cashier-brand small{display:block;margin-top:14px;letter-spacing:2.6px;font-size:11px;line-height:1.45;opacity:.92}
.cashier-nav{display:flex;flex-direction:column;gap:6px}.cashier-nav a{display:flex;align-items:center;gap:14px;color:#dbe8ff;text-decoration:none;padding:13px 14px;border-radius:10px;font-weight:650}.cashier-nav a.active{background:linear-gradient(90deg,#1454ad,#0c3f89);color:#fff;box-shadow:0 8px 18px rgba(20,84,173,.26)}
.cashier-ico{width:25px;height:25px;border:1.7px solid currentColor;border-radius:6px;display:grid;place-items:center;font-size:14px;flex:0 0 auto}.cashier-sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}.cashier-side-note{display:flex;gap:11px;align-items:center;padding:12px;color:#cfe0ff;font-weight:700;font-size:13px;line-height:1.25}.cashier-logout-btn{width:100%;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:12px 14px;font-weight:850;cursor:pointer}.cashier-logout-btn:hover{background:rgba(255,255,255,.14)}
.cashier-main{margin-left:250px;min-height:100vh;width:calc(100% - 250px);padding:28px 28px 40px;background:radial-gradient(circle at 45% 0%,#fff 0,#f5f7fb 42%,#edf2f8 100%);color:#081b3d}.cashier-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.cashier-title h1{margin:0;font-size:28px;letter-spacing:.1px}.cashier-title p{margin:6px 0 0;color:var(--cashier-muted);font-weight:600}
.cashier-filters{display:flex;justify-content:flex-end;align-items:center;gap:0;margin:8px 0 18px;flex-wrap:wrap}.cashier-filter-group{display:flex;border:1px solid var(--cashier-line);border-radius:10px;overflow:hidden;background:#fff}.cashier-filter{padding:12px 22px;border:0;border-right:1px solid var(--cashier-line);background:#fff;font-weight:800;color:#12284c}.cashier-filter:last-child{border-right:0}.cashier-filter.active{background:#092a5b;color:#fff}.cashier-date{margin-left:14px;display:flex;align-items:center;gap:12px;color:#40506b;font-weight:700}.cashier-date-input{height:44px;border:1px solid var(--cashier-line);border-radius:9px;background:#fff;padding:0 13px;min-width:170px;box-shadow:var(--cashier-shadow);color:#0c2148;font-weight:800}.cashier-apply-period{height:44px;border:1px solid #0b58c5;border-radius:9px;background:#0b58c5;color:#fff;font-weight:900;padding:0 16px;box-shadow:var(--cashier-shadow)}
.cashier-cards{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:18px;margin-bottom:22px}.cashier-kpi{background:#fff;border:1px solid var(--cashier-line);border-radius:16px;padding:22px;min-height:142px;box-shadow:var(--cashier-shadow);display:flex;gap:18px;align-items:flex-start}.cashier-kicon{width:50px;height:50px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:900;box-shadow:inset 0 -10px 14px rgba(0,0,0,.12);flex:0 0 auto}.cashier-kicon.blue{background:linear-gradient(135deg,#126df0,#023f9f)}.cashier-kicon.green{background:linear-gradient(135deg,#12b86b,#05773c)}.cashier-kicon.red{background:linear-gradient(135deg,#f12f40,#b60717)}.cashier-kicon.purple{background:linear-gradient(135deg,#9d72ef,#5d3bb5)}.cashier-kpi h3{margin:5px 0 13px;font-size:16px}.cashier-value{font-size:24px;font-weight:900;white-space:nowrap}.cashier-trend{margin-top:18px;font-weight:900}.cashier-trend .up{color:var(--cashier-green)}.cashier-trend .down{color:var(--cashier-red)}.cashier-link{display:inline-flex;margin-top:16px;color:#0b58c5;text-decoration:none;font-weight:900;gap:8px}
.cashier-quick{background:#fff;border:1px solid var(--cashier-line);border-radius:16px;box-shadow:var(--cashier-shadow);margin-bottom:18px;overflow:hidden}.cashier-tabs-main{display:flex;gap:0;border-bottom:1px solid var(--cashier-line);background:#f8fbff}.cashier-qtab{border:0;border-right:1px solid var(--cashier-line);background:#fff;padding:16px 28px;font-weight:900;color:#0b1e43;font-size:15px;display:flex;align-items:center;gap:12px}.cashier-qtab.active{box-shadow:inset 0 3px 0 #0b58e8;background:#fff;color:#061f3f}.cashier-qtab.income span{color:var(--cashier-green);font-size:22px}.cashier-qtab.expense span{color:var(--cashier-red);font-size:22px}.cashier-form-area{padding:20px}.cashier-form-grid{display:grid;grid-template-columns:1.1fr 1.3fr 1.1fr 1.4fr;gap:18px 20px;align-items:end}.cashier-field label{display:block;font-weight:850;margin:0 0 9px;color:#132a52}.cashier-field label span{color:var(--cashier-red)}.cashier-input,.cashier-select{height:44px;width:100%;border:1px solid var(--cashier-line);border-radius:8px;background:#fff;padding:0 13px;font-weight:700;color:#0b1e43;outline:none;box-shadow:inset 0 1px 0 rgba(8,27,61,.03)}.cashier-field.wide{grid-column:1/4}.cashier-pay-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cashier-pay{height:44px;border:1px solid var(--cashier-line);border-radius:8px;background:#fff;font-weight:850;color:#0b1e43;display:flex;align-items:center;justify-content:center;gap:9px}.cashier-pay.active{border-color:#8bb4ef;background:#f5f9ff;color:#0b4db8}.cashier-submit{height:48px;border:0;border-radius:8px;background:linear-gradient(90deg,#075eef,#0051d6);color:#fff;font-weight:900;font-size:15px;box-shadow:0 10px 24px rgba(7,94,239,.25)}.cashier-submit.red{background:linear-gradient(90deg,#ef2438,#c60d20);box-shadow:0 10px 24px rgba(224,24,45,.22)}
.cashier-work{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px}.cashier-panel,.cashier-table-card{background:#fff;border:1px solid var(--cashier-line);border-radius:16px;box-shadow:var(--cashier-shadow)}.cashier-panel{padding:20px}.cashier-panel h2,.cashier-table-card h2{font-size:20px;margin:0 0 8px}.cashier-tools{display:grid;grid-template-columns:1fr 140px;gap:14px;margin-bottom:12px}.cashier-search{height:46px;border:1px solid var(--cashier-line);border-radius:9px;background:#fff;padding:0 15px;font-weight:700;color:#0b1e43}.cashier-filter-btn{height:46px;border:1px solid var(--cashier-line);border-radius:9px;background:#fff;font-weight:900;color:#0b1e43;box-shadow:var(--cashier-shadow)}.cashier-table-card{padding:20px;overflow:auto}.cashier-table{width:100%;border-collapse:collapse}.cashier-table th,.cashier-table td{padding:13px 8px;border-bottom:1px solid var(--cashier-line);text-align:left;vertical-align:middle}.cashier-table th{font-size:13px;color:#5e6c84;font-weight:850}.cashier-table td{font-weight:650}.cashier-table td span{color:#64748b;font-size:12px}.cashier-type{display:inline-flex;align-items:center;font-weight:850}.cashier-type.income{color:var(--cashier-green)}.cashier-type.expense{color:var(--cashier-red)}.cashier-actions{display:flex;gap:8px}.cashier-act{width:34px;height:34px;border:1px solid var(--cashier-line);border-radius:8px;background:#fff;display:grid;place-items:center;font-size:15px}.cashier-act.edit{color:#0b58c5}.cashier-more{text-align:center;padding-top:14px}.cashier-more a{font-weight:900;color:#0b58c5;text-decoration:none}
.cashier-timeline{margin-top:18px;display:flex;flex-direction:column;gap:16px;position:relative}.cashier-timeline:before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:1px;background:#dbe4f0}.cashier-event{display:grid;grid-template-columns:28px 1fr auto;gap:13px;align-items:start;position:relative}.cashier-dot{width:12px;height:12px;border-radius:50%;margin:7px auto 0;box-shadow:0 0 0 6px #fff;z-index:1}.cashier-dot.green{background:var(--cashier-green)}.cashier-dot.red{background:var(--cashier-red)}.cashier-event strong{display:block;font-size:14px;margin-bottom:3px}.cashier-event p{margin:0;color:#294268;font-weight:650;line-height:1.35;font-size:13px}.cashier-time{color:#70809b;font-weight:750;font-size:13px}.cashier-history-note{margin-top:18px;border-radius:8px;background:#f4f7fb;color:#6d7b93;padding:12px;font-weight:750;font-size:13px;text-align:center}
@media(max-width:1450px){.cashier-cards{grid-template-columns:repeat(2,1fr)}.cashier-work{grid-template-columns:1fr}.cashier-form-grid{grid-template-columns:1fr 1fr}.cashier-field.wide{grid-column:1/3}}@media(max-width:980px){.cashier-sidebar{position:relative;width:100%;min-height:auto}.cashier-shell{display:block}.cashier-main{margin-left:0;width:100%;padding:20px}.cashier-cards,.cashier-form-grid,.cashier-work,.cashier-tools{grid-template-columns:1fr}.cashier-field.wide{grid-column:auto}.cashier-filters{justify-content:flex-start}.cashier-date{margin-left:0;margin-top:12px;flex-wrap:wrap}.cashier-tabs-main{flex-direction:column}}

/* === Stage 3.1: cashier expense suggestions === */
.cashier-field-note {
  margin-top: 6px;
  color: #6b7890;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* === Stage 3.1.1: cashier expense tooltip hint === */
.cashier-label-with-help {
  display: flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
  width: max-content;
}

.cashier-help {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #eef5ff;
  color: #0b58c5;
  border: 1px solid #cfe0f7;
  font-size: 12px;
  font-weight: 900;
  cursor: help;
  line-height: 1;
}

.cashier-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  background: #071d3e;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(8,27,61,.22);
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}

.cashier-help:hover + .cashier-tooltip,
.cashier-help:focus + .cashier-tooltip {
  opacity: 1;
}


/* === Approved manager dashboard stage 4 === */
#app.approved-manager-app{display:block;padding:0;min-height:100vh}
.manager-shell{display:flex;min-height:100vh;overflow:hidden;--manager-nav:#061f3f;--manager-blue:#0b4db8;--manager-muted:#637089;--manager-line:#dce4ef;--manager-card:#fff;--manager-green:#09964d;--manager-red:#e0182d;--manager-shadow:0 6px 18px rgba(8,27,61,.08)}
.manager-sidebar{width:250px;background:linear-gradient(180deg,var(--manager-nav),#02152e);color:#fff;padding:26px 16px;display:flex;flex-direction:column;gap:22px;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px rgba(2,21,46,.18);z-index:2}
.manager-brand{padding:4px 10px 22px;border-bottom:1px solid rgba(255,255,255,.12)}.manager-logo-row{display:flex;align-items:center;gap:13px}.manager-mark{width:50px;height:40px;position:relative;border-radius:8px;background:linear-gradient(135deg,#fff 0 45%,#d8e8ff 45% 70%,#fff 70%);box-shadow:inset 0 -8px 0 rgba(4,35,72,.18)}.manager-mark:before{content:"";position:absolute;width:34px;height:14px;left:8px;top:2px;background:#f2b35e;border-radius:12px 12px 2px 2px;transform:rotate(-25deg)}.manager-brand strong{font-size:35px;letter-spacing:5px;line-height:1}.manager-brand small{display:block;margin-top:14px;letter-spacing:2.6px;font-size:11px;line-height:1.45;opacity:.92}
.manager-nav{display:flex;flex-direction:column;gap:6px}.manager-nav a{display:flex;align-items:center;gap:14px;color:#dbe8ff;text-decoration:none;padding:13px 14px;border-radius:10px;font-weight:650}.manager-nav a.active{background:linear-gradient(90deg,#1454ad,#0c3f89);color:#fff;box-shadow:0 8px 18px rgba(20,84,173,.26)}
.manager-ico{width:25px;height:25px;border:1.7px solid currentColor;border-radius:6px;display:grid;place-items:center;font-size:14px;flex:0 0 auto}.manager-sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}.manager-approved-logout{width:100%;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:12px 14px;font-weight:850;cursor:pointer}.manager-approved-logout:hover{background:rgba(255,255,255,.14)}.manager-side-note{display:flex;gap:11px;align-items:center;padding:12px;color:#cfe0ff;font-weight:700;font-size:13px;line-height:1.25}
.manager-main{margin-left:250px;min-height:100vh;width:calc(100% - 250px);padding:28px 28px 40px;background:radial-gradient(circle at 45% 0%,#fff 0,#f5f7fb 42%,#edf2f8 100%);color:#081b3d}.manager-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.manager-title h1{margin:0;font-size:28px;letter-spacing:.1px}.manager-title p{margin:6px 0 0;color:var(--manager-muted);font-weight:600}
.manager-filters{display:flex;justify-content:flex-end;align-items:center;gap:0;margin:8px 0 18px;flex-wrap:wrap}.manager-filter-group{display:flex;border:1px solid var(--manager-line);border-radius:10px;overflow:hidden;background:#fff}.manager-filter{padding:12px 22px;border:0;border-right:1px solid var(--manager-line);background:#fff;font-weight:800;color:#12284c}.manager-filter:last-child{border-right:0}.manager-filter.active{background:#092a5b;color:#fff}.manager-date{margin-left:14px;display:flex;align-items:center;gap:12px;color:#40506b;font-weight:700}.manager-date-input{height:44px;border:1px solid var(--manager-line);border-radius:9px;background:#fff;padding:0 13px;min-width:170px;box-shadow:var(--manager-shadow);color:#0c2148;font-weight:800}.manager-apply-period{height:44px;border:1px solid #0b58c5;border-radius:9px;background:#0b58c5;color:#fff;font-weight:900;padding:0 16px;box-shadow:var(--manager-shadow)}
.manager-cards{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:16px;margin-bottom:20px}.manager-kpi{background:#fff;border:1px solid var(--manager-line);border-radius:16px;padding:22px;min-height:140px;box-shadow:var(--manager-shadow);display:flex;gap:18px;align-items:flex-start}.manager-kicon{width:50px;height:50px;border-radius:10px;display:grid;place-items:center;color:white;font-size:25px;font-weight:900;box-shadow:inset 0 -10px 14px rgba(0,0,0,.12);flex:0 0 auto}.manager-kicon.blue{background:linear-gradient(135deg,#126df0,#023f9f)}.manager-kicon.green{background:linear-gradient(135deg,#12b86b,#05773c)}.manager-kicon.purple{background:linear-gradient(135deg,#9d72ef,#5d3bb5)}.manager-kicon.orange{background:linear-gradient(135deg,#ffb438,#f08a00)}.manager-kpi h3{margin:5px 0 13px;font-size:16px}.manager-value{font-size:24px;font-weight:900;white-space:nowrap}.manager-trend{margin-top:18px;font-weight:900}.manager-trend .up{color:var(--manager-green)}.manager-sub{margin-top:18px;color:#5b6c88;font-weight:700}
.manager-layout2{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-bottom:18px}.manager-card{background:#fff;border:1px solid var(--manager-line);border-radius:16px;box-shadow:var(--manager-shadow);padding:18px 18px 16px}.manager-card h2{margin:0 0 16px;font-size:20px}.manager-main-table,.manager-rank-table{width:100%;border-collapse:collapse}.manager-main-table th,.manager-main-table td,.manager-rank-table th,.manager-rank-table td{padding:13px 8px;border-bottom:1px solid var(--manager-line);text-align:left;vertical-align:top}.manager-main-table th,.manager-rank-table th{font-size:13px;color:#5e6c84;font-weight:850}.manager-main-table td,.manager-rank-table td{font-weight:650}.manager-main-table td span{color:#74839a;font-size:12px}.manager-link{display:inline-flex;margin-top:16px;color:#0b58c5;text-decoration:none;font-weight:900;gap:8px}.manager-rank-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}.manager-goal{color:#5d6d87;font-weight:800}.manager-goal b{color:#d17d0b}.manager-place{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:900;color:#fff}.manager-place.gold{background:#f2b335}.manager-place.silver{background:#95a3bb}.manager-place.bronze{background:#cb7d53}.manager-place.plain{background:#eef3fb;color:#274a82;border-radius:10px}.you-badge{display:inline-block;margin-left:10px;padding:5px 10px;border-radius:8px;background:#eef4ff;color:#0b58c5;font-size:12px;font-weight:900}.highlight-row{background:#f6f9ff}
.manager-bottom{display:grid;grid-template-columns:1.4fr .7fr;gap:18px}.manager-chart-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.manager-small{color:#6a7a94;font-weight:700;font-size:13px}.manager-select-like{border:1px solid var(--manager-line);background:#fff;padding:10px 12px;border-radius:8px;font-weight:800;color:#233c66}.manager-chart-box{height:280px;border-radius:14px;background:linear-gradient(180deg,#fbfdff,#ffffff);border:1px solid #edf2f8;padding:14px 14px 8px;position:relative;overflow:hidden}.manager-chart-grid{position:absolute;inset:18px 14px 38px 14px;display:grid;grid-template-rows:repeat(5,1fr)}.manager-chart-grid div{border-bottom:1px dashed #dfe6f0}.manager-chart-svg{position:absolute;inset:18px 14px 38px 14px;width:calc(100% - 28px);height:calc(100% - 56px)}.manager-chart-labels{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;color:#74839a;font-weight:700;font-size:12px}
.manager-stats-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:1px solid var(--manager-line);border-radius:12px;overflow:hidden}.manager-stat{padding:16px 14px;background:#fff;text-align:center;border-right:1px solid var(--manager-line)}.manager-stat:last-child{border-right:0}.manager-stat strong{display:block;font-size:18px}.manager-stat span{display:block;margin-top:10px;color:#5f708a;font-weight:700}
.manager-goal-card{display:flex;flex-direction:column;gap:18px}.manager-goal-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff6e9;border:1px solid #fde2b5;color:#ef8d00;font-size:28px}.manager-goal-card h3{margin:0;font-size:18px}.manager-goal-need{font-size:17px;line-height:1.5;font-weight:800}.manager-goal-need b{font-size:20px;color:#ef8d00}.manager-goal-note{color:#2a4675;font-weight:700;line-height:1.5}.manager-progress-box{margin-top:auto}.manager-progress-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;color:#39517a;font-weight:800}.manager-progress{height:10px;border-radius:999px;background:#e9eef6;overflow:hidden}.manager-progress i{display:block;height:100%;background:linear-gradient(90deg,#f5a625,#f3b34d);border-radius:999px}.manager-cta{margin-top:18px;height:52px;border:2px solid #3f7cff;border-radius:10px;background:#fff;color:#1f5eed;font-size:18px;font-weight:900}.pos{color:#09964d!important;font-weight:900}.neg{color:#e0182d!important;font-weight:900}
@media(max-width:1450px){.manager-cards{grid-template-columns:repeat(2,1fr)}.manager-layout2,.manager-bottom{grid-template-columns:1fr}}@media(max-width:980px){.manager-sidebar{position:relative;width:100%;min-height:auto}.manager-shell{display:block}.manager-main{margin-left:0;width:100%;padding:20px}.manager-cards,.manager-stats-row{grid-template-columns:1fr}.manager-filters{justify-content:flex-start}.manager-date{margin-left:0;margin-top:12px;flex-wrap:wrap}}

/* === Stage 4.1: manager tooltip and chart mode select === */
.manager-title-with-help {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.manager-help {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #eef5ff;
  color: #0b58c5;
  border: 1px solid #cfe0f7;
  font-size: 12px;
  font-weight: 900;
  cursor: help;
  line-height: 1;
}

.manager-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 9px);
  width: 330px;
  background: #071d3e;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(8,27,61,.22);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

.manager-help:hover + .manager-tooltip,
.manager-help:focus + .manager-tooltip {
  opacity: 1;
}

.manager-select-like {
  min-width: 138px;
  cursor: pointer;
}

/* === Stage 4.2: remove custom period buttons + client suggestions === */
.director-filter-group .director-filter,
.cashier-filter-group .cashier-filter,
.manager-filter-group .manager-filter {
  min-width: 150px;
}

.cashier-field .cashier-tooltip {
  white-space: normal;
}


/* === Stage 5.0: director settings users and roles visual only === */
.settings-modal {
  width: min(1280px, calc(100vw - 54px));
}

.settings-subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 700;
}

.settings-warning {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff8e8;
  border: 1px solid #f4d19a;
  color: #6e4a0d;
  font-weight: 750;
  line-height: 1.45;
}

.settings-grid {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 18px;
}

.settings-menu {
  background: #f8fbff;
  border: 1px solid var(--director-line);
  border-radius: 14px;
  padding: 10px;
  align-self: start;
}

.settings-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #17345f;
  padding: 13px 12px;
  border-radius: 10px;
  text-align: left;
  font-weight: 850;
  cursor: default;
}

.settings-menu button.active {
  background: #0b58c5;
  color: #fff;
}

.settings-content {
  min-width: 0;
}

.settings-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.settings-topline h3,
.settings-form-preview h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.settings-topline p {
  margin: 0;
  color: #64748b;
  font-weight: 700;
}

.settings-primary {
  border: 0;
  border-radius: 10px;
  background: #0b58c5;
  color: #fff;
  padding: 12px 16px;
  font-weight: 900;
  white-space: nowrap;
}

.settings-primary.ghost {
  background: #fff;
  border: 1px solid #cfe0f7;
  color: #0b58c5;
}

.settings-primary.disabled {
  background: #eef3fb;
  color: #6b7b93;
  cursor: not-allowed;
}

.settings-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.settings-card {
  border: 1px solid var(--director-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 5px 14px rgba(8,27,61,.05);
}

.settings-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  min-height: 34px;
}

.settings-card strong {
  display: block;
  margin-top: 10px;
  font-size: 24px;
  color: #071d3e;
}

.settings-table-wrap {
  border: 1px solid var(--director-line);
  border-radius: 14px;
  overflow: auto;
  background: #fff;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-table th,
.settings-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--director-line);
  text-align: left;
  vertical-align: middle;
}

.settings-table th {
  color: #5e6c84;
  font-size: 13px;
  font-weight: 900;
  background: #f8fbff;
}

.settings-table td {
  font-weight: 750;
}

.settings-table td span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.settings-role,
.settings-status {
  display: inline-flex !important;
  margin-top: 0 !important;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 900;
}

.settings-role.admin {
  background: #eef5ff;
  color: #0b58c5;
}

.settings-role.cashier {
  background: #fff7e8;
  color: #b16a00;
}

.settings-role.manager {
  background: #ecfdf3;
  color: #087a3d;
}

.settings-status.active {
  background: #ecfdf3;
  color: #087a3d;
}

.settings-status.disabled {
  background: #f2f4f7;
  color: #667085;
}

.settings-pass {
  letter-spacing: 2px;
}

.settings-mini-btn {
  border: 1px solid #cfe0f7;
  background: #fff;
  color: #0b58c5;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 850;
}

.settings-form-preview {
  margin-top: 18px;
  border: 1px solid var(--director-line);
  border-radius: 14px;
  background: #fbfdff;
  padding: 16px;
}

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

.settings-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #17345f;
  font-weight: 850;
}

.settings-form-grid input,
.settings-form-grid select {
  height: 44px;
  border: 1px solid var(--director-line);
  border-radius: 9px;
  background: #fff;
  padding: 0 12px;
  color: #0b1e43;
  font-weight: 750;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media(max-width: 980px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-cards,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .settings-topline {
    flex-direction: column;
  }
}


/* === Stage 5.1: active user save controls === */
.settings-form-preview {
  border-color: #cfe0f7;
}

.settings-actions .settings-primary:not(.ghost):not(.disabled) {
  background: linear-gradient(90deg, #0b58e8, #0053d6);
  box-shadow: 0 10px 22px rgba(11,88,232,.18);
}

/* === Stage 5.2: user editor modal instead of inline form === */
.settings-add-user-btn {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #0b58e8, #0053d6);
  color: #fff;
  padding: 12px 16px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(11,88,232,.18);
}

.settings-add-user-btn:hover {
  filter: brightness(.98);
}

.settings-user-editor {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 29, 62, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.settings-user-editor-card {
  width: min(620px, calc(100vw - 36px));
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  box-shadow: 0 24px 72px rgba(8,27,61,.24);
  padding: 22px;
}

.settings-user-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.settings-user-editor-head h3 {
  margin: 0;
  font-size: 22px;
}

.settings-editor-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f2f5f9;
  color: #0b1e43;
  font-size: 24px;
  cursor: pointer;
}

.settings-editor-hint {
  border: 1px solid #dbe8ff;
  background: #f5f9ff;
  color: #27456f;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 750;
  line-height: 1.4;
  margin-bottom: 16px;
}

.settings-editor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

.settings-editor-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #17345f;
  font-weight: 850;
}

.settings-editor-grid label span {
  color: #e0182d;
}

.settings-editor-grid input,
.settings-editor-grid select {
  height: 46px;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  color: #0b1e43;
  font-weight: 750;
}

.settings-manager-bind.muted {
  opacity: .62;
}

.settings-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media(max-width: 680px) {
  .settings-editor-actions {
    flex-direction: column;
  }
}

/* === Stage 5.2.1: keep add-user button visible on hover === */
.settings-add-user-btn,
.settings-add-user-btn:hover,
.settings-add-user-btn:focus {
  background: linear-gradient(90deg, #0b58e8, #0053d6) !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

.settings-add-user-btn:hover {
  box-shadow: 0 12px 26px rgba(11,88,232,.24);
}

/* === Stage 5.3: archive users instead of delete === */
.settings-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-archive-toggle {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce4ef;
  background: #fff;
  color: #17345f;
  border-radius: 10px;
  padding: 0 13px;
  font-weight: 850;
  white-space: nowrap;
}

.settings-archive-toggle input {
  width: 16px;
  height: 16px;
}

.settings-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-mini-btn.danger {
  border-color: #ffd0d6;
  color: #d3182d;
  background: #fff7f8;
}

.settings-mini-btn.restore {
  border-color: #c9efd9;
  color: #087a3d;
  background: #f0fff6;
}

.settings-status.archived {
  background: #f2f4f7;
  color: #667085;
}

.settings-status.disabled {
  background: #f2f4f7;
  color: #667085;
}

/* === Stage 5.4: finance settings === */
.finance-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.finance-settings-card,
.settings-placeholder {
  border: 1px solid var(--director-line);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 5px 14px rgba(8,27,61,.05);
}

.finance-settings-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.finance-settings-head h3,
.settings-placeholder h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.finance-settings-head p,
.settings-placeholder p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
  font-weight: 700;
}

.finance-settings-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #126df0, #023f9f);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 950;
  flex: 0 0 auto;
}

.finance-settings-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #17345f;
  font-weight: 900;
}

.finance-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid var(--director-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.finance-input-row input {
  height: 48px;
  border: 0;
  padding: 0 14px;
  font-size: 17px;
  font-weight: 900;
  color: #0b1e43;
  outline: none;
}

.finance-input-row span {
  padding: 0 16px;
  color: #64748b;
  font-weight: 950;
}

.finance-settings-note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f8fbff;
  color: #5f708a;
  font-weight: 750;
  line-height: 1.4;
}

.finance-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media(max-width: 980px) {
  .finance-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* === Stage 5.5: audit log === */
.audit-settings {
  min-width: 0;
}

.audit-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.audit-filters button {
  border: 1px solid #dce4ef;
  background: #fff;
  color: #17345f;
  border-radius: 9px;
  padding: 10px 13px;
  font-weight: 850;
}

.audit-filters button.active {
  background: #0b58c5;
  color: #fff;
  border-color: #0b58c5;
}

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

.audit-summary div {
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
  padding: 13px;
}

.audit-summary span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.audit-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  color: #071d3e;
}

.audit-table-wrap {
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
  overflow: auto;
  max-height: 520px;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.audit-table th,
.audit-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #dce4ef;
  text-align: left;
  vertical-align: top;
}

.audit-table th {
  background: #f8fbff;
  color: #5e6c84;
  font-size: 13px;
  font-weight: 900;
  position: sticky;
  top: 0;
  z-index: 1;
}

.audit-table td {
  font-weight: 750;
}

.audit-table td span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 4px;
}

.audit-action {
  display: inline-flex !important;
  margin-top: 0 !important;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 900;
  background: #eef3fb;
  color: #27456f !important;
}

.audit-action.income {
  background: #ecfdf3;
  color: #087a3d !important;
}

.audit-action.expense {
  background: #fff1f2;
  color: #d3182d !important;
}

.audit-action.users {
  background: #eef5ff;
  color: #0b58c5 !important;
}

.audit-action.settings {
  background: #fff7e8;
  color: #b16a00 !important;
}

.audit-change {
  display: grid;
  gap: 4px;
}

.audit-before,
.audit-after {
  display: block;
  color: #17345f !important;
  font-size: 12px !important;
  line-height: 1.35;
}

.audit-before {
  opacity: .72;
}

.audit-arrow {
  color: #8a98ad !important;
  margin: 0 !important;
}

.audit-note {
  margin-top: 14px;
  border: 1px solid #dbe8ff;
  background: #f5f9ff;
  color: #27456f;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 750;
  line-height: 1.4;
}

@media(max-width: 980px) {
  .audit-summary {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Stage 6.1: interactive expense detail tabs === */
.director-tabs .director-tab {
  cursor: pointer;
}

.director-tabs .director-tab:not(.active):hover {
  background: #f5f9ff;
  border-color: #bdd5f5;
}

/* === Stage 6.1.1: reliable expense tab click states === */
#directorExpenseModal .director-tab {
  pointer-events: auto !important;
  user-select: none;
}

#directorExpenseModal .director-tab.active {
  background: #092a5b !important;
  color: #fff !important;
  border-color: #092a5b !important;
}

/* === Stage 6.1.2: expense subcategory groups === */
.expense-subgroup-row td {
  background: #f6f9ff !important;
  border-top: 2px solid #dce8f8;
  border-bottom: 1px solid #cfe0f7;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.expense-subgroup-row strong {
  display: block;
  color: #071d3e;
  font-size: 15px;
}

.expense-subgroup-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

tr[data-expense-sub-row] td:first-child {
  padding-left: 24px;
}

/* === Stage 6.1.5: compact expense accordion === */
.expense-compact-modal {
  width: min(1160px, calc(100vw - 40px));
}

.expense-compact-modal .director-tabs.expense-tabs {
  margin-bottom: 10px;
}

.expense-compact-modal .director-tabs.expense-tabs .director-tab,
.expense-compact-modal .expense-subtabs .expense-subtab {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.expense-compact-modal .expense-subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.expense-compact-modal table th,
.expense-compact-modal table td {
  padding: 10px 8px;
}

.expense-accordion-group {
  cursor: pointer;
}

.expense-accordion-group td {
  background: #f8fbff !important;
  border-top: 1px solid #dce8f8;
  border-bottom: 1px solid #dce8f8;
  font-weight: 950;
}

.expense-accordion-group.is-open td {
  background: #f2f7ff !important;
}

.expense-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #071d3e;
  font: inherit;
  font-weight: 950;
  padding: 0;
  text-align: left;
  pointer-events: none;
}

.expense-group-toggle span {
  min-width: 16px;
  display: inline-block;
  color: #17345f;
  font-size: 16px;
  line-height: 1;
}

.expense-group-meta {
  margin: 2px 0 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.expense-operation-row td {
  background: #fff;
}

.expense-operation-row td:first-child {
  padding-left: 30px;
}

.expense-compact-modal .settings-mini-btn {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.director-modal td.ok,
.director-modal tfoot td.ok {
  color: #0b58c5;
  font-weight: 950;
}

.director-modal td.over,
.director-modal tfoot td.over {
  color: #e0182d;
  font-weight: 950;
}

@media(max-width:980px){
  .expense-compact-modal .director-tabs.expense-tabs{grid-template-columns:1fr}
  .expense-compact-modal .expense-subtabs{display:grid;grid-template-columns:1fr}
}

.small-editor {
  width: min(720px, calc(100vw - 44px));
}

.expense-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.expense-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #17345f;
  font-weight: 900;
}

.expense-edit-grid label.wide {
  grid-column: 1 / -1;
}

.expense-edit-grid input,
.expense-edit-grid select,
.expense-edit-grid textarea {
  border: 1px solid var(--director-line);
  border-radius: 10px;
  background: #fff;
  min-height: 46px;
  padding: 0 12px;
  font-weight: 800;
  color: #071d3e;
  font-size: 15px;
}

.expense-edit-grid textarea {
  min-height: 90px;
  padding-top: 12px;
  resize: vertical;
}

.expense-edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.expense-edit-actions > div {
  display: flex;
  gap: 10px;
}

.danger-btn {
  border: 1px solid #ffd0d6;
  background: #fff7f8;
  color: #e0182d;
  border-radius: 10px;
  padding: 12px 15px;
  font-weight: 950;
}

@media(max-width: 780px) {
  .expense-edit-grid {
    grid-template-columns: 1fr;
  }

  .expense-edit-actions,
  .expense-edit-actions > div {
    flex-direction: column;
    align-items: stretch;
  }
}


/* === Stage 6.1.6: main tabs only + lighter typography === */
.expense-compact-modal .expense-subtabs { display: none !important; }

.expense-compact-modal .director-modal-head h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.expense-compact-modal .director-tabs.expense-tabs .director-tab {
  font-weight: 700;
}

.expense-accordion-group td {
  font-weight: 700;
}

.expense-group-toggle {
  font-weight: 700;
}

.expense-group-toggle strong {
  font-weight: 700;
}

.expense-group-meta {
  font-weight: 600;
}

.expense-compact-modal table th {
  font-weight: 700;
  color: #5b6b84;
}

.expense-compact-modal table td {
  font-weight: 500;
  color: #10284d;
}

.expense-compact-modal .neg,
.expense-compact-modal td.over,
.expense-compact-modal tfoot td.over {
  font-weight: 700;
}

.expense-compact-modal td.ok,
.expense-compact-modal tfoot td.ok {
  font-weight: 700;
}

.expense-compact-modal .settings-mini-btn {
  font-weight: 700;
}

/* === Stage 6.1.7: revenue by manager accordion === */
.revenue-compact-modal {
  width: min(1160px, calc(100vw - 40px));
}

.revenue-compact-modal table th,
.revenue-compact-modal table td {
  padding: 11px 10px;
}

.revenue-manager-row {
  cursor: pointer;
}

.revenue-manager-row td {
  background: #fff;
  border-bottom: 1px solid var(--director-line);
}

.revenue-manager-row:hover td,
.revenue-manager-row.is-open td {
  background: #f8fbff;
}

.revenue-manager-row.is-open td:first-child {
  box-shadow: inset 3px 0 0 #1b4ea3;
}

.revenue-manager-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.revenue-rank {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: #eef4fb;
  color: #42699e;
  font-weight: 800;
  flex: 0 0 30px;
}

.revenue-manager-main strong {
  display: block;
  font-size: 15px;
  font-weight: 750;
  color: #071d3e;
}

.revenue-manager-main span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 650;
  color: #64748b;
}

.revenue-pay-stack {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.revenue-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--director-line);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.revenue-pay.cash {
  background: #eef4ff;
  color: #275ca8;
}

.revenue-pay.bank {
  background: #edf9f1;
  color: #078b45;
}

.revenue-pay.unknown {
  background: #f7f9fc;
  color: #64748b;
}

.revenue-manager-total {
  font-weight: 800;
  color: #071d3e;
  white-space: nowrap;
}

.revenue-arrow {
  text-align: right;
  font-size: 20px;
  color: #315b95;
  transition: transform .16s ease;
}

.revenue-manager-row.is-open .revenue-arrow {
  transform: rotate(90deg);
}

.revenue-operation-row td {
  background: #fcfdff;
  padding-top: 9px;
  padding-bottom: 9px;
}

.revenue-operation-row td:first-child {
  padding-left: 34px;
}

.revenue-operation-row strong {
  display: block;
  font-weight: 700;
}

.revenue-operation-row span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

@media(max-width: 980px) {
  .revenue-compact-modal table {
    min-width: 900px;
  }
}

/* === Stage 6.1.8: revenue summary cards and payment colors === */
.revenue-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.revenue-summary-card {
  border: 1px solid var(--director-line);
  background: #f8fbff;
  border-radius: 10px;
  padding: 14px 16px;
}

.revenue-summary-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
}

.revenue-summary-card strong {
  display: block;
  color: #071d3e;
  font-size: 24px;
  font-weight: 800;
}

.revenue-summary-card small {
  display: block;
  margin-top: 6px;
  color: #5e7596;
  font-size: 13px;
  font-weight: 600;
}

.revenue-pay.cash {
  background: #edf9f1 !important;
  color: #078b45 !important;
  border-color: #c7ead4 !important;
}

.revenue-pay.bank {
  background: #eef4ff !important;
  color: #275ca8 !important;
  border-color: #cbdcf7 !important;
}

.revenue-operation-row .revenue-pay {
  display: inline-flex !important;
  width: auto !important;
  min-width: 74px;
  margin-top: 0 !important;
  padding: 6px 9px;
}

@media(max-width: 980px) {
  .revenue-summary-cards {
    grid-template-columns: 1fr;
  }
}

/* === Stage 6.2: box cost dynamics === */
.box-cost-modal {
  width: min(1220px, calc(100vw - 40px));
}

.box-mode-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}

.box-mode-tabs button {
  border: 1px solid var(--director-line);
  background: #fff;
  color: #17345f;
  border-radius: 9px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 750;
}

.box-mode-tabs button.active {
  background: #092a5b;
  color: #fff;
  border-color: #092a5b;
}

.box-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.box-kpi {
  border: 1px solid var(--director-line);
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-radius: 13px;
  padding: 16px;
}

.box-kpi span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.box-kpi strong {
  display: block;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.box-kpi small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.box-kpi small.good { color: #078b45; }
.box-kpi small.bad { color: #d91f32; }

.box-dynamics-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}

.box-card {
  border: 1px solid var(--director-line);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.box-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e7eef8;
  background: #f8fbff;
}

.box-card-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.box-card-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.box-chart-area {
  height: 270px;
  position: relative;
  margin: 18px;
  border-left: 1px solid #e7eef8;
  border-bottom: 1px solid #e7eef8;
  background:
    linear-gradient(to bottom, transparent 24%, #e7eef8 24%, transparent 25%, transparent 49%, #e7eef8 49%, transparent 50%, transparent 74%, #e7eef8 74%, transparent 75%);
}

.box-chart-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0b58c5;
  box-shadow: 0 0 0 4px rgba(11,88,197,.12);
  z-index: 2;
}

.box-chart-line {
  position: absolute;
  height: 3px;
  background: #0b58c5;
  transform-origin: left center;
  border-radius: 999px;
  z-index: 1;
}

.box-chart-value {
  position: absolute;
  transform: translate(-50%, -125%);
  font-size: 12px;
  font-weight: 750;
  color: #17345f;
  white-space: nowrap;
}

.box-chart-month {
  position: absolute;
  bottom: -28px;
  transform: translateX(-50%);
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.box-analysis {
  padding: 16px 18px;
}

.box-analysis div {
  padding: 12px 0;
  border-bottom: 1px solid #e7eef8;
}

.box-analysis div:last-child {
  border-bottom: 0;
}

.box-analysis b {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
}

.box-analysis span {
  display: block;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.box-table-card {
  margin-top: 16px;
}

.box-table-wrap {
  overflow: auto;
}

.box-table-wrap table {
  min-width: 880px;
}

.box-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.box-delta.plus {
  background: #edf9f1;
  color: #078b45;
}

.box-delta.minus {
  background: #fff1f2;
  color: #d91f32;
}

.box-delta.neutral {
  background: #f2f5f9;
  color: #64748b;
}

.box-formula {
  margin-top: 16px;
  border: 1px solid #dbe8ff;
  background: #f7fbff;
  border-radius: 12px;
  padding: 14px 16px;
  color: #29476f;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 650;
}

.box-empty {
  padding: 40px;
  color: #64748b;
  font-weight: 700;
}

@media(max-width: 1000px) {
  .box-kpi-grid,
  .box-dynamics-grid {
    grid-template-columns: 1fr;
  }

  .box-chart-area {
    height: 240px;
  }
}

/* === Stage 6.2.1: stable SVG chart fix === */
.box-chart-svg-wrap {
  padding: 18px;
}

.box-chart-svg {
  width: 100%;
  height: 280px;
  display: block;
}

.box-svg-grid {
  stroke: #e7eef8;
  stroke-width: 1;
}

.box-svg-line {
  fill: none;
  stroke: #0b58c5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.box-svg-dot {
  fill: #0b58c5;
  stroke: #dceaff;
  stroke-width: 5;
}

.box-svg-value {
  fill: #17345f;
  font-size: 12px;
  font-weight: 750;
}

.box-svg-month {
  fill: #64748b;
  font-size: 12px;
  font-weight: 700;
}

/* === Stage 6.2.2: simple rectangular bar chart === */
.box-bar-chart {
  min-height: 280px;
  padding: 22px 20px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 14px;
  align-items: end;
}

.box-bar-item {
  display: grid;
  grid-template-rows: 34px 190px 24px;
  align-items: end;
  justify-items: center;
  gap: 8px;
}

.box-bar-value {
  align-self: end;
  color: #17345f;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.box-bar-track {
  width: 46px;
  height: 190px;
  border: 1px solid #dce7f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff, #f2f6fb);
  display: flex;
  align-items: end;
  overflow: hidden;
}

.box-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #0b65e5, #0b58c5);
  border-radius: 7px 7px 0 0;
  min-height: 8px;
}

.box-bar-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.box-chart-svg-wrap,
.box-chart-area {
  display: none;
}

/* === Stage 6.2.3: FORCE bar chart, no line chart === */
.box-chart-svg-wrap,
.box-chart-svg,
.box-chart-area,
.box-chart-line,
.box-chart-point,
.box-svg-line,
.box-svg-dot,
.box-svg-grid,
.box-svg-value,
.box-svg-month {
  display: none !important;
}

.kbk-box-bars-v623 {
  min-height: 280px;
  padding: 22px 20px 18px;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 14px;
  align-items: end;
}

.kbk-box-bar-item-v623 {
  display: grid;
  grid-template-rows: 34px 190px 24px;
  align-items: end;
  justify-items: center;
  gap: 8px;
}

.kbk-box-bar-value-v623 {
  align-self: end;
  color: #17345f;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.kbk-box-bar-track-v623 {
  width: 46px;
  height: 190px;
  border: 1px solid #dce7f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff, #f2f6fb);
  display: flex;
  align-items: end;
  overflow: hidden;
}

.kbk-box-bar-fill-v623 {
  width: 100%;
  background: linear-gradient(180deg, #0b65e5, #0b58c5);
  border-radius: 7px 7px 0 0;
  min-height: 8px;
}

.kbk-box-bar-label-v623 {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}


/* === Stage 6.3: finance detail modals (gross profit / net result / cash) === */
.finance-detail-modal {
  width: min(1180px, calc(100vw - 40px));
}

.finance-detail-subtitle {
  margin-top: 6px;
  color: #5f738f;
  font-size: 14px;
  font-weight: 600;
}

.finance-detail-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.finance-detail-card {
  border: 1px solid var(--director-line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.finance-detail-card .label {
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 9px;
}

.finance-detail-card .value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: #071d3e;
}

.finance-detail-card .value.green { color: #12924a; }
.finance-detail-card .value.red { color: #dd3045; }
.finance-detail-card .hint {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7c95;
  line-height: 1.45;
}

.finance-detail-grid.two {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}

.finance-detail-panel {
  border: 1px solid var(--director-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.finance-detail-panel .panel-title {
  padding: 16px 18px;
  border-bottom: 1px solid var(--director-line);
  font-size: 17px;
  font-weight: 800;
  color: #081e42;
}

.finance-detail-panel .panel-body {
  padding: 16px 18px;
}

.formula-step,
.calc-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f8;
}

.formula-step:last-of-type,
.calc-row:last-of-type {
  border-bottom: 0;
}

.step-muted,
.formula-step small,
.calc-row small,
.info-box span,
.balance-item small {
  display: block;
  color: #687a92;
  font-size: 12px;
  line-height: 1.45;
}

.step-muted { font-weight: 700; }

.value-chip,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.value-chip {
  border: 1px solid #d7e3f4;
  background: #eef4ff;
  color: #1e4f97;
}

.pill.red {
  background: #fff1f2;
  color: #d83d46;
}

.pill.green {
  background: #eef9f1;
  color: #169c4b;
}

.formula-big {
  margin-top: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d3b86 0%, #1f5cc7 100%);
  color: #fff;
  padding: 16px;
}

.formula-big-title {
  font-size: 12px;
  opacity: .88;
  margin-bottom: 7px;
}

.formula-big-text {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.info-stack {
  display: grid;
  gap: 12px;
}

.info-box {
  border: 1px solid var(--director-line);
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px 15px;
}

.info-box b,
.balance-item b {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #081e42;
}

.mini-progress {
  height: 8px;
  border-radius: 999px;
  background: #e8eff8;
  overflow: hidden;
  margin-top: 8px;
}

.mini-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f4fb9, #35a26c);
}

.finance-detail-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed #bfd0e9;
  border-radius: 12px;
  background: #fbfdff;
  color: #5f738f;
  line-height: 1.5;
}

.finance-detail-note.compact {
  margin-top: 14px;
}

.finance-flow-grid {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

.flow-node {
  border: 1px solid var(--director-line);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.flow-node h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.flow-node p {
  margin: 0;
  color: #667995;
  line-height: 1.45;
  font-size: 13px;
}

.flow-node .big {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  color: #081e42;
}

.flow-node.positive .big { color: #169c4b; }
.flow-node.negative .big { color: #d83d46; }

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c90af;
  font-size: 26px;
  font-weight: 800;
}

.balance-stack {
  display: grid;
  gap: 10px;
}

.balance-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--director-line);
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px 15px;
}

.balance-item strong {
  font-size: 16px;
  font-weight: 800;
}

.balance-item strong.green { color: #169c4b; }
.balance-item strong.red { color: #d83d46; }
.balance-item strong.blue { color: #0d3b86; }

.movement-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.movement-tab {
  border: 1px solid var(--director-line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 750;
  color: #17345f;
}

.movement-tab.active {
  background: #092a5b;
  border-color: #092a5b;
  color: #fff;
}

.movement-table {
  width: 100%;
  border-collapse: collapse;
}

.movement-table th,
.movement-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--director-line);
  text-align: left;
  vertical-align: top;
}

.movement-table th {
  color: #64748b;
  font-size: 13px;
}

.movement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.movement-badge.cash {
  background: #eef9f1;
  color: #169c4b;
}

.movement-badge.bank {
  background: #eef4ff;
  color: #275ca8;
}

.movement-badge.unknown {
  background: #f3f5f8;
  color: #64748b;
}

.muted-value {
  color: #081e42;
  font-weight: 800;
}

@media (max-width: 980px) {
  .finance-detail-cards,
  .finance-detail-grid.two,
  .finance-flow-grid {
    grid-template-columns: 1fr;
  }

  .finance-flow-grid {
    gap: 10px;
  }

  .flow-arrow {
    display: none;
  }

  .formula-step,
  .calc-row {
    grid-template-columns: 1fr;
  }

  .cash-detail-modal .movement-table {
    min-width: 760px;
  }
}


/* Stage 6.4 — compact break-even block on director dashboard */
.director-breakeven-inline{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--director-line);
  border-radius:16px;
  box-shadow:var(--director-shadow);
  padding:14px;
  min-width:0;
}
.dbi-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.dbi-top h2{
  margin:0;
  font-size:22px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#173a68;
}
.dbi-value{
  margin-top:5px;
  font-size:26px;
  line-height:1;
  font-weight:900;
  color:#14964a;
}
.dbi-sub{
  margin-top:4px;
  color:#667892;
  font-size:12px;
  font-weight:700;
}
.dbi-result{
  min-width:168px;
  padding:8px 11px;
  border:1px solid #d3e8db;
  background:#f2fbf5;
  border-radius:12px;
  color:#138542;
}
.dbi-result span{
  display:block;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.dbi-result strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  font-weight:900;
}
.dbi-result strong.neg{color:#d92d20}
.dbi-main{
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.dbi-meter{
  min-height:278px;
  padding:10px 7px;
  border:1px solid #e2e9f3;
  border-radius:14px;
  background:#fbfdff;
  display:flex;
  flex-direction:column;
}
.dbi-meter-title{
  text-align:center;
  color:#0a2147;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  text-transform:uppercase;
}
.dbi-meter-title span{
  display:block;
  margin-top:3px;
  color:#667892;
  font-size:10px;
  font-weight:800;
}
.dbi-meter-body{
  display:grid;
  grid-template-columns:1fr 18px;
  gap:7px;
  flex:1;
  margin-top:8px;
}
.dbi-meter-labels{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:right;
  color:#193055;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.dbi-track{
  position:relative;
  min-height:208px;
  border-radius:99px;
  background:#eef2f7;
}
.dbi-track-pos,
.dbi-track-neg{
  position:absolute;
  left:2px;
  right:2px;
  border-radius:99px;
}
.dbi-track-pos{
  top:2px;
  bottom:50%;
  background:linear-gradient(180deg,#29c760,#22ad46);
}
.dbi-track-neg{
  top:50%;
  bottom:2px;
  background:linear-gradient(180deg,#ff5d5d,#ff3232);
}
.dbi-zero{
  position:absolute;
  left:-6px;
  right:-6px;
  height:2px;
  background:rgba(16,24,40,.25);
}
.dbi-thumb{
  position:absolute;
  left:50%;
  width:17px;
  height:17px;
  border-radius:50%;
  transform:translate(-50%,50%);
  background:#12284a;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #1d4d9a;
}
.dbi-meter-result{
  margin-top:8px;
  text-align:center;
}
.dbi-meter-result strong{
  display:block;
  color:#14964a;
  font-size:14px;
  font-weight:900;
}
.dbi-meter-result strong.neg{color:#d92d20}
.dbi-meter-result span{
  display:block;
  margin-top:3px;
  color:#42536f;
  font-size:10px;
  font-weight:850;
  line-height:1.25;
  text-transform:uppercase;
}
.dbi-chart{min-width:0}
.dbi-svg-wrap{
  border:1px solid #eef3f9;
  border-radius:14px;
  padding:5px;
  background:#fff;
}
.dbi-svg-wrap svg{
  width:100%;
  height:auto;
  display:block;
}
.dbi-legend{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:5px;
  color:#3e506b;
  font-size:11px;
  font-weight:800;
}
.dbi-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dbi-legend i{
  width:9px;
  height:9px;
  border-radius:50%;
}
.dbi-legend .income{background:#14964a}
.dbi-legend .expense{background:#e65b97}
.dbi-legend .fixed{background:#9da8b6}
.dbi-accordion{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--director-line);
}
.dbi-accordion-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.dbi-accordion-summary::-webkit-details-marker{display:none}
.dbi-section-arrow{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef4fb;
  color:#22456f;
  font-size:12px;
  transition:.2s;
  flex:0 0 auto;
}
.dbi-accordion[open] .dbi-section-arrow{
  transform:rotate(90deg);
}
.dbi-accordion h3{
  margin:0;
  color:#173a68;
  font-size:16px;
  font-weight:850;
}
.dbi-scenarios{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.dbi-scenario{
  overflow:hidden;
  border:1px solid var(--director-line);
  border-radius:11px;
  background:#fbfdff;
}
.dbi-scenario summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:20px 116px 160px 1fr;
  gap:8px;
  align-items:center;
  padding:9px 11px;
}
.dbi-scenario summary::-webkit-details-marker{display:none}
.dbi-arrow{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef4fb;
  color:#22456f;
  font-size:12px;
  transition:.2s;
}
.dbi-scenario[open] .dbi-arrow{
  transform:rotate(90deg);
}
.dbi-goal{
  color:#173a68;
  font-size:14px;
  font-weight:900;
}
.dbi-need{
  color:#14964a;
  font-size:14px;
  font-weight:900;
}
.dbi-mini{
  color:#5b6d86;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
}
.dbi-mini.ok{
  color:#14964a;
  font-weight:900;
}
.dbi-scenario-body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:9px 11px;
  border-top:1px solid var(--director-line);
  background:#fff;
}
.dbi-cell{
  padding:8px;
  border:1px solid #e7edf5;
  border-radius:10px;
  background:#fbfdff;
}
.dbi-cell span{
  display:block;
  color:#6a7890;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.dbi-cell strong{
  display:block;
  margin-top:4px;
  color:#17345d;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
}
.dbi-empty{
  padding:18px;
  border:1px dashed #c9d5e6;
  border-radius:14px;
  background:#fbfdff;
  color:#667892;
  font-weight:800;
}
@media(max-width:1400px){
  .dbi-scenario summary{grid-template-columns:20px 108px 145px 1fr}
  .dbi-top h2{font-size:20px}
  .dbi-value{font-size:24px}
}
@media(max-width:980px){
  .dbi-main{grid-template-columns:1fr}
  .dbi-meter{min-height:auto}
  .dbi-scenario summary,
  .dbi-scenario-body{grid-template-columns:1fr}
}



/* Stage 6.4.2 — final break-even block tweaks */
.director-breakeven-inline{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--director-line);
  border-radius:16px;
  box-shadow:var(--director-shadow);
  padding:14px;
  min-width:0;
}
.dbi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.dbi-top h2{margin:0;font-size:22px;font-weight:850;text-transform:uppercase;letter-spacing:.02em;color:#173a68}
.dbi-value{margin-top:5px;font-size:26px;line-height:1;font-weight:900;color:#14964a}
.dbi-metrics{margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:#61728a;font-size:12px;font-weight:750}
.dbi-metrics span{white-space:nowrap}
.dbi-metrics b{color:#173a68}
.dbi-input{width:86px;height:24px;border:1px solid #cfd8e5;border-radius:7px;background:#fff;padding:2px 6px;font-size:12px;font-weight:800;color:#173a68;vertical-align:middle}
.dbi-input-small{width:48px}
.dbi-result{min-width:168px;padding:8px 11px;border:1px solid #d3e8db;background:#f2fbf5;border-radius:12px;color:#138542}
.dbi-result span{display:block;font-size:10px;font-weight:900;text-transform:uppercase}
.dbi-result strong{display:block;margin-top:4px;font-size:16px;font-weight:900}
.dbi-result strong.neg{color:#d92d20}
.dbi-main{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:stretch}
.dbi-meter{height:330px;padding:10px 8px;border:1px solid #e2e9f3;border-radius:14px;background:#fbfdff;display:flex;flex-direction:column}
.dbi-meter-title{display:none}
.dbi-meter-body{display:grid;grid-template-columns:1fr 18px;gap:7px;flex:1;min-height:0;margin-top:0}
.dbi-meter-labels{display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:#193055;font-size:10px;font-weight:850;white-space:nowrap}
.dbi-track{position:relative;min-height:0;border-radius:99px;background:#eef2f7}
.dbi-track-pos,.dbi-track-neg{position:absolute;left:2px;right:2px;border-radius:99px}
.dbi-track-pos{top:2px;bottom:50%;background:linear-gradient(180deg,#29c760,#22ad46)}
.dbi-track-neg{top:50%;bottom:2px;background:linear-gradient(180deg,#ff5d5d,#ff3232)}
.dbi-zero{position:absolute;left:-6px;right:-6px;top:50%;height:2px;background:rgba(16,24,40,.25)}
.dbi-thumb{position:absolute;left:50%;width:17px;height:17px;border-radius:50%;transform:translate(-50%,50%);background:#12284a;border:3px solid #fff;box-shadow:0 0 0 2px #1d4d9a}
.dbi-meter-result{margin-top:7px;text-align:center}
.dbi-meter-result strong{display:block;color:#14964a;font-size:11px;font-weight:550;line-height:1.15;white-space:nowrap;letter-spacing:-.01em}
.dbi-meter-result strong.neg{color:#d92d20}
.dbi-meter-result span{display:none}
.dbi-chart{min-width:0}
.dbi-svg-wrap{height:330px;border:1px solid #eef3f9;border-radius:14px;padding:5px;background:#fff}
.dbi-svg-wrap svg{width:100%;height:100%;display:block}
.dbi-legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:5px;color:#3e506b;font-size:11px;font-weight:800}
.dbi-legend span{display:inline-flex;align-items:center;gap:5px}
.dbi-legend i{width:9px;height:9px;border-radius:50%}
.dbi-legend .income{background:#14964a}
.dbi-legend .expense{background:#e65b97}
.dbi-legend .fixed{background:#9da8b6}
.dbi-accordion{margin-top:10px;padding-top:10px;border-top:1px solid var(--director-line)}
.dbi-accordion-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.dbi-accordion-summary::-webkit-details-marker{display:none}
.dbi-section-arrow{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eef4fb;color:#22456f;font-size:13px;transition:.2s;flex:0 0 auto}
.dbi-accordion[open] .dbi-section-arrow{transform:rotate(90deg)}
.dbi-accordion h3{margin:0;color:#173a68;font-size:16px;font-weight:850}
.dbi-scenarios{display:grid;gap:7px;margin-top:9px}
.dbi-scenario{overflow:hidden;border:1px solid var(--director-line);border-radius:11px;background:#fbfdff}
.dbi-scenario summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:20px 116px 160px 1fr;gap:8px;align-items:center;padding:9px 11px}
.dbi-scenario summary::-webkit-details-marker{display:none}
.dbi-arrow{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#eef4fb;color:#22456f;font-size:12px;transition:.2s}
.dbi-scenario[open] .dbi-arrow{transform:rotate(90deg)}
.dbi-goal{color:#173a68;font-size:14px;font-weight:900}
.dbi-need{color:#14964a;font-size:14px;font-weight:900}
.dbi-mini{color:#5b6d86;font-size:11px;font-weight:700;line-height:1.25}
.dbi-mini.ok{color:#14964a;font-weight:900}
.dbi-scenario-body{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px 11px;border-top:1px solid var(--director-line);background:#fff}
.dbi-cell{padding:8px;border:1px solid #e7edf5;border-radius:10px;background:#fbfdff}
.dbi-cell span{display:block;color:#6a7890;font-size:10px;font-weight:900;text-transform:uppercase}
.dbi-cell strong{display:block;margin-top:4px;color:#17345d;font-size:12px;font-weight:900;line-height:1.25}
@media(max-width:980px){
  .dbi-main{grid-template-columns:1fr}
  .dbi-scenario summary,.dbi-scenario-body{grid-template-columns:1fr}
}


/* Stage 7.2 — approved Plans section */
.dplans-period{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--director-shadow);
}
.dplans-period label{
  color:#52627a;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}
.dplans-period select{
  height:38px;
  border:1px solid #ccd8e8;
  border-radius:10px;
  padding:0 12px;
  background:#fff;
  color:#142f57;
  font-weight:800;
}
.dplans-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.dplans-tab{
  border:1px solid var(--director-line);
  background:#fff;
  color:#173a68;
  border-radius:999px;
  padding:11px 16px;
  font-weight:850;
}
.dplans-tab.active{
  border-color:#0b55c4;
  background:#0b55c4;
  color:#fff;
}
.dplans-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}
.dplans-kpi{
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--director-shadow);
}
.dplans-label{
  color:#5e6d84;
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
}
.dplans-value{
  margin-top:8px;
  color:#102d58;
  font-size:25px;
  font-weight:950;
}
.dplans-value.green{color:#14964a}
.dplans-value.orange{color:#d88916}
.dplans-hint{
  margin-top:8px;
  color:#60718b;
  font-size:13px;
  font-weight:750;
}
.dplans-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) 390px;
  gap:16px;
  align-items:start;
}
.dplans-grid.lower{margin-top:16px}
.dplans-panel{
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:18px;
  box-shadow:var(--director-shadow);
  padding:18px;
}
.dplans-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.dplans-panel h2{
  margin:0;
  color:#102d58;
  font-size:21px;
}
.dplans-sub{
  margin-top:5px;
  color:#63718a;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
.dplans-btn{
  border:0;
  border-radius:12px;
  background:#0b55c4;
  color:#fff;
  padding:11px 14px;
  font-weight:900;
  cursor:pointer;
}
.dplans-btn.ghost{
  border:1px solid #d7e2f0;
  background:#f1f6fd;
  color:#164273;
}
.dplans-expense-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 14px;
}
.dplans-expense-tab{
  border:1px solid var(--director-line);
  background:#f6f9fd;
  color:#173a68;
  border-radius:999px;
  padding:9px 13px;
  font-weight:850;
}
.dplans-expense-tab.active{
  background:#0b55c4;
  border-color:#0b55c4;
  color:#fff;
}
.dplans-expense-list{
  display:grid;
  gap:10px;
}
.dplans-expense-row{
  display:grid;
  grid-template-columns:1fr 150px 112px;
  gap:12px;
  align-items:center;
  border:1px solid var(--director-line);
  border-radius:14px;
  padding:12px 14px;
  background:#fbfdff;
}
.dplans-expense-row strong{font-size:16px}
.dplans-expense-row input,
.dplans-plan-input{
  height:38px;
  border:1px solid #cbd8e8;
  border-radius:10px;
  padding:0 11px;
  font-weight:850;
  text-align:right;
}
.dplans-pill{
  justify-self:start;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.dplans-pill.fixed{background:#edf4ff;color:#174a98}
.dplans-pill.var{background:#fff7e8;color:#9a5a00}
.dplans-total-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:14px;
  border:1px solid var(--director-line);
  border-radius:14px;
  background:#f3f7fc;
  font-weight:900;
}
.dplans-total-line b{
  color:#102d58;
  font-size:20px;
}
.dplans-note-box{
  margin-top:16px;
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:13px 14px;
  color:#52657f;
  font-weight:650;
  line-height:1.45;
}
.dplans-fact-table{
  width:100%;
  border-collapse:collapse;
}
.dplans-fact-table th,
.dplans-fact-table td{
  padding:12px 8px;
  border-bottom:1px solid var(--director-line);
  text-align:left;
}
.dplans-fact-table th{
  color:#65748b;
  font-size:12px;
  text-transform:uppercase;
}
.dplans-fact-table td{font-weight:750}
.dplans-status{
  font-weight:900;
}
.dplans-status.ok{color:#14964a}
.dplans-status.warn{color:#d88916}
.dplans-status.bad{color:#d92d20}
.dplans-manager-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 9px;
}
.dplans-manager-table th{
  padding:0 10px;
  color:#65748b;
  font-size:12px;
  text-align:left;
  text-transform:uppercase;
}
.dplans-manager-table td{
  background:#fbfdff;
  border-top:1px solid var(--director-line);
  border-bottom:1px solid var(--director-line);
  padding:12px 10px;
  font-weight:750;
}
.dplans-manager-table td:first-child{
  border-left:1px solid var(--director-line);
  border-radius:13px 0 0 13px;
}
.dplans-manager-table td:last-child{
  border-right:1px solid var(--director-line);
  border-radius:0 13px 13px 0;
}
.dplans-manager{
  font-weight:900;
}
.dplans-manager span{
  display:block;
  margin-top:3px;
  color:#667892;
  font-size:12px;
  font-weight:700;
}
.dplans-plan-input{
  width:135px;
}
.dplans-progress{
  height:8px;
  border-radius:99px;
  background:#edf2f7;
  overflow:hidden;
}
.dplans-progress i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#0b55c4,#d4a64a);
}
.dplans-history{
  display:grid;
  gap:10px;
}
.dplans-history-item{
  border:1px solid var(--director-line);
  border-radius:14px;
  padding:12px;
  background:#fbfdff;
}
.dplans-history-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}
.dplans-history-item p{
  margin:7px 0 0;
  color:#61718a;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
@media(max-width:1400px){
  .dplans-cards{grid-template-columns:repeat(2,1fr)}
  .dplans-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .dplans-cards{grid-template-columns:1fr}
  .dplans-expense-row{grid-template-columns:1fr}
  .dplans-panel-head{display:block}
  .dplans-btn{margin-top:12px}
}



/* Stage 7.2.1 — fix plan-fact table overflow */
.dplans-fact-table{
  table-layout:fixed;
}
.dplans-fact-table th,
.dplans-fact-table td{
  padding:10px 6px;
  font-size:13px;
  white-space:normal;
}
.dplans-fact-table th:nth-child(1),
.dplans-fact-table td:nth-child(1){width:32%}
.dplans-fact-table th:nth-child(2),
.dplans-fact-table td:nth-child(2){width:24%}
.dplans-fact-table th:nth-child(3),
.dplans-fact-table td:nth-child(3){width:24%}
.dplans-fact-table th:nth-child(4),
.dplans-fact-table td:nth-child(4){width:20%}
.dplans-fact-table .dplans-status{
  font-size:12px;
  white-space:nowrap;
}



/* Stage 7.2.2 — make plan-fact money columns safe for million values */
.dplans-grid{
  grid-template-columns:minmax(0,1fr) 430px;
}
.dplans-fact-table{
  table-layout:fixed;
  width:100%;
}
.dplans-fact-table th,
.dplans-fact-table td{
  padding:10px 5px;
  font-size:12px;
}
.dplans-fact-table th:nth-child(1),
.dplans-fact-table td:nth-child(1){width:31%}
.dplans-fact-table th:nth-child(2),
.dplans-fact-table td:nth-child(2){width:25%; white-space:nowrap}
.dplans-fact-table th:nth-child(3),
.dplans-fact-table td:nth-child(3){width:25%; white-space:nowrap}
.dplans-fact-table th:nth-child(4),
.dplans-fact-table td:nth-child(4){width:19%; white-space:nowrap}
.dplans-fact-table .dplans-status{
  font-size:11px;
}
@media(max-width:1400px){
  .dplans-grid{grid-template-columns:1fr}
}



/* Stage 7.3 — Settings as separate director page */
.dsettings-save-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--director-shadow);
}
.dsettings-save-card span{
  color:#60718a;
  font-size:13px;
  font-weight:750;
}
.dsettings-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}
.dsettings-kpi{
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--director-shadow);
}
.dsettings-label{
  color:#5e6d84;
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
}
.dsettings-value{
  margin-top:8px;
  color:#102d58;
  font-size:25px;
  font-weight:950;
}
.dsettings-value.green{color:#14964a}
.dsettings-value.orange{color:#d88916}
.dsettings-hint{
  margin-top:8px;
  color:#60718b;
  font-size:13px;
  font-weight:750;
}
.dsettings-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.dsettings-tabs button{
  border:1px solid var(--director-line);
  background:#fff;
  color:#173a68;
  border-radius:999px;
  padding:11px 16px;
  font-weight:850;
}
.dsettings-tabs button.active{
  background:#0b55c4;
  border-color:#0b55c4;
  color:#fff;
}
.dsettings-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:16px;
  align-items:start;
}
.dsettings-panel{
  background:#fff;
  border:1px solid var(--director-line);
  border-radius:18px;
  box-shadow:var(--director-shadow);
  padding:18px;
}
.dsettings-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.dsettings-panel h2{
  margin:0;
  color:#102d58;
  font-size:21px;
}
.dsettings-sub{
  margin-top:5px;
  color:#63718a;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
.dsettings-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.dsettings-small-cards{
  margin-bottom:14px;
}
.dsettings-table-wrap{
  max-height:none;
}
.dsettings-person{
  font-weight:900;
}
.dsettings-person span{
  display:block;
  margin-top:3px;
  color:#667892;
  font-size:12px;
  font-weight:700;
}
.dsettings-role-list,
.dsettings-history,
.dsettings-system-list,
.dsettings-archive-list{
  display:grid;
  gap:10px;
}
.dsettings-role-list > div,
.dsettings-system-row,
.dsettings-archive-card,
.dsettings-history-item{
  border:1px solid var(--director-line);
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
}
.dsettings-role-list strong,
.dsettings-system-row strong,
.dsettings-archive-card strong{
  display:block;
  color:#102d58;
  font-weight:900;
}
.dsettings-role-list span,
.dsettings-system-row span,
.dsettings-archive-card span{
  display:block;
  margin-top:5px;
  color:#61718a;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
.dsettings-system-row,
.dsettings-archive-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.dsettings-system-row b{
  color:#14964a;
  white-space:nowrap;
}
.dsettings-note,
.dsettings-empty{
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:13px 14px;
  color:#52657f;
  font-weight:650;
  line-height:1.45;
}
.dsettings-panel .finance-settings-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:1400px){
  .dsettings-cards{grid-template-columns:repeat(2,1fr)}
  .dsettings-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .dsettings-cards{grid-template-columns:1fr}
  .dsettings-panel-head{display:block}
  .dsettings-actions{margin-top:12px}
  .dsettings-panel .finance-settings-grid{grid-template-columns:1fr}
}



/* Stage 7.4 — save monthly plans */
.dplans-empty{
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:13px 14px;
  color:#52657f;
  font-weight:650;
}
.dplans-manager-table tfoot td{
  background:#f3f7fc;
  border-top:2px solid var(--director-line);
  border-bottom:1px solid var(--director-line);
  padding:13px 10px;
  font-weight:950;
  color:#102d58;
}
.dplans-manager-table tfoot td:first-child{
  border-left:1px solid var(--director-line);
  border-radius:13px 0 0 13px;
}
.dplans-manager-table tfoot td:last-child{
  border-right:1px solid var(--director-line);
  border-radius:0 13px 13px 0;
}
.dplans-manager-total td{
  font-size:14px;
}



/* Stage 7.4.4 — year/month period selector for plans */
.dplans-period-selects{
  display:flex;
  gap:8px;
  align-items:center;
}
.dplans-period-selects select{
  min-width:118px;
}
.dplans-period-selects select:first-child{
  min-width:86px;
}
@media(max-width:980px){
  .dplans-period{
    align-items:flex-start;
  }
  .dplans-period-selects{
    flex-wrap:wrap;
  }
}



/* Stage 7.4.5 — bottom save button for manager plans */
.dplans-manager-save-row{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}



/* Stage 7.5.1 — break-even uses saved monthly plan */
.dbi-metrics .dbi-source{
  color:#63718a;
  font-weight:850;
}
.dbi-empty{
  border:1px dashed #c7d5e8;
  border-radius:12px;
  background:#fbfeff;
  padding:11px 12px;
  color:#52657f;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}



/* Stage 7.5.2 — show actual net result and gap to break-even */
.dbi-result em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:11px;
  font-weight:850;
  color:#14964a;
}
.dbi-result em.neg{
  color:#d92d20;
}



/* Stage 7.5.3 — align meter labels with zero line */
.dbi-meter-labels{
  position:relative;
  display:block;
}
.dbi-meter-labels > div{
  position:absolute;
  right:0;
}



/* Stage 7.5.4 — fix signed net value and smaller profitability text */
.dbi-result strong{
  white-space:nowrap;
  font-size:15px;
}
.director-right .director-panel .director-donut-wrap > div > strong,
.director-right .director-panel .director-donut-wrap > div > p,
.director-right .director-panel .director-donut-wrap > div:nth-child(2){
  font-size:14px;
  line-height:1.25;
}
.director-donut span{
  font-size:23px;
}



/* Stage 7.6.1 — manager plan and monthly dynamics */
.manager-plan-section{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:16px;
  margin-bottom:16px;
}
.manager-plan-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.manager-plan-head h2{
  margin:0 0 6px;
}
.manager-plan-status{
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
  white-space:nowrap;
  background:#f2f5f9;
  color:#52627a;
}
.manager-plan-status.ok{background:#eaf8ef;color:#14964a}
.manager-plan-status.warn{background:#fff7e8;color:#d88916}
.manager-plan-status.bad{background:#fff0f0;color:#d92d20}
.manager-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.manager-plan-metric{
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
}
.manager-plan-metric span{
  display:block;
  color:#63718a;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}
.manager-plan-metric strong{
  display:block;
  margin-top:7px;
  color:#102d58;
  font-size:18px;
  font-weight:950;
}
.manager-plan-progress{
  height:11px;
  border-radius:999px;
  overflow:hidden;
  background:#edf2f7;
}
.manager-plan-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#0b55c4,#d4a64a);
}
.manager-plan-comment{
  margin-top:10px;
  color:#52627a;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
}
.manager-month-bars{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  align-items:end;
  min-height:175px;
  padding:8px 0 14px;
}
.manager-month-bar{
  display:grid;
  grid-template-rows:110px auto auto;
  gap:6px;
  text-align:center;
  color:#52627a;
  font-size:11px;
  font-weight:800;
}
.manager-month-bar-track{
  display:flex;
  align-items:end;
  justify-content:center;
  height:110px;
  border-radius:12px;
  background:#eef3f9;
  overflow:hidden;
}
.manager-month-bar-track i{
  width:100%;
  min-height:6px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,#0b55c4,#5f8df2);
}
.manager-month-bar.up .manager-month-bar-track i{background:linear-gradient(180deg,#17b26a,#67d48d)}
.manager-month-bar.down .manager-month-bar-track i{background:linear-gradient(180deg,#d92d20,#ff7a73)}
.manager-month-bar strong{
  color:#102d58;
  font-size:11px;
  white-space:nowrap;
}
.manager-dynamics-table{
  width:100%;
  border-collapse:collapse;
  margin-top:2px;
}
.manager-dynamics-table th,
.manager-dynamics-table td{
  border-top:1px solid #dbe4ef;
  padding:9px 6px;
  text-align:left;
  font-size:12px;
  font-weight:800;
}
.manager-dynamics-table th{
  color:#63718a;
  text-transform:uppercase;
}
.manager-dynamics-table td.ok{color:#14964a}
.manager-dynamics-table td.bad{color:#d92d20}
@media(max-width:1200px){
  .manager-plan-section{grid-template-columns:1fr}
}
@media(max-width:760px){
  .manager-plan-grid{grid-template-columns:1fr}
  .manager-month-bars{grid-template-columns:repeat(3,1fr)}
}



/* Stage 7.6.2 — Plans top tabs switch sections */
.dplans-grid.hidden,
.dplans-panel.hidden{
  display:none !important;
}
.dplans-grid.single{
  grid-template-columns:1fr;
}



/* Stage 7.6.3 — manager advice and month labels fix */
.manager-advice{
  margin-top:16px;
  border:1px solid #dbe4ef;
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:start;
}
.manager-advice.good{background:#f1fbf5;border-color:#cfeedd}
.manager-advice.warn{background:#fffaf0;border-color:#f4dfb7}
.manager-advice.bad{background:#fff4f3;border-color:#ffd4d0}
.manager-advice-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#eef4fb;
  color:#0b55c4;
  font-weight:950;
  font-size:20px;
}
.manager-advice.good .manager-advice-icon{background:#ddf7e7;color:#14964a}
.manager-advice.warn .manager-advice-icon{background:#fff0cf;color:#d88916}
.manager-advice.bad .manager-advice-icon{background:#ffe0dd;color:#d92d20}
.manager-advice h3{
  margin:0 0 6px;
  color:#102d58;
  font-size:18px;
}
.manager-advice p{
  margin:0;
  color:#52627a;
  font-size:13px;
  font-weight:750;
  line-height:1.4;
}
.manager-advice span{
  display:block;
  margin-top:8px;
  color:#173a68;
  font-size:12px;
  font-weight:900;
}



/* Stage 7.6.5 — safe decorative trophy block for manager motivation */
.manager-achievement{
  margin-top:16px;
  border-radius:20px;
  padding:18px;
  border:1px solid #dbe4ef;
  background:linear-gradient(180deg,#fbfdff 0%, #f4f8fe 100%);
  box-shadow:0 10px 22px rgba(11,85,196,0.05);
}
.manager-achievement.gold{background:linear-gradient(135deg,#fff7da 0%,#fffdf3 52%,#f7ead0 100%);border-color:#efd79b}
.manager-achievement.silver{background:linear-gradient(135deg,#f2f5fa 0%,#ffffff 52%,#edf1f6 100%);border-color:#d8e0ea}
.manager-achievement.bronze{background:linear-gradient(135deg,#faefe8 0%,#fffaf7 52%,#f3e0d2 100%);border-color:#e9ccb9}
.manager-achievement.good{background:linear-gradient(135deg,#ecfbf2 0%,#fbfffd 52%,#e6f7ec 100%);border-color:#cbe9d5}
.manager-achievement.warn{background:linear-gradient(135deg,#fff7ea 0%,#fffdf8 52%,#fff1cf 100%);border-color:#f0d7a3}
.manager-achievement.bad{background:linear-gradient(135deg,#fff1ef 0%,#fffdfd 52%,#ffe4df 100%);border-color:#f3c5bd}
.manager-achievement-top{
  display:grid;
  grid-template-columns:62px 1fr auto;
  gap:14px;
  align-items:center;
}
.manager-achievement-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:31px;
  background:rgba(255,255,255,0.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 6px 14px rgba(16,45,88,0.08);
}
.manager-achievement-head h3{
  margin:4px 0 0;
  color:#102d58;
  font-size:24px;
  line-height:1.08;
}
.manager-achievement-sub{
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.manager-achievement-badge{
  align-self:start;
  border-radius:999px;
  padding:8px 14px;
  background:#e9f0fb;
  color:#0b55c4;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}
.manager-achievement-badge.gold{background:#fff0b8;color:#8f6200}
.manager-achievement-badge.silver{background:#eef2f7;color:#617084}
.manager-achievement-badge.bronze{background:#f7e0d3;color:#965b2f}
.manager-achievement-text{
  margin:14px 0 0;
  color:#314764;
  font-size:14px;
  font-weight:750;
  line-height:1.45;
}
.manager-achievement-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.manager-achievement-cell{
  border:1px solid rgba(151,175,207,0.35);
  border-radius:14px;
  background:rgba(255,255,255,0.62);
  padding:12px;
}
.manager-achievement-cell span{
  display:block;
  color:#6a7892;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
}
.manager-achievement-cell strong{
  display:block;
  margin-top:6px;
  color:#102d58;
  font-size:18px;
  font-weight:950;
}
.manager-achievement-note{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(110,136,170,0.35);
  color:#173a68;
  font-size:13px;
  font-weight:850;
}
@media(max-width:760px){
  .manager-achievement-top{grid-template-columns:1fr}
  .manager-achievement-badge{justify-self:start}
  .manager-achievement-grid{grid-template-columns:1fr}
}



/* Stage 7.7 — Manager "My incomes" section */
.manager-section-page.hidden{
  display:none !important;
}
.manager-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.manager-page-head h2{
  margin:0;
  color:#102d58;
  font-size:28px;
}
.manager-page-head p{
  margin:6px 0 0;
  color:#63718a;
  font-weight:750;
}
.manager-income-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}
.manager-income-summary > div{
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 22px rgba(8,27,61,.07);
}
.manager-income-summary span{
  display:block;
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.manager-income-summary strong{
  display:block;
  margin-top:8px;
  color:#102d58;
  font-size:22px;
  font-weight:950;
}
.manager-income-full-table th,
.manager-income-full-table td{
  font-size:13px;
}
.manager-income-bar{
  height:6px;
  margin-top:6px;
  border-radius:99px;
  background:#edf2f7;
  overflow:hidden;
}
.manager-income-bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#0b55c4,#d4a64a);
}
@media(max-width:1100px){
  .manager-income-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .manager-income-summary{grid-template-columns:1fr}
}



/* Stage 7.7.2 — payment filter and keep manager section on period change */
.manager-payment-filter{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.manager-payment-filter button{
  border:1px solid #d7e2f0;
  background:#fff;
  color:#173a68;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.manager-payment-filter button.active{
  background:#0b55c4;
  border-color:#0b55c4;
  color:#fff;
}
@media(max-width:760px){
  .manager-page-head{
    display:block;
  }
  .manager-payment-filter{
    margin-top:12px;
  }
}



/* Stage 7.7.3 — manager clients filter/search section */
.manager-client-tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.manager-client-tools select,
.manager-client-search{
  height:44px;
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  color:#173a68;
  font-weight:900;
}
.manager-client-tools select{
  padding:0 14px;
}
.manager-client-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
}
.manager-client-search span{
  color:#64758e;
  font-weight:950;
}
.manager-client-search input{
  border:0;
  outline:0;
  min-width:210px;
  color:#102d58;
  font-weight:850;
  background:transparent;
}
.manager-clients-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:16px;
}
.manager-client-alert{
  display:inline-block;
  margin-left:8px;
  border-radius:999px;
  padding:4px 8px;
  background:#fff0f0;
  color:#d92d20;
  font-size:11px;
  font-weight:950;
}
.manager-client-attention-row td{
  background:#fffdf8;
}
.manager-client-status{
  border-radius:999px;
  padding:6px 9px;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}
.manager-client-status.ok{
  background:#eaf8ef;
  color:#14964a;
}
.manager-client-status.warn{
  background:#fff3e2;
  color:#d88916;
}
.manager-attention-card h2{
  margin-bottom:6px;
}
.manager-attention-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.manager-attention-client{
  border:1px solid #f0d7a3;
  border-radius:14px;
  background:#fffaf0;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.manager-attention-client strong{
  display:block;
  color:#102d58;
}
.manager-attention-client span{
  display:block;
  margin-top:5px;
  color:#63718a;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}
.manager-attention-client b{
  color:#d88916;
  font-size:12px;
  white-space:nowrap;
}
.manager-attention-empty{
  border:1px dashed #c7d5e8;
  border-radius:14px;
  padding:12px;
  color:#52657f;
  font-weight:750;
  line-height:1.35;
}
@media(max-width:1200px){
  .manager-clients-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .manager-client-tools{
    margin-top:12px;
  }
  .manager-client-search input{
    min-width:140px;
  }
}



/* Stage 7.7.4 — compact filters inside manager incomes section */
.manager-income-inline-tools{
  display:flex;
  align-items:center;
  gap:14px;
  margin:-4px 0 10px;
  flex-wrap:wrap;
}
.manager-income-filter-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.manager-income-filter-left button{
  border:0;
  background:transparent;
  color:#d92d20;
  padding:2px 0;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.manager-income-filter-left button.active{
  color:#0b55c4;
  font-weight:900;
}
.manager-income-search{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:230px;
  height:28px;
  border:1px solid #d92d20;
  background:#fff;
  padding:0 8px;
}
.manager-income-search span{
  color:#63718a;
  font-weight:900;
}
.manager-income-search input{
  border:0;
  outline:0;
  width:100%;
  color:#102d58;
  font-weight:800;
  background:transparent;
}
@media(max-width:760px){
  .manager-income-inline-tools{
    align-items:flex-start;
  }
  .manager-income-search{
    width:100%;
  }
}



/* Stage 7.7.5 — clean style and stable search input for manager incomes */
.manager-income-inline-tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  flex-wrap:wrap;
}
.manager-income-filter-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.manager-income-filter-left button{
  border:1px solid #d7e2f0;
  background:#fff;
  color:#173a68;
  border-radius:999px;
  padding:9px 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
}
.manager-income-filter-left button.active{
  background:#0b55c4;
  border-color:#0b55c4;
  color:#fff;
}
.manager-income-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:260px;
  height:42px;
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  padding:0 12px;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
}
.manager-income-search:focus-within{
  border-color:#0b55c4;
  box-shadow:0 0 0 3px rgba(11,85,196,.10);
}
.manager-income-search span{
  color:#64758e;
  font-weight:950;
  font-size:15px;
}
.manager-income-search input{
  border:0;
  outline:0;
  width:100%;
  color:#102d58;
  font-weight:850;
  background:transparent;
}
.manager-income-search input::placeholder{
  color:#7a8aa3;
}
@media(max-width:760px){
  .manager-income-inline-tools{
    align-items:flex-start;
  }
  .manager-income-search{
    width:100%;
    min-width:0;
  }
}



/* Stage 7.7.7 — unified payment type badges */
.payment-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  border:1px solid transparent;
  background:#f8fbff;
  white-space:nowrap;
}
.payment-badge.cash{
  color:#14964a;
  background:#f1fbf5;
  border-color:#bfe8cf;
}
.payment-badge.cashless{
  color:#0b55c4;
  background:#eef5ff;
  border-color:#c8daf7;
}
.revenue-pay.cash{
  color:#14964a;
  background:#f1fbf5;
  border-color:#bfe8cf;
}
.revenue-pay.bank,
.revenue-pay.card,
.revenue-pay.unknown{
  color:#0b55c4;
  background:#eef5ff;
  border-color:#c8daf7;
}



/* Stage 7.8 — manager rating section */
.manager-rating-winners{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:16px;
}
.manager-rating-winner{
  display:grid;
  grid-template-columns:66px 1fr;
  gap:14px;
  align-items:center;
  border:1px solid #dbe4ef;
  border-radius:20px;
  padding:16px;
  background:#fff;
  box-shadow:0 10px 22px rgba(8,27,61,.07);
}
.manager-rating-winner.gold{
  background:linear-gradient(135deg,#fff7da 0%,#fffdf3 55%,#f7ead0 100%);
  border-color:#efd79b;
}
.manager-rating-winner.silver{
  background:linear-gradient(135deg,#f2f5fa 0%,#ffffff 55%,#edf1f6 100%);
  border-color:#d8e0ea;
}
.manager-rating-winner.bronze{
  background:linear-gradient(135deg,#faefe8 0%,#fffaf7 55%,#f3e0d2 100%);
  border-color:#e9ccb9;
}
.manager-rating-winner.me{
  box-shadow:0 0 0 3px rgba(11,85,196,.12), 0 10px 22px rgba(8,27,61,.07);
}
.manager-rating-medal{
  width:66px;
  height:66px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:rgba(255,255,255,.7);
}
.manager-rating-winner span{
  display:block;
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.manager-rating-winner h3{
  margin:4px 0 8px;
  color:#102d58;
  font-size:21px;
}
.manager-rating-winner strong{
  display:block;
  color:#102d58;
  font-size:22px;
  font-weight:950;
}
.manager-rating-winner p{
  margin:6px 0 0;
  color:#63718a;
  font-size:12px;
  font-weight:800;
}
.manager-rating-full-table th,
.manager-rating-full-table td{
  font-size:13px;
}
@media(max-width:1200px){
  .manager-rating-winners{
    grid-template-columns:1fr;
  }
}



/* Stage 7.8.1 — clients filter row layout */
.manager-client-filter-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.manager-client-filter-select{
  height:42px;
  min-width:230px;
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  color:#173a68;
  font-weight:900;
  padding:0 14px;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
  outline:0;
}
.manager-client-filter-select:focus{
  border-color:#0b55c4;
  box-shadow:0 0 0 3px rgba(11,85,196,.10);
}
.manager-client-filter-row .manager-client-search{
  height:42px;
  min-width:270px;
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
}
.manager-client-filter-row .manager-client-search:focus-within{
  border-color:#0b55c4;
  box-shadow:0 0 0 3px rgba(11,85,196,.10);
}
@media(max-width:760px){
  .manager-client-filter-select,
  .manager-client-filter-row .manager-client-search{
    width:100%;
    min-width:0;
  }
}



/* Stage 7.10 — manager history / monthly plan-fact */
.manager-history-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:16px;
  margin-bottom:16px;
}
.manager-history-bars{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:8px;
  align-items:end;
  min-height:230px;
  padding-top:14px;
}
.manager-history-bar{
  display:grid;
  grid-template-rows:140px auto auto;
  gap:6px;
  text-align:center;
  color:#52627a;
  font-size:10px;
  font-weight:800;
}
.manager-history-track{
  position:relative;
  display:flex;
  align-items:end;
  justify-content:center;
  height:140px;
  border-radius:12px;
  background:#eef3f9;
  overflow:hidden;
}
.manager-history-track i{
  display:block;
  width:100%;
  min-height:6px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,#0b55c4,#5f8df2);
}
.manager-history-track span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#d4a64a;
  z-index:2;
}
.manager-history-bar.ok .manager-history-track i{
  background:linear-gradient(180deg,#17b26a,#67d48d);
}
.manager-history-bar.down .manager-history-track i{
  background:linear-gradient(180deg,#d92d20,#ff7a73);
}
.manager-history-bar strong{
  color:#102d58;
  font-size:10px;
  white-space:nowrap;
}
.manager-history-bar em{
  color:#63718a;
  font-style:normal;
}
.manager-history-insight h2{
  margin-bottom:6px;
}
.manager-history-big{
  margin-top:18px;
  font-size:28px;
  font-weight:950;
  color:#14964a;
}
.manager-history-big.bad{
  color:#d92d20;
}
.manager-history-insight p{
  margin:12px 0 0;
  color:#52627a;
  font-size:14px;
  font-weight:750;
  line-height:1.45;
}
.manager-history-note{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:#f6f9fd;
  color:#173a68;
  font-weight:900;
}
.manager-history-table th,
.manager-history-table td{
  font-size:13px;
}
.manager-history-table td.ok{
  color:#14964a;
}
.manager-history-table td.bad{
  color:#d92d20;
}
@media(max-width:1300px){
  .manager-history-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .manager-history-bars{
    grid-template-columns:repeat(6,1fr);
  }
}
@media(max-width:620px){
  .manager-history-bars{
    grid-template-columns:repeat(3,1fr);
  }
}



/* Stage 7.11 — manager profile section */
.manager-profile-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:16px;
  margin-bottom:16px;
}
.manager-profile-main{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:18px;
  align-items:center;
}
.manager-profile-avatar{
  width:86px;
  height:86px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0b55c4,#5f8df2);
  color:#fff;
  font-size:38px;
  font-weight:950;
  box-shadow:0 14px 26px rgba(11,85,196,.18);
}
.manager-profile-main h2{
  margin:0 0 6px;
  color:#102d58;
  font-size:28px;
}
.manager-profile-main p{
  margin:0;
  color:#63718a;
  font-weight:750;
}
.manager-profile-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.manager-profile-tags span{
  border:1px solid #d7e2f0;
  border-radius:999px;
  background:#f8fbff;
  color:#173a68;
  padding:7px 10px;
  font-size:12px;
  font-weight:850;
}
.manager-profile-plan h2{
  margin-bottom:14px;
}
.manager-profile-plan-grid,
.manager-profile-status{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.manager-profile-plan-grid div,
.manager-profile-status div{
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
}
.manager-profile-plan-grid span,
.manager-profile-status span{
  display:block;
  color:#63718a;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.manager-profile-plan-grid strong,
.manager-profile-status strong{
  display:block;
  margin-top:7px;
  color:#102d58;
  font-size:18px;
  font-weight:950;
}
.manager-profile-plan-grid strong.ok{color:#14964a}
.manager-profile-plan-grid strong.warn{color:#d88916}
.manager-profile-plan-grid strong.bad{color:#d92d20}
.manager-profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.manager-permission-list{
  display:grid;
  gap:10px;
}
.manager-permission-list div{
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
}
.manager-permission-list b{
  display:block;
  color:#102d58;
  font-weight:950;
}
.manager-permission-list span{
  display:block;
  margin-top:5px;
  color:#63718a;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
}
.manager-profile-note{
  margin-top:14px;
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:12px;
  color:#52657f;
  font-size:13px;
  font-weight:750;
  line-height:1.4;
}
@media(max-width:1200px){
  .manager-profile-layout,
  .manager-profile-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .manager-profile-main{
    grid-template-columns:1fr;
  }
  .manager-profile-plan-grid,
  .manager-profile-status{
    grid-template-columns:1fr;
  }
}



/* Stage 7.12 — final manager cabinet polish */
.manager-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.manager-table-scroll table{
  min-width:860px;
}
.manager-main-table tbody tr:hover td{
  background:#f8fbff;
}
.manager-main-table td.pos,
.manager-main-table td.neg,
.manager-main-table td:nth-child(3),
.manager-main-table td:nth-child(4){
  white-space:nowrap;
}
.manager-link[data-manager-jump]{
  cursor:pointer;
}
.manager-cta[data-manager-jump]{
  cursor:pointer;
}
.manager-section-page{
  animation:managerFadeIn .16s ease both;
}
@keyframes managerFadeIn{
  from{opacity:.75; transform:translateY(2px)}
  to{opacity:1; transform:translateY(0)}
}
@media(max-width:900px){
  .manager-filters{
    align-items:flex-start;
  }
  .manager-filter-tabs{
    width:100%;
    overflow-x:auto;
  }
}



/* Stage 8.1 — Director directories page */
.directory-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}
.directory-kpis .director-card{
  min-height:112px;
}
.directory-kpis .director-card span{
  display:block;
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.directory-kpis .director-card strong{
  display:block;
  margin-top:8px;
  color:#102d58;
  font-size:28px;
  font-weight:950;
}
.directory-kpis .director-card strong.green{color:#14964a}
.directory-kpis .director-card strong.orange{color:#d88916}
.directory-kpis .director-card p{
  margin:8px 0 0;
  color:#63718a;
  font-size:13px;
  font-weight:750;
}
.directory-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.directory-tab{
  border:1px solid #dbe4ef;
  background:#fff;
  color:#173a68;
  border-radius:999px;
  padding:11px 16px;
  font-weight:900;
  cursor:pointer;
}
.directory-tab.active{
  background:#0b55c4;
  border-color:#0b55c4;
  color:#fff;
}
.directory-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:16px;
  align-items:start;
}
.directory-panel{
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(8,27,61,.08);
  padding:18px;
}
.directory-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.directory-panel-head h2{
  margin:0;
  color:#102d58;
  font-size:21px;
}
.directory-panel-head p{
  margin:6px 0 0;
  color:#63718a;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
}
.directory-tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.directory-search{
  display:flex;
  align-items:center;
  gap:8px;
  height:42px;
  min-width:260px;
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  padding:0 12px;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
}
.directory-search input{
  border:0;
  outline:0;
  width:100%;
  color:#102d58;
  font-weight:850;
}
.directory-tools select,
.directory-form select,
.directory-form input,
.directory-form textarea{
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#fff;
  color:#173a68;
  font-weight:850;
  outline:0;
}
.directory-tools select{
  height:42px;
  padding:0 14px;
  box-shadow:0 6px 14px rgba(8,27,61,.04);
}
.directory-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.directory-table{
  width:100%;
  min-width:850px;
  border-collapse:separate;
  border-spacing:0 9px;
}
.directory-table th{
  text-align:left;
  padding:0 10px;
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.directory-table td{
  background:#fbfdff;
  border-top:1px solid #dbe4ef;
  border-bottom:1px solid #dbe4ef;
  padding:12px 10px;
  color:#102d58;
  font-weight:800;
}
.directory-table td:first-child{
  border-left:1px solid #dbe4ef;
  border-radius:13px 0 0 13px;
}
.directory-table td:last-child{
  border-right:1px solid #dbe4ef;
  border-radius:0 13px 13px 0;
}
.directory-entity strong{
  display:block;
  color:#102d58;
}
.directory-entity span{
  display:block;
  margin-top:4px;
  color:#63718a;
  font-size:12px;
  font-weight:750;
}
.directory-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  height:26px;
  border-radius:999px;
  padding:0 10px;
  font-size:12px;
  font-weight:850;
  border:1px solid #dbe4ef;
  background:#f8fbff;
  color:#173a68;
  white-space:nowrap;
}
.directory-badge.fix{color:#14964a;background:#f1fbf5;border-color:#bfe8cf}
.directory-badge.var{color:#7a45b5;background:#f4eefe;border-color:#decdf8}
.directory-badge.prod{color:#0b55c4;background:#eef5ff;border-color:#c8daf7}
.directory-badge.raw{color:#7a4c00;background:#fff7e8;border-color:#f2d9ad}
.directory-status.ok{
  color:#14964a;
  font-weight:950;
}
.directory-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.settings-mini-btn.danger{
  color:#b42318;
  background:#fff0f0;
  border-color:#ffd3d0;
}
.directory-note{
  margin-top:14px;
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:13px 14px;
  color:#52657f;
  font-size:13px;
  font-weight:750;
  line-height:1.45;
}
.directory-form{
  display:grid;
  gap:12px;
  border:1px solid #dbe4ef;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfdff,#f6f9fd);
  padding:14px;
}
.directory-form label{
  display:grid;
  gap:6px;
  color:#63718a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.directory-form select,
.directory-form input{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  text-transform:none;
}
.directory-form textarea{
  width:100%;
  min-height:82px;
  padding:10px 12px;
  resize:vertical;
  text-transform:none;
}
.directory-form small{
  color:#7a879b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  text-transform:none;
}
@media(max-width:1300px){
  .directory-layout{
    grid-template-columns:1fr;
  }
  .directory-kpis{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:760px){
  .directory-kpis{
    grid-template-columns:1fr;
  }
  .directory-search,
  .directory-tools select{
    width:100%;
  }
}



/* Stage 8.2 — Directories save/edit/archive */
.directory-status.archive{
  color:#7b8798;
  font-weight:950;
}
.directory-form .settings-mini-btn{
  width:100%;
  justify-content:center;
  margin-top:-4px;
}
.directory-table tbody tr:hover td{
  background:#f8fbff;
}



/* Stage 8.3.3 — safe accordion and edit modal */
.directory-accordion{
  display:grid;
  gap:10px;
}
.directory-accordion-group{
  border:1px solid #dbe4ef;
  border-radius:16px;
  background:#fbfdff;
  overflow:hidden;
}
.directory-accordion-head{
  width:100%;
  border:0;
  background:#f6f9fd;
  padding:14px 16px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:12px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  color:#102d58;
}
.directory-accordion-arrow{
  width:28px;height:28px;border-radius:50%;
  background:#eef5ff;color:#0b55c4;
  display:grid;place-items:center;
  font-size:18px;font-weight:950;
}
.directory-accordion-head strong{
  display:block;font-size:17px;font-weight:950;color:#102d58;
}
.directory-accordion-head em{
  display:block;margin-top:4px;color:#63718a;
  font-style:normal;font-size:12px;font-weight:750;
}
.directory-accordion-head b{
  min-width:34px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  background:#fff;border:1px solid #d7e2f0;
  color:#0b55c4;font-size:13px;font-weight:950;
}
.directory-accordion-body{display:none;padding:0 12px 12px}
.directory-accordion-group.open .directory-accordion-body{display:block}
.directory-empty{
  border:1px dashed #c7d5e8;border-radius:14px;
  padding:16px;color:#52657f;font-weight:850;background:#fbfeff;
}
.directory-status.archive{color:#7b8798;font-weight:950}
.directory-search{min-width:300px;background:#fff;overflow:hidden}
.directory-search span{flex:0 0 auto;color:#64758e;font-weight:950}
.directory-search input{display:block;min-width:0}
.directory-modal-backdrop{
  position:fixed;inset:0;z-index:1000;background:rgba(6,31,63,.42);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.directory-modal{
  width:min(620px,100%);max-height:calc(100vh - 48px);overflow:auto;
  background:#fff;border:1px solid #dbe4ef;border-radius:22px;
  box-shadow:0 24px 70px rgba(8,27,61,.25);padding:20px;
}
.directory-modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;
}
.directory-modal-head h2{margin:0;color:#102d58;font-size:24px}
.directory-modal-head p{margin:6px 0 0;color:#63718a;font-weight:750;line-height:1.4}
.directory-modal-close{
  width:36px;height:36px;border:0;border-radius:50%;
  background:#eef3f9;color:#102d58;font-size:24px;font-weight:800;cursor:pointer;
}
.directory-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.directory-modal-actions .director-primary-btn{flex:1 1 220px}
.directory-modal-actions .settings-mini-btn{min-height:42px;padding:0 14px}
@media(max-width:720px){.directory-modal-actions{display:grid}}



/* Stage 8.3.5 — restore archived category logic */
.directory-modal-archive-note{
  margin:0 0 14px;
  border:1px solid #f0d7a3;
  border-radius:14px;
  background:#fffaf0;
  color:#7a4c00;
  padding:12px;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}
.directory-status.archive{
  color:#7b8798;
  font-weight:950;
}



/* Stage 8.4 — directories tabs */
.directory-layout.one-column{
  grid-template-columns:1fr;
}
.directory-badge.income{
  color:#0b55c4;
  background:#eef5ff;
  border-color:#c8daf7;
}
.directory-structure-list{
  display:grid;
  gap:10px;
}
.directory-structure-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  border:1px solid #dbe4ef;
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
}
.directory-structure-line div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 12px;
  align-items:center;
}
.directory-structure-line strong{
  color:#102d58;
  font-size:17px;
}
.directory-structure-line span{
  grid-column:2;
  color:#63718a;
  font-size:13px;
  font-weight:750;
}
.directory-structure-line b{
  min-width:42px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#eef5ff;
  color:#0b55c4;
  font-weight:950;
}
.directory-placeholder-text{
  color:#63718a;
  font-weight:750;
  line-height:1.45;
}



/* Stage 8.5 — income / managers directory */
.directory-table th:nth-child(3),
.directory-table td:nth-child(3){
  min-width:170px;
}
.directory-form #directoryIncomeName,
.directory-form #directoryIncomeModalName{
  font-weight:900;
}



/* Stage 8.6 — cashier uses active directories only */
.cashier-empty-form{
  border:1px dashed #c7d5e8;
  border-radius:14px;
  background:#fbfeff;
  padding:16px;
  color:#52657f;
  font-weight:850;
  line-height:1.45;
}



/* Stage 8.6.1 — manager/user status labels in directories */
.directory-status.fired{
  color:#d92d20;
  font-weight:950;
}
.directory-status.archive{
  color:#7b8798;
  font-weight:950;
}



/* Stage 8.7 — plans use active directories */
.dplans-expense-row.archived{
  background:#fbfcfe;
  border-style:dashed;
  opacity:.88;
}
.dplans-archive-label{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #d7e2f0;
  background:#f2f5f9;
  color:#7b8798;
  font-size:11px;
  font-weight:850;
  vertical-align:middle;
}



/* Stage 8.8 — break-even uses saved monthly plan */
.dbi-source.muted{
  color:#7b8798;
  background:#f2f5f9;
  border-color:#d7e2f0;
}



/* Stage 9.0 — cashier revision */
.cashier-stage-note{
  display:inline-flex;
  margin-top:8px;
  padding:7px 10px;
  border:1px solid #d7e2f0;
  border-radius:999px;
  background:#f8fbff;
  color:#5f7088;
  font-size:12px;
  font-weight:800;
}



/* Stage 9.1 — cashier edit operations */
.cashier-edit-note{
  border:1px solid #d7e2f0;
  border-radius:14px;
  background:#f8fbff;
  padding:10px 12px;
  color:#5f7088;
  font-size:13px;
  font-weight:800;
  margin:8px 0 14px;
}
.cashier-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cashier-edit-grid label{
  display:grid;
  gap:7px;
  color:#102d58;
  font-weight:900;
  font-size:13px;
}
.cashier-edit-grid label.wide{
  grid-column:1 / -1;
}
.cashier-edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.cashier-edit-actions .director-primary-btn{
  min-width:220px;
}
.edit-pay-group{
  align-items:stretch;
}
@media(max-width:760px){
  .cashier-edit-grid{
    grid-template-columns:1fr;
  }
  .cashier-edit-actions{
    display:grid;
  }
}



/* Stage 9.1.1 — clearer edit modal fields and required payment select */
.cashier-edit-grid{
  gap:14px;
}
.cashier-edit-grid label{
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
}
.cashier-edit-grid label:focus-within{
  border-color:#8fb7f4;
  box-shadow:0 0 0 3px rgba(11,85,196,.08);
  background:#fff;
}
.cashier-edit-grid .cashier-input,
.cashier-edit-grid .cashier-select{
  background:#fff;
  border-color:#cfdbea;
  min-height:44px;
}
.cashier-edit-grid label.wide{
  grid-column:1 / -1;
}
.cashier-edit-note{
  background:#f8fbff;
}
#cashierIncomePayType{
  min-height:44px;
  font-weight:850;
}
#cashierIncomePayType:invalid{
  color:#7b8798;
}



/* Stage 9.2 — cashier delete operations */
.cashier-edit-actions.split{
  justify-content:space-between;
  align-items:center;
}
.cashier-edit-actions.split > div{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.settings-mini-btn.danger{
  border-color:#ffd0d0;
  background:#fff1f1;
  color:#b42318;
}
.settings-mini-btn.danger:hover{
  background:#ffe5e5;
}
@media(max-width:760px){
  .cashier-edit-actions.split,
  .cashier-edit-actions.split > div{
    display:grid;
    width:100%;
  }
}



/* Stage 9.3 — cashier audit log */
.cashier-event.audit-event p{
  line-height:1.35;
}
.cashier-dot.blue{
  background:#0b55c4;
}
.cashier-dot.orange{
  background:#d98200;
}
.cashier-dot.gray{
  background:#94a3b8;
}
.cashier-history .cashier-time{
  min-width:82px;
  text-align:right;
  line-height:1.25;
}



/* Stage 9.5 — cashier operations page */
.cashier-cards.compact{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cashier-ops-page{
  display:grid;
  gap:16px;
}
.cashier-ops-filters{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:12px;
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 32px rgba(10,31,68,.06);
}
.cashier-ops-filters label{
  display:grid;
  gap:7px;
  color:#102d58;
  font-size:13px;
  font-weight:900;
}
.cashier-ops-filters label.wide{
  grid-column:1 / span 4;
}
.cashier-ops-filters .cashier-filter-btn{
  align-self:end;
  min-height:44px;
}
.cashier-ops-filters .cashier-search{
  width:100%;
}
@media(max-width:1300px){
  .cashier-ops-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cashier-ops-filters label.wide{
    grid-column:1 / -1;
  }
}
@media(max-width:760px){
  .cashier-cards.compact,
  .cashier-ops-filters{
    grid-template-columns:1fr;
  }
}


/* Stage 10.0 — Director salaries page */
.salary-page { padding-bottom: 40px; }
.salary-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.salary-controls select { min-width: 210px; border: 1px solid #d8e2ef; background: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 800; color: #102d58; outline: none; box-shadow: 0 10px 26px rgba(16,45,88,.06); }
.salary-mode { display: inline-flex; gap: 4px; background: #eef3fa; border: 1px solid #d8e2ef; border-radius: 16px; padding: 4px; }
.salary-mode button { border: 0; background: transparent; color: #52617a; border-radius: 12px; padding: 10px 14px; font-weight: 900; cursor: pointer; }
.salary-mode button.active { background: #0b2f5f; color: #fff; box-shadow: 0 8px 20px rgba(11,47,95,.2); }
.salary-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 16px; }
.salary-kpis article { background: #fff; border: 1px solid #dbe4ef; border-radius: 22px; padding: 22px; box-shadow: 0 18px 45px rgba(16,45,88,.08); min-height: 132px; }
.salary-kpis span { display: block; color: #66758f; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.salary-kpis strong { display: block; color: #06214a; font-size: 28px; line-height: 1.16; font-weight: 950; }
.salary-kpis small { display: block; margin-top: 10px; color: #66758f; font-weight: 700; }
.salary-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.salary-tab { border: 1px solid #dbe4ef; background: #fff; color: #0e284d; border-radius: 16px; padding: 12px 18px; font-weight: 950; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 10px 24px rgba(16,45,88,.06); }
.salary-tab b { color: #50627d; font-size: 12px; }
.salary-tab.active { background: #0b2f5f; color: #fff; border-color: #0b2f5f; box-shadow: 0 12px 26px rgba(11,47,95,.22); }
.salary-tab.active b { color: #fff; }
.salary-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .85fr); gap: 18px; align-items: stretch; }
.salary-panel { background: #fff; border: 1px solid #dbe4ef; border-radius: 24px; padding: 20px; box-shadow: 0 18px 45px rgba(16,45,88,.08); }
.salary-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.salary-panel-head h2 { margin: 0; color: #081f42; font-size: 22px; font-weight: 950; }
.salary-panel-head span { background: #fff8e6; border: 1px solid #efc55a; color: #9a6a00; border-radius: 999px; padding: 8px 12px; font-weight: 950; font-size: 12px; white-space: nowrap; }
.salary-winners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.salary-winner-card { border: 1px solid #dbe4ef; border-radius: 18px; padding: 20px; min-height: 165px; background: #fbfdff; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.salary-winner-card.place-1 { background: linear-gradient(180deg, #fff9e9, #fff); border-color: #efc55a; box-shadow: 0 16px 34px rgba(239,197,90,.16); transform: translateY(-14px); }
.salary-winner-card.muted { opacity: .35; }
.salary-place-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #eaf2ff; color: #0b55c4; font-weight: 950; }
.salary-winner-card.place-1 .salary-place-badge { background: #f2cf62; color: #603d00; }
.salary-winner-card strong { color: #142844; font-size: 20px; line-height: 1.2; }
.salary-winner-card b { color: #0b2f5f; font-size: 24px; line-height: 1.2; }
.salary-winner-card.place-1 b { color: #9a6a00; }
.salary-winner-card span { color: #62718a; font-weight: 700; font-size: 12px; line-height: 1.45; }
.salary-months { display: grid; gap: 14px; }
.salary-month-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 126px; gap: 12px; align-items: center; }
.salary-month-row b { color: #0e284d; font-size: 14px; }
.salary-month-row div { height: 12px; background: #edf2f7; border-radius: 999px; overflow: hidden; }
.salary-month-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0b55c4, #477dff); }
.salary-month-row strong { color: #0e284d; text-align: right; font-size: 13px; }
.salary-full { margin-top: 18px; }
.salary-table-wrap { overflow: auto; border: 1px solid #dbe4ef; border-radius: 18px; }
.salary-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.salary-table th { background: #f5f8fc; color: #5d6d86; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; text-align: left; padding: 13px 14px; }
.salary-table td { border-top: 1px solid #e7edf5; padding: 14px; color: #122641; font-weight: 700; vertical-align: middle; }
.salary-main-row { cursor: pointer; }
.salary-main-row:hover td, .salary-main-row.open td { background: #f8fbff; }
.salary-recipient-btn { border: 0; background: transparent; color: #102d58; font-weight: 950; padding: 0; text-align: left; cursor: pointer; }
.salary-recipient-btn span { display: block; color: #6a7890; font-size: 12px; font-weight: 800; margin-top: 4px; }
.salary-share { display: inline-block; vertical-align: middle; width: 118px; height: 9px; background: #edf2f7; border-radius: 999px; overflow: hidden; margin-right: 8px; }
.salary-share i { display: block; height: 100%; background: linear-gradient(90deg, #e3af2f, #0b55c4); border-radius: inherit; }
.salary-table small { color: #60718c; font-weight: 800; }
.salary-details-row td { background: #f8fbff; padding: 0 14px 16px; }
.salary-details { border: 1px dashed #c9d7ea; border-radius: 16px; background: #fff; padding: 14px; }
.salary-details-head { display: flex; justify-content: space-between; gap: 12px; color: #102d58; margin-bottom: 10px; }
.salary-details-head span { color: #68758c; font-weight: 800; }
.salary-details table { width: 100%; border-collapse: collapse; }
.salary-payment-row td { background: #fff !important; border-top: 1px solid #edf2f7; padding: 10px 12px; }
.salary-payment-row span { color: #60718c; font-weight: 850; }
.salary-payment-row strong { color: #0b2f5f; }
.salary-empty { border: 1px dashed #cbd8e9; border-radius: 18px; padding: 18px; color: #65738c; font-weight: 800; background: #fbfdff; }
@media (max-width: 1180px) { .salary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .salary-grid { grid-template-columns: 1fr; } .salary-winner-card.place-1 { transform: none; } }
@media (max-width: 760px) { .salary-controls { justify-content: stretch; } .salary-controls select, .salary-mode { width: 100%; } .salary-mode button { flex: 1; } .salary-kpis { grid-template-columns: 1fr; } .salary-winners { grid-template-columns: 1fr; } .salary-month-row { grid-template-columns: 64px 1fr 110px; } }

/* === KBK desktop responsive pass: 14"–27" monitors (2026-07-25) === */
/* Keep every flex/grid child shrinkable so long amounts and labels stay inside cards. */
.approved-director-app .director-main,
.approved-director-app .director-panel,
.approved-director-app .director-table-card,
.approved-director-app .director-kpi,
.approved-director-app .director-kpi > div,
.approved-director-app .reports-kpi-cards > *,
.approved-director-app .report-layout > *,
.approved-director-app .financial-report-layout > *,
.approved-director-app .financial-interactive-grid > *,
.approved-director-app .filter-grid > *,
.approved-director-app .dplans-grid > *,
.approved-director-app .dsettings-grid > *,
.approved-director-app .fin6-v6-directory-grid > *,
.approved-director-app .manager-clients-layout > *,
.approved-director-app .salary-grid > * {
  min-width: 0;
}

.approved-director-app .director-kpi > div:last-child,
.approved-director-app .reports-kpi-cards .director-kpi > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.approved-director-app .director-value,
.approved-director-app .reports-kpi-cards .director-value,
.approved-director-app .manager-value,
.approved-director-app .cashier-value,
.approved-director-app .salary-kpis strong,
.approved-director-app .dplans-value,
.approved-director-app .dsettings-value {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.approved-director-app .director-kpi h3,
.approved-director-app .director-trend,
.approved-director-app .reports-kpi-cards .director-kpi h3,
.approved-director-app .reports-kpi-cards .director-trend {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 14", 15" and 16" laptops: use three even KPI columns instead of six cramped cards. */
@media (min-width: 981px) and (max-width: 1799px) {
  .approved-director-app .director-main {
    padding: 24px 20px 38px;
  }

  .approved-director-app .reports-kpi-cards,
  .approved-director-app .financial-kpi-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .approved-director-app .reports-kpi-cards .director-kpi {
    min-width: 0 !important;
    min-height: 132px !important;
    padding: 18px !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .approved-director-app .reports-kpi-cards .director-kicon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    font-size: 21px !important;
  }

  .approved-director-app .reports-kpi-cards .director-kpi h3 {
    margin: 2px 0 9px !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  .approved-director-app .reports-kpi-cards .director-value {
    font-size: clamp(18px, 1.35vw, 22px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    font-variant-numeric: tabular-nums;
  }

  .approved-director-app .reports-kpi-cards .director-trend {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
  }

  .approved-director-app .reports-tabs {
    gap: 8px !important;
  }

  .approved-director-app .reports-tab {
    padding: 11px 16px !important;
  }
}

/* 14" and 15" widths: large content/side columns stack to preserve readable tables and charts. */
@media (min-width: 981px) and (max-width: 1599px) {
  .approved-director-app .report-layout,
  .approved-director-app .financial-report-layout,
  .approved-director-app .fin6-v6-directory-grid,
  .approved-director-app .dplans-grid,
  .approved-director-app .dsettings-grid,
  .approved-director-app .manager-clients-layout,
  .approved-director-app .salary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .approved-director-app .financial-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .approved-director-app .financial-filter-grid .period-buttons,
  .approved-director-app .financial-filter-grid .month-year-range {
    width: 100%;
  }

  .approved-director-app .financial-filter-grid .period-btn {
    flex: 1 1 120px;
  }

  .approved-director-app .financial-filter-grid .month-select,
  .approved-director-app .financial-filter-grid .year-select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .approved-director-app .financial-card-head {
    align-items: flex-start !important;
  }

  .approved-director-app .financial-card-head h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .approved-director-app .financial-chart-actions {
    flex: 0 0 auto;
  }

  .approved-director-app .director-table-card,
  .approved-director-app .director-panel,
  .approved-director-app .dplans-panel,
  .approved-director-app .dsettings-panel,
  .approved-director-app .salary-panel {
    overflow: hidden;
  }

  .approved-director-app .director-table-card .director-table,
  .approved-director-app .dplans-manager-table,
  .approved-director-app .directory-table,
  .approved-director-app .salary-table {
    max-width: 100%;
  }
}

/* Small 14" viewport safety: slightly tighter chrome, but no tiny text. */
@media (min-width: 981px) and (max-width: 1399px) {
  .approved-director-app .director-main {
    padding-left: 18px;
    padding-right: 18px;
  }

  .approved-director-app .reports-director-top h1,
  .approved-director-app .director-title h1 {
    font-size: 26px !important;
  }

  .approved-director-app .report-filter-card {
    padding: 16px !important;
  }

  .approved-director-app .financial-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .approved-director-app .financial-interactive-grid {
    grid-template-columns: minmax(0, 1fr) 190px !important;
  }

  .approved-director-app .financial-selected-card {
    padding: 11px !important;
  }

  .approved-director-app .financial-hover-card {
    width: 245px !important;
  }
}

/* Standard 24" and 27" desktop monitors: keep six cards, constrain overly long lines. */
@media (min-width: 1800px) {
  .approved-director-app .reports-kpi-cards,
  .approved-director-app .financial-kpi-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .approved-director-app .reports-kpi-cards .director-kpi {
    min-width: 0 !important;
  }

  .approved-director-app .reports-kpi-cards .director-value {
    font-size: clamp(20px, 1.15vw, 24px) !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}

/* 15-inch dashboard: prevent the five-card row from squeezing long ruble totals. */
@media (min-width: 981px) and (max-width: 1599px) {
  .approved-director-app .director-cards:not(.reports-kpi-cards) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .approved-director-app .director-cards:not(.reports-kpi-cards) .director-kpi {
    min-width: 0 !important;
  }

  .approved-director-app .director-cards:not(.reports-kpi-cards) .director-value {
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: clamp(20px, 1.5vw, 24px) !important;
    line-height: 1.15 !important;
  }
}

/* Dense manager report stays readable through a local table scroller instead of clipping columns. */
@media (min-width: 981px) and (max-width: 1599px) {
  .approved-director-app .report-layout .reports-table-card {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }

  .approved-director-app .report-layout .reports-table-card .reports-table {
    min-width: 1050px;
  }
}