/* 7TH BREED admin quality layer — controls, alignment and persistent visibility */
#dashboard-view {
  --quality-control-h: 42px;
  --quality-radius: 10px;
}
#dashboard-view .field,
#dashboard-view .textarea,
#dashboard-view .status-select,
#dashboard-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#dashboard-view select,
#dashboard-view textarea {
  min-width: 0;
  width: 100%;
  min-height: var(--quality-control-h);
  opacity: 1 !important;
  visibility: visible !important;
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--quality-radius) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
#dashboard-view textarea,
#dashboard-view .textarea { min-height: 88px; resize: vertical; }
#dashboard-view input::placeholder,
#dashboard-view textarea::placeholder {
  color: #7c8aa0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #7c8aa0 !important;
}
#dashboard-view .field:focus,
#dashboard-view .textarea:focus,
#dashboard-view .status-select:focus,
#dashboard-view input:focus,
#dashboard-view select:focus,
#dashboard-view textarea:focus {
  border-color: #2563eb !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
#dashboard-view input:disabled,
#dashboard-view select:disabled,
#dashboard-view textarea:disabled,
#dashboard-view .field[readonly] {
  opacity: 1 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  background: #f1f5f9 !important;
}
#dashboard-view input[type="checkbox"],
#dashboard-view input[type="radio"] {
  opacity: 1 !important;
  visibility: visible !important;
  accent-color: #2563eb;
}
#dashboard-view input[type="file"] {
  opacity: 1 !important;
  visibility: visible !important;
  width: 100%;
  color: inherit;
}
#dashboard-view .label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: var(--text) !important;
  font-weight: 650;
}
#dashboard-view .form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px !important;
  align-items: start;
}
#dashboard-view .row,
#dashboard-view .toolbar,
#dashboard-view .quote-actions {
  align-items: center;
  gap: 10px;
}
#dashboard-view .row { flex-wrap: wrap; }
#dashboard-view .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  white-space: nowrap;
}
#dashboard-view .quote-card,
#dashboard-view .panel,
#dashboard-view .stat,
#dashboard-view .modal,
#dashboard-view .table-wrap {
  overflow-wrap: anywhere;
}
#dashboard-view .quote-top,
#dashboard-view .quote-summary {
  min-width: 0;
}
#dashboard-view .quote-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 10px 16px;
  align-items: start;
}
#dashboard-view table { width: 100%; border-collapse: collapse; }
#dashboard-view th,
#dashboard-view td { vertical-align: middle; }
#dashboard-view .editable-field {
  display: inline-block;
  min-width: 48px;
  min-height: 22px;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}
#dashboard-view .quote-actions,
#dashboard-view .table-actions,
#dashboard-view .card-actions,
#dashboard-view .row-actions,
#dashboard-view .workflow-actions,
#dashboard-view .crm-actions {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#dashboard-view .customer-quote-search-result {
  border: 1px solid rgba(37,99,235,.28) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
#dashboard-view .customer-quote-search-result .eyebrow { color: #2563eb !important; }

html.dark #dashboard-view .field,
html.dark #dashboard-view .textarea,
html.dark #dashboard-view .status-select,
html.dark #dashboard-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark #dashboard-view select,
html.dark #dashboard-view textarea {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background: #101a2d !important;
  border-color: #33445f !important;
}
html.dark #dashboard-view input::placeholder,
html.dark #dashboard-view textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
html.dark #dashboard-view input:disabled,
html.dark #dashboard-view select:disabled,
html.dark #dashboard-view textarea:disabled,
html.dark #dashboard-view .field[readonly] {
  color: #aab6d0 !important;
  -webkit-text-fill-color: #aab6d0 !important;
  background: #172238 !important;
}
html.dark #dashboard-view select option {
  color: #f1f5f9;
  background: #101a2d;
}
html.dark #dashboard-view .customer-quote-search-result {
  border-color: rgba(96,165,250,.38) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

@media (max-width: 900px) {
  #dashboard-view .form-grid { grid-template-columns: 1fr; }
  #dashboard-view .toolbar { align-items: stretch; }
}
@media (max-width: 640px) {
  #dashboard-view .row,
  #dashboard-view .quote-actions { width: 100%; }
  #dashboard-view .quote-actions .btn { flex: 1 1 auto; }
  #dashboard-view .quote-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  #dashboard-view .quote-summary { grid-template-columns: 1fr; }
}

/* HR KPI labels stay complete and use the Home KPI layout. */
#dashboard-view #tab-hr>.stats{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
#dashboard-view #tab-hr .stat-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important;overflow-wrap:normal!important;line-height:1.3!important;max-width:calc(100% - 34px)!important}


