/* Final presentation layer, after module styles. No document/PDF styles depend on this file. */
body { line-height: 1.6; }
.workspace-content { max-width: 1680px; padding-top: 24px; }
.breadcrumb { font-size: 12px; margin-bottom: 20px; }
.page-header { align-items: flex-start; margin-bottom: 28px; }
.page-header-copy { min-width: 0; max-width: 760px; }
.page-header h1 { font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; letter-spacing: -1px; line-height: 1.2; }
.page-header p { font-size: 14px; line-height: 1.65; }
.page-actions { justify-content: flex-end; max-width: 55%; }
.topbar { min-height: 76px; box-shadow: 0 2px 8px rgb(24 54 108 / 2%); }
.shell-search { min-height: 42px; border-radius: 10px; }
.shell-search input, .profile-copy strong { font-size: 13px; }
.btn-icon { width: 42px; height: 42px; }
.sidebar .nav-link { border-radius: 9px; min-height: 42px; }
.sidebar .nav-link.active { box-shadow: 0 4px 12px rgb(0 0 0 / 10%); }
.brand-word small { font-size: 9px; letter-spacing: 1.1px; }
.ui-card > .card-header { padding: 24px 24px 0; flex-wrap: wrap; align-items: flex-start; }
.ui-card .card-title { font-size: 16px; font-weight: 650; line-height: 1.4; }
.ui-card .card-subtitle { font-size: 13px; line-height: 1.6; }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.ui-card > .card-footer { background: var(--ui-surface-muted); border-radius: 0 0 16px 16px; }
.btn { min-height: 42px; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.btn-primary { box-shadow: 0 2px 3px rgb(37 99 235 / 12%); }
.btn-sm { min-height: 36px; }
.btn-light { --bs-btn-bg: #f6f8fc; --bs-btn-border-color: var(--ui-border); --bs-btn-color: var(--ui-text); --bs-btn-hover-bg: var(--ui-primary-soft); --bs-btn-hover-border-color: #b7cef3; }
.btn:focus-visible, .page-link:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
.text-link { font-size: 13px; min-height: 30px; }
.form-label { font-weight: 600; line-height: 1.5; }
.form-control, .form-select { min-height: var(--ui-control-height); font-size: 14px; border-color: #d6dfeb; border-radius: 10px; }
textarea.form-control { min-height: 112px; resize: vertical; }
.form-control::placeholder { color: #6b7c93; opacity: 1; }
.form-control:read-only { background-color: #f7f9fc; }
.form-control[type=file] { padding: 9px 12px; }
.form-check-input { width: 1.1em; height: 1.1em; border-color: #9aaac0; }
.form-check-label { line-height: 1.65; }
.form-text, .invalid-feedback { line-height: 1.6; }
.filter-bar, .employee-filters { border: 1px solid var(--ui-border); border-radius: 12px; background: #f8fafd; padding: 18px; gap: 14px; }
.workspace-content .table { --bs-table-bg: transparent; --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); font-size: 13px; margin-bottom: 0; }
.workspace-content .table > thead > tr > th { background: #f6f8fc; color: #52657e; padding: 14px 18px; font-size: 12px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--ui-border); }
.workspace-content .table > tbody > tr > td { padding: 16px 18px; vertical-align: middle; line-height: 1.6; }
.workspace-content .table > tbody > tr:hover > td { background: #f8faff; }
.table-responsive { border-radius: 12px; scrollbar-width: thin; scrollbar-color: #b8c7dd #f4f7fc; }
.table-responsive:focus-visible { outline-offset: -2px; }
.table-scroll-hint { margin: 8px 0; color: var(--ui-muted); font-size: 12px; }
.ui-badge { padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.status-dot { width: 6px; height: 6px; }
.avatar { font-weight: 650; }
.employee-directory-card { border-radius: 14px; box-shadow: var(--ui-shadow); }
.empty-state { min-height: 280px; padding: 40px 24px; }
.empty-state h3 { font-size: 16px; font-weight: 600; }
.empty-state p { font-size: 14px; }
.empty-state-compact { min-height: 200px; padding: 24px 16px; }
.empty-state-compact h3 { font-size: 14px; }
.empty-state-compact p { font-size: 13px; }
.ui-alert { border-radius: 12px; padding: 16px 18px; line-height: 1.65; }
.ui-alert > div { min-width: 0; overflow-wrap: anywhere; }
.nav-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs .nav-link { padding: 12px 16px; white-space: nowrap; min-height: 44px; }
.nav-tabs .nav-link:hover { background: var(--ui-primary-soft); border-radius: 8px 8px 0 0; }
.pagination { flex-wrap: wrap; row-gap: 8px; }
.page-link { min-height: 38px; min-width: 38px; display: grid; place-items: center; }
.dropdown-menu { border-radius: 14px; }
.dropdown-item { min-height: 40px; white-space: normal; }
.modal-title { font-size: 19px; font-weight: 650; }
.modal-footer { background: var(--ui-surface-muted); border-radius: 0 0 16px 16px; gap: 8px; }
.modal-header .btn-close { min-width: 24px; min-height: 24px; }
.dashboard-summary { position: relative; padding: 28px 32px; background: #143567; border-color: #143567; color: white; border-radius: 16px; margin-bottom: 24px; }
.dashboard-summary .eyebrow { color: #b7d4ff; font-size: 11px; letter-spacing: 1.5px; }
.dashboard-summary h2 { font-size: clamp(23px, 2vw, 28px); font-weight: 650; margin: 8px 0; color: white; }
.dashboard-summary p { color: #d1e0f6; font-size: 14px; }
.dashboard-summary-note { color: #c6d9f4; font-size: 12px; white-space: normal; }
.dashboard-kpis .nav-tabs { display: inline-flex; max-width: 100%; padding: 5px; gap: 4px; border: 1px solid var(--ui-border); border-radius: 12px; background: #eaf0f8; }
.dashboard-kpis .nav-tabs .nav-link { border: 0; border-radius: 8px; padding: 10px 20px; font-size: 13px; }
.dashboard-kpis .nav-tabs .nav-link.active { background: white; color: var(--ui-primary); box-shadow: 0 1px 4px rgb(24 54 108 / 8%); }
.dashboard-metric { position: relative; overflow: hidden; }
.dashboard-metric::before { content: ''; position: absolute; top: 0; left: 24px; width: 32px; height: 3px; background: var(--ui-primary); border-radius: 0 0 4px 4px; }
.dashboard-metric h3 { font-size: 13px; font-weight: 600; }
.dashboard-metric .card-body { display: flex; flex-direction: column; padding: 24px; }
.dashboard-metric-value { font-size: 34px; line-height: 1.25; font-weight: 700; margin: 16px 0 8px; }
.dashboard-metric-hint { font-size: 12px; min-height: 38px; }
.dashboard-metric .text-link { margin-top: auto; border-top: 1px solid var(--ui-border); padding-top: 12px; justify-content: space-between; }
.dashboard-data-note { font-size: 12px; line-height: 1.6; }
.dashboard-section-heading { margin: 36px 0 18px; }
.dashboard-section-heading h2 { font-size: 20px; letter-spacing: -.4px; }
.dashboard-section-heading p { font-size: 13px; }
.dashboard-records strong { font-size: 14px; }
.dashboard-records p { font-size: 13px; }
.dashboard-records time { font-size: 12px; }
.dashboard-section .empty-state { min-height: 200px; }
.chart-frame { height: 280px; min-height: 280px; }
.auth-main { background: #f8fafd; }
.auth-panel { padding: 32px; background: white; border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow); max-width: 490px; }
.auth-panel-wide { max-width: 680px; }
.auth-header p { font-size: 14px; }
.auth-illustration { transform: none; }
.auth-footnote { font-size: 12px; }
.ui-submitting { cursor: progress; }
.ui-submit-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; flex-shrink: 0; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (max-width: 1199.98px) { .page-header { flex-wrap: wrap; }.page-actions { max-width: 100%; }.dashboard-metric .card-body { padding: 20px; } }
@media (max-width: 767.98px) { .page-actions { justify-content: flex-start; width: 100%; }.dashboard-summary { padding: 24px; }.dashboard-metrics-grid { gap: 12px; }.dashboard-metric-value { font-size: 29px; }.dashboard-kpis .nav-tabs { display: flex; }.dashboard-kpis .nav-tabs .nav-link { padding-inline: 16px; }.workspace-content .row > * { min-width: 0; }.filter-select { flex: 1; }.auth-panel { padding: 28px; } }
@media (max-width: 575.98px) {
 .workspace-content { padding: 20px 16px 32px; }.page-header { gap: 16px; }.page-header h1 { font-size: 27px; }
 .btn, .btn-sm, .btn-icon, .dropdown-item, .page-link { min-height: 44px; }.btn-icon { min-width: 44px; }
 .form-control, .form-select, .shell-search input { font-size: 16px; }
 .ui-card > .card-header { padding: 20px 18px 0; }.ui-card > .card-body { padding: 18px; }
 .dashboard-metric .card-body { padding: 18px 14px; }.dashboard-metric .icon-tile { width: 28px; height: 28px; }.dashboard-metric h3 { font-size: 12px; }.dashboard-metric-value { font-size: 28px; }.dashboard-metric-hint { min-height: 52px; }
 .dashboard-metric .text-link { font-size: 12px; }.dashboard-section-heading h2 { font-size: 19px; }
 .dashboard-summary { padding: 24px 20px; }.dashboard-date { font-size: 12px; }
 .auth-panel { padding: 24px 20px; }.auth-main { padding-inline: 16px; }
 .table-scroll-hint { font-size: 12px; }.filter-bar, .employee-filters { padding: 14px; }
 .modal-dialog { margin: 12px; }.modal-footer .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-submit-spinner { animation: none; } }
@media print { .table-scroll-hint { display: none; }.table-responsive { overflow: visible; }.ui-card { box-shadow: none; }.dashboard-summary { background: white; color: #172b4d; }.dashboard-summary h2, .dashboard-summary p, .dashboard-summary-note { color: #172b4d; } }

/* Stacked profile cards size to their own content instead of stretching to a column. */
.employee-profile-grid > .d-flex > .ui-card { height: auto; }
.employee-details dt { font-size: 13px; font-weight: 600; }
.employee-tabs .nav-link { min-height: 44px; border-radius: 9px; }

@media (max-width: 575.98px) {
 .dashboard-kpis .nav-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
 .dashboard-kpis .nav-tabs .nav-link { white-space: normal; padding: 10px 6px; font-size: 12px; line-height: 1.45; height: 100%; }
 .dashboard-metric-hint { min-height: 38px; }
}

.profile-toggle { min-height: 44px; min-width: 44px; justify-content: center; }
.password-toggle { min-height: 44px; font-size: 12px; }
.overview-intro .eyebrow { font-size: 10px; letter-spacing: 1.1px; }

/* Blue corporate theme: white surfaces, restrained navy and blue accents. */
.dashboard-summary, .overview-intro {
    background: linear-gradient(110deg, #123363, #2055a0);
    border-color: #244f89;
    box-shadow: 0 8px 24px rgb(16 36 74 / 8%);
}
.dashboard-summary-note { padding: 8px 12px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 9px; background: rgb(255 255 255 / 6%); }
.sidebar .nav-link.active { background: #244b81; box-shadow: inset 3px 0 #93c5fd; }
.sidebar .nav-link:not(.active) > .icon { color: #aac8f1; }
.sidebar .nav-group { color: #a7bcdb; }
.dashboard-metric { background: #fff; border-color: #dfe7f2; box-shadow: 0 3px 12px rgb(24 54 108 / 4%); }
.dashboard-metric::before { left: 24px; width: 36px; height: 3px; background: #3974cf; }
.dashboard-metric .icon-tile { color: #2b62b5; background: #edf4ff; border: 1px solid #dce8fb; width: 40px; height: 40px; border-radius: 12px; }
.dashboard-metric-value { color: #173967; }
.dashboard-metric .text-link { border-top-color: #e7edf5; }
.dashboard-kpis .nav-tabs { background: #edf1f7; }
.dashboard-kpis .nav-tabs .nav-link.active { background: white; color: #245fbd; }
.dashboard-section > .card-header { border-top: 3px solid #c8daf3; border-radius: 15px 15px 0 0; }
.avatar { background: #eaf1fc; color: #315f9f; }
.workspace-content .table > thead > tr > th { background: #f4f7fc; color: #52657e; }
.filter-bar, .employee-filters { background: #f8fafd; }
.topbar { border-top: 0; }
@media (max-width: 575.98px) { .dashboard-metric .icon-tile { width: 30px; height: 30px; border-radius: 9px; } }
@media print { .dashboard-summary, .overview-intro { background: white; box-shadow: none; } }

/* Premium agency theme: colorful, restrained, and tuned for SaaS dashboards. */
body {
    background:
        linear-gradient(135deg, rgb(32 99 255 / 7%), transparent 24rem),
        linear-gradient(315deg, rgb(20 184 166 / 8%), transparent 26rem),
        #f5f7fb;
}
.sidebar {
    background: linear-gradient(180deg, #071833 0%, #0c244b 46%, #111827 100%) !important;
}
.sidebar-brand {
    background: linear-gradient(90deg, rgb(59 130 246 / 18%), transparent);
}
.brand-mark,
.brand-word > span,
.sidebar-bottom-mark {
    color: #5eead4;
}
.brand-word small {
    color: #93c5fd;
}
.sidebar-workspace {
    background: linear-gradient(135deg, rgb(37 99 235 / 22%), rgb(20 184 166 / 14%));
    border-color: rgb(147 197 253 / 22%);
}
.workspace-monogram {
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    border-color: rgb(255 255 255 / 20%);
    color: #fff;
}
.sidebar .nav-section {
    --nav-accent: #60a5fa;
}
.sidebar [data-nav-group="CRM & Sales"] { --nav-accent: #2dd4bf; }
.sidebar [data-nav-group="Team"] { --nav-accent: #a78bfa; }
.sidebar [data-nav-group="Work Management"] { --nav-accent: #38bdf8; }
.sidebar [data-nav-group="Attendance"] { --nav-accent: #f59e0b; }
.sidebar [data-nav-group="Reports"] { --nav-accent: #22c55e; }
.sidebar [data-nav-group="Administration"] { --nav-accent: #f472b6; }
.sidebar .nav-group,
.sidebar .nav-link:not(.active) > .icon {
    color: var(--nav-accent);
}
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgb(59 130 246 / 28%), rgb(20 184 166 / 15%));
    box-shadow: inset 3px 0 var(--nav-accent);
}
.sidebar .nav-link:hover {
    background: rgb(255 255 255 / 8%);
}
.topbar {
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(14px);
}
.dashboard-summary,
.overview-intro {
    overflow: hidden;
    background:
        linear-gradient(120deg, #082f63 0%, #2563eb 52%, #14b8a6 100%);
    border: 0;
    box-shadow: 0 24px 60px rgb(15 23 42 / 14%);
}
.dashboard-summary::after,
.overview-intro::after {
    content: "";
    position: absolute;
    inset: auto -5rem -8rem auto;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 13%);
}
.dashboard-summary .eyebrow,
.overview-intro .eyebrow {
    color: #ccfbf1;
}
.dashboard-summary h2,
.dashboard-summary p,
.dashboard-summary-note {
    color: #fff;
}
.dashboard-summary-note {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(255 255 255 / 12%);
}
.dashboard-kpis .nav-tabs {
    background: rgb(255 255 255 / 72%);
    border-color: rgb(148 163 184 / 24%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}
.dashboard-kpis .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #fff, #eef6ff);
    color: #1d4ed8;
}
.dashboard-metric {
    --metric-glow: color-mix(in srgb, var(--tone) 18%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tone-soft) 82%, #fff) 0%, #fff 72%);
    border-color: color-mix(in srgb, var(--tone) 20%, #fff);
    box-shadow: 0 14px 34px rgb(15 23 42 / 7%);
}
.dashboard-metric::before {
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 45%, #fff));
    border-radius: 0;
}
.dashboard-metric .icon-tile {
    color: #fff;
    background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 74%, #0f172a));
    border: 0;
    box-shadow: 0 10px 22px var(--metric-glow);
}
.dashboard-metric-value {
    color: color-mix(in srgb, var(--tone) 72%, #111827);
}
.dashboard-metric .text-link {
    color: color-mix(in srgb, var(--tone) 78%, #1d4ed8);
    border-top-color: color-mix(in srgb, var(--tone) 14%, #fff);
}
.dashboard-overview-grid .dashboard-section {
    border-top: 4px solid #38bdf8;
    box-shadow: 0 14px 34px rgb(15 23 42 / 6%);
}
.dashboard-overview-grid .dashboard-section:nth-child(2n) { border-top-color: #8b5cf6; }
.dashboard-overview-grid .dashboard-section:nth-child(3n) { border-top-color: #14b8a6; }
.dashboard-overview-grid .dashboard-section:nth-child(4n) { border-top-color: #f59e0b; }
.dashboard-section > .card-header {
    background:
        linear-gradient(135deg, rgb(248 250 252 / 96%), rgb(239 246 255 / 88%));
}
.ui-badge.tone-success { background: #dcfce7; color: #166534; }
.ui-badge.tone-info { background: #ccfbf1; color: #0f766e; }
.ui-badge.tone-warning { background: #fef3c7; color: #92400e; }
.ui-badge.tone-danger { background: #ffe4e6; color: #be123c; }
.ui-badge.tone-violet { background: #ede9fe; color: #6d28d9; }
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    box-shadow: 0 10px 22px rgb(37 99 235 / 20%);
}
.avatar {
    background: linear-gradient(135deg, #e0f2fe, #ede9fe);
    color: #1e40af;
}