/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SINHVU DESIGN SYSTEM V27 — VISUAL OVERLAY                        ║
   ║  Load SAU admin.css → cascade thắng, restyle các surface chính.   ║
   ║  Non-breaking: KHÔNG động vào admin.css. Reversible: bỏ link là   ║
   ║  trả lại style cũ. Source of truth: _DESIGN_SYSTEM_V27/.          ║
   ║                                                                    ║
   ║  Scope L33 (2026-05-17):                                          ║
   ║  - Topbar: navy primary bg + white text + accent CTA active       ║
   ║  - Production sub-tabs: pill premium Linear-inspired               ║
   ║  - Cards (prod-block, cardx): radius-lg + shadow DS V27           ║
   ║  - Buttons: hover lift + transition smooth                         ║
   ║  - Badges + state-pill: chuẩn height + radius pill                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════════════════
   1. TOPBAR — Navy Premium (DS V27 primary brand color)
   ════════════════════════════════════════════════════════════════════ */
.topbar.v2 {
  background: var(--sds-brand-primary);
  border-bottom: 1px solid var(--sds-brand-primary-deep);
  box-shadow: var(--sds-shadow-sm);
  height: 64px;
}

/* Brand logo — invert to white on dark navy bg */
.topbar.v2 .topbar-brand img,
.topbar.v2 .topbar-brand .brand-logo {
  filter: brightness(0) invert(1);
}

/* Top tabs — muted white + accent active state */
.topbar.v2 .top-tab {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  border-radius: var(--sds-radius-md);
  transition: background 160ms ease, color 160ms ease;
  border: none;
  height: 38px;
  padding: 0 16px;
}
.topbar.v2 .top-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.topbar.v2 .top-tab.is-active {
  background: var(--sds-brand-accent);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(247, 127, 0, 0.35);
}
.topbar.v2 .top-tab .ds-icon { color: currentColor; }
.topbar.v2 .top-tab.is-active .ds-icon { color: #fff; }
.topbar.v2 .top-tab:hover .ds-icon { transform: none; }

/* Topbar-right area — light text on dark bg */
.topbar.v2 .topbar-right { color: rgba(255, 255, 255, 0.7); }
.topbar.v2 .topbar-sync {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.topbar.v2 .topbar-sync:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* API status pill — restyle on dark bg */
.topbar.v2 .api-status,
.topbar.v2 .pill-compact {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
}
.topbar.v2 .api-status .dot { background: var(--sds-color-success); }
.topbar.v2 .api-status.is-err .dot { background: var(--sds-brand-red); }
.topbar.v2 .api-status.is-loading .dot { background: var(--sds-brand-gold); }

/* Bell icon button — white on dark */
.topbar.v2 .notif-bell-btn,
.topbar.v2 .help-btn {
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  transition: background 160ms;
}
.topbar.v2 .notif-bell-btn:hover,
.topbar.v2 .help-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* User menu trigger — avatar accent circle */
.topbar.v2 .user-menu-trigger {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--sds-radius-md);
  transition: background 160ms;
  padding: 4px 8px 4px 4px;
}
.topbar.v2 .user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}
.topbar.v2 .umt-avatar {
  background: var(--sds-brand-accent);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.topbar.v2 .umt-chevron {
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
}

/* User menu dropdown — refined panel */
.user-menu-dropdown {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-lg);
  border: 1px solid var(--sds-border-subtle);
  padding: 6px;
  min-width: 240px;
}
.umd-item {
  border-radius: var(--sds-radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sds-text-body);
  transition: background 120ms;
}
.umd-item:hover {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
}
.umd-item.danger:hover {
  background: var(--sds-brand-red-subtle);
  color: var(--sds-brand-red-deep);
}
.umd-item .ds-icon { color: var(--sds-text-muted); }
.umd-item:hover .ds-icon { color: var(--sds-brand-primary); }
.umd-item.danger:hover .ds-icon { color: var(--sds-brand-red-deep); }
.umd-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sds-text-subtle);
  padding: 8px 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.umd-section-label .ds-icon { color: var(--sds-text-subtle); }
.umd-divider {
  border: none;
  border-top: 1px solid var(--sds-border-subtle);
  margin: 6px 0;
}

/* ════════════════════════════════════════════════════════════════════
   2. PRODUCTION HUB HEADER — Use DS V27 navy not legacy #1B2845
   ════════════════════════════════════════════════════════════════════ */
.prod-hub-header {
  background: linear-gradient(135deg, var(--sds-brand-primary) 0%, var(--sds-brand-primary-soft) 100%);
  border-radius: var(--sds-radius-xl);
  box-shadow: var(--sds-shadow-md);
}
.phh-icon {
  font-size: inherit;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--sds-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sds-brand-accent);
}
.phh-icon .ds-icon { width: 24px; height: 24px; }
.phh-kpi {
  border-radius: var(--sds-radius-md);
  background: rgba(255, 255, 255, 0.08);
  transition: background 160ms;
}
.phh-kpi:hover { background: rgba(255, 255, 255, 0.14); }
.phh-kpi strong { color: var(--sds-brand-accent); }

/* ════════════════════════════════════════════════════════════════════
   3. PRODUCTION SUB-TABS — Pill premium (Linear-inspired)
   ════════════════════════════════════════════════════════════════════ */
.prod-subtabs {
  background: var(--sds-brand-primary-subtle);
  border-radius: var(--sds-radius-pill);
  padding: 4px;
}
.pst-btn {
  border-radius: var(--sds-radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sds-text-muted);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  display: inline-flex;
  align-items: center;
}
.pst-btn:hover {
  color: var(--sds-brand-primary);
  background: rgba(255, 255, 255, 0.5);
}
.pst-btn.is-active {
  background: #fff;
  color: var(--sds-brand-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 48, 73, 0.12), 0 1px 2px rgba(0, 48, 73, 0.06);
}
.pst-btn .ds-icon { color: currentColor; }

/* ════════════════════════════════════════════════════════════════════
   4. PROD BLOCKS — Cards with DS V27 shadow + radius
   ════════════════════════════════════════════════════════════════════ */
.prod-block {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-sm);
  border: 1px solid var(--sds-border-subtle);
  transition: box-shadow 200ms ease;
}
.prod-block:hover {
  box-shadow: var(--sds-shadow-md);
}
.prod-block.is-alert {
  border-color: var(--sds-brand-red);
  background: var(--sds-color-error-subtle);
}
.prod-block-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sds-text-primary);
  letter-spacing: -0.01em;
}
.prod-item {
  border-radius: var(--sds-radius-md);
  transition: background 160ms;
}
.prod-item:hover {
  background: var(--sds-brand-primary-subtle);
}
.prod-item-icon { border-radius: var(--sds-radius-sm); }
.prod-item-btn {
  background: var(--sds-brand-primary);
  border-radius: var(--sds-radius-md);
  font-weight: 500;
  font-size: 11px;
  padding: 6px 12px;
  transition: background 160ms ease, transform 160ms ease;
}
.prod-item-btn:hover {
  background: var(--sds-brand-primary-deep);
  transform: translateX(2px);
}

/* Empty state cards */
.prod-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--sds-text-subtle);
  font-size: 12px;
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.prod-empty .ds-icon { color: var(--sds-text-subtle); }

/* ════════════════════════════════════════════════════════════════════
   5. BUTTONS GLOBAL — Hover lift + smooth transition
   ════════════════════════════════════════════════════════════════════ */
.sv-button,
.btn,
button.primary,
button.ghost-btn {
  transition: background 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 160ms ease;
}
.sv-button:hover:not(:disabled),
.btn:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--sds-shadow-sm);
}
.sv-button:active:not(:disabled),
.btn:active:not(:disabled),
button.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. BADGES + STATE PILLS — Consistent height + radius pill
   ════════════════════════════════════════════════════════════════════ */
.sds-badge,
.tag,
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--sds-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}
.sds-badge .ds-icon,
.tag .ds-icon,
.state-pill .ds-icon { width: 12px; height: 12px; }

/* Brand badge variants (use DS V27 semantic) */
.sds-badge--brand   { background: var(--sds-brand-primary-subtle); color: var(--sds-brand-primary); }
.sds-badge--accent  { background: var(--sds-brand-accent-subtle); color: var(--sds-brand-accent-deep); }
.sds-badge--success { background: var(--sds-color-success-subtle); color: var(--sds-color-success-deep); }
.sds-badge--warning { background: var(--sds-color-warning-subtle); color: var(--sds-color-warning-deep); }
.sds-badge--danger  { background: var(--sds-color-error-subtle); color: var(--sds-color-error-deep); }
.sds-badge--info    { background: var(--sds-color-info-subtle); color: var(--sds-color-info); }

/* ════════════════════════════════════════════════════════════════════
   7. NOTIF BADGE on top-tab — accent gold pop
   ════════════════════════════════════════════════════════════════════ */