/* Orders use the same right-side workspace pattern as Quote Details. */
body.order-drawer-open{overflow:hidden!important;overscroll-behavior:none!important}
#dashboard-view #orders-body .order-row{cursor:pointer}
#dashboard-view #orders-body .order-row:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:-2px}
.order-details-backdrop{align-items:stretch!important;justify-content:flex-end!important;padding:0!important;background:rgba(15,23,42,.24)!important}
.order-details-drawer{width:min(1040px,calc(100vw - 250px))!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;border:0!important;border-left:1px solid var(--dash-border,#e5ebf3)!important;background:var(--dash-surface,#fff)!important;box-shadow:-18px 0 48px rgba(15,23,42,.16)!important;overflow:auto!important}
.order-details-head{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--dash-border,#e5ebf3);background:var(--dash-surface,#fff)}
.order-details-head h2{margin:3px 0 2px!important}
.order-document-actions{position:sticky;top:82px;z-index:3;display:flex;gap:8px;align-items:center;padding:10px 22px;border-bottom:1px solid var(--dash-border,#e5ebf3);background:var(--dash-page,#f8fafc)}
.order-details-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:18px 22px 32px}
.order-details-body>.panel{margin:0!important;min-width:0}
.order-details-body>.order-status-panel{grid-column:1/-1}
.order-details-body .detail-table{width:100%;table-layout:fixed}
.order-details-body .detail-table th{width:34%;white-space:normal}
.order-details-body .detail-table td{overflow-wrap:anywhere;word-break:break-word}
.order-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.order-section-head h3,.order-details-body>.panel>h3{margin:0 0 10px!important}
html.dark .order-details-drawer,html.dark .order-details-head{background:#101b2d!important;border-color:#24344a!important}
html.dark .order-document-actions{background:#0b1424!important;border-color:#24344a!important}
@media(max-width:900px){.order-details-drawer{width:100vw!important}.order-details-body{grid-template-columns:1fr!important;padding:14px}.order-details-body>.order-status-panel{grid-column:auto}.order-details-head{padding:14px}.order-document-actions{top:76px;padding:9px 14px}}


/* Orders reuse the exact Quote Details component and layout. */
#dashboard-view #tab-orders .order-detail-card > .quote-details[open] > summary::before{content:"Order details"!important}
#dashboard-view #tab-orders .order-detail-card{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#dashboard-view #tab-orders .order-document-footer{justify-content:flex-end!important}
#dashboard-view #tab-orders .order-document-footer .btn{min-width:112px!important}
#dashboard-view #tab-orders .order-row{cursor:pointer}
#dashboard-view #tab-orders .order-row:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:-2px}


/* Approved Order Details mockup — centered document workspace. */
body.order-preview-open{overflow:hidden!important}
.order-preview-backdrop{position:fixed!important;inset:0!important;z-index:15000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:12px 18px!important;background:rgba(8,17,29,.72)!important;backdrop-filter:blur(2px)!important}
.order-preview-modal{width:min(1138px,calc(100vw - 42px))!important;height:min(92dvh,920px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid #d9e2ec!important;border-radius:10px!important;background:#fff!important;color:#0f1d33!important;box-shadow:0 28px 90px rgba(2,12,27,.34)!important}
.order-preview-topbar{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e4eaf1;background:#fbfcfe}
.order-back-button,.order-close-button{border:0;background:transparent;color:#17243a;cursor:pointer;font:inherit}.order-back-button{display:flex;align-items:center;gap:9px;font-weight:600}.order-back-button span{font-size:28px;font-weight:300;line-height:1}.order-close-button{font-size:27px;font-weight:300;line-height:1;padding:5px 8px}
.order-preview-content{flex:1;min-height:0;overflow:auto;padding:18px 20px 14px;background:#fff}
.order-preview-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.order-title-main{display:flex;align-items:center;gap:15px;min-width:0}.order-title-icon{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;border-radius:50%;background:#e8f8ee;color:#129447}.order-title-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}.order-title-main h2{margin:0;color:#0e1c32;font-size:1.42rem;line-height:1.15}.order-title-main p{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 0;color:#586a82;font-size:.82rem}.order-title-main p strong{color:#20334f}
.order-status-pill{display:flex;align-items:center;gap:8px;min-width:134px;padding:9px 12px;border-radius:9px;background:#e9f8ed;color:#087b34}.order-status-pill select{min-width:78px;border:0!important;outline:0!important;background:transparent!important;color:inherit!important;font-weight:700!important;appearance:none!important;cursor:pointer}.order-status-dot{width:9px;height:9px;border-radius:50%;background:currentColor}.order-status-pill.status-pending{background:#fff7df;color:#a46600}.order-status-pill.status-failed,.order-status-pill.status-cancelled{background:#ffeded;color:#b42318}
.order-preview-grid{display:grid;gap:14px}.order-preview-overview{grid-template-columns:1fr 1fr}.order-preview-bottom-grid{grid-template-columns:1.08fr 1fr 1.15fr;margin-top:14px}.order-preview-card{min-width:0;overflow:hidden;border:1px solid #dfe6ee;border-radius:8px;background:#fff}.order-preview-card>h3{display:flex;align-items:center;gap:8px;margin:0;padding:12px 15px;border-bottom:1px solid #e4eaf1;color:#0e1c32;font-size:.84rem;font-weight:750}.order-card-icon{display:inline-grid;place-items:center;width:18px;height:18px;color:#17243a;font-size:16px}.order-detail-list{margin:0;padding:5px 15px 8px}.order-detail-list>div{display:grid;grid-template-columns:40% minmax(0,1fr);gap:14px;align-items:start;padding:8px 0;border-bottom:1px solid #edf1f5}.order-detail-list>div:last-child{border-bottom:0}.order-detail-list dt{color:#5d6f86;font-size:.76rem}.order-detail-list dd{margin:0;color:#17243a;font-size:.78rem;font-weight:520;overflow-wrap:anywhere}.order-detail-list a{color:#17243a;text-decoration:none}.order-link-value{color:#2563eb!important}.order-inline-status{display:inline-flex;align-items:center;gap:7px;color:#0b8a3b;font-weight:700}.order-inline-status>span{width:8px;height:8px;border-radius:50%;background:currentColor}.order-inline-status.status-pending{color:#a46600}.order-inline-status.status-failed,.order-inline-status.status-cancelled{color:#b42318}
.order-items-card{margin-top:14px}.order-items-scroll{overflow:auto}.order-items-table{width:100%;min-width:820px;border-collapse:collapse}.order-items-table th,.order-items-table td{padding:9px 11px;border:0;border-bottom:1px solid #e8edf3;text-align:left;vertical-align:top;font-size:.72rem}.order-items-table th{background:#fbfcfe;color:#50637b;font-weight:650;white-space:nowrap}.order-items-table td{color:#17243a}.order-items-table tbody tr:last-child td{border-bottom:0}.order-item-description{margin-top:3px;color:#6b7b90;font-size:.67rem;line-height:1.3}
.order-total-row{font-weight:800!important}.order-total-row dt,.order-total-row dd{color:#0f1d33!important;font-size:.84rem!important}.order-payment-card{padding-bottom:10px}.order-payment-values{display:flex;justify-content:space-between;gap:12px;padding:9px 15px 3px;color:#5d6f86;font-size:.76rem}.order-payment-values strong{color:#17243a}.order-payment-values:first-of-type strong{color:#078a3b}.order-progress{height:8px;margin:15px 15px 7px;border-radius:99px;background:#e8edf2;overflow:hidden}.order-progress span{display:block;height:100%;border-radius:inherit;background:#14a94d}.order-progress-label{display:flex;justify-content:space-between;gap:12px;padding:0 15px;color:#5d6f86;font-size:.7rem}.order-progress-label strong{color:#33455d}
.order-preview-footer{flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e0e7ef;background:#fff}.order-preview-footer .btn{min-width:112px;min-height:39px;border-radius:7px}.order-invoice-btn{border:1px solid #2563eb!important;background:#f6f9ff!important;color:#1557d6!important}.order-receipt-btn{border:1px solid #159447!important;background:#159447!important;color:#fff!important}.order-receipt-btn:disabled{opacity:.48!important;cursor:not-allowed!important}
html.dark .order-preview-backdrop{background:rgba(2,8,18,.78)!important}html.dark .order-preview-modal,html.dark .order-preview-content,html.dark .order-preview-footer,html.dark .order-preview-card{background:#101b2d!important;color:#edf4ff!important;border-color:#2a3a51!important}html.dark .order-preview-topbar,.dark .order-items-table th{background:#0c1626!important;border-color:#2a3a51!important}html.dark .order-title-main h2,html.dark .order-preview-card>h3,html.dark .order-detail-list dd,html.dark .order-detail-list a,html.dark .order-payment-values strong,html.dark .order-total-row dt,html.dark .order-total-row dd{color:#edf4ff!important}html.dark .order-back-button,html.dark .order-close-button{color:#edf4ff!important}html.dark .order-detail-list>div,html.dark .order-items-table th,html.dark .order-items-table td,html.dark .order-preview-footer,html.dark .order-preview-card>h3{border-color:#26364d!important}html.dark .order-items-table td{color:#e8eef8!important}html.dark .order-detail-list dt,html.dark .order-title-main p,html.dark .order-payment-values,html.dark .order-progress-label{color:#9fb0c6!important}
@media(max-width:900px){.order-preview-backdrop{padding:0!important}.order-preview-modal{width:100vw!important;height:100dvh!important;max-height:none!important;border-radius:0!important}.order-preview-overview,.order-preview-bottom-grid{grid-template-columns:1fr}.order-preview-content{padding:14px}.order-preview-title-row{align-items:flex-start}.order-status-pill{min-width:118px}.order-title-icon{width:46px;height:46px;flex-basis:46px}.order-preview-footer{position:sticky;bottom:0;overflow-x:auto}.order-preview-footer .btn{min-width:104px}}
@media(max-width:560px){.order-preview-title-row{flex-direction:column}.order-status-pill{align-self:flex-start}.order-detail-list>div{grid-template-columns:1fr;gap:3px}.order-preview-footer{justify-content:flex-start}.order-preview-topbar{padding:0 12px}.order-preview-content{padding:12px}}
@media print{body.order-preview-open>*:not(#modal-root){display:none!important}#modal-root{display:block!important;position:static!important}.order-preview-backdrop{position:static!important;padding:0!important;background:#fff!important;backdrop-filter:none!important}.order-preview-modal{width:100%!important;height:auto!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}.order-preview-topbar,.order-preview-footer,.order-status-pill{display:none!important}.order-preview-content{overflow:visible!important;padding:0!important}.order-preview-card{break-inside:avoid}.order-items-table{min-width:0!important}.order-items-table th,.order-items-table td{font-size:8px!important;padding:5px!important}}

/* Approved 2026-10-01 mockups */
#dashboard-view #tab-home>.attention-panel,#dashboard-view #tab-home>.pending-transactions-panel{align-self:stretch!important;height:100%!important;min-height:320px!important;display:flex!important;flex-direction:column!important}
#dashboard-view #tab-home>.attention-panel>.attention-list,#dashboard-view #tab-home>.pending-transactions-panel>.pending-orders-list{flex:1!important}
.customer-quote-backdrop{padding:24px!important;align-items:center!important;justify-content:center!important;background:rgba(15,23,42,.38)!important}.customer-quote-mockup{width:min(100%,1040px)!important;max-height:min(920px,calc(100dvh - 32px))!important;padding:0!important;overflow:auto!important;border-radius:14px!important}.customer-quote-topbar{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface)}.customer-quote-back,.customer-quote-close{border:0;background:transparent;color:var(--text);cursor:pointer;font:inherit}.customer-quote-back{font-weight:650}.customer-quote-close{font-size:24px}.customer-quote-title{display:flex;align-items:center;gap:14px;padding:22px 24px 12px}.customer-quote-title h2{margin:0}.customer-quote-title p{margin:4px 0 0;color:var(--muted);font-size:.84rem}.customer-quote-title-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eef4ff;color:#2563eb}.customer-quote-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 24px 18px}.customer-quote-section{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}.customer-quote-section-head{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--border);background:var(--surface-subtle,rgba(148,163,184,.05))}.customer-quote-section-head h3{margin:0;font-size:.9rem}.customer-quote-section-body{display:grid;gap:12px;padding:15px}.customer-quote-includes{padding:12px;border:1px solid #cfe0ff;border-radius:10px;background:#eff6ff;color:#1e40af}.customer-quote-includes .form-grid{grid-template-columns:1fr!important}.customer-quote-includes .form-grid>div{background:transparent!important;border:0!important;padding:3px 0!important}.customer-quote-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.customer-quote-footer{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:14px 24px;border-top:1px solid var(--border);background:var(--surface)}
.hr-view-tabs{display:flex;margin:16px 0 0;border-bottom:1px solid var(--border);overflow-x:auto}.hr-view-tab{min-height:46px;padding:0 20px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap}.hr-view-tab.active{color:#2563eb;border-bottom-color:#2563eb;background:color-mix(in srgb,#2563eb 5%,transparent)}.hr-pane{margin-top:0!important;border-top-left-radius:0!important}.hr-add-worker-card{padding:6px 2px}.hr-add-worker-heading h3{margin:0 0 14px}.hr-add-info{display:flex;flex-direction:column;gap:3px;margin-bottom:16px;padding:12px 14px;border:1px solid #cfe0ff;border-radius:10px;background:#eff6ff;color:#1e40af}.hr-add-info span{font-size:.78rem}.hr-worker-preview{display:flex;align-items:center;gap:12px;min-height:72px;margin-top:18px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle,rgba(148,163,184,.05))}.hr-preview-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#cbd5e1;color:#334155;font-weight:800}.hr-worker-preview>div:nth-child(2){display:flex;flex-direction:column}.hr-worker-preview>div:nth-child(2) span{font-size:.75rem;color:var(--muted)}.hr-preview-tags{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.hr-preview-tags span{padding:5px 8px;border-radius:6px;background:#eaf1ff;color:#2563eb;font-size:.72rem;font-weight:700}.hr-add-actions{display:flex;justify-content:space-between;margin-top:16px}.hr-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.hr-department-card{display:grid;grid-template-columns:1fr auto;gap:8px}.hr-department-card h3,.hr-position-card h3{margin:0;font-size:.9rem}.hr-department-card strong{font-size:1.35rem}.hr-department-card span{grid-column:1/-1}.hr-position-card>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.hr-position-card span{padding:6px 8px;border-radius:7px;background:var(--surface-subtle,rgba(148,163,184,.08));font-size:.76rem}
.quote-family-search{padding:0!important;overflow:hidden}.quote-family-head{padding:14px 16px;border-bottom:1px solid var(--border)}.quote-family-head h3{margin:0}.quote-family-head p{margin:3px 0 0}.quote-family-table{width:100%;border-collapse:collapse}.quote-family-table th,.quote-family-table td{padding:11px 10px!important;vertical-align:middle!important}.quote-family-parent-row{background:var(--surface-subtle,rgba(148,163,184,.05));font-weight:650}.quote-family-child-row td{font-size:.8rem}.quote-family-child-row td:first-child{border-left:3px solid #dbeafe}.quote-family-toggle,.quote-family-count{border:0;background:transparent;cursor:pointer}.quote-family-count{color:#2563eb;font-weight:700}.quote-family-person{display:flex;align-items:center;gap:8px}.quote-family-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e7efff;color:#2563eb;font-size:.68rem;font-weight:800}.quote-family-group.is-collapsed .quote-family-child-row,.quote-family-group.is-collapsed .quote-family-child-empty{display:none}
html.dark .customer-quote-includes,html.dark .hr-add-info{background:#132441;color:#a9c3ff;border-color:#2c4a7b}
@media(max-width:900px){.customer-quote-backdrop{padding:0!important}.customer-quote-mockup{width:100vw!important;max-height:100dvh!important;border-radius:0!important}.customer-quote-columns{grid-template-columns:1fr;padding:10px 14px}.customer-quote-two{grid-template-columns:1fr}.hr-catalog-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.hr-catalog-grid{grid-template-columns:1fr}}


/* Single Team/Admin session ID */
.member-session-modal{width:min(100%,560px)!important}.member-session-generate{display:grid;grid-template-columns:minmax(0,220px) auto;gap:10px;align-items:end}.session-small-btn{min-height:32px!important;height:32px!important;padding:5px 10px!important;font-size:12px!important;width:auto!important}.member-session-card{display:grid;gap:11px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle,rgba(148,163,184,.05))}.member-session-status{display:flex;align-items:center;justify-content:space-between;gap:8px}.member-session-card .session-token-row{display:flex;align-items:center;gap:8px}.member-session-card .session-token-value{min-width:0;flex:1;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);font-size:12px;word-break:break-all}.member-session-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.member-session-times div{padding:9px 10px;border:1px solid var(--border);border-radius:8px}.member-session-times dt{font-size:11px;color:var(--muted)}.member-session-times dd{margin:3px 0 0;font-size:12px;font-weight:650}.member-session-empty{display:flex;flex-direction:column;gap:3px;padding:14px;border:1px dashed var(--border);border-radius:9px}.member-session-card>.btn-danger{justify-self:start}@media(max-width:600px){.member-session-generate{grid-template-columns:1fr}.member-session-times{grid-template-columns:1fr}}


/* 2026-10-01 compact admin actions + always-visible feedback */
:root {
  --admin-feedback-z: 2147483000;
}

/* Every success/error/live toast sits above drawers, quotation workspaces,
   confirmations and any future modal layer. */
#app-toast-host,
#app-message-region,
#notification-toast-region {
  position: fixed !important;
  z-index: var(--admin-feedback-z) !important;
  isolation: isolate !important;
}
#app-toast-host {
  top: 14px !important;
  right: 14px !important;
  gap: 7px !important;
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: none !important;
}
#app-toast-host .app-toast {
  pointer-events: auto !important;
  min-height: 0 !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, .22) !important;
}
#notification-toast-region {
  right: 14px !important;
  bottom: 14px !important;
}
#notification-toast-region .lead-toast {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

/* Buttons: compact by default. Large CTAs are no longer the admin default. */
#dashboard-view .btn,
#modal-root .btn,
#dashboard-view button.filter-btn,
#dashboard-view button.tab-btn,
#dashboard-view .hr-view-tab {
  min-height: 32px !important;
  height: auto !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
#dashboard-view .btn:hover,
#modal-root .btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
#dashboard-view .btn svg,
#modal-root .btn svg {
  width: 14px !important;
  height: 14px !important;
}
#dashboard-view .btn-primary,
#modal-root .btn-primary {
  box-shadow: 0 3px 8px rgba(37, 99, 235, .14) !important;
}
#dashboard-view .toolbar,
#dashboard-view .quote-actions,
#dashboard-view .row {
  gap: 7px !important;
}

/* Footer/action groups should not stretch every action into a large tile. */
#dashboard-view .quote-actions .btn,
#dashboard-view .quote-footer .btn,
#dashboard-view .order-document-footer .btn,
#modal-root .customer-quote-footer .btn,
#modal-root .hr-add-actions .btn,
#modal-root .row .btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
#dashboard-view #tab-orders .order-document-footer .btn {
  min-width: 0 !important;
}
.order-preview-footer .btn {
  min-width: 0 !important;
}

/* Keep icon-only controls genuinely compact. */
#dashboard-view :is(.icon-btn,.calendar-icon-btn,.notification-bell,.mobile-toggle),
#modal-root :is(.customer-quote-close) {
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

/* Remove redundant headings/helper copy while retaining field labels that
   users need to complete forms correctly. */
#dashboard-view .section-heading p,
#dashboard-view .eyebrow,
#modal-root .customer-quote-title p,
#dashboard-view .quote-family-head p,
#dashboard-view .hr-add-info span {
  display: none !important;
}
#dashboard-view .section-heading {
  margin-bottom: 12px !important;
}
#dashboard-view .section-heading h2,
#dashboard-view .panel h2,
#dashboard-view .panel h3 {
  margin-bottom: 0 !important;
}
#dashboard-view .label,
#modal-root .label {
  gap: 5px !important;
  font-size: 11.5px !important;
}
#dashboard-view .muted,
#modal-root .muted {
  line-height: 1.35 !important;
}

/* Compact common table action buttons. */
#dashboard-view table .btn,
#dashboard-view .catalog-table .btn,
#dashboard-view .ui-table-wrap .btn {
  min-height: 28px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
}

/* Preserve touch usability without returning to oversized desktop actions. */
@media (max-width: 700px) {
  #dashboard-view .btn,
  #modal-root .btn,
  #dashboard-view button.filter-btn,
  #dashboard-view button.tab-btn,
  #dashboard-view .hr-view-tab {
    min-height: 34px !important;
    padding: 6px 10px !important;
  }
  #app-toast-host {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }
}


/* 2026-10-01 Order Details render isolation */
#modal-root:has(.order-preview-modal) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30000 !important;
  display: block !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
#modal-root:has(.order-preview-modal) > .order-preview-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 30001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: auto !important;
  background: rgba(8,17,29,.68) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
#modal-root .order-preview-modal {
  position: relative !important;
  inset: auto !important;
  z-index: 30002 !important;
  width: min(1138px, calc(100vw - 36px)) !important;
  height: min(92dvh, 920px) !important;
  min-width: 0 !important;
  max-width: 1138px !important;
  max-height: 920px !important;
  margin: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  filter: none !important;
  clip-path: none !important;
  perspective: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
html.dark #modal-root .order-preview-modal {
  background: #101b2d !important;
}
@media (max-width:900px) {
  #modal-root:has(.order-preview-modal) > .order-preview-backdrop { padding: 0 !important; }
  #modal-root .order-preview-modal {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
}

/* 2026-10-01 HR section navigation — separated, readable controls */
#dashboard-view #tab-hr .hr-view-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
#dashboard-view #tab-hr .hr-view-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-height: 48px !important;
  padding: 9px 13px !important;
  border: 1px solid var(--border, #dbe3ee) !important;
  border-radius: 10px !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #172033) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.045) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
#dashboard-view #tab-hr .hr-view-tab:hover {
  border-color: #9ebcf7 !important;
  background: #f7faff !important;
}
#dashboard-view #tab-hr .hr-view-tab.active {
  border-color: #2563eb !important;
  background: #eff5ff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}
#dashboard-view #tab-hr .hr-tab-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #eef2f7 !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
#dashboard-view #tab-hr .hr-view-tab.active .hr-tab-icon {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
html.dark #dashboard-view #tab-hr .hr-view-tab {
  background: #101b2d !important;
  border-color: #2b3b52 !important;
  color: #e8eef8 !important;
}
html.dark #dashboard-view #tab-hr .hr-view-tab:hover {
  background: #14233a !important;
  border-color: #49658d !important;
}
html.dark #dashboard-view #tab-hr .hr-view-tab.active {
  background: #14294b !important;
  border-color: #4f83ea !important;
  color: #b9d0ff !important;
}
html.dark #dashboard-view #tab-hr .hr-tab-icon {
  background: #1b2a40 !important;
  color: #b5c3d8 !important;
}
html.dark #dashboard-view #tab-hr .hr-view-tab.active .hr-tab-icon {
  background: #1c3d72 !important;
  color: #c8dcff !important;
}
#dashboard-view #tab-hr .hr-pane {
  border-radius: 12px !important;
}
@media (max-width:900px) {
  #dashboard-view #tab-hr .hr-view-tabs {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:480px) {
  #dashboard-view #tab-hr .hr-view-tabs {
    gap: 7px !important;
  }
  #dashboard-view #tab-hr .hr-view-tab {
    min-height: 44px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
  #dashboard-view #tab-hr .hr-tab-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }
}

