/* Brand colors sampled from the supplied Z-Trip logo. Keep semantic status colors distinct. */
:root {
  --brand-blue: #2f7bb2;
  --brand-blue-dark: #245f8b;
  --brand-blue-soft: #eef5fb;
  --brand-sky: #7eb3dc;
  --brand-orange: #fb911f;
  --brand-ink: #193b55;
  --brand-muted: #60768a;
  --brand-line: #dce6ef;
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --green: var(--brand-blue);
  --line: var(--brand-line);
  --border: var(--brand-line);
  --el-color-primary: var(--brand-blue);
  --el-color-primary-rgb: 47, 123, 178;
  --el-color-primary-light-3: #6da3c9;
  --el-color-primary-light-5: #97bdd9;
  --el-color-primary-light-7: #c1d7e8;
  --el-color-primary-light-8: #d5e5f0;
  --el-color-primary-light-9: #eaf2f7;
  --el-color-primary-dark-2: var(--brand-blue-dark);
  --el-color-success: #287d60;
  --el-color-success-light-3: #68a58f;
  --el-color-success-light-5: #94beb0;
  --el-color-success-light-7: #bfdbcf;
  --el-color-success-light-8: #d4e9df;
  --el-color-success-light-9: #eaf4ef;
  --el-color-warning: #a46617;
  --el-color-warning-light-3: #bf944f;
  --el-color-warning-light-5: #d2b38b;
  --el-color-warning-light-7: #e4d1b9;
  --el-color-warning-light-8: #eddfd1;
  --el-color-warning-light-9: #f6efe8;
  --el-color-danger: #bf4b54;
  --el-color-danger-light-9: #fbf0f1;
  --el-color-info: #63768a;
  --el-color-info-light-9: #f0f3f7;
  --el-text-color-primary: var(--brand-ink);
  --el-text-color-regular: #415d74;
  --el-text-color-secondary: var(--brand-muted);
  --el-text-color-placeholder: var(--brand-muted);
  --el-border-color: #cad9e5;
  --el-border-color-light: #dce6ef;
  --el-border-color-lighter: #e8eff5;
  --el-fill-color-light: #f3f7fb;
  --el-fill-color-lighter: #f7fafc;
  --el-bg-color-page: #f3f7fb;
}

