/* 3.20.0 — Admin Enterprise Command Center
   Scoped to management accounts so the employee workflow stays unchanged. */

.tab-icon,
.tab-copy > small { display: none; }
.management-command-center { display: none; }
.management-nav-shortcuts { display: none; }

.management-mode {
  --admin-ink: #10253b;
  --admin-muted: #64788d;
  --admin-line: #d9e5ee;
  --admin-soft: #f4f8fb;
  --admin-blue: #0878ef;
  --admin-blue-dark: #0864c7;
  --admin-green: #078b64;
  --admin-amber: #aa6b08;
  --admin-red: #c73542;
  color: var(--admin-ink);
  background:
    radial-gradient(circle at 82% 0, rgba(8, 120, 239, .11), transparent 28rem),
    linear-gradient(180deg, #eef5fa 0, #f6f9fb 420px, #f4f7fa 100%);
}

.management-mode .shell {
  width: min(1480px, 100%);
  padding: 18px 20px 42px;
}

.management-mode .header {
  min-height: 72px;
  padding: 8px 2px 16px;
}

.management-mode .logo {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1597ff, #0866d5);
  box-shadow: 0 12px 26px rgba(8, 120, 239, .24);
}

.management-mode .brand small {
  font-size: 12px;
  letter-spacing: .15em;
}

.management-mode .brand h1 {
  margin-top: 3px;
  color: var(--admin-ink);
  font-size: 25px;
  letter-spacing: -.025em;
}

.management-mode .account-box { gap: 10px; }

.management-mode .account-box > .customer-add {
  min-height: 46px;
  border-color: #bddaf0;
  background: #fff;
  color: #176496;
  box-shadow: 0 6px 18px rgba(26, 71, 103, .06);
}

.management-mode .account-button {
  min-width: 174px;
  min-height: 48px;
  border-color: #cedee9;
  border-radius: 15px;
  padding: 7px 13px;
  box-shadow: 0 6px 18px rgba(26, 71, 103, .06);
}

.management-mode .account-button span {
  max-width: 210px;
  font-size: 14px;
}

.management-mode .account-button small {
  margin-top: 2px;
  color: #718499;
  font-size: 11px;
}

.management-mode .tabs {
  border-color: #d5e2eb;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(25, 61, 90, .06);
}

.management-mode .tab {
  min-height: 48px;
  color: #597086;
  font-size: 14px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.management-mode .tab:hover { background: #f3f8fc; color: #245878; }
.management-mode .tab.active { background: #eaf5ff; color: var(--admin-blue); }

.management-mode .view { margin-top: 20px; }

.management-mode .page-head {
  min-height: 58px;
  margin-bottom: 14px;
  padding: 5px 2px;
}

.management-mode .page-head small,
.management-mode .section-head small,
.management-mode .view > .toolbar small {
  color: var(--admin-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}

.management-mode .page-head h2,
.management-mode .section-head h2 {
  color: var(--admin-ink);
  font-size: 22px;
  letter-spacing: -.025em;
}

.management-mode .section-note {
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.5;
}

.management-mode .btn {
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}

.management-mode .btn.primary {
  background: linear-gradient(135deg, #1188f7, #0870dd);
  box-shadow: 0 7px 17px rgba(8, 120, 239, .18);
}

.management-mode .btn.green {
  background: linear-gradient(135deg, #0ca878, #078a63);
  box-shadow: 0 7px 17px rgba(7, 150, 105, .15);
}

.management-mode input,
.management-mode select {
  height: 46px;
  border-color: #c9dae6;
  border-radius: 12px;
  font-size: 15px;
}

/* Overview command center */
.management-mode #overview > .toolbar {
  min-height: 66px;
  border-color: #d6e4ed;
  border-radius: 18px;
  padding: 10px 14px 10px 18px;
  box-shadow: 0 8px 24px rgba(24, 64, 94, .045);
}

.management-mode #overview > .toolbar strong {
  margin-top: 5px;
  color: var(--admin-ink);
  font-size: 17px;
}

.management-mode #overview > .toolbar input { width: 168px; }

.management-mode .management-command-center {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 250px;
  align-items: stretch;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #cfe0ec;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(25, 65, 95, .07);
}

.management-command-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 7px 4px 7px 8px;
}

.management-command-intro small {
  color: var(--admin-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.management-command-intro strong {
  margin-top: 5px;
  color: var(--admin-ink);
  font-size: 18px;
  letter-spacing: -.02em;
}

.management-command-intro span {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.4;
}

.management-command-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.management-command {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  min-width: 0;
  min-height: 82px;
  border: 1px solid #d7e4ed;
  border-radius: 15px;
  background: #f8fbfd;
  padding: 10px;
  color: #365a75;
  text-align: left;
  cursor: pointer;
}

.management-command > span {
  grid-row: 1 / 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: center;
  border-radius: 10px;
  background: #e8f3fb;
  color: #176da8;
  font-size: 18px;
  font-weight: 900;
}

.management-command strong {
  align-self: end;
  overflow: hidden;
  color: #173852;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-command small {
  align-self: start;
  margin-top: 3px;
  overflow: hidden;
  color: #718397;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-command.primary {
  border-color: #c0def5;
  background: #edf7ff;
}

.management-command.primary > span { background: var(--admin-blue); color: #fff; }
.management-command.positive { border-color: #c9eadc; background: #f1fbf7; }
.management-command.positive > span { background: var(--admin-green); color: #fff; }
.management-command:hover { border-color: #9dc9e7; transform: translateY(-1px); }

.management-attention-cta {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #cfe7dc;
  border-radius: 16px;
  background: #f1faf6;
  padding: 11px;
  color: #285b48;
  text-align: left;
  cursor: pointer;
}

.management-attention-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #dcefe6;
  color: #087653;
  font-size: 18px;
  font-weight: 950;
}

.management-attention-cta > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.management-attention-cta small { color: #4d7f6c; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.management-attention-cta strong { overflow: hidden; color: #116746; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.management-attention-cta em { overflow: hidden; color: #678477; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.management-attention-cta > b { color: #5c8a78; font-size: 24px; }
.management-attention-cta.has-warning { border-color: #edce9c; background: #fff8eb; }
.management-attention-cta.has-warning .management-attention-icon { background: #ffe7b9; color: #9b620a; }
.management-attention-cta.has-warning small,
.management-attention-cta.has-warning strong { color: #905b09; }

.management-mode #overview > .summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.management-mode #overview .summary {
  min-height: 142px;
  border-color: #d9e5ed;
  border-radius: 19px;
  padding: 16px;
  box-shadow: 0 9px 25px rgba(26, 67, 97, .055);
}

.management-mode #overview .summary > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  font-size: 20px;
}

.management-mode #overview .summary small { margin-top: 15px; font-size: 11px; }
.management-mode #overview .summary strong { margin-top: 7px; font-size: 21px; letter-spacing: -.025em; }
.management-mode #overview .summary p,
.management-mode #overview .summary .summary-source-line { margin-top: 5px; font-size: 12px; line-height: 1.4; }

.management-mode .enterprise-control {
  display: block;
  margin: 12px 0;
  border-color: #d7e4ed;
  border-radius: 21px;
  padding: 16px;
  box-shadow: 0 9px 26px rgba(25, 65, 95, .05);
}

.management-mode .enterprise-control-head strong { margin-top: 5px; font-size: 18px; }
.management-mode .enterprise-control-head p { margin-top: 5px; font-size: 12px; line-height: 1.45; }
.management-mode .day-control-status { padding: 8px 12px; font-size: 11px; }
.management-mode .enterprise-control-grid { gap: 9px; }

.management-mode .enterprise-control-grid button {
  min-height: 100px;
  border-radius: 14px;
  padding: 13px;
}

.management-mode .enterprise-control-grid button small { font-size: 10px; }
.management-mode .enterprise-control-grid button strong { font-size: 16px; }
.management-mode .enterprise-control-grid button span { font-size: 11px; line-height: 1.4; }

.management-mode .admin-handover {
  margin: 12px 0;
  border-color: #d7e4ed;
  border-radius: 21px;
  padding: 16px;
  box-shadow: 0 9px 26px rgba(25, 65, 95, .05);
}

.management-mode .admin-handover .section-head > strong { font-size: 25px; }
.management-mode .admin-handover-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.management-mode .handover-person-card { border-radius: 16px; box-shadow: 0 5px 16px rgba(27, 65, 94, .035); }
.management-mode .handover-person-head { padding: 13px 14px 10px; }
.management-mode .handover-person strong { font-size: 15px; }
.management-mode .handover-person small { font-size: 11px; }
.management-mode .handover-result small { font-size: 10px; }
.management-mode .handover-result strong { font-size: 14px; }
.management-mode .handover-mini-grid { gap: 7px; padding: 0 12px 11px; }
.management-mode .handover-mini-grid > span { padding: 8px 6px; }
.management-mode .handover-mini-grid small { font-size: 9px; }
.management-mode .handover-mini-grid strong { font-size: 11px; }
.management-mode .handover-foot { font-size: 11px; }

.management-mode .enterprise-quick { display: none; }

.management-mode .overview-journal {
  border-color: #d7e4ed;
  border-radius: 21px;
  padding: 16px;
  box-shadow: 0 9px 26px rgba(25, 65, 95, .05);
}

.management-mode .overview-journal-filters button { min-height: 34px; padding: 0 13px; font-size: 11px; }
.management-mode .journal-entry { min-height: 78px; }
.management-mode .journal-entry-title > strong { font-size: 14px; }
.management-mode .journal-entry-body > small { font-size: 10px; }
.management-mode .journal-entry-body > p { font-size: 11px; }
.management-mode .journal-entry-side > strong { font-size: 13px; }
.management-mode .journal-entry-actions .edit,
.management-mode .journal-entry-actions .delete { min-height: 32px; font-size: 10px; }

/* Directories, reports and operations */
.management-mode .employee-search-panel,
.management-mode .customer-search-panel,
.management-mode .customer-month-compact,
.management-mode .period-filter,
.management-mode .report-strip,
.management-mode .customer-intelligence-report,
.management-mode .enterprise-attention,
.management-mode .operation-card,
.management-mode .team-admin-tools,
.management-mode .permission-guide {
  border-color: #d7e4ed;
  box-shadow: 0 8px 24px rgba(25, 65, 95, .045);
}

.management-mode .employee-search-panel { padding: 12px; border-radius: 18px; }
.management-mode .employee-search-box { min-height: 48px; border-radius: 13px; }
.management-mode .employee-search-box input { font-size: 14px; }
.management-mode .employee-search-count { font-size: 12px; }
.management-mode .entry,
.management-mode .customer-card,
.management-mode .debtor { border-color: #d8e4ed; box-shadow: 0 7px 22px rgba(29, 67, 96, .045); }
.management-mode .entry h3,
.management-mode .customer-card h3 { font-size: 16px; }
.management-mode .entry-date,
.management-mode .muted { font-size: 13px; }

.management-mode #reports .report-heading > strong { font-size: 15px; }
.management-mode #reports .period-filter { gap: 12px; margin-bottom: 12px; padding: 10px; border-radius: 18px; }
.management-mode #reports .period-tabs button { min-height: 38px; font-size: 12px; }
.management-mode #reports .report-actions { min-height: 50px; }
.management-mode #reports .report-actions > span { font-size: 12px; }
.management-mode #reports .finance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.management-mode #reports .finance-card { min-height: 155px; border-radius: 18px; padding: 16px; }
.management-mode #reports .finance-card small { font-size: 10px; }
.management-mode #reports .finance-card strong { font-size: 22px; }
.management-mode #reports .finance-card p { font-size: 12px; }
.management-mode #reports .finance-card em { font-size: 10px; }
.management-mode #reports .metric-change { font-size: 11px; }
.management-mode #reports .customer-intelligence-report { border-radius: 20px; padding: 16px; }
.management-mode #reports .customer-year-kpis-compact { gap: 9px !important; }
.management-mode #reports .customer-year-kpis-compact article { min-height: 83px !important; padding: 12px !important; }
.management-mode #reports .customer-year-kpis-compact article small { font-size: 9px; }
.management-mode #reports .customer-year-kpis-compact article > strong { font-size: 15px !important; }
.management-mode #reports .customer-year-table { font-size: 11px; }
.management-mode #reports .customer-year-table th,
.management-mode #reports .customer-year-table td { padding: 11px 9px; }
.management-mode #reports .report-strip { padding: 15px; }
.management-mode #reports .report-strip small { font-size: 10px; }
.management-mode #reports .report-strip strong { font-size: 16px; }
.management-mode #reports .report-strip p { font-size: 11px; }

.management-mode #operations .enterprise-page-head { margin-bottom: 10px; }
.management-mode #operations .enterprise-attention { border-radius: 20px; padding: 16px; }
.management-mode #operations .enterprise-attention-grid { gap: 9px; }
.management-mode #operations .enterprise-attention-grid button { min-height: 108px; padding: 13px; }
.management-mode #operations .enterprise-attention-grid button small { font-size: 10px; }
.management-mode #operations .enterprise-attention-grid button strong { font-size: 16px; }
.management-mode #operations .enterprise-attention-grid button span { font-size: 11px; }
.management-mode #operations .operations-primary-actions { gap: 9px; margin: 12px 0; }
.management-mode #operations .operations-primary-actions .btn { flex: 1 1 180px; }
.management-mode #operations .enterprise-operations-grid { gap: 12px; }
.management-mode #operations .operation-card { border-radius: 19px; padding: 16px; }
.management-mode #operations .operation-card .section-head { margin: 0 0 12px; }
.management-mode #operations .operation-card .section-head h2 { font-size: 19px; }
.management-mode #operations .operation-row strong { font-size: 13px; }
.management-mode #operations .operation-row small { font-size: 11px; }
.management-mode #operations .settlement-hero > small { font-size: 10px; }
.management-mode #operations .settlement-hero > strong { font-size: 24px; }
.management-mode #operations .settlement-hero span { font-size: 10px; }
.management-mode #operations .settlement-hero b { font-size: 12px; }
.management-mode #operations .employee-settlement-card > header strong { font-size: 15px; }
.management-mode #operations .employee-settlement-card > header small { font-size: 11px; }
.management-mode #operations .employee-settlement-card > header > b { font-size: 12px; }
.management-mode #operations .settlement-mini-grid small { font-size: 9px; }
.management-mode #operations .settlement-mini-grid strong { font-size: 11px; }
.management-mode #operations .settlement-detail > summary,
.management-mode #operations .settlement-detail > div { font-size: 11px; }
.management-mode #operations .supplier-search-wrap input { font-size: 14px; }
.management-mode #operations .supplier-compact-card .supplier-row-main > div > strong { font-size: 15px; }
.management-mode #operations .supplier-compact-card .supplier-row-main small { font-size: 10px; }
.management-mode #operations .supplier-compact-metrics small { font-size: 8px !important; }
.management-mode #operations .supplier-compact-metrics strong { font-size: 11px; }
.management-mode #operations .supplier-compact-actions button { min-height: 34px !important; font-size: 10px; }
.management-mode #operations .supplier-history-disclosure > summary { font-size: 12px; }

.management-mode #team .team-admin-tools { border-radius: 18px; }
.management-mode #team .team-admin-tools > summary { min-height: 50px; padding: 15px 17px; font-size: 14px; }
.management-mode #team .helper-note { font-size: 12px; line-height: 1.5; }
.management-mode #team .person-card { min-height: 76px; padding: 14px; }
.management-mode #team .person-card p { font-size: 12px; }
.management-mode #team .status,
.management-mode #team .role-badge { font-size: 10px; }
.management-mode #team .permission-guide { padding: 16px; }
.management-mode #team .permission-guide summary { font-size: 14px; }
.management-mode #team .permission-guide p { font-size: 12px; line-height: 1.55; }

/* Dialogs */
.management-mode dialog {
  width: min(620px, calc(100% - 28px));
  border: 1px solid rgba(202, 218, 230, .8);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(15, 34, 58, .32);
}

.management-mode dialog form { gap: 16px; padding: 22px; }
.management-mode .dialog-head h2 { font-size: 23px; }
.management-mode dialog label { font-size: 14px; }
.management-mode dialog .helper-note { font-size: 12px; }

.management-mode footer { align-items: center; margin-top: 22px; }
.management-mode footer button,
.management-mode footer .app-version { min-height: 36px; font-size: 11px; }

/* Desktop command navigation */
@media (min-width: 1080px) {
  .management-mode .shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto minmax(520px, auto) auto;
    column-gap: 22px;
    align-items: start;
  }

  .management-mode .header {
    position: sticky;
    z-index: 20;
    top: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    background: rgba(239, 246, 251, .91);
    backdrop-filter: blur(16px);
  }

  .management-mode .tabs {
    position: sticky;
    top: 92px;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    overflow: visible;
    border-radius: 20px;
    padding: 12px;
  }

  .management-mode .tabs::before {
    content: "KHÔNG GIAN QUẢN TRỊ";
    padding: 4px 9px 8px;
    color: #8091a2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
  }

  .management-mode .tab {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    min-height: 58px;
    border-radius: 13px;
    padding: 8px 10px;
    text-align: left;
  }

  .management-mode .tab-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: #f0f5f8;
    color: #5c7488;
    font-size: 17px;
    font-weight: 900;
  }

  .management-mode .tab.active .tab-icon { background: var(--admin-blue); color: #fff; }

  .management-mode .tab-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
  }

  .management-mode .tab-copy > small {
    display: block;
    overflow: hidden;
    color: #8494a3;
    font-size: 10px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .management-mode .tab.active .tab-copy > small { color: #5685aa; }

  .management-mode .management-nav-shortcuts {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    border-top: 1px solid #e3ebf1;
    padding: 12px 3px 2px;
  }

  .management-mode .management-nav-shortcuts > small {
    padding: 0 7px 5px;
    color: #8a99a7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
  }

  .management-mode .management-nav-shortcuts > button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 0 9px;
    color: #60768a;
    text-align: left;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
  }

  .management-mode .management-nav-shortcuts > button:hover { background: #f2f7fa; color: #1f628e; }
  .management-mode .management-nav-shortcuts > button span { display: inline-block; width: 22px; color: #1680cf; text-align: center; }

  .management-mode .view {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
  }

  .management-mode footer { grid-column: 2; grid-row: 3; }
}

@media (max-width: 1220px) {
  .management-mode .management-command-center { grid-template-columns: 170px minmax(0, 1fr); }
  .management-mode .management-attention-cta { grid-column: 1 / -1; }
  .management-mode .management-attention-cta em { white-space: normal; }
}

@media (max-width: 1079px) {
  .management-mode .tabs {
    position: sticky;
    z-index: 12;
    top: 0;
    padding: 6px;
    backdrop-filter: blur(15px);
  }

  .management-mode .tab { min-width: 105px; }
  .management-mode .admin-handover-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .management-mode .shell { padding: 12px 12px 34px; }
  .management-mode .header { min-height: 62px; padding-bottom: 12px; }
  .management-mode .logo { width: 43px; height: 43px; border-radius: 14px; }
  .management-mode .brand { gap: 9px; }
  .management-mode .brand small { font-size: 9px; }
  .management-mode .brand h1 { max-width: 190px; font-size: 18px; }
  .management-mode .account-button { min-width: 0; max-width: 114px; min-height: 43px; padding: 6px 9px; }
  .management-mode .account-button span { max-width: 94px; font-size: 12px; }
  .management-mode .account-button small { font-size: 9px; }
  .management-mode .tabs { margin: 0 -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .management-mode .tab { min-width: 94px; min-height: 44px; font-size: 12px; }
  .management-mode .view { margin-top: 14px; }
  .management-mode .page-head { min-height: 50px; }
  .management-mode .page-head h2,
  .management-mode .section-head h2 { font-size: 19px; }
  .management-mode .page-head small,
  .management-mode .section-head small,
  .management-mode .view > .toolbar small { font-size: 10px; }
  .management-mode #overview > .toolbar { min-height: 58px; padding: 9px 11px; }
  .management-mode #overview > .toolbar strong { font-size: 14px; }
  .management-mode #overview > .toolbar input { width: 145px; height: 40px; font-size: 12px; }
  .management-mode .management-command-center { grid-template-columns: 1fr; gap: 9px; padding: 10px; border-radius: 18px; }
  .management-command-intro { padding: 3px 3px 1px; }
  .management-command-intro strong { font-size: 16px; }
  .management-command-intro span { font-size: 11px; }
  .management-command-actions { grid-template-columns: 1fr 1fr; gap: 7px; }
  .management-command { min-height: 68px; padding: 8px; }
  .management-attention-cta { grid-column: auto; min-height: 66px; }
  .management-mode #overview > .summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .management-mode #overview .summary { min-height: 132px; padding: 13px; }
  .management-mode #overview .summary > span { width: 34px; height: 34px; font-size: 18px; }
  .management-mode #overview .summary small { margin-top: 12px; font-size: 10px; }
  .management-mode #overview .summary strong { font-size: 17px; }
  .management-mode #overview .summary p,
  .management-mode #overview .summary .summary-source-line { font-size: 11px; }
  .management-mode .enterprise-control,
  .management-mode .admin-handover,
  .management-mode .overview-journal { padding: 13px; border-radius: 18px; }
  .management-mode .enterprise-control-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .management-mode .enterprise-control-grid button { min-height: 86px; padding: 10px; }
  .management-mode .enterprise-control-grid button small { font-size: 9px; }
  .management-mode .enterprise-control-grid button strong { font-size: 14px; }
  .management-mode .enterprise-control-grid button span { font-size: 10px; }
  .management-mode .admin-handover .section-head > strong { font-size: 19px; }
  .management-mode .handover-person strong { font-size: 14px; }
  .management-mode .handover-person small { font-size: 10px; }
  .management-mode .handover-mini-grid small { font-size: 9px; }
  .management-mode .handover-mini-grid strong { font-size: 11px; }
  .management-mode .journal-entry-title > strong { font-size: 13px; }
  .management-mode .journal-entry-body > small { font-size: 10px; }
  .management-mode .journal-entry-body > p { font-size: 11px; }
  .management-mode #reports .finance-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .management-mode #reports .finance-card { min-height: 125px; padding: 13px; }
  .management-mode #reports .finance-card strong { font-size: 17px; }
  .management-mode #reports .customer-intelligence-report { padding: 12px !important; }
  .management-mode #operations .enterprise-attention-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .management-mode #operations .enterprise-attention-grid button { min-height: 90px; padding: 10px; }
  .management-mode #operations .enterprise-attention-grid button small { font-size: 9px; }
  .management-mode #operations .enterprise-attention-grid button strong { font-size: 14px; }
  .management-mode #operations .enterprise-attention-grid button span { font-size: 10px; }
  .management-mode #operations .operations-primary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .management-mode #operations .operations-primary-actions .btn { min-width: 0; padding: 0 7px; font-size: 11px; }
  .management-mode dialog { width: calc(100% - 16px); max-height: 94dvh; margin-bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 22px 22px 15px 15px; }
  .management-mode dialog form { gap: 14px; padding: 17px; }
  .management-mode .dialog-head h2 { font-size: 20px; }
}

@media (max-width: 430px) {
  .management-mode .brand h1 { max-width: 155px; font-size: 16px; }
  .management-mode .brand small { letter-spacing: .1em; }
  .management-mode #overview > .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 130px; }
  .management-mode #overview > .toolbar input { width: 130px; }
  .management-command strong { font-size: 12px; }
  .management-command small { font-size: 10px; }
  .management-attention-cta strong { font-size: 12px; }
  .management-attention-cta em { font-size: 10px; }
  .management-mode #overview .summary strong { font-size: 15px; }
  .management-mode #overview .summary { min-height: 127px; }
  .management-mode .enterprise-control-head { display: grid; }
  .management-mode .day-control-status { width: max-content; }
  .management-mode .admin-handover .section-head { align-items: flex-start; }
  .management-mode .admin-handover .section-head h2 { font-size: 17px; }
  .management-mode #reports .period-filter { padding: 6px; }
  .management-mode #reports .period-tabs button { min-height: 34px !important; font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .management-mode *,
  .management-mode *::before,
  .management-mode *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* 3.24.0 — Admin compact operations + Company tab */
.management-mode #company .page-head,
.management-mode #operations .page-head{margin-bottom:10px}
.management-mode #company .operation-card{border-radius:19px;padding:16px}
.management-mode #company .company-profile-card{box-shadow:0 6px 18px rgba(32,67,97,.045)}
.management-mode #company .company-history-card{padding:14px}
.management-mode #company .receipt-row-card{padding:10px 0}
.management-mode #operations .operations-command-strip{margin-top:0}
.management-mode #operations .enterprise-operations-reordered{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.management-mode #operations #operation-inventory,
.management-mode #operations #operation-settlement{grid-column:auto}
.management-mode #operations #operation-bottles,
.management-mode #operations #operation-advanced{grid-column:1/-1}
@media(max-width:760px){
  .management-mode #operations .enterprise-operations-reordered{grid-template-columns:1fr}
  .management-mode #operations #operation-bottles,
  .management-mode #operations #operation-advanced{grid-column:auto}
  .management-mode #company .page-head{align-items:stretch}
}

/* 3.28.0 — Consolidated management mobile UX */
@media(max-width:760px){
  .management-mode .management-command-center{grid-template-columns:1fr;gap:5px;margin:6px 0 8px;padding:6px;border-radius:14px}
  .management-mode .management-command-intro{display:none}
  .management-mode .management-command-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .management-mode .management-command{min-height:50px;padding:5px 4px;grid-template-columns:22px minmax(0,1fr);grid-template-rows:1fr;column-gap:4px;border-radius:11px}
  .management-mode .management-command>span{grid-row:auto;width:22px;height:22px;border-radius:7px;font-size:12px}
  .management-mode .management-command strong{align-self:center;font-size:10.5px;line-height:1.08;white-space:normal}
  .management-mode .management-command small{display:none}

  /* Không lặp thông báo “ổn định”; chỉ hiện nút cảnh báo nếu có việc thật sự cần xử lý. */
  .management-mode .management-attention-cta:not(.has-warning){display:none}
  .management-mode .management-attention-cta.has-warning{display:grid;min-height:40px;padding:5px 8px;grid-template-columns:26px minmax(0,1fr) auto;gap:7px;border-radius:11px}
  .management-mode .management-attention-icon{width:25px;height:25px;border-radius:8px;font-size:12px}
  .management-mode .management-attention-cta small{font-size:7.8px}
  .management-mode .management-attention-cta strong{font-size:10.5px}
  .management-mode .management-attention-cta em{display:none}
  .management-mode .management-attention-cta>b{font-size:18px}

  /* Trung tâm kiểm soát lặp lại thông tin Vận hành; ẩn trên mobile, vẫn giữ trên desktop. */
  .management-mode #overview .enterprise-control{display:none}

  .management-mode #operations .enterprise-operations-reordered{grid-template-columns:1fr}
  .management-mode #operations #operation-bottles,
  .management-mode #operations #operation-advanced{grid-column:auto}
  .management-mode #company .page-head{align-items:stretch}
}

@media(max-width:390px){
  .management-mode .management-command{min-height:48px;padding:4px 3px;grid-template-columns:21px minmax(0,1fr);column-gap:3px}
  .management-mode .management-command>span{width:21px;height:21px;font-size:11px}
  .management-mode .management-command strong{font-size:10px}
}