.topbar.v2 .tt-badge {
  background: var(--sds-brand-gold) !important;
  color: var(--sds-brand-primary-deep) !important;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   8. TAB CONTENT BG — Sand cream warm
   ════════════════════════════════════════════════════════════════════ */
.tab-content,
.sv-page,
.production-hub-v26 {
  background: var(--sds-surface-subtle);
}

/* ════════════════════════════════════════════════════════════════════
   END L33 V27 OVERLAY
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L34 (2026-05-17) — Restyle 5 tab + secondary surfaces còn lại    ║
   ║  Calendar · Care · Intake · Proposal · Contract · Sidebar · Modal ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════════════════
   L34.1 CALENDAR — Week/Month/Gantt + Workload
   ════════════════════════════════════════════════════════════════════ */
.calendar-tab { background: transparent; }
.cal-head {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  padding: 14px 18px;
  box-shadow: var(--sds-shadow-sm);
  border: 1px solid var(--sds-border-subtle);
  margin-bottom: 14px;
}
.cal-mode-btn {
  border-radius: var(--sds-radius-md);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sds-text-muted);
  background: var(--sds-surface-subtle);
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease;
}
.cal-mode-btn:hover {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
}
.cal-mode-btn.is-active {
  background: var(--sds-brand-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 48, 73, 0.18);
}
.cal-gantt {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  overflow: hidden;
}
.cal-gantt-row { transition: background 120ms; }
.cal-gantt-row:hover { background: var(--sds-brand-primary-subtle); }
.cal-gantt-row.is-current {
  background: var(--sds-brand-accent-subtle);
  border-left: 3px solid var(--sds-brand-accent);
}
.cal-gantt-bar {
  border-radius: var(--sds-radius-sm);
  box-shadow: var(--sds-shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cal-gantt-bar[draggable="true"]:hover {
  cursor: grab;
  transform: translateY(-1px);
  box-shadow: var(--sds-shadow-md);
}
.cal-week-event {
  border-radius: var(--sds-radius-md);
  padding: 6px 8px;
  font-size: 11px;
  box-shadow: var(--sds-shadow-sm);
  transition: transform 120ms;
}
.cal-week-event:hover { transform: translateY(-1px); }
.cal-week-day-col.is-drag-over {
  background: var(--sds-brand-accent-subtle);
  border: 2px dashed var(--sds-brand-accent);
}
.cal-today-line { background: var(--sds-brand-accent) !important; }
.workload-table {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  padding: 14px 18px;
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
}

/* ════════════════════════════════════════════════════════════════════
   L34.2 CARE — Master-detail layout
   ════════════════════════════════════════════════════════════════════ */
.care-tab-v226 { background: transparent; }
.care-master-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}
.care-sidebar {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 12px;
}
.care-project-card {
  border-radius: var(--sds-radius-md);
  padding: 12px;
  border: 1px solid transparent;
  transition: background 160ms, border-color 160ms, transform 160ms;
  cursor: pointer;
  margin-bottom: 6px;
}
.care-project-card:hover {
  background: var(--sds-brand-primary-subtle);
  transform: translateX(2px);
}
.care-project-card.is-active {
  background: var(--sds-brand-accent-subtle) !important;
  border-color: var(--sds-brand-accent) !important;
  box-shadow: var(--sds-shadow-sm);
}
.care-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.care-block {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  overflow: hidden;
  transition: box-shadow 200ms;
}
.care-block:hover { box-shadow: var(--sds-shadow-md); }
.care-block-head {
  padding: 14px 18px;
  background: linear-gradient(to bottom, var(--sds-surface-subtle) 0%, #fff 100%);
  border-bottom: 1px solid var(--sds-border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
}
.care-block-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sds-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.care-block-body {
  padding: 18px 20px;
}
.care-block-actions {
  border-top: 1px solid var(--sds-border-subtle);
  padding: 12px 18px;
  background: var(--sds-surface-subtle);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.care-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--sds-radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.care-badge-success { background: var(--sds-color-success-subtle); color: var(--sds-color-success-deep); }
.care-badge-info    { background: var(--sds-color-info-subtle); color: var(--sds-color-info); }
.care-badge-warn    { background: var(--sds-color-warning-subtle); color: var(--sds-color-warning-deep); }
.care-badge-pending { background: var(--sds-gray-200); color: var(--sds-gray-700); }

/* ════════════════════════════════════════════════════════════════════
   L34.3 INTAKE — Cards + filter chips
   ════════════════════════════════════════════════════════════════════ */
.r2-intake-tab { background: transparent; }
.filter-chips {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  padding: 12px 16px;
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  border-radius: var(--sds-radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sds-text-muted);
  background: var(--sds-surface-subtle);
  border: 1px solid var(--sds-border-subtle);
  transition: background 160ms, color 160ms, border-color 160ms;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filter-chip:hover {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
  border-color: var(--sds-brand-primary-subtle);
}
.filter-chip.active {
  background: var(--sds-brand-primary);
  color: #fff;
  border-color: var(--sds-brand-primary);
  box-shadow: 0 1px 3px rgba(0, 48, 73, 0.2);
}

/* ════════════════════════════════════════════════════════════════════
   L34.4 PROPOSAL — Composer + stepper + pricing tiers
   ════════════════════════════════════════════════════════════════════ */
.proposal-overlay {
  background: rgba(0, 26, 41, 0.6);
  backdrop-filter: blur(4px);
}
.proposal-composer {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-xl);
  overflow: hidden;
}
.proposal-composer .doc-toolbar {
  background: var(--sds-brand-primary);
  color: #fff;
  border-bottom: 1px solid var(--sds-brand-primary-deep);
}
.proposal-composer .doc-toolbar button { color: rgba(255, 255, 255, 0.85); }
.proposal-composer .doc-toolbar button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.pc-stepper {
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-lg);
  padding: 16px;
}
.pc-page-set {
  background: #fff;
  border-radius: var(--sds-radius-md);
  padding: 18px;
  box-shadow: var(--sds-shadow-sm);
}
.pc-bulk-bar {
  background: var(--sds-brand-primary-subtle);
  border-radius: var(--sds-radius-md);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--sds-brand-primary-subtle);
}
.pc-bulk-low,
.pc-bulk-mid,
.pc-bulk-high {
  border-radius: var(--sds-radius-md);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: transform 120ms;
}
.pc-bulk-low:hover, .pc-bulk-mid:hover, .pc-bulk-high:hover {
  transform: translateY(-1px);
}
.pc-totals {
  background: var(--sds-brand-vanilla-subtle);
  border-radius: var(--sds-radius-lg);
  padding: 16px 18px;
  border: 1px solid var(--sds-brand-gold-subtle);
}
.pc-tier-select {
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-default);
  padding: 8px 12px;
}
.pc-tier-select:focus {
  border-color: var(--sds-brand-accent);
  outline: 2px solid var(--sds-brand-accent-subtle);
}
.ppr-tiers,
.ptl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ppr-tiers > * {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 16px;
  transition: transform 200ms, box-shadow 200ms;
}
.ppr-tiers > *:hover {
  transform: translateY(-2px);
  box-shadow: var(--sds-shadow-md);
}
.ptl-bar-fill { border-radius: var(--sds-radius-sm); }
.prop-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--sds-radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.prop-st-draft       { background: var(--sds-gray-200); color: var(--sds-gray-700); }
.prop-st-sent        { background: var(--sds-color-info-subtle); color: var(--sds-color-info); }
.prop-st-viewed      { background: var(--sds-brand-accent-subtle); color: var(--sds-brand-accent-deep); }
.prop-st-negotiating { background: var(--sds-brand-gold-subtle); color: var(--sds-brand-gold-deep); }
.prop-st-signed      { background: var(--sds-color-success-subtle); color: var(--sds-color-success-deep); }
.prop-st-lost        { background: var(--sds-color-error-subtle); color: var(--sds-color-error-deep); }

/* ════════════════════════════════════════════════════════════════════
   L34.5 CONTRACT — Reuse modal patterns + project tab content
   ════════════════════════════════════════════════════════════════════ */
.project-tab-content {
  background: transparent;
  padding-top: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   L34.6 SIDEBAR — Refined navigation panel
   ════════════════════════════════════════════════════════════════════ */
.sidebar-head {
  padding: 10px 12px;
  background: var(--sds-surface-subtle);
  border-bottom: 1px solid var(--sds-border-subtle);
}
.sidebar-search {
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-default);
  padding: 7px 12px;
  font-size: 12px;
  background: #fff;
  transition: border-color 160ms, box-shadow 160ms;
  width: 100%;
}
.sidebar-search:focus {
  border-color: var(--sds-brand-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--sds-brand-accent-subtle);
}
.sidebar-list { gap: 2px; padding: 6px; }
.sidebar-item,
.sidebar-rail {
  border-radius: var(--sds-radius-md);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--sds-text-body);
  transition: background 120ms, color 120ms;
}
.sidebar-rail:hover {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
}
.sidebar-item.is-active,
.sidebar-rail.is-active {
  background: var(--sds-brand-primary);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   L34.7 MODAL + DRAWER — Refined panels
   ════════════════════════════════════════════════════════════════════ */
.bcw-modal:not(.proposal-composer) {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-xl);
  border: 1px solid var(--sds-border-subtle);
  background: #fff;
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--sds-border-subtle);
  background: linear-gradient(to bottom, var(--sds-surface-subtle), #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h2,
.modal-head h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sds-text-primary);
  margin: 0;
}
.modal-body { padding: 18px 20px; }
.modal-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--sds-border-subtle);
  background: var(--sds-surface-subtle);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.bcw-drawer {
  border-radius: var(--sds-radius-lg) 0 0 var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-xl);
  background: #fff;
  overflow: hidden;
}
.bcw-drawer .drawer-head {
  background: var(--sds-brand-primary);
  color: #fff;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sds-brand-primary-deep);
}
.bcw-drawer .drawer-head button { color: rgba(255, 255, 255, 0.85); }
.bcw-drawer .drawer-head button:hover { color: #fff; }
.capture-body { padding: 16px 18px; }
.capture-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--sds-border-subtle);
  background: var(--sds-surface-subtle);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════════════════
   L34.8 TOAST + BELL NOTIFICATION
   ════════════════════════════════════════════════════════════════════ */