/* 2026-10-01 exact home priority-panel parity */
html body #dashboard-view #tab-home>.attention-panel,
html body #dashboard-view #tab-home>.pending-transactions-panel{
  width:100%!important;height:330px!important;min-height:330px!important;max-height:330px!important;
  margin:0!important;padding:14px 16px!important;box-sizing:border-box!important;align-self:stretch!important;overflow:hidden!important
}
html body #dashboard-view #tab-home>.attention-panel>.toolbar,
html body #dashboard-view #tab-home>.pending-transactions-panel>.toolbar{
  flex:0 0 auto!important;min-height:52px!important;margin:0!important
}
html body #dashboard-view #tab-home>.attention-panel>.attention-list,
html body #dashboard-view #tab-home>.pending-transactions-panel>.pending-orders-list{
  flex:1 1 auto!important;min-height:0!important;overflow:auto!important
}
@media(max-width:1100px){
  html body #dashboard-view #tab-home>.attention-panel,
  html body #dashboard-view #tab-home>.pending-transactions-panel{
    height:auto!important;min-height:280px!important;max-height:none!important
  }
}

/* 2026-10-01 premium HR KPI icons */
#dashboard-view #tab-hr .hr-stat-card .hr-stat-icon{
  width:42px!important;height:42px!important;min-width:42px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;border:1px solid rgba(37,99,235,.14)!important;
  background:linear-gradient(145deg,#f4f8ff,#e8f1ff)!important;color:#2563eb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 14px rgba(37,99,235,.08)!important
}
#dashboard-view #tab-hr .hr-stat-card .hr-stat-icon svg{
  width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important
}
#dashboard-view #tab-hr .hr-stat-icon-active{background:linear-gradient(145deg,#f0fdf7,#dcfce9)!important;border-color:rgba(22,163,74,.15)!important;color:#15803d!important}
#dashboard-view #tab-hr .hr-stat-icon-assigned{background:linear-gradient(145deg,#fff9ed,#fef3c7)!important;border-color:rgba(217,119,6,.15)!important;color:#b45309!important}
#dashboard-view #tab-hr .hr-stat-icon-departments{background:linear-gradient(145deg,#faf5ff,#f3e8ff)!important;border-color:rgba(126,34,206,.14)!important;color:#7e22ce!important}
html.dark #dashboard-view #tab-hr .hr-stat-card .hr-stat-icon{background:linear-gradient(145deg,#172b4d,#12233e)!important;border-color:#284b7c!important;color:#8db5ff!important;box-shadow:none!important}
html.dark #dashboard-view #tab-hr .hr-stat-icon-active{background:linear-gradient(145deg,#15352b,#102a22)!important;border-color:#245d49!important;color:#72d7a5!important}
html.dark #dashboard-view #tab-hr .hr-stat-icon-assigned{background:linear-gradient(145deg,#3b3018,#2e2614)!important;border-color:#665326!important;color:#f2c96d!important}
html.dark #dashboard-view #tab-hr .hr-stat-icon-departments{background:linear-gradient(145deg,#302043,#261a36)!important;border-color:#53366f!important;color:#c79cf3!important}