body { background: #f3f7fb; }
a { color: var(--brand-blue); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.panel, .kpi { border-color: var(--brand-line); box-shadow: 0 2px 8px rgb(27 64 95 / 3%); }
.eyebrow { color: #537b9b; }
.kpi-value, .department-figures strong { color: var(--brand-ink); }
.kpi-caption, .person-sub, .cell-muted, .contact-cell small, .kpi-value small { color: var(--brand-muted); }
.kpi-index { color: var(--brand-muted); }

.brand-logo { display: block; height: auto; object-fit: contain; }
.sidebar { background: #fff; border-right: 1px solid var(--brand-line); color: #45637b; }
.sidebar-brand { flex-direction: column; gap: 12px; padding: 27px 20px 24px; color: var(--brand-ink); }
.brand-logo-sidebar { width: 168px; max-width: 100%; }
.brand-symbol { display: none; width: 40px; height: auto; }
.sidebar-brand .brand-caption { text-align: center; }
.sidebar-brand .brand-caption strong { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 2px; }
.sidebar-brand .brand-caption small { color: var(--brand-muted); font-size: 9px; letter-spacing: 1.6px; margin-top: 3px; display: block; }
.nav-label { color: var(--brand-muted); }
.sidebar-brand, .nav-label, .sidebar-foot { flex-shrink: 0; }
.nav-links { flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: #c1d6e6 transparent; }
.nav-button { color: #48647c; }
.nav-button:hover { background: #f2f7fb; color: var(--brand-blue-dark); }
.nav-button.active { background: #eaf3fa; color: var(--brand-blue-dark); box-shadow: inset 3px 0 var(--brand-blue); font-weight: 600; }
.sidebar-foot { border-color: var(--brand-line); color: #4c6981; }
.topbar { background: rgb(255 255 255 / 96%); }
.user-avatar { background: #e9f2f9; color: var(--brand-blue-dark); }
.person-avatar { background: #edf4fa; color: var(--brand-blue-dark); border-color: #d9e8f2; }

.login-intro { background: linear-gradient(145deg, #edf6fc 0%, #deedf8 62%, #d3e7f6 100%); color: var(--brand-ink); position: relative; overflow: hidden; }
.login-intro::after { content: ''; position: absolute; width: 460px; height: 460px; border: 70px solid rgb(47 123 178 / 5%); border-radius: 50%; bottom: -260px; right: -230px; pointer-events: none; }
.intro-brand { margin-bottom: 62px; }
.brand-logo-intro { width: 338px; max-width: 100%; }
.login-intro h1 { color: #1c4664; }
.login-intro p { color: #496c86; }
.intro-foot { color: #426b89; }
.login-panel { background: #f8fbfe; }
.login-card { width: 400px; padding: 33px 30px; border: 1px solid #e0eaf2; border-radius: 20px; background: #fff; box-shadow: 0 16px 48px rgb(31 78 113 / 7%); }
.brand-logo-login-card { display: none; width: 220px; max-width: 100%; margin: 0 0 26px; }
.login-card .eyebrow { color: var(--brand-blue); }
.login-card .form-hint { font-size: 12px; color: var(--brand-muted); }
.login-card > .form-hint { margin: 12px 0 0; }
.login-card .el-divider__text { color: var(--brand-muted); }

.root-node.active, .tree-panel .el-tree-node.is-current > .el-tree-node__content { background: #eaf3fb; color: var(--brand-blue-dark); }
.tree-panel .el-tree { --el-tree-node-hover-bg-color: #f2f7fb; color: #49677e; }
.tree-count { background: #edf3f8; color: #4b687e; }
.department-icon, .schedule-icon, .section-number, .upload-symbol { background: #eaf3fb; color: var(--brand-blue); border-color: #d2e4f1; }
.child-dept { background: #f7fafd; border-color: #dce7f0; color: #426680; }
.child-dept:hover { border-color: #82b3d6; background: #eef6fc; }
.child-dept span:last-child { color: #60768a; }
.version-bar, .snapshot-button.active { background: #edf5fb; border-color: #cde1ef; color: #426880; }
.snapshot-button:hover { background: #f4f8fc; }
.snapshot-button strong { color: #285373; }
.snapshot-button p { color: var(--brand-muted); }
.change-badge { background: #f0f6fa; color: #536f83; }
.change-badge strong { color: var(--brand-blue-dark); }
.overview-bar { background: #e8f0f7; }
.overview-bar i { background: var(--brand-blue); }
.dept-tags .el-tag { --el-tag-bg-color: #f0f6fb; --el-tag-border-color: #dce9f3; --el-tag-text-color: #466d88; }

.el-table, .people-table .el-table, .diff-table .el-table {
  --el-table-border-color: #e6edf4;
  --el-table-header-bg-color: #f5f8fc;
  --el-table-header-text-color: #526d83;
  --el-table-row-hover-bg-color: #f0f7fc;
  --el-table-current-row-bg-color: #eaf3fb;
  --el-table-text-color: #3b5970;
}
.people-table .el-table th.el-table__cell { font-weight: 600; }
.el-table .el-table__body tr.hover-row > td.el-table__cell { background: #f0f7fc; }
.el-tabs__item.is-active, .el-tabs__item:hover { color: var(--brand-blue); }
.el-tabs__active-bar { background-color: var(--brand-blue); }
.el-button--primary:not(.is-plain):not(.is-text):not(.is-link) { --el-button-hover-bg-color: #286d9e; --el-button-hover-border-color: #286d9e; }
.el-button--primary.is-plain, .el-button--primary.is-link, .el-button--primary.is-text { --el-button-text-color: var(--brand-blue-dark); }

.import-upload-panel .el-upload-dragger, .attendance-upload .el-upload-dragger { background: #f7fbfe; border-color: #b6d0e3; }
.import-upload-panel .el-upload-dragger:hover, .attendance-upload .el-upload-dragger:hover { background: #f0f7fc; border-color: var(--brand-blue); }
.import-guide li, .import-guide li strong { color: #375e7b; }
.preview-summary > div { background: #f2f7fb; }
.preview-summary strong { color: var(--brand-blue-dark); }
.preview-summary .summary-success strong { color: #287d60; }
.preview-summary .summary-warning strong { color: #986015; }
.preview-summary .summary-danger strong { color: #b44b51; }
.preview-summary .summary-info strong { color: #60768a; }
.schedule-form { border-color: var(--brand-line); background: #f6f9fc; }
.schedule-status strong { color: var(--brand-blue-dark); }
.schedule-form .el-form-item__label, .form-hint { color: var(--brand-muted); }
.attendance-upload-icon, .attendance-kpis strong, .mapping-summary strong, .payroll-metrics strong { color: var(--brand-blue-dark); }
.attendance-batch.active { background: #ecf5fc; border-color: #bdd8eb; }
.attendance-batch:hover { background: #f3f8fc; }
.attendance-batch:focus-visible { outline-color: var(--brand-blue); }
.attendance-batch strong, .attendance-detail-title h2, .attendance-upload h2 { color: #285373; }
.attendance-kpis > div { border-color: #dce8f1; background: #f6fafe; }
.attendance-preserved-note, .mapping-flow, .mapping-summary > div { background: #f1f6fb; }
.analytics-mapping-summary { background: linear-gradient(110deg, #f0f7fc, #fff); }
.analytics-mapping-summary h2, .mapping-coverage-progress strong, .permission-role-name, .permission-editor-section h3 { color: #285373; }
.permission-editor-section { border-color: var(--brand-line); }
.trend-grid { stroke: #e6eef5; }
.trend-line, .trend-point { stroke: var(--brand-blue); }
.trend-value { fill: var(--brand-blue-dark); }
.trend-date { fill: var(--brand-muted); }
.legend-dot { background: var(--brand-blue); }
.tone-1 { background: #82b2d5; }
.tone-2 { background: #b78645; }
.tone-3 { background: #879aab; }

@media (max-width: 960px) {
  .sidebar-brand { padding: 23px 15px 26px; }
  .brand-logo-sidebar, .sidebar-brand .brand-caption { display: none; }
  .brand-symbol { display: block; }
  .login-card { padding: 28px 24px; }
}
@media (max-width: 700px) {
  .brand-logo-login-card { display: block; }
  .login-panel { min-height: 100vh; padding: 24px 18px; }
  .login-card { width: 400px; padding: 28px 25px; }
  .topbar-right { gap: 7px; }
}