.sv-toast {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-lg);
  background: var(--sds-brand-primary);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  border: 1px solid var(--sds-brand-primary-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
}
.sv-toast.is-view    { background: var(--sds-color-info); border-color: var(--sds-color-info); }
.sv-toast.is-new     { background: var(--sds-color-success); border-color: var(--sds-color-success-deep); }
.sv-toast-title { font-weight: 600; font-size: 13px; }
.sv-toast-body  { font-size: 12px; opacity: 0.9; }
.sv-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--sds-radius-sm);
  transition: background 120ms, color 120ms;
}
.sv-toast-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.sv-bell-dropdown {
  border-radius: var(--sds-radius-lg);
  box-shadow: var(--sds-shadow-lg);
  border: 1px solid var(--sds-border-subtle);
  background: #fff;
  padding: 4px;
  min-width: 360px;
}
.sv-bell-list { display: flex; flex-direction: column; gap: 2px; }
.sv-bell-item {
  border-radius: var(--sds-radius-md);
  padding: 10px 12px;
  transition: background 120ms;
  cursor: pointer;
}
.sv-bell-item:hover { background: var(--sds-brand-primary-subtle); }
.sv-bell-item.is-unread { background: var(--sds-brand-accent-subtle); }
.sv-bell-item.is-unread:hover { background: var(--sds-brand-accent-subtle); border-left: 3px solid var(--sds-brand-accent); }
.sv-bell-item .bi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sv-bell-item.is-unread .bi-dot         { background: var(--sds-brand-accent); }
.sv-bell-item.kind-view .bi-dot         { background: var(--sds-color-info); }
.sv-bell-item.kind-new_submission .bi-dot { background: var(--sds-color-success); }

/* ════════════════════════════════════════════════════════════════════
   L34.9 SCROLLBAR — Subtle DS V27 style
   ════════════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--sds-gray-300);
  border-radius: var(--sds-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--sds-gray-400); }

/* ════════════════════════════════════════════════════════════════════
   L34.10 INPUT + SELECT — Consistent focus accent
   ════════════════════════════════════════════════════════════════════ */
.bcw-modal:not(.proposal-composer) input[type="text"],
.bcw-modal:not(.proposal-composer) input[type="email"],
.bcw-modal:not(.proposal-composer) input[type="number"],
.bcw-modal:not(.proposal-composer) textarea,
.bcw-modal:not(.proposal-composer) select,
.care-block-body input[type="text"],
.care-block-body input[type="email"],
.care-block-body input[type="number"],
.care-block-body textarea,
.care-block-body select {
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-default);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sds-font-sans);
  background: #fff;
  transition: border-color 160ms, box-shadow 160ms;
}
.bcw-modal:not(.proposal-composer) input:focus,
.bcw-modal:not(.proposal-composer) textarea:focus,
.bcw-modal:not(.proposal-composer) select:focus,
.care-block-body input:focus,
.care-block-body textarea:focus,
.care-block-body select:focus {
  border-color: var(--sds-brand-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--sds-brand-accent-subtle);
}/* ════════════════════════════════════════════════════════════════════
   L35.2 GLOBAL FOCUS RING + KEYBOARD ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--sds-brand-accent);
  outline-offset: 2px;
  border-radius: var(--sds-radius-sm);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sds-brand-accent);
  outline-offset: 2px;
}
/* Remove default outline khi không phải keyboard focus */
:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content hidden link (a11y) — visible khi focus */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--sds-brand-primary);
  color: #fff;
  z-index: 9999;
  border-radius: 0 0 var(--sds-radius-md) 0;
}
.skip-to-content:focus { top: 0; }

/* ════════════════════════════════════════════════════════════════════
   L35.3 SKELETON LOADING SHIMMER
   ════════════════════════════════════════════════════════════════════ */
.sv-skeleton-line,
.sv-skeleton-block {
  background: linear-gradient(
    90deg,
    var(--sds-gray-200) 0%,
    var(--sds-gray-100) 50%,
    var(--sds-gray-200) 100%
  );
  background-size: 200% 100%;
  animation: sdsShimmer 1.6s ease-in-out infinite;
  border-radius: var(--sds-radius-md);
}@keyframes sdsShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════
   L35.4 FADE-IN ANIMATION cho newly mounted content
   ════════════════════════════════════════════════════════════════════ */
@keyframes sdsFadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prod-subtab-content,
.care-workspace,
.bcw-modal,
.sv-bell-dropdown,
.user-menu-dropdown {
  animation: sdsFadeInUp 240ms ease-out;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   L35.5 RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════ */
/* Tablet 768-1024px */
@media (max-width: 1024px) {
  .care-master-detail {
    grid-template-columns: 1fr;
  }
  .care-sidebar {
    max-height: 280px;
    overflow-y: auto;
  }
  .prod-today-grid {
    grid-template-columns: 1fr;
  }
  .ppr-tiers,
  .ptl-cards {
    grid-template-columns: 1fr 1fr;
  }
  .phh-kpis {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Mobile <768px */
@media (max-width: 767px) {
  .topbar.v2 {
    height: auto;
    padding: 10px 12px;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .topbar.v2 .top-tab .tt-label {
    display: none; /* icon only on mobile */
  }
  .topbar.v2 .top-tab {
    padding: 0 10px;
    height: 36px;
  }
  .prod-hub-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .phh-kpis {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .phh-kpi { min-width: 80px; flex-shrink: 0; }
  .prod-subtabs {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .pst-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ppr-tiers,
  .ptl-cards,
  .pc-totals,
  .care-form-grid {
    grid-template-columns: 1fr;
  }
  .bcw-modal:not(.proposal-composer) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    border-radius: 0;
  }
  .bcw-drawer {
    width: 100vw !important;
    border-radius: 0;
  }
  .sv-toast {
    left: 12px !important;
    right: 12px !important;
    max-width: none;
  }
  .sv-bell-dropdown {
    min-width: calc(100vw - 24px);
    right: 12px !important;
    left: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   L35.6 PRINT STYLES — Cmd+P friendly export
   ════════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide non-essential UI chrome */
  .topbar,
  .topbar.v2,
  .sidebar,
  .sv-sidebar,
  .sv-bell-wrap,
  .sv-bell-dropdown,
  .user-menu-dropdown,
  .sv-toast,
  .floating-dock,
  .fab,
  .modal-actions,
  .care-block-actions,
  .prod-subtabs,
  .filter-chips,
  .cal-head .cal-mode-btn,
  button,
  .btn,
  .sv-button {
    display: none !important;
  }
  /* Reset bg to white for ink saving */
  body,
  .tab-content,
  .sv-page,
  .production-hub-v26,
  .prod-hub-header,
  .prod-block,
  .care-block,
  .care-sidebar,
  .bcw-modal,
  .pc-page-set {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  /* Expand content full-width */
  .care-master-detail,
  .prod-today-grid {
    display: block !important;
  }
  /* Page break helpers */
  .prod-block,
  .care-block {
    page-break-inside: avoid;
    margin-bottom: 12px;
  }
  /* Hide icons in print (ink saving) */
  .ds-icon { display: none !important; }
  /* Underline links for print */
  a { text-decoration: underline; color: #003049 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   L35.7 SELECTION COLOR — Brand accent
   ════════════════════════════════════════════════════════════════════ */
::selection {
  background: var(--sds-brand-accent-subtle);
  color: var(--sds-brand-accent-deep);
}/* ════════════════════════════════════════════════════════════════════
   END L35 OVERLAY APPEND
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L36 (2026-05-17) — Restyle 3 tab phụ + Login + Intake R2 + Cal   ║
   ║  System · Dashboard · Login · R2 Intake · Calendar Intel          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════════════════
   L36.1 SYSTEM TAB — Cài đặt hệ thống
   ════════════════════════════════════════════════════════════════════ */
.system-tab {
  background: transparent;
  padding: 20px 24px;
}
.system-block {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: box-shadow 200ms ease;
}
.system-block:hover { box-shadow: var(--sds-shadow-md); }
.system-block h2,
.system-block h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sds-text-primary);
  margin: 0 0 14px 0;
}
.sys-hero-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.sys-kpi {
  background: #fff;
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-subtle);
  padding: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.sys-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--sds-shadow-md);
}
.sys-kpi-success { border-left: 3px solid var(--sds-color-success); }
.sys-kpi-warn    { border-left: 3px solid var(--sds-color-warning); }
.sys-kpi-info    { border-left: 3px solid var(--sds-color-info); }
.sys-info-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sds-border-subtle);
  align-items: center;
}
.sys-info-row:last-child { border-bottom: none; }
.sys-info-row > :first-child {
  color: var(--sds-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.sys-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.sys-sheet-item {
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-md);
  padding: 10px 12px;
  border-left: 3px solid var(--sds-color-success);
  transition: transform 120ms;
}
.sys-sheet-item:hover { transform: translateX(2px); }
.sys-config-block {
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-md);
  padding: 14px;
  margin-top: 12px;
}
.sys-config-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sds-text-muted);
  margin-bottom: 6px;
}
.sys-config-input {
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-default);
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
}
.sys-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sys-action-btn {
  background: #fff;
  border: 1px solid var(--sds-border-default);
  border-radius: var(--sds-radius-md);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sds-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 160ms;
}
.sys-action-btn:hover {
  background: var(--sds-brand-primary-subtle);
  border-color: var(--sds-brand-primary);
  color: var(--sds-brand-primary);
  transform: translateY(-1px);
}
.sys-action-btn.danger {
  border-color: var(--sds-brand-red-subtle);
  color: var(--sds-brand-red-deep);
}
.sys-action-btn.danger:hover {
  background: var(--sds-color-error-subtle);
  border-color: var(--sds-brand-red);
  color: var(--sds-brand-red-deep);
}
.sys-debug-block .debug-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sds-border-subtle);
}
.sys-alerts {
  border-radius: var(--sds-radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  border-left: 3px solid;
}
.sys-alerts.warn { background: var(--sds-color-warning-subtle); border-left-color: var(--sds-color-warning); color: var(--sds-color-warning-deep); }
.sys-alerts.err  { background: var(--sds-color-error-subtle); border-left-color: var(--sds-color-error); color: var(--sds-color-error-deep); }

/* ════════════════════════════════════════════════════════════════════
   L36.2 DASHBOARD TAB — Tổng quan KPI
   ════════════════════════════════════════════════════════════════════ */
.dashboard-tab {
  background: transparent;
  padding: 20px 24px;
}
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi-big {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 20px;
  transition: transform 200ms ease, box-shadow 200ms ease;
  border-left: 3px solid var(--sds-brand-primary);
}
.kpi-big:hover {
  transform: translateY(-2px);
  box-shadow: var(--sds-shadow-md);
}
.kpi-big.kpi-warn    { border-left-color: var(--sds-color-warning); }
.kpi-big.kpi-info    { border-left-color: var(--sds-color-info); }
.kpi-big.kpi-success { border-left-color: var(--sds-color-success); }
.kbig-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sds-text-muted);
  margin-bottom: 8px;
}
.kbig-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sds-text-primary);
  line-height: 1.1;
}
.kbig-note {
  font-size: 11px;
  color: var(--sds-text-subtle);
  margin-top: 6px;
}