/* Team rows retain table geometry; long identities scroll inside the list. */
#dashboard-view #tab-users .ui-table-wrap { min-height: 0 !important; }
#dashboard-view #tab-users .ui-table-wrap table { min-width: 980px; table-layout: auto; }
#dashboard-view #tab-users th:nth-child(5),
#dashboard-view #tab-users td:nth-child(5) { white-space: nowrap; }
#dashboard-view #tab-users .team-actions { display: flex; flex-wrap: nowrap; }
#dashboard-view #tab-users .team-actions .btn { flex: 0 0 auto; width: auto; }
#dashboard-view #tab-hr .hr-tab-icon svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#dashboard-view #tab-hr .hr-stat-card.stat-total {
  background: var(--dash-surface, #fff) !important;
  border: 1px solid var(--dash-border, #dde5ef) !important;
  box-shadow: none !important;
}
#dashboard-view #tab-hr .hr-stat-card.stat-total .stat-label { color: var(--dash-muted, #65758b) !important; }
#dashboard-view #tab-hr .hr-stat-card.stat-total .stat-value { color: var(--dash-ink, #172033) !important; }
#dashboard-view #tab-users .ui-table-wrap table { min-width: 1080px !important; }
#dashboard-view #tab-users td:first-child { min-width: 140px; }
#dashboard-view #tab-users td:nth-child(4) { min-width: 190px; }
#dashboard-view #tab-users td:nth-child(6) { min-width: 240px; }
#dashboard-view #tab-users td:last-child { min-width: 180px; }
#dashboard-view #tab-hr .hr-stat-card { min-height: 124px !important; }
#dashboard-view #tab-hr .hr-stat-card.stat-total::before,
#dashboard-view #tab-hr .hr-stat-card.stat-total::after { display: none !important; }
@media (max-width: 760px) {
  #dashboard-view #tab-hr .hr-stat-card { min-height: 96px !important; }
}
#modal-root .order-card-icon { display: inline-flex; align-items: center; color: #426497; }
#modal-root .order-card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#modal-root .order-status-pill select { background: transparent !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html.dark #modal-root .order-card-icon { color: #93b4e8; }
html.dark #modal-root .order-status-pill { background: #302b18 !important; color: #fde68a !important; }
html.dark #modal-root .order-status-pill.status-paid { background: #123729 !important; color: #86efac !important; }
html.dark #modal-root .order-status-pill:is(.status-failed,.status-cancelled) { background: #3c2029 !important; color: #fda4af !important; }
html.dark #modal-root .order-invoice-btn { background: #162d50 !important; color: #b7d5ff !important; border-color: #376294 !important; }

/* 2026-10-01 HR KPI parity.
   The reference layer styles the "Total team members" card as an oversized
   hero (full row, 154px tall, 38px digits) while its siblings sit at ~124px
   with 19-28px digits, so the four KPI values read at different sizes.
   Equalize ALL HR KPI cards to one consistent geometry and one digit size.
   Home keeps its approved hero card. */
#dashboard-view #tab-hr>.stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#dashboard-view #tab-hr .stat,
#dashboard-view #tab-hr .stat-total {
  grid-column: auto !important;
  min-height: 116px !important;
  padding: 16px 52px 15px 18px !important;
  border-radius: 14px !important;
  background: var(--dash-surface, #fff) !important;
  border: 1px solid var(--dash-border, #dde5ef) !important;
  box-shadow: var(--dash-shadow, 0 3px 14px rgba(23, 41, 68, .03)) !important;
}
#dashboard-view #tab-hr .stat-total::before,
#dashboard-view #tab-hr .stat-total::after,
#dashboard-view #tab-hr .stat::before,
#dashboard-view #tab-hr .stat::after { display: none !important; }
#dashboard-view #tab-hr .stat .stat-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1.3 !important;
  max-width: calc(100% - 40px) !important;
  color: var(--dash-muted, #5f6e85) !important;
}
#dashboard-view #tab-hr .stat .stat-value,
#dashboard-view #tab-hr .stat-total .stat-value {
  margin-top: 8px !important;
  color: var(--dash-ink, #172033) !important;
  font: 800 24px/1.15 Manrope, 'Segoe UI', sans-serif !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
}
#dashboard-view #tab-hr .stat .stat-icon,
#dashboard-view #tab-hr .stat-total .stat-icon {
  top: 14px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
}
#dashboard-view #tab-hr .stat .stat-icon svg,
#dashboard-view #tab-hr .stat-total .stat-icon svg { width: 17px !important; height: 17px !important; }

/* 2026-10-01 Audit log readability: one tidy line per event.
   Table cells were inheriting overflow-wrap:anywhere, so timestamps,
   event names and details all broke mid-word into ragged multi-line rows.
   Now only the Details column wraps, and at word boundaries. */
#dashboard-view #tab-audit .ui-table-wrap table { min-width: 0 !important; }
#dashboard-view #tab-audit td {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#dashboard-view #tab-audit td:nth-child(1),
#dashboard-view #tab-audit td:nth-child(2),
#dashboard-view #tab-audit td:nth-child(3),
#dashboard-view #tab-audit td:nth-child(4) { white-space: nowrap; }
#dashboard-view #tab-audit td:nth-child(1) { font-variant-numeric: tabular-nums; }
#dashboard-view #tab-audit td:nth-child(5) {
  min-width: 300px;
  line-height: 1.45;
  overflow-wrap: anywhere; /* only for the rare over-long single token */
}
@media (max-width: 900px) {
  #dashboard-view #tab-audit td { white-space: normal !important; }
  #dashboard-view #tab-audit td:nth-child(1) { white-space: nowrap !important; }
}