/* Pipeline Kanban */
.dash-pipeline {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.dash-pipeline h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}
.stage-col {
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-md);
  padding: 12px;
  min-height: 280px;
  border: 1px solid var(--sds-border-subtle);
}
.stage-card {
  background: #fff;
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-subtle);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 160ms, box-shadow 160ms, border-color 160ms;
}
.stage-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sds-shadow-sm);
  border-color: var(--sds-brand-accent);
}

/* Workload table */
.dash-workload {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 20px 24px;
}
.wl-row {
  display: grid;
  grid-template-columns: 200px 100px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--sds-border-subtle);
}
.wl-row:last-child { border-bottom: none; }
.wl-bar {
  height: 8px;
  background: var(--sds-gray-200);
  border-radius: var(--sds-radius-pill);
  overflow: hidden;
}
.wl-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sds-brand-accent), var(--sds-brand-accent-soft));
  border-radius: var(--sds-radius-pill);
  transition: width 400ms ease;
}

/* ════════════════════════════════════════════════════════════════════
   L36.3 R2 INTAKE — Master-detail layout (chưa cover L34)
   ════════════════════════════════════════════════════════════════════ */
.r2-master-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}
.r2-md-list {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.r2-md-list-item {
  border-radius: var(--sds-radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: background 160ms, transform 160ms;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.r2-md-list-item:hover {
  background: var(--sds-brand-primary-subtle);
  transform: translateX(2px);
}
.r2-md-list-item.active,
.r2-md-list-item.is-active {
  background: var(--sds-brand-accent-subtle) !important;
  border-color: var(--sds-brand-accent) !important;
  box-shadow: var(--sds-shadow-sm);
}
.r2-md-detail {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 20px 24px;
  min-height: 500px;
}
.r2-md-channel-card {
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--sds-brand-accent);
}
.r2-md-qa-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sds-border-subtle);
  align-items: start;
}
.r2-md-qa-row:last-child { border-bottom: none; }
.r2-md-qa-row > :first-child {
  font-size: 12px;
  color: var(--sds-text-muted);
  font-weight: 500;
}
.r2-skel-line {
  background: linear-gradient(
    90deg,
    var(--sds-gray-200) 0%,
    var(--sds-gray-100) 50%,
    var(--sds-gray-200) 100%
  );
  background-size: 200% 100%;
  animation: sdsShimmer 1.6s ease-in-out infinite;
  border-radius: var(--sds-radius-sm);
  height: 14px;
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   L36.4 CALENDAR INTEL — Today card + smart groups + upcoming
   ════════════════════════════════════════════════════════════════════ */
.cal-intel-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.cal-today-card {
  background: linear-gradient(135deg, var(--sds-brand-primary) 0%, var(--sds-brand-primary-soft) 100%);
  color: #fff;
  border-radius: var(--sds-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--sds-shadow-md);
}
.cal-today-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sds-brand-accent);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-smart-groups {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 14px 18px;
}
.cal-rem-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--sds-radius-md);
  transition: background 160ms;
  font-size: 13px;
  font-weight: 600;
}
.cal-rem-group-head:hover {
  background: var(--sds-brand-primary-subtle);
}
.cal-upcoming-reminders {
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
  padding: 14px 18px;
}
.cur-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--sds-brand-primary);
  background: var(--sds-surface-subtle);
  border-radius: 0 var(--sds-radius-md) var(--sds-radius-md) 0;
  margin-bottom: 6px;
  transition: transform 120ms;
}
.cur-item:hover { transform: translateX(2px); }
.cur-item.overdue { border-left-color: var(--sds-brand-red); }
.cur-item.due-today { border-left-color: var(--sds-brand-accent); }

/* ════════════════════════════════════════════════════════════════════
   L36.5 CARE BANNER — Match DS V27 navy gradient
   ════════════════════════════════════════════════════════════════════ */
.care-banner {
  background: linear-gradient(135deg, var(--sds-brand-primary) 0%, var(--sds-brand-primary-soft) 100%) !important;
  border-radius: var(--sds-radius-xl) !important;
  box-shadow: var(--sds-shadow-md);
}

/* ════════════════════════════════════════════════════════════════════
   L36.6 LOGIN PAGE — Premium centered card
   ════════════════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--sds-brand-primary) 0%, var(--sds-brand-primary-deep) 100%);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
}
.login-topbar img,
.login-topbar .brand-logo {
  filter: brightness(0) invert(1);
}
.login-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 440px;
  width: 100%;
}
.login-card {
  background: #fff;
  border-radius: var(--sds-radius-xl);
  box-shadow: var(--sds-shadow-xl);
  padding: 32px;
  border: 1px solid var(--sds-border-subtle);
}
.login-card h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sds-text-primary);
  margin: 0 0 6px 0;
}
.login-card .muted {
  font-size: 13px;
  color: var(--sds-text-muted);
  margin-bottom: 20px;
}
.login-card input[type="password"],
.login-card input[type="text"] {
  width: 100%;
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-default);
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
  transition: border-color 160ms, box-shadow 160ms;
}
.login-card input:focus {
  border-color: var(--sds-brand-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--sds-brand-accent-subtle);
}
.login-card button,
.login-card .primary {
  background: var(--sds-brand-accent);
  color: #fff;
  border-radius: var(--sds-radius-md);
  padding: 12px 20px;
  font-weight: 600;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
  width: 100%;
  margin-top: 12px;
}
.login-card button:hover {
  background: var(--sds-brand-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(247, 127, 0, 0.3);
}/* ════════════════════════════════════════════════════════════════════
   L36.8 KNOWLEDGE BASE — Uses generic patterns, polish via cardx
   ════════════════════════════════════════════════════════════════════ */
/* KB tab dùng generic .cardx / .tab-content.
   Apply card-like restyle cho any direct child > div trong KB tab if exists. */
.kb-tab > div,
.tri-thuc-tab > div {
  border-radius: var(--sds-radius-lg);
}

/* ════════════════════════════════════════════════════════════════════
   END L36 OVERLAY APPEND
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L37 (2026-05-17) — Button Hierarchy Fix                          ║
   ║  Contract tab dùng .sv-btn + .sv-btn-primary/ghost/success custom ║
   ║  (KHÔNG phải BEM .btn--primary). Cần override để consistent DS V27║
   ║  Hierarchy: Primary (1 per card) > Secondary > Ghost > Danger     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════════════════
   L37.1 BASE BUTTON RESET — .sv-btn + legacy variants
   ════════════════════════════════════════════════════════════════════ */
.sv-btn,
.ghost-btn,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--sds-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--sds-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease,
              color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.sv-btn:disabled,
.ghost-btn:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   L37.2 PRIMARY CTA — Accent orange filled (CTA chính, 1 per card)
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-primary,
button.primary,
.primary-btn,
.btn--primary {
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
  border-color: var(--sds-brand-accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(247, 127, 0, 0.25);
}
.sv-btn-primary:hover:not(:disabled),
button.primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.btn--primary:hover:not(:disabled):not(.is-disabled) {
  background: var(--sds-brand-accent-deep) !important;
  border-color: var(--sds-brand-accent-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(247, 127, 0, 0.35);
}
.sv-btn-primary:active:not(:disabled),
button.primary:active:not(:disabled),
.primary-btn:active:not(:disabled),
.btn--primary:active:not(:disabled):not(.is-disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(247, 127, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════════════
   L37.3 SECONDARY — Navy outline (action support quan trọng)
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-secondary,
.btn--secondary {
  background: #fff !important;
  color: var(--sds-brand-primary) !important;
  border-color: var(--sds-brand-primary) !important;
  font-weight: 600 !important;
}
.sv-btn-secondary:hover:not(:disabled),
.btn--secondary:hover:not(:disabled):not(.is-disabled) {
  background: var(--sds-brand-primary) !important;
  color: #fff !important;
  border-color: var(--sds-brand-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 48, 73, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   L37.4 GHOST / TERTIARY — Transparent text-only (action phụ)
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-ghost,
.ghost-btn,
.btn--ghost {
  background: transparent !important;
  color: var(--sds-text-muted) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}
.sv-btn-ghost:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.btn--ghost:hover:not(:disabled):not(.is-disabled) {
  background: var(--sds-brand-primary-subtle) !important;
  color: var(--sds-brand-primary) !important;
  border-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   L37.5 SUCCESS — Green filled (xác nhận hoàn thành)
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-success {
  background: var(--sds-color-success) !important;
  color: #fff !important;
  border-color: var(--sds-color-success) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25);
}
.sv-btn-success:hover:not(:disabled) {
  background: var(--sds-color-success-deep) !important;
  border-color: var(--sds-color-success-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
   L37.6 DANGER — Red filled cho destructive action
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-danger,
.btn--danger,
.umd-item.danger {
  background: #fff !important;
  color: var(--sds-brand-red-deep) !important;
  border-color: var(--sds-brand-red-subtle) !important;
  font-weight: 600 !important;
}
.sv-btn-danger:hover:not(:disabled),
.btn--danger:hover:not(:disabled):not(.is-disabled) {
  background: var(--sds-brand-red) !important;
  color: #fff !important;
  border-color: var(--sds-brand-red) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
   L37.7 SIZE VARIANTS
   ════════════════════════════════════════════════════════════════════ */
.sv-btn-sm,
.btn--sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}
.sv-btn-xs,
.btn--xs {
  padding: 4px 9px !important;
  font-size: 11px !important;
  gap: 4px !important;
}
.sv-btn-lg,
.btn--lg {
  padding: 12px 22px !important;
  font-size: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   L37.8 BUTTON BAR LAYOUT — Group buttons trong card
   ════════════════════════════════════════════════════════════════════ */
.btn-bar,
.modal-actions,
.care-block-actions,
.capture-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-bar.btn-bar-right,
.modal-actions {
  justify-content: flex-end;
}
.btn-bar.btn-bar-between {
  justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════════════
   L37.9 BARE <button> WITHOUT CLASS — graceful fallback
   ════════════════════════════════════════════════════════════════════ */
button:not([class]):not(.sv-bell-btn):not(.sv-toast-close):not(.user-menu-trigger):not(.top-tab):not(.pst-btn):not(.cal-mode-btn):not(.filter-chip):not(.umt-trigger),
button.no-class {
  background: var(--sds-surface);
  color: var(--sds-text-body);
  border: 1px solid var(--sds-border-default);
  border-radius: var(--sds-radius-md);
  padding: 8px 14px;
  font-family: var(--sds-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
button:not([class]):hover:not(:disabled),
button.no-class:hover:not(:disabled) {
  background: var(--sds-brand-primary-subtle);
  border-color: var(--sds-brand-primary);
  color: var(--sds-brand-primary);
}/* ════════════════════════════════════════════════════════════════════
   L37.11 SAFETY — Topbar tabs + sub-tabs đã có style riêng, exclude
   ════════════════════════════════════════════════════════════════════ */
.topbar .sv-btn,
.topbar .ghost-btn,
.prod-subtabs .sv-btn,
.cal-mode-btn,
.pst-btn {
  /* Các button trong topbar/sub-tabs đã có style riêng — KHÔNG override base */
}

/* ════════════════════════════════════════════════════════════════════
   END L37 BUTTON HIERARCHY
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L40.B5 (2026-05-17) — Topbar header cleanup                       ║
   ║  Fix: cục chữ nhật trắng "ADMIN · VERSION" lẫn lộn với topbar navy ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Ẩn .admin-label trong topbar (chỉ giữ ở login screen) */
.topbar.v2 .admin-label,
.topbar .admin-label {
  display: none !important;
}

/* Coach hint "?" dot — giảm noise trong topbar */
.topbar.v2 .sv-hint-dot,
.topbar.v2 .coach-hint-dot {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
}
.topbar.v2 .sv-hint-dot:hover,
.topbar.v2 .coach-hint-dot:hover {
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
}

/* Topbar-brand gap polish — đảm bảo logo căn giữa */
.topbar.v2 .topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.topbar.v2 .topbar-brand img,
.topbar.v2 .topbar-brand .brand-logo img {
  height: 28px;
  width: auto;
}

/* ════════════════════════════════════════════════════════════════════
   END L40.B5 — Topbar cleanup
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L40.B6 (2026-05-17) — Hide FAB hoàn toàn                          ║
   ║  Lý do: FAB orange "+" floating bottom-right gây cảm giác toy/HUD  ║
   ║  + flash khi scroll. Tất cả 4 actions đã có trong Cmd+K + topbar. ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.sv-shell-fab,
.sv-fab-wrap,
.sv-fab-main,
.sv-fab-backdrop,
.sv-fab-actions,
.sv-fab-action-row,
.sv-fab-timer-badge,
#sv-fab-mount {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   END L40.B6 — FAB hidden
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L41 (2026-05-17) — Tab Lịch & Timeline polish (T1+T2+T3)         ║
   ║  Mục tiêu: consolidate visual, giảm overuse accent, unify radius  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────
   T1.1 — Layer chip pattern (dot indicator + neutral chip)
   ──────────────────────────────────────────────────────────────────── */
.cal-layer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--sds-surface-subtle, #F5F4EF);
  border-radius: var(--sds-radius-pill);
  border: 1px solid var(--sds-border-subtle);
}
.cal-layer-label {
  font-size: 10px;
  color: var(--sds-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.cal-layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--sds-radius-pill);
  border: 1px solid transparent;
  background: #fff;
  color: var(--sds-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
  font-family: inherit;
}
.cal-layer-chip:hover {
  border-color: var(--sds-border-default);
  color: var(--sds-text-primary);
}
.cal-layer-chip.is-on {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
  border-color: var(--sds-brand-primary-subtle);
  font-weight: 600;
}
.cal-layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity 160ms;
}

/* ────────────────────────────────────────────────────────────────────
   T1.1 — "Đặt nhắc nhở" button — primary CTA accent (đã có .sv-btn-primary)
   ──────────────────────────────────────────────────────────────────── */
.cal-add-reminder-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
}

/* ────────────────────────────────────────────────────────────────────
   T1.1 — Mode switch buttons polish + line icon spacing
   ──────────────────────────────────────────────────────────────────── */
.cal-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--sds-surface-subtle);
  border-radius: var(--sds-radius-pill);
  border: 1px solid var(--sds-border-subtle);
}
.cal-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
}
.cal-mode-btn.is-active {
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────────
   T1.1 — Filter chip cal-filter-bar polish
   ──────────────────────────────────────────────────────────────────── */
.cal-filter-bar .cfb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--sds-radius-pill);
  border: 1px solid var(--sds-border-subtle);
  background: #fff;
  color: var(--sds-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
  font-family: inherit;
}
.cal-filter-bar .cfb-chip:hover {
  background: var(--sds-brand-primary-subtle);
  color: var(--sds-brand-primary);
  border-color: var(--sds-brand-primary-subtle);
}
.cal-filter-bar .cfb-chip.is-active {
  background: var(--sds-brand-primary);
  color: #fff;
  border-color: var(--sds-brand-primary);
}
.cal-filter-bar .cfb-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sds-text-muted);
  font-weight: 500;
}
.cal-filter-bar .cfb-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  color: var(--sds-text-muted);
  border: 1px solid var(--sds-border-default);
  border-radius: var(--sds-radius-pill);
  font-size: 11px;
  cursor: pointer;
}
.cal-filter-bar .cfb-clear:hover {
  background: var(--sds-brand-red-subtle);
  color: var(--sds-brand-red-deep);
  border-color: var(--sds-brand-red);
}

/* ────────────────────────────────────────────────────────────────────
   T1.2 — Today cell calendar week — bỏ full orange bg
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col.is-today,
.cal-week-day-col[data-is-today="true"],
.cal-week-day-col.cw-today {
  background: #fff !important;
  border-top: 2px solid var(--sds-brand-accent) !important;
  position: relative;
}
.cal-week-day-col.is-today .cw-day-head,
.cal-week-day-col[data-is-today="true"] .cw-day-head,
.cal-week-day-col.cw-today .cw-day-head {
  color: var(--sds-brand-accent-deep) !important;
  background: var(--sds-brand-accent-subtle) !important;
  font-weight: 700;
}

/* Today label small badge thay vì full uppercase bg */
.cal-week-day-col.is-today .cw-today-label,
.cal-week-day-col.cw-today .cw-today-label {
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--sds-radius-sm);
  font-weight: 700;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────────────────
   T1.3 — Dự báo khối lượng 4 squares → semantic colors theo tier
   ──────────────────────────────────────────────────────────────────── */
.cws-chart {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 0;
}
.cws-week {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--sds-surface);
  border-radius: var(--sds-radius-md);
  border: 1px solid var(--sds-border-subtle);
  transition: transform 160ms, box-shadow 160ms;
}
.cws-week:hover {
  transform: translateY(-1px);
  box-shadow: var(--sds-shadow-sm);
}
.cws-bar-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sds-radius-md);
  background: var(--sds-surface-subtle);
  border-top: 3px solid var(--sds-text-muted);
}
.cws-bar {
  background: transparent !important;
  width: auto;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cws-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--sds-text-primary);
  letter-spacing: -0.02em;
}
.cws-label {
  font-size: 11px;
  color: var(--sds-text-muted);
  font-weight: 500;
}
.cws-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Workload tier semantic — apply via inline color trong JS, override bar bg */
.cws-week:has(.cws-bar[style*="DC2626"]) .cws-bar-wrap { border-top-color: var(--sds-brand-red); background: var(--sds-color-error-subtle); }
.cws-week:has(.cws-bar[style*="F59E0B"]) .cws-bar-wrap { border-top-color: var(--sds-brand-gold-deep); background: var(--sds-color-warning-subtle); }
.cws-week:has(.cws-bar[style*="F8951D"]) .cws-bar-wrap { border-top-color: var(--sds-brand-accent); background: var(--sds-brand-accent-subtle); }
.cws-week:has(.cws-bar[style*="16A34A"]) .cws-bar-wrap { border-top-color: var(--sds-color-success); background: var(--sds-color-success-subtle); }