/* 2026-10-01 Team members: fit the container, kill the left-to-right scroll.
   The forced min-widths (1080px table + per-column minimums) pushed the
   table wider than the card, hiding Role/Access/Actions behind a horizontal
   scrollbar. Values now wrap naturally instead. */
#dashboard-view #tab-users .ui-table-wrap table { min-width: 0 !important; }
#dashboard-view #tab-users th,
#dashboard-view #tab-users td { min-width: 0 !important; }
#dashboard-view #tab-users td {
  overflow-wrap: normal;
  word-break: normal;
}
#dashboard-view #tab-users td:nth-child(4) { overflow-wrap: anywhere; } /* emails contain no spaces */
#dashboard-view #tab-users th:nth-child(5),
#dashboard-view #tab-users td:nth-child(5) { white-space: nowrap; } /* Role stays one word */
#dashboard-view #tab-users .team-actions { display: flex; flex-wrap: nowrap; }

/* 2026-10-01 Topbar search: one field, not a box inside a box.
   The generic input rule painted its own background/border on the inner
   .admin-search input, which rendered as multiple stacked fields. */
#dashboard-view .admin-search {
  background: var(--dash-surface-soft, #f9fbfe) !important;
  border: 1px solid var(--dash-border, #dce4ed) !important;
  padding: 0 12px !important;
}
#dashboard-view .admin-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 38px !important;
  padding: 0 !important;
  outline: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--dash-ink, #172033) !important;
}
html.dark #dashboard-view .admin-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--dash-ink, #edf3ff) !important;
}
html #dashboard-view .admin-search:focus-within {
  background: var(--dash-surface, #fff) !important;
  border-color: var(--dash-accent, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* 2026-10-01 Quotes/CRM workspace breathing room.
   The compact layers squeezed quote cards, toolbars and the details drawer
   past readability (10px card padding, 11px labels, 0.72rem detail tables,
   150px activity panel). Restore standard sizing here ONLY — every other
   tab keeps its approved compact look. Desktop-first; phones stay compact. */
@media (min-width: 761px) {
  #dashboard-view :is(#tab-quotes, #tab-crm) .quotes-toolbar { padding: 16px 18px !important; gap: 10px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quotes-toolbar .toolbar-group-label { font-size: .74rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quotes-toolbar .field { min-height: 40px !important; padding: 8px 12px !important; font-size: .88rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quotes-toolbar .btn { min-height: 38px !important; padding: 8px 14px !important; font-size: .84rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quotes-toolbar .filter-btn { min-height: 34px !important; padding: 6px 12px !important; font-size: .8rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-list { gap: 14px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card { padding: 18px 20px !important; border-radius: 14px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card h2 { font-size: 1.02rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .muted,
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card p { font-size: .84rem !important; line-height: 1.5 !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .quote-summary { font-size: .84rem !important; gap: 4px 14px !important; margin-top: 8px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .btn { min-height: 36px !important; padding: 7px 12px !important; font-size: .82rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .status-select,
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .quote-footer .field { min-height: 38px !important; font-size: .84rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .detail-table th,
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .detail-table td { padding: 7px 9px !important; font-size: .8rem !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .section { margin-top: 12px !important; padding-top: 12px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm) .quote-card .panel { padding: 14px 16px !important; }
}

/* Quote details drawer: the main "see the full details" surface. */
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > summary {
  min-height: 64px !important;
  padding: 18px 28px !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions {
  min-height: 54px !important;
  padding: 10px 28px !important;
  gap: 9px !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer {
  padding: 9px 28px !important;
  gap: 9px !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions .btn,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer .btn {
  min-height: 36px !important;
  padding: 7px 12px !important;
  font-size: .82rem !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer .status-select {
  min-height: 36px !important;
  font-size: .84rem !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs { gap: 6px !important; padding: 6px !important; }
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button {
  min-height: 44px !important;
  font-size: .8rem !important;
}
@media (min-width: 901px) {
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body {
    padding: 20px 26px 26px !important;
    gap: 14px 18px !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table th,
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table td {
    padding: 6px 8px !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table th { width: 32% !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-workflow {
    padding: 14px !important;
    gap: 10px 12px !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-workflow .field,
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-workflow .textarea {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: .8rem !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-activity-panel {
    max-height: 240px !important;
    padding: 12px 14px !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-activity-panel .activity {
    font-size: .78rem !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions {
    padding: 12px !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions .btn {
    min-height: 34px !important;
  }
}
@media (max-width: 900px) {
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > summary { padding: 16px 18px !important; }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body { padding: 16px 16px 26px !important; }
}

/* 2026-10-01 design audit: WCAG AA text contrast (light theme).
   Muted text was rendering at 2.5:1-4:1 (nav 3.75, table heads 2.51,
   muted paragraphs 2.84, labels 4.02). Raise ONLY muted text colors to
   #5f6e85 (>=4.6:1 on every light surface in use). No layout, spacing,
   sizing or component design changes. Dark theme already passes AA. */
html:not(.dark) { --muted: #5f6e85 !important; }
html:not(.dark) #dashboard-view { --dash-muted: #5f6e85 !important; --ref-muted: #5f6e85 !important; }
html:not(.dark) #dashboard-view .sidebar .nav-item { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view .sidebar-footer .nav-item { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view thead th { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view .stat-label { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view .dashboard-overview-heading .muted { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view #tab-home>.dashboard-overview-heading .muted { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view .profile-role { color: #5f6e85 !important; }
html:not(.dark) #dashboard-view .settings-status.off { color: #55657d !important; }
html.dark .settings-nav-link.active { background: #2563eb !important; color: #fff !important; }

/* 2026-10-01 overlay polish: dialogs, toasts, notification popover.
   Motion + containment only; no layout or sizing changes. */
@keyframes appDialogIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}
#modal-root .app-dialog { animation: appDialogIn .18s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  #modal-root .app-dialog { animation: none !important; }
}

/* Error toasts match the success toast's glyph treatment. */
.app-toast.app-toast-error::before {
  content: "\2715";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: -3px;
}
html.dark .app-toast.app-toast-error::before { background: #b91c1c; }

/* Primary/ghost buttons inside modals: the #dashboard-view-scoped button
   themes never reached #modal-root, leaving primary actions white-on-white. */
#modal-root .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
#modal-root .btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
#modal-root .btn-ghost {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--dash-border, #dce4ed) !important;
  color: var(--dash-ink, #172033) !important;
}
#modal-root .btn-ghost:hover { background: var(--dash-accent-soft, #eef2ff) !important; color: #2563eb !important; border-color: #bcd0fa !important; }
html.dark #modal-root .btn-ghost {
  background: #14213a !important;
  border-color: #2c3d57 !important;
  color: #dbe7f5 !important;
}
html.dark #modal-root .btn-ghost:hover { background: #1c2f4f !important; color: #93c5fd !important; }

/* Dark notification popover: the Clear link was primary-blue on navy (3.3:1). */
html.dark .notification-clear { color: #93c5fd !important; }
html.dark .notification-clear:hover { color: #bfdbfe !important; }

/* Notification popover: list stays inside the viewport and scrolls; the
   panel itself eases in like every other overlay. */
@keyframes notificationPopoverIn {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.notification-popover:not(.hidden) { animation: notificationPopoverIn .16s ease-out both; transform-origin: top right; }
.notification-popover .notification-list {
  max-height: min(420px, 58vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.notification-popover .notification-item { transition: background .14s ease; }
.notification-popover .notification-item:hover { background: rgba(37, 99, 235, .05); }
html.dark .notification-popover .notification-item:hover { background: rgba(96, 165, 250, .08); }

/* 2026-10-01 Brand search → Open customer: a full-screen workspace whose
   actions (Download parent / Download customer / Save) are pinned below —
   nothing to hunt for by scrolling. */
/* 2026-10-01 Brand search results span the full row: the family table must
   never be squeezed into one column of the quote-card grid (that clipped the
   Actions column and forced horizontal scrolling to reach "Open"). */
#dashboard-view #tab-quotes #quote-list > .quote-family-search {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
#dashboard-view #tab-quotes #quote-list > .quote-family-search .table-wrap {
  overflow-x: auto !important;
  max-width: 100% !important;
}
#dashboard-view #tab-quotes #quote-list > .quote-family-search .quote-family-table {
  min-width: 0 !important;
}
@media (max-width: 1279px) {
  #dashboard-view #tab-quotes #quote-list > .quote-family-search .table-wrap { overflow-x: auto !important; }
}
#modal-root:has(.customer-quote-mockup) { position: fixed !important; inset: 0 !important; z-index: 15000 !important; display: block !important; pointer-events: none !important; }
/* The page behind the full-screen workspace must not scroll (incl. scroll-chaining on mobile). */
html:has(#modal-root .customer-quote-mockup) body { overflow: hidden !important; }
html:has(#modal-root .customer-quote-mockup) { overflow: hidden !important; }
#modal-root:has(.customer-quote-mockup) > .customer-quote-backdrop {
  position: fixed !important; inset: 0 !important; display: block !important;
  width: 100vw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important;
  background: var(--dash-page, #f6f8fb) !important; opacity: 1 !important; pointer-events: auto !important;
}
#modal-root .customer-quote-mockup {
  position: relative !important; z-index: 15001 !important;
  display: flex !important; flex-direction: column !important;
  width: 100vw !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  border: 0 !important; border-radius: 0 !important;
}
.customer-quote-mockup .customer-quote-topbar { position: static !important; flex: 0 0 auto !important; border-bottom: 1px solid var(--dash-border, #e5ebf3) !important; background: var(--dash-surface, #fff) !important; }
.customer-quote-mockup .customer-quote-title { flex: 0 0 auto !important; }
.customer-quote-mockup .customer-quote-columns { flex: 1 1 auto !important; overflow: auto !important; align-items: start !important; padding: 12px 24px 20px !important; }
.customer-quote-mockup .customer-quote-footer {
  position: static !important; flex: 0 0 auto !important;
  display: flex !important; justify-content: flex-end !important; gap: 8px !important;
  margin: 0 !important; padding: 12px 24px !important;
  border-top: 1px solid var(--dash-border, #e5ebf3) !important;
  background: var(--dash-surface, #fff) !important; box-shadow: none !important;
}
html.dark #modal-root .customer-quote-mockup { background: #101b2d !important; }
html.dark #modal-root .customer-quote-mockup .customer-quote-topbar,
html.dark #modal-root .customer-quote-mockup .customer-quote-footer { background: #101b2d !important; border-color: #24344a !important; }
@media (max-width: 900px) {
  #modal-root .customer-quote-mockup .customer-quote-columns { padding: 10px 14px 16px !important; }
  .customer-quote-mockup .customer-quote-footer { flex-wrap: wrap !important; }
}
@media (prefers-reduced-motion: reduce) {
  .notification-popover:not(.hidden) { animation: none !important; }
}

/* 2026-10-01 Full HR workspace: employee profile modal (photo, bio data,
   emergency, medical, bank details) and manual employee creation. */
#modal-root .hr-profile-modal {
  width: min(100%, 1040px) !important;
  max-height: min(92dvh, 980px) !important;
  display: flex !important; flex-direction: column !important;
  padding: 0 !important; overflow: hidden !important;
  border-radius: 16px !important;
}
.hr-profile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--dash-border, #e5ebf3); background: var(--dash-surface, #fff);
  flex: 0 0 auto;
}
.hr-profile-head .eyebrow { margin: 0 0 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted, #5f6e85); }
.hr-profile-head h2 { font-size: 1.15rem; }
.hr-profile-body {
  flex: 1 1 auto; overflow: auto; padding: 18px 22px;
  display: grid; gap: 18px;
}
.hr-profile-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 13px 22px; border-top: 1px solid var(--dash-border, #e5ebf3); background: var(--dash-surface, #fff);
}
.hr-profile-footnote { margin-right: auto; font-size: 12px; }
.hr-profile-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.hr-profile-photo-pane { display: grid; gap: 10px; justify-items: center; position: sticky; top: 0; }
.hr-photo-frame {
  width: 168px; height: 200px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--dash-border, #dce5ef); background: var(--dash-surface-soft, #f6f8fb);
  display: grid; place-items: center;
}
.hr-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-photo-placeholder { font-size: 40px; font-weight: 800; color: var(--brand, #2563eb); opacity: .5; }
.hr-photo-btn { position: relative; overflow: hidden; cursor: pointer; }
.hr-photo-hint { font-size: 11px; margin: 0; text-align: center; }
.hr-profile-meta { display: grid; grid-template-columns: auto auto; gap: 4px 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--dash-border, #dce5ef); border-radius: 12px; background: var(--dash-surface-soft, #f6f8fb); }
.hr-profile-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #5f6e85); }
.hr-profile-meta strong { font-size: 12px; word-break: break-word; }
.hr-profile-form-pane { display: grid; gap: 16px; min-width: 0; }
.hr-profile-section { border: 1px solid var(--dash-border, #dce5ef); border-radius: 13px; padding: 14px 16px 16px; background: var(--dash-surface, #fff); display: grid; gap: 10px; }
.hr-profile-section h4 { margin: 0; font-size: .9rem; }
.hr-section-note { font-size: 12px; margin: -4px 0 0; }
.hr-dir-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hr-dir-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--dash-border, #dce5ef); }
.hr-dir-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e7efff; color: #1d4ed8; font-size: .68rem; font-weight: 800; flex: 0 0 auto; }
html.dark .hr-dir-avatar { background: rgba(37, 99, 235, .18); color: #93b4fb; }
.hr-manual-card .hr-profile-body { padding: 0; overflow: visible; display: grid; gap: 14px; }
.hr-manual-card .hr-profile-grid { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 900px) {
  #modal-root .hr-profile-modal { max-height: 96dvh !important; width: calc(100vw - 20px) !important; }
  .hr-profile-grid, .hr-manual-card .hr-profile-grid { grid-template-columns: 1fr; }
  .hr-profile-photo-pane { position: static; justify-items: start; }
  .hr-profile-body { padding: 14px 16px; }
  .hr-profile-foot { flex-wrap: wrap; }
  .hr-profile-footnote { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-photo-btn, .hr-dir-photo { transition: none !important; }
}

/* ===== 2026-10-01 HR design refresh (v2) — segmented tabs, refined KPIs,
   polished directory, premium profile modal and manual-entry form. ===== */

/* --- Section tabs → segmented pill control --- */
#dashboard-view #tab-hr .hr-view-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 0 !important;
  margin: 18px 0 16px !important;
  padding: 5px !important;
  border: 1px solid var(--dash-border, #dbe3ee) !important;
  border-radius: 13px !important;
  background: var(--dash-surface-soft, #eef2f8) !important;
  overflow-x: auto !important;
}
#dashboard-view #tab-hr .hr-view-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 8px 20px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--dash-muted, #5f6e85) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
#dashboard-view #tab-hr .hr-view-tab:hover {
  border-color: transparent !important;
  background: rgba(37, 99, 235, .07) !important;
  color: #1d4ed8 !important;
}
#dashboard-view #tab-hr .hr-view-tab.active {
  border-color: rgba(37, 99, 235, .25) !important;
  background: #fff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(23, 41, 68, .1) !important;
}
#dashboard-view #tab-hr .hr-tab-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
#dashboard-view #tab-hr .hr-view-tab.active .hr-tab-icon { background: transparent !important; color: inherit !important; }
#dashboard-view #tab-hr .hr-tab-icon svg { width: 17px !important; height: 17px !important; }
html.dark #dashboard-view #tab-hr .hr-view-tabs { background: #0e1829 !important; border-color: #24344a !important; }
html.dark #dashboard-view #tab-hr .hr-view-tab { color: #92a2bc !important; }
html.dark #dashboard-view #tab-hr .hr-view-tab:hover { background: rgba(96, 165, 250, .1) !important; color: #b9d0ff !important; }
html.dark #dashboard-view #tab-hr .hr-view-tab.active { background: #1a2c49 !important; border-color: #2f4a75 !important; color: #c8dcff !important; box-shadow: 0 2px 10px rgba(2, 8, 23, .5) !important; }

/* --- KPI cards: quiet hover lift + brand accent bar --- */
#dashboard-view #tab-hr .stat::before,
#dashboard-view #tab-hr .stat-total::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -1px !important; left: 14px !important; right: 14px !important;
  height: 3px !important;
  border-radius: 0 0 4px 4px !important;
  background: linear-gradient(90deg, #2563eb, #18c4d8) !important;
  opacity: .85 !important;
}
#dashboard-view #tab-hr .stat::after,
#dashboard-view #tab-hr .stat-total::after { display: none !important; }
#dashboard-view #tab-hr .stat,
#dashboard-view #tab-hr .stat-total { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease !important; }
#dashboard-view #tab-hr .stat:hover,
#dashboard-view #tab-hr .stat-total:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37, 99, 235, .3) !important;
  box-shadow: 0 14px 30px rgba(23, 41, 68, .1) !important;
}
#dashboard-view #tab-hr .stat .stat-label { text-transform: uppercase !important; letter-spacing: .07em !important; font-weight: 750 !important; }
#dashboard-view #tab-hr .stat .stat-value { font-size: 30px !important; }

/* --- Directory header --- */
#dashboard-view #tab-hr .hr-dir-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 2px 2px 12px;
}
#dashboard-view #tab-hr .hr-dir-head h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }
#dashboard-view #tab-hr .hr-dir-head p { margin: 3px 0 0; font-size: 12px; }
#dashboard-view #tab-hr .hr-dir-count {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .22); background: #eff5ff; color: #1d4ed8;
  font-size: 11.5px; font-weight: 750; white-space: nowrap;
}
html.dark #dashboard-view #tab-hr .hr-dir-count { background: rgba(37, 99, 235, .16); border-color: #2f4a75; color: #b9d0ff; }

/* --- Directory table: zebra-free, hover rows, pill statuses --- */
#dashboard-view #tab-hr .table-wrap { border: 1px solid var(--dash-border, #dde5ef) !important; border-radius: 14px !important; overflow: hidden !important; background: var(--dash-surface, #fff) !important; }
#dashboard-view #tab-hr .table-wrap table { border-collapse: collapse; }
#dashboard-view #tab-hr .table-wrap th {
  padding: 11px 16px !important;
  font-size: 10.5px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--dash-muted, #5f6e85) !important;
  background: var(--dash-surface-soft, #f4f7fb) !important;
  border-bottom: 1px solid var(--dash-border, #dde5ef) !important;
  text-align: left;
}
#dashboard-view #tab-hr .table-wrap td { padding: 12px 16px !important; border-bottom: 1px solid var(--dash-border-soft, #edf1f7) !important; vertical-align: middle !important; }
#dashboard-view #tab-hr .table-wrap tbody tr { transition: background .14s ease !important; }
#dashboard-view #tab-hr .table-wrap tbody tr:hover { background: #f6f9ff !important; }
#dashboard-view #tab-hr .table-wrap tbody tr:last-child td { border-bottom: 0 !important; }
#dashboard-view #tab-hr .table-wrap td strong { font-size: .92rem; }
#dashboard-view #tab-hr .table-wrap td .muted { font-size: 12px; }
#dashboard-view #tab-hr .hr-dir-photo { width: 38px !important; height: 38px !important; border-radius: 11px !important; box-shadow: 0 2px 6px rgba(23, 41, 68, .14) !important; }
#dashboard-view #tab-hr .hr-dir-avatar { width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: .74rem !important; background: linear-gradient(145deg, #e8f0ff, #dbe8ff) !important; color: #1d4ed8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
html.dark #dashboard-view #tab-hr .hr-dir-avatar { background: linear-gradient(145deg, #1c3d72, #16305c) !important; color: #c8dcff !important; box-shadow: none !important; }
html.dark #dashboard-view #tab-hr .table-wrap { border-color: #24344a !important; background: #101b2d !important; }
html.dark #dashboard-view #tab-hr .table-wrap th { background: #0e1829 !important; border-color: #24344a !important; color: #92a2bc !important; }
html.dark #dashboard-view #tab-hr .table-wrap td { border-color: #1c2b42 !important; }
html.dark #dashboard-view #tab-hr .table-wrap tbody tr:hover { background: #14233a !important; }

/* Status pills in the HR directory (reads [data-status]) */
#dashboard-view #tab-hr .table-wrap .badge[data-status="active"] { background: #e8f7ee !important; color: #15803d !important; border: 1px solid rgba(21, 128, 61, .18) !important; }
#dashboard-view #tab-hr .table-wrap .badge[data-status="leave"] { background: #fdf3e2 !important; color: #b45309 !important; border: 1px solid rgba(180, 83, 9, .2) !important; }
#dashboard-view #tab-hr .table-wrap .badge[data-status="inactive"] { background: #eef2f7 !important; color: #475569 !important; border: 1px solid rgba(71, 85, 105, .2) !important; }
html.dark #dashboard-view #tab-hr .table-wrap .badge[data-status="active"] { background: #12301f !important; color: #86efac !important; border-color: #1f5133 !important; }
html.dark #dashboard-view #tab-hr .table-wrap .badge[data-status="leave"] { background: #33270f !important; color: #fcd34d !important; border-color: #5c451a !important; }
html.dark #dashboard-view #tab-hr .table-wrap .badge[data-status="inactive"] { background: #1b2739 !important; color: #aebccd !important; border-color: #2c3d55 !important; }

/* --- Directory empty state --- */
#dashboard-view #tab-hr .hr-empty-state {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 38px 20px; border: 1.5px dashed var(--dash-border, #cfd9e6); border-radius: 14px;
  background: var(--dash-surface-soft, #f8fafc);
}
#dashboard-view #tab-hr .hr-empty-state strong { font-size: .95rem; }
#dashboard-view #tab-hr .hr-empty-state .muted { font-size: 12.5px; max-width: 420px; }

/* --- Profile modal: premium shell --- */
#modal-root .hr-profile-modal {
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(2, 8, 23, .35) !important;
}
#modal-root .hr-profile-head {
  padding: 18px 24px !important;
  background: linear-gradient(180deg, #f8faff, #fff) !important;
}
html.dark #modal-root .hr-profile-head { background: linear-gradient(180deg, #14243d, #101b2d) !important; }
#modal-root .hr-profile-body { padding: 20px 24px !important; background: var(--dash-surface-soft, #f4f7fb) !important; gap: 16px !important; }
html.dark #modal-root .hr-profile-body { background: #0c1524 !important; }
#modal-root .hr-profile-foot { padding: 14px 24px !important; }
#modal-root .hr-profile-grid { gap: 22px !important; }

/* Photo card: polaroid frame with double ring */
#modal-root .hr-photo-frame {
  width: 172px !important; height: 206px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, #bfdbfe, #e2e8f0 55%, #dbeafe) border-box;
  border: 5px solid transparent !important;
  box-shadow: 0 10px 26px rgba(23, 41, 68, .16), inset 0 0 0 1px rgba(37, 99, 235, .18) !important;
}
html.dark #modal-root .hr-photo-frame {
  background:
    linear-gradient(#152238, #152238) padding-box,
    linear-gradient(160deg, #2f4a75, #1c2b42 60%) border-box;
  border: 5px solid transparent !important;
  box-shadow: 0 10px 26px rgba(2, 8, 23, .55), inset 0 0 0 1px rgba(96, 165, 250, .25) !important;
}
#modal-root .hr-photo-placeholder { font-size: 46px !important; letter-spacing: .02em; }
#modal-root .hr-photo-btn {
  width: 172px; justify-content: center;
  border: 1px solid rgba(37, 99, 235, .35) !important;
  background: #eff5ff !important; color: #1d4ed8 !important;
  font-weight: 750 !important; border-radius: 10px !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
#modal-root .hr-photo-btn:hover { background: #dbe8ff !important; border-color: #2563eb !important; transform: translateY(-1px); }
html.dark #modal-root .hr-photo-btn { background: rgba(37, 99, 235, .16) !important; border-color: #2f4a75 !important; color: #b9d0ff !important; }
html.dark #modal-root .hr-photo-btn:hover { background: rgba(37, 99, 235, .26) !important; }
#modal-root .hr-profile-meta { border-radius: 12px !important; padding: 12px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; }
html.dark #modal-root .hr-profile-meta { box-shadow: none !important; }

/* Sections: white cards, tinted icon chip, left accent on hover */
#modal-root .hr-profile-section {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid var(--dash-border, #dde5ef) !important;
  background: var(--dash-surface, #fff) !important;
  box-shadow: 0 1px 3px rgba(23, 41, 68, .05) !important;
  padding: 15px 18px 17px !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
#modal-root .hr-profile-section:hover { border-color: rgba(37, 99, 235, .28) !important; box-shadow: 0 6px 18px rgba(23, 41, 68, .08) !important; }
#modal-root .hr-profile-section h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px !important;
  font-size: .93rem !important; letter-spacing: -.01em;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--dash-border, #e2e8f0);
}
#modal-root .hr-section-icon {
  display: inline-grid; place-items: center;
  width: 27px; height: 27px; border-radius: 8px;
  background: #eef4ff; color: #2563eb;
}
#modal-root .hr-section-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#modal-root .hr-profile-section .label { font-size: 11.5px !important; letter-spacing: .02em; gap: 5px !important; }
#modal-root .hr-profile-section .field { border-radius: 9px !important; }
#modal-root .hr-profile-section .field:focus-visible,
#modal-root .hr-profile-section .field:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
  outline: none !important;
}
html.dark #modal-root .hr-profile-section { border-color: #24344a !important; background: #101b2d !important; box-shadow: none !important; }
html.dark #modal-root .hr-profile-section:hover { border-color: #2f4a75 !important; box-shadow: 0 6px 18px rgba(2, 8, 23, .45) !important; }
html.dark #modal-root .hr-profile-section h4 { border-color: #24344a !important; }
html.dark #modal-root .hr-section-icon { background: rgba(37, 99, 235, .16) !important; color: #8db5ff !important; }

/* Per-section icon tints */
#modal-root .hr-profile-section:nth-of-type(1) .hr-section-icon { background: #eef2f7; color: #475569; }
#modal-root .hr-profile-section:nth-of-type(2) .hr-section-icon { background: #eef4ff; color: #2563eb; }
#modal-root .hr-profile-section:nth-of-type(3) .hr-section-icon { background: #ecf8fb; color: #0e7490; }
#modal-root .hr-profile-section:nth-of-type(4) .hr-section-icon { background: #fdeef0; color: #b91c1c; }
#modal-root .hr-profile-section:nth-of-type(5) .hr-section-icon { background: #eef4ff; color: #1d4ed8; }
html.dark #modal-root .hr-profile-section:nth-of-type(1) .hr-section-icon { background: #1b2739; color: #aebccd; }
html.dark #modal-root .hr-profile-section:nth-of-type(2) .hr-section-icon { background: rgba(37, 99, 235, .16); color: #8db5ff; }
html.dark #modal-root .hr-profile-section:nth-of-type(3) .hr-section-icon { background: rgba(14, 116, 144, .18); color: #67e8f9; }
html.dark #modal-root .hr-profile-section:nth-of-type(4) .hr-section-icon { background: rgba(185, 28, 28, .18); color: #fca5a5; }
html.dark #modal-root .hr-profile-section:nth-of-type(5) .hr-section-icon { background: rgba(29, 78, 216, .18); color: #a5b8fc; }

/* --- Manual entry + assign worker forms --- */
#dashboard-view #tab-hr .hr-add-worker-card {
  padding: 20px 22px !important;
  border: 1px solid var(--dash-border, #dde5ef) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(1200px 200px at 50% -60px, rgba(37, 99, 235, .06), transparent 70%),
    var(--dash-surface, #fff) !important;
  box-shadow: var(--dash-shadow, 0 3px 14px rgba(23, 41, 68, .04)) !important;
}
#dashboard-view #tab-hr .hr-add-worker-heading h3 { margin: 0 0 4px !important; font-size: 1.08rem !important; letter-spacing: -.01em; }
#dashboard-view #tab-hr .hr-add-worker-heading p { margin: 0 0 16px !important; font-size: 12.5px; }
#dashboard-view #tab-hr .hr-manual-card .hr-add-worker-heading { padding-bottom: 14px; border-bottom: 1px dashed var(--dash-border, #e2e8f0); margin-bottom: 14px; }
html.dark #dashboard-view #tab-hr .hr-add-worker-card { border-color: #24344a !important; background: radial-gradient(1200px 200px at 50% -60px, rgba(37, 99, 235, .12), transparent 70%), #101b2d !important; }
html.dark #dashboard-view #tab-hr .hr-manual-card .hr-add-worker-heading { border-color: #24344a !important; }
#dashboard-view #tab-hr .hr-add-info { border-radius: 11px !important; border-color: rgba(37, 99, 235, .22) !important; }
#dashboard-view #tab-hr .hr-add-actions { margin-top: 18px !important; padding-top: 14px; border-top: 1px dashed var(--dash-border, #e2e8f0); }
html.dark #dashboard-view #tab-hr .hr-add-actions { border-color: #24344a; }

/* Assign-worker preview + catalogs get the same card language */
#dashboard-view #tab-hr .hr-worker-preview { border-radius: 12px !important; border-color: rgba(37, 99, 235, .2) !important; background: #f6f9ff !important; }
html.dark #dashboard-view #tab-hr .hr-worker-preview { background: #0e1829 !important; border-color: #2f4a75 !important; }
#dashboard-view #tab-hr .hr-preview-avatar { background: linear-gradient(145deg, #e8f0ff, #dbe8ff) !important; color: #1d4ed8 !important; }
#dashboard-view #tab-hr .hr-department-card, #dashboard-view #tab-hr .hr-position-card { border-radius: 14px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
#dashboard-view #tab-hr .hr-department-card:hover, #dashboard-view #tab-hr .hr-position-card:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .28) !important; box-shadow: 0 10px 24px rgba(23, 41, 68, .09) !important; }
#dashboard-view #tab-hr .hr-position-card span { border-radius: 8px !important; background: #f4f7fb !important; }
html.dark #dashboard-view #tab-hr .hr-position-card span { background: #0e1829 !important; }

/* Focus visibility for manual-entry fields */
#dashboard-view #tab-hr .hr-add-worker-card .field:focus-visible,
#dashboard-view #tab-hr .hr-add-worker-card .field:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
  outline: none !important;
}

@media (max-width: 900px) {
  #dashboard-view #tab-hr .hr-view-tab { padding: 8px 14px !important; }
  #dashboard-view #tab-hr .hr-dir-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  #modal-root .hr-photo-frame, #modal-root .hr-photo-btn { width: 150px !important; }
  #modal-root .hr-photo-frame { height: 180px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-view #tab-hr .stat, #dashboard-view #tab-hr .hr-department-card, #dashboard-view #tab-hr .hr-position-card, #modal-root .hr-photo-btn { transition: none !important; }
  #dashboard-view #tab-hr .stat:hover, #dashboard-view #tab-hr .hr-department-card:hover, #dashboard-view #tab-hr .hr-position-card:hover { transform: none !important; }
}

/* --- HR v2 parity: the Manual Entry form renders the same profile markup
   inside #tab-hr (not #modal-root), so the premium section/icon/photo rules
   are re-declared as bare classes. Without them the section SVG icons have
   no size or fill rules and paint as huge black default shapes. --- */
.hr-profile-grid { gap: 22px !important; }
.hr-photo-frame {
  width: 172px !important; height: 206px !important;
  border: 5px solid transparent !important;
  border-radius: 16px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, #bfdbfe, #e2e8f0 55%, #dbeafe) border-box;
  box-shadow: 0 10px 26px rgba(23, 41, 68, .16), inset 0 0 0 1px rgba(37, 99, 235, .18) !important;
}
html.dark .hr-photo-frame {
  background:
    linear-gradient(#152238, #152238) padding-box,
    linear-gradient(160deg, #2f4a75, #1c2b42 60%) border-box;
  box-shadow: 0 10px 26px rgba(2, 8, 23, .55), inset 0 0 0 1px rgba(96, 165, 250, .25) !important;
}
.hr-photo-placeholder { font-size: 46px !important; letter-spacing: .02em; }
.hr-photo-btn {
  width: 172px; justify-content: center;
  border: 1px solid rgba(37, 99, 235, .35) !important;
  background: #eff5ff !important; color: #1d4ed8 !important;
  font-weight: 750 !important; border-radius: 10px !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
.hr-photo-btn:hover { background: #dbe8ff !important; border-color: #2563eb !important; transform: translateY(-1px); }
html.dark .hr-photo-btn { background: rgba(37, 99, 235, .16) !important; border-color: #2f4a75 !important; color: #b9d0ff !important; }
html.dark .hr-photo-btn:hover { background: rgba(37, 99, 235, .26) !important; }
.hr-profile-meta { border-radius: 12px !important; padding: 12px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; }
html.dark .hr-profile-meta { box-shadow: none !important; }
.hr-profile-section {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid var(--dash-border, #dde5ef) !important;
  background: var(--dash-surface, #fff) !important;
  box-shadow: 0 1px 3px rgba(23, 41, 68, .05) !important;
  padding: 15px 18px 17px !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
.hr-profile-section:hover { border-color: rgba(37, 99, 235, .28) !important; box-shadow: 0 6px 18px rgba(23, 41, 68, .08) !important; }
.hr-profile-section h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px !important;
  font-size: .93rem !important; letter-spacing: -.01em;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--dash-border, #e2e8f0);
}
.hr-section-icon {
  display: inline-grid; place-items: center;
  width: 27px; height: 27px; min-width: 27px; border-radius: 8px;
  background: #eef4ff; color: #2563eb;
  overflow: hidden;
}
.hr-section-icon svg { width: 15px !important; height: 15px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.hr-profile-section .label { font-size: 11.5px !important; letter-spacing: .02em; gap: 5px !important; }
.hr-profile-section .field { border-radius: 9px !important; }
.hr-profile-section .field:focus-visible,
.hr-profile-section .field:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
  outline: none !important;
}
html.dark .hr-profile-section { border-color: #24344a !important; background: #101b2d !important; box-shadow: none !important; }
html.dark .hr-profile-section:hover { border-color: #2f4a75 !important; box-shadow: 0 6px 18px rgba(2, 8, 23, .45) !important; }
html.dark .hr-profile-section h4 { border-color: #24344a !important; }
html.dark .hr-section-icon { background: rgba(37, 99, 235, .16) !important; color: #8db5ff !important; }
.hr-profile-section:nth-of-type(1) .hr-section-icon { background: #eef2f7; color: #475569; }
.hr-profile-section:nth-of-type(2) .hr-section-icon { background: #eef4ff; color: #2563eb; }
.hr-profile-section:nth-of-type(3) .hr-section-icon { background: #ecf8fb; color: #0e7490; }
.hr-profile-section:nth-of-type(4) .hr-section-icon { background: #fdeef0; color: #b91c1c; }
.hr-profile-section:nth-of-type(5) .hr-section-icon { background: #eef4ff; color: #1d4ed8; }
html.dark .hr-profile-section:nth-of-type(1) .hr-section-icon { background: #1b2739; color: #aebccd; }
html.dark .hr-profile-section:nth-of-type(2) .hr-section-icon { background: rgba(37, 99, 235, .16); color: #8db5ff; }
html.dark .hr-profile-section:nth-of-type(3) .hr-section-icon { background: rgba(14, 116, 144, .18); color: #67e8f9; }
html.dark .hr-profile-section:nth-of-type(4) .hr-section-icon { background: rgba(185, 28, 28, .18); color: #fca5a5; }
html.dark .hr-profile-section:nth-of-type(5) .hr-section-icon { background: rgba(29, 78, 216, .18); color: #a5b8fc; }