/* ────────────────────────────────────────────────────────────────────
   T2.2 — KPI numbers — bỏ all-orange, dùng text-primary
   ──────────────────────────────────────────────────────────────────── */
.phh-kpi strong,
.ctc-stat strong {
  color: var(--sds-text-primary) !important;
}
.phh-kpi.is-alert strong {
  color: var(--sds-brand-red-deep) !important;
}
[data-theme="dark"] .phh-kpi strong,
[data-theme="dark"] .ctc-stat strong {
  color: var(--sds-text-primary, #fff) !important;
}

/* HÔM NAY card — accent CHỈ khi critical (>5 reminders today) */
.ctc-stat strong[style*="DC2626"] { color: var(--sds-brand-red-deep) !important; }
.ctc-stat strong[style*="F59E0B"] { color: var(--sds-brand-gold-deep) !important; }
.ctc-stat strong[style*="16A34A"] { color: var(--sds-color-success-deep) !important; }

/* ────────────────────────────────────────────────────────────────────
   T2.3 — Typography rule: uppercase chỉ section label ≤11px
   ──────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}
/* Vẫn cho phép uppercase trên các utility class explicit */
.section-label,
.kpi-label,
.eyebrow,
.meta-eyebrow,
.phh-kpi span,
.ctc-stat span,
.kbig-label,
.cws-status,
.cal-layer-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  color: var(--sds-text-muted);
}

/* Calendar header — exception giữ uppercase cho legacy bố quen */
.cal-head h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────────
   T3.1 — Card radius tier rule global
   ──────────────────────────────────────────────────────────────────── */
.prod-hub-header,
.cal-today-card,
.care-banner,
.dash-pipeline,
.dash-workload,
.system-block,
.login-card {
  border-radius: var(--sds-radius-xl) !important;
}
.prod-block, .care-block, .system-block,
.kpi-big, .ppr-tiers > *, .cardx,
.r2-md-list, .r2-md-detail,
.cal-smart-groups, .cal-upcoming-reminders,
.cal-head, .cal-gantt, .workload-table,
.pc-page-set, .care-sidebar, .filter-chips,
.bcw-modal:not(.proposal-composer),
.user-menu-dropdown, .sv-bell-dropdown,
.prod-block, .stage-col, .dash-workload .wl-row {
  border-radius: var(--sds-radius-lg) !important;
}
.prod-item, .care-project-card, .stage-card,
.r2-md-list-item, .r2-md-channel-card,
.cur-item, .cws-week,
.sys-sheet-item, .sys-config-block,
.cal-week-event {
  border-radius: var(--sds-radius-md) !important;
}
.sds-badge, .tag, .state-pill, .care-badge,
.prop-badge, .cfb-chip, .cal-layer-chip,
.cal-mode-btn, .filter-chip, .pst-btn,
.sv-toast {
  border-radius: var(--sds-radius-pill) !important;
}

/* ────────────────────────────────────────────────────────────────────
   T3.2 — Status time pills unified pattern
   ──────────────────────────────────────────────────────────────────── */
.cal-time-chip,
.rmd-time-chip,
[class*="time-chip"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--sds-radius-pill);
  height: 18px;
  letter-spacing: 0.02em;
}
.cal-time-chip.is-overdue,
[class*="time-chip"].is-overdue {
  background: var(--sds-color-error-subtle);
  color: var(--sds-brand-red-deep);
}
.cal-time-chip.is-urgent,
[class*="time-chip"].is-urgent {
  background: var(--sds-color-warning-subtle);
  color: var(--sds-color-warning-deep);
}
.cal-time-chip.is-future,
[class*="time-chip"].is-future {
  background: var(--sds-gray-100);
  color: var(--sds-text-muted);
}

/* ────────────────────────────────────────────────────────────────────
   T3.3 — Toolbar header density — wrap responsive
   ──────────────────────────────────────────────────────────────────── */
.cal-head {
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 1280px) {
  .cal-head > div:last-child {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════════════
   END L41 — Tab Lịch & Timeline polish
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L42 (2026-05-17) — Hot-fix sau L41 deploy:                       ║
   ║  - Week cells dùng inline style, CSS class L41 không trigger      ║
   ║  - Card module trong cell text contrast yếu                       ║
   ║  - Toast popup buttons hierarchy raw                              ║
   ║  - Tone xuống cream heatmap palette                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────
   L42.1 — Week day cells: density heatmap palette tone xuống
   JS giờ đã add class .is-density-{empty/low/med/high/overload}
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col {
  background: #fff !important;
  border: 1px solid var(--sds-border-subtle) !important;
}
.cal-week-day-col.is-density-empty { background: #fff !important; }
.cal-week-day-col.is-density-low { background: var(--sds-gray-50) !important; }
.cal-week-day-col.is-density-med { background: var(--sds-brand-vanilla-subtle) !important; }
.cal-week-day-col.is-density-high {
  background: var(--sds-brand-gold-subtle) !important;
  border-color: var(--sds-brand-gold) !important;
}
.cal-week-day-col.is-density-overload {
  background: var(--sds-color-error-subtle) !important;
  border-color: var(--sds-brand-red) !important;
}

/* Past cells subtle muted */
.cal-week-day-col.is-past {
  opacity: 0.75;
}

/* Today cell — strong border-top accent + white bg */
.cal-week-day-col.is-today {
  background: #fff !important;
  border: 1px solid var(--sds-brand-accent) !important;
  border-top: 3px solid var(--sds-brand-accent) !important;
  position: relative;
  box-shadow: 0 0 0 2px var(--sds-brand-accent-subtle);
}

/* Tomorrow cell — subtle accent ring */
.cal-week-day-col.is-tomorrow {
  border-color: var(--sds-brand-accent-subtle) !important;
}

/* ────────────────────────────────────────────────────────────────────
   L42.2 — Card module trong week cell — TĂNG CONTRAST
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col .cal-week-event,
.cal-week-day-col [class*="cal-week-event"] {
  background: #fff !important;
  font-size: 12px !important;
}
/* Title text — đậm hơn */
.cal-week-day-col .cal-week-event > div:nth-child(2),
.cal-week-day-col [draggable="true"] > div:nth-child(2) {
  font-size: 12px !important;
  color: var(--sds-text-primary) !important;
  font-weight: 600 !important;
}
/* Meta status text — đủ contrast 5:1 */
.cal-week-day-col .cal-week-event > div:nth-child(3),
.cal-week-day-col [draggable="true"] > div:nth-child(3) {
  font-size: 10.5px !important;
  color: var(--sds-text-body) !important;
  font-weight: 500 !important;
}
/* Header label "HẠN DỰ ÁN" "NHẮC VIỆC" — uppercase visible */
.cal-week-day-col .cal-week-event > div:first-child,
.cal-week-day-col [draggable="true"] > div:first-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Reminder cards trong cell — bg subtle hơn */
.cal-week-day-col [draggable="true"][style*="FDEFEC"] {
  background: var(--sds-color-error-subtle) !important;
  border-left: 3px solid var(--sds-brand-red) !important;
  border: 1px solid var(--sds-color-error-subtle);
}
.cal-week-day-col [draggable="true"][style*="FEF3E2"] {
  background: var(--sds-brand-accent-subtle) !important;
  border-left: 3px solid var(--sds-brand-accent) !important;
  border: 1px solid var(--sds-brand-accent-subtle);
}

/* ────────────────────────────────────────────────────────────────────
   L42.3 — Week day cell HEADER — restyle today header
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col.is-today > div:first-child {
  background: var(--sds-brand-accent-subtle) !important;
  color: var(--sds-brand-accent-deep) !important;
}
.cal-week-day-col.is-today > div:first-child > div:nth-child(3) {
  /* "HÔM NAY" small badge */
  display: inline-block !important;
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
  padding: 2px 8px !important;
  border-radius: var(--sds-radius-sm) !important;
  margin-top: 4px !important;
}

/* ────────────────────────────────────────────────────────────────────
   L42.4 — Toast popup buttons hierarchy
   Toast popup auto-action có 2 buttons: "Đã làm xong" + "Hoãn 1 giờ"
   ──────────────────────────────────────────────────────────────────── */
.sv-toast button:first-of-type,
.sv-toast .sv-toast-action--primary,
[class*="auto-action"] button:first-of-type {
  background: var(--sds-color-success) !important;
  color: #fff !important;
  border: 1px solid var(--sds-color-success) !important;
  font-weight: 600 !important;
  border-radius: var(--sds-radius-md) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: background 160ms;
}
.sv-toast button:first-of-type:hover,
.sv-toast .sv-toast-action--primary:hover,
[class*="auto-action"] button:first-of-type:hover {
  background: var(--sds-color-success-deep) !important;
  border-color: var(--sds-color-success-deep) !important;
}

/* Snooze / secondary action — ghost outline */
.sv-toast button:not(:first-of-type):not(.sv-toast-close),
.sv-toast .sv-toast-action--secondary,
[class*="auto-action"] button:not(:first-of-type):not(.sv-toast-close) {
  background: transparent !important;
  color: var(--sds-text-muted) !important;
  border: 1px solid var(--sds-border-default) !important;
  font-weight: 500 !important;
  border-radius: var(--sds-radius-md) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  cursor: pointer;
}
.sv-toast button:not(:first-of-type):not(.sv-toast-close):hover {
  background: var(--sds-brand-primary-subtle) !important;
  color: var(--sds-brand-primary) !important;
  border-color: var(--sds-brand-primary) !important;
}

/* ────────────────────────────────────────────────────────────────────
   L42.5 — KPI zero state — muted hơn để không "empty hole" feel
   ──────────────────────────────────────────────────────────────────── */
.phh-kpi strong:empty::before,
.ctc-stat strong:empty::before {
  content: "—";
  color: var(--sds-text-subtle);
}

/* ════════════════════════════════════════════════════════════════════
   END L42 — Hot-fix sau L41
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L43 (2026-05-17) — Rollback header + modules về dạng WHITE       ║
   ║  Bố yêu cầu: Production Hub header + HÔM NAY card → white,        ║
   ║  không dùng navy gradient nữa. Topbar vẫn navy (không đụng).      ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────
   L43.1 — Production Hub Header — Navy gradient → White card
   ──────────────────────────────────────────────────────────────────── */
.prod-hub-header {
  background: #fff !important;
  background-image: none !important;
  color: var(--sds-text-primary) !important;
  border: 1px solid var(--sds-border-subtle) !important;
  box-shadow: var(--sds-shadow-sm) !important;
}
.prod-hub-header .phh-meta h1 {
  color: var(--sds-text-primary) !important;
}
.prod-hub-header .phh-meta p,
.prod-hub-header .phh-meta .muted {
  color: var(--sds-text-muted) !important;
}

/* Icon wrench wrapper — light surface accent */
.prod-hub-header .phh-icon {
  background: var(--sds-brand-accent-subtle) !important;
  color: var(--sds-brand-accent-deep) !important;
  border: 1px solid var(--sds-brand-accent-subtle);
}
.prod-hub-header .phh-icon .ds-icon,
.prod-hub-header .phh-icon .sv-icon {
  color: var(--sds-brand-accent-deep) !important;
}

/* 4 KPI tiles — light surface card */
.prod-hub-header .phh-kpi {
  background: var(--sds-surface-subtle) !important;
  border: 1px solid var(--sds-border-subtle) !important;
}
.prod-hub-header .phh-kpi:hover {
  background: var(--sds-brand-primary-subtle) !important;
}
.prod-hub-header .phh-kpi strong {
  color: var(--sds-text-primary) !important;
}
.prod-hub-header .phh-kpi span {
  color: var(--sds-text-muted) !important;
}
.prod-hub-header .phh-kpi.is-alert {
  background: var(--sds-color-error-subtle) !important;
  border-color: var(--sds-brand-red-subtle) !important;
}
.prod-hub-header .phh-kpi.is-alert strong {
  color: var(--sds-brand-red-deep) !important;
}

/* ────────────────────────────────────────────────────────────────────
   L43.2 — HÔM NAY card (cal-today-card) — Navy gradient → White card
   ──────────────────────────────────────────────────────────────────── */
.cal-today-card {
  background: #fff !important;
  background-image: none !important;
  color: var(--sds-text-primary) !important;
  border: 1px solid var(--sds-border-subtle) !important;
  box-shadow: var(--sds-shadow-sm) !important;
}
.cal-today-card .ctc-head {
  color: var(--sds-text-primary) !important;
}
.cal-today-card .ctc-head strong {
  color: var(--sds-text-primary) !important;
}
.cal-today-card .ctc-head .ctc-icon,
.cal-today-card .ctc-head .ds-icon,
.cal-today-card .ctc-head .sv-icon {
  color: var(--sds-brand-accent-deep) !important;
}
.cal-today-card .ctc-date,
.cal-today-card .muted {
  color: var(--sds-text-muted) !important;
}

/* 4 mini metric boxes — light surface tiles */
.cal-today-card .ctc-stat {
  background: var(--sds-surface-subtle) !important;
  border: 1px solid var(--sds-border-subtle) !important;
  border-radius: var(--sds-radius-md) !important;
  padding: 10px 12px;
}
.cal-today-card .ctc-stat strong {
  color: var(--sds-text-primary) !important;
}
.cal-today-card .ctc-stat span {
  color: var(--sds-text-muted) !important;
}

/* H3 heading "HÔM NAY" — primary text */
.cal-today-card h3,
.cal-today-card .ctc-title {
  color: var(--sds-text-primary) !important;
}

/* ────────────────────────────────────────────────────────────────────
   L43.3 — Care banner (tương tự, để đồng bộ pattern)
   ──────────────────────────────────────────────────────────────────── */
.care-banner {
  background: #fff !important;
  background-image: none !important;
  color: var(--sds-text-primary) !important;
  border: 1px solid var(--sds-border-subtle) !important;
  box-shadow: var(--sds-shadow-sm) !important;
}
.care-banner h1,
.care-banner h2,
.care-banner strong {
  color: var(--sds-text-primary) !important;
}
.care-banner p,
.care-banner .muted {
  color: var(--sds-text-muted) !important;
}

/* ════════════════════════════════════════════════════════════════════
   END L43 — Rollback header + modules về WHITE
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L43.B — Rollback TOPBAR về WHITE (toàn bộ header cũ)              ║
   ║  Bố yêu cầu: topbar về dạng cũ trắng, không navy nữa.              ║
   ║  Override toàn bộ L33.P2 topbar navy treatment.                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────
   L43.B1 — Topbar background → white
   ──────────────────────────────────────────────────────────────────── */
.topbar.v2,
.topbar {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sds-border-subtle) !important;
  box-shadow: var(--sds-shadow-sm) !important;
  color: var(--sds-text-primary) !important;
}

/* Logo — bỏ filter invert (giữ màu orange/dark gốc) */
.topbar.v2 .topbar-brand img,
.topbar.v2 .topbar-brand .brand-logo,
.topbar .topbar-brand img,
.topbar .topbar-brand .brand-logo {
  filter: none !important;
}

/* ────────────────────────────────────────────────────────────────────
   L43.B2 — Top tabs — text dark, active accent
   ──────────────────────────────────────────────────────────────────── */
.topbar.v2 .top-tab {
  color: var(--sds-text-muted) !important;
  background: transparent !important;
}
.topbar.v2 .top-tab:hover {
  background: var(--sds-surface-subtle) !important;
  color: var(--sds-text-primary) !important;
}
.topbar.v2 .top-tab.is-active {
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
  border-color: var(--sds-brand-accent) !important;
  box-shadow: 0 1px 3px rgba(247, 127, 0, 0.25) !important;
}
.topbar.v2 .top-tab .ds-icon,
.topbar.v2 .top-tab .sv-icon {
  color: currentColor !important;
}

/* ────────────────────────────────────────────────────────────────────
   L43.B3 — Topbar-right area — sync indicator, API status, bell, help
   ──────────────────────────────────────────────────────────────────── */
.topbar.v2 .topbar-right {
  color: var(--sds-text-muted) !important;
}

/* API status pill — light bg */
.topbar.v2 .api-status,
.topbar.v2 .pill-compact {
  background: var(--sds-surface-subtle) !important;
  border: 1px solid var(--sds-border-subtle) !important;
  color: var(--sds-text-body) !important;
}

/* Sync indicator */
.topbar.v2 .topbar-sync {
  background: transparent !important;
  color: var(--sds-text-muted) !important;
}
.topbar.v2 .topbar-sync:hover {
  background: var(--sds-surface-subtle) !important;
  color: var(--sds-text-primary) !important;
}

/* Bell + Help icon buttons */
.topbar.v2 .notif-bell-btn,
.topbar.v2 .help-btn,
.topbar.v2 .sv-bell-btn {
  color: var(--sds-text-muted) !important;
  background: transparent !important;
}
.topbar.v2 .notif-bell-btn:hover,
.topbar.v2 .help-btn:hover,
.topbar.v2 .sv-bell-btn:hover {
  background: var(--sds-surface-subtle) !important;
  color: var(--sds-text-primary) !important;
}

/* User menu trigger */
.topbar.v2 .user-menu-trigger {
  background: transparent !important;
  color: var(--sds-text-body) !important;
}
.topbar.v2 .user-menu-trigger:hover {
  background: var(--sds-surface-subtle) !important;
}
.topbar.v2 .umt-avatar {
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
}
.topbar.v2 .umt-chevron {
  color: var(--sds-text-muted) !important;
}

/* Notification tab badge — giữ red filled small */
.topbar.v2 .tt-badge {
  background: var(--sds-brand-red) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   END L43.B — Topbar WHITE rollback
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L44 (2026-05-17) — Week View Calendar Premium Redesign            ║
   ║  Font hierarchy + module card editorial calm + premium spacing     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────
   L44.1 — Week grid container — premium spacing + soft surface
   ──────────────────────────────────────────────────────────────────── */
.cal-week-grid,
.cal-grid-main-section > div,
section.cal-grid-main-section {
  background: #fff !important;
  border-radius: var(--sds-radius-xl) !important;
  border: 1px solid var(--sds-border-subtle);
  padding: 16px !important;
  box-shadow: var(--sds-shadow-sm);
}

/* Week navigation header */
.cal-week-nav,
.cal-grid-main-section > div > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}
.cal-week-nav strong,
.cal-grid-main-section > div > div:first-child strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--sds-text-primary);
  letter-spacing: -0.01em;
}

/* ────────────────────────────────────────────────────────────────────
   L44.2 — Week day cells — premium typography + spacing
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col {
  border-radius: var(--sds-radius-lg) !important;
  overflow: hidden;
  transition: box-shadow 200ms ease, border-color 200ms ease;
  min-height: 320px !important;
}
.cal-week-day-col:hover {
  box-shadow: var(--sds-shadow-sm);
}

/* Header: Weekday label + Date */
.cal-week-day-col > div:first-child {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--sds-border-subtle) !important;
  background: transparent !important;
  text-align: center;
}
/* THỨ 2/3/.../CHỦ NHẬT label */
.cal-week-day-col > div:first-child > div:first-child {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sds-text-muted) !important;
  opacity: 1 !important;
  margin-bottom: 4px !important;
}
/* Date "11/05" - premium large */
.cal-week-day-col > div:first-child > div:nth-child(2) {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--sds-text-primary) !important;
  font-family: var(--sds-font-sans);
  margin-top: 0 !important;
}
/* Today: date 700 weight accent color */
.cal-week-day-col.is-today > div:first-child > div:nth-child(2) {
  color: var(--sds-brand-accent-deep) !important;
  font-weight: 700 !important;
}
/* Tomorrow / past meta labels */
.cal-week-day-col > div:first-child > div:nth-child(3) {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}
/* "HÔM NAY" small badge */
.cal-week-day-col.is-today > div:first-child > div:nth-child(3):not([style*="background"]) {
  display: inline-block !important;
  background: var(--sds-brand-accent) !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: var(--sds-radius-sm) !important;
  font-size: 9px !important;
  font-weight: 700;
}

/* Events container — premium spacing */
.cal-week-day-col > div:nth-child(2),
.cal-week-day-col > div:last-child {
  padding: 10px !important;
  gap: 6px !important;
}

/* ────────────────────────────────────────────────────────────────────
   L44.3 — Card module redesign — premium editorial
   ──────────────────────────────────────────────────────────────────── */
.cal-week-event,
.cal-week-day-col [draggable="true"] {
  background: #fff !important;
  border: 1px solid var(--sds-border-subtle) !important;
  border-left-width: 3px !important;
  border-radius: var(--sds-radius-md) !important;
  padding: 10px 12px !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  position: relative;
}
.cal-week-event:hover,
.cal-week-day-col [draggable="true"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--sds-shadow-md);
}

/* Card header — label + grip */
.cal-week-event .cwe-head,
.cal-week-day-col [draggable="true"] .cwe-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px;
}
.cal-week-event .cwe-label,
.cal-week-day-col [draggable="true"] .cwe-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cal-week-event .cwe-grip,
.cal-week-day-col [draggable="true"] .cwe-grip {
  color: var(--sds-text-subtle);
  opacity: 0.35;
  cursor: grab;
  transition: opacity 160ms;
  display: inline-flex;
}
.cal-week-event:hover .cwe-grip,
.cal-week-day-col [draggable="true"]:hover .cwe-grip {
  opacity: 0.9;
}

/* Time chip (reminder JetBrains Mono) */
.cal-week-event .cwe-time,
.cal-week-day-col [draggable="true"] .cwe-time {
  font-family: var(--sds-font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--sds-surface-subtle);
  color: var(--sds-text-body);
  padding: 1px 6px;
  border-radius: var(--sds-radius-sm);
  letter-spacing: 0;
}

/* Title (main content) — premium readable */
.cal-week-event > div:nth-child(2),
.cal-week-day-col [draggable="true"] > div:nth-child(2) {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--sds-text-primary) !important;
  letter-spacing: -0.005em;
  margin-top: 4px !important;
}

/* Meta status text */
.cal-week-event > div:nth-child(3),
.cal-week-day-col [draggable="true"] > div:nth-child(3) {
  font-size: 11px !important;
  color: var(--sds-text-body) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  line-height: 1.3;
}

/* ────────────────────────────────────────────────────────────────────
   L44.4 — Empty state cell — editorial
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col [style*="italic"] {
  color: var(--sds-text-subtle) !important;
  font-size: 11px !important;
  font-style: normal !important;
  text-align: center;
  padding: 24px 8px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ────────────────────────────────────────────────────────────────────
   L44.5 — Conflict badge "QUÁ TẢI" / count badge — refined
   ──────────────────────────────────────────────────────────────────── */
.cal-week-day-col > div:first-child > div[style*="background:#DC2626"],
.cal-week-day-col > div:first-child > div[style*="background:#F59E0B"] {
  margin-top: 6px !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  border-radius: var(--sds-radius-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════
   END L44 — Premium week view redesign
   ════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  L46 (2026-05-17) — Module spacing — bố flag modul đang dính nhau ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Production Hub container — gap giữa các section con */
.production-hub-v26 > section,
.production-hub-v26 > div,
.production-hub-v26 > nav,
.production-hub-v26 > main {
  margin-bottom: 20px;
}
.production-hub-v26 > section:last-child,
.production-hub-v26 > div:last-child {
  margin-bottom: 0;
}

/* Sub-tabs container — extra breathing space dưới */
.prod-subtabs {
  margin-bottom: 24px !important;
  margin-top: 8px;
}

/* Calendar tab container — gap giữa toolbar / grid / intel / workload */
.calendar-tab > section,
.tab-content.calendar-tab > section {
  margin-bottom: 20px;
}
.calendar-tab > section:last-child {
  margin-bottom: 0;
}

/* Calendar header toolbar bar — top margin tách khỏi sub-tabs */
.cal-head {
  margin-top: 8px;
  margin-bottom: 20px !important;
  padding: 16px 20px !important;
}

/* Cal-intel-row (HÔM NAY + smart reminder) — gap với grid trên + workload dưới */
.cal-intel-row {
  margin-top: 8px;
  margin-bottom: 8px;
  gap: 16px !important;
}

/* Cal-grid-main-section (week/month/gantt) — gap top + bottom */
.cal-grid-main-section {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Cal-workload-section (Dự báo) — gap top */
.cal-workload-section {
  margin-top: 12px;
  padding: 18px 20px !important;
  background: #fff;
  border-radius: var(--sds-radius-lg);
  border: 1px solid var(--sds-border-subtle);
  box-shadow: var(--sds-shadow-sm);
}

/* Production Hub header (banner) — gap dưới với sub-tabs */
.prod-hub-header {
  margin-bottom: 20px !important;
  padding: 20px 24px !important;
}

/* Care tab cũng cần spacing đồng bộ */
.care-tab-v226 > section,
.care-tab-v226 > div {
  margin-bottom: 20px;
}

/* Intake / Dashboard / System tab — module spacing */
.r2-intake-tab > section,
.dashboard-tab > section,
.system-tab > section {
  margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════════════════════
   END L46 — Module spacing fix
   ════════════════════════════════════════════════════════════════════ */