/* Shared visual refinements. Existing motion preferences and animations are retained. */
.ui-icon { display: inline-block; flex: 0 0 auto; vertical-align: -.2em; }
.nav-ui-icon { width: 20px; height: 20px; margin-right: .75rem; }
html.nav-collapsed .nav-ui-icon { margin-right: 0; }
.notif-bell.ui-icon, .urgent-btn .ui-icon { width: 22px; height: 22px; }
.topbar-search-icon.ui-icon { width: 16px; height: 16px; }
.topbar-search input::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.card-title .ui-icon { margin-right: .3rem; color: var(--hr-link); }
.leave-tile-primary .t-label { color: var(--hr-ink); font-weight: 700; font-size: 1rem; }
.leave-tile-primary .t-sub { color: var(--bs-body-color); }
[data-bs-theme="dark"] .leave-tile-primary .t-label { color: var(--bs-body-color); }
[data-bs-theme="dark"] .leave-tile-primary .t-sub { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #ced4da;
    --bs-btn-border-color: #868e96;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #495057;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-disabled-color: #adb5bd;
}
html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--hr-link);
    --bs-btn-border-color: var(--hr-link);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hr-acc);
    --bs-btn-hover-border-color: var(--hr-link);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hr-acc);
    --bs-btn-active-border-color: var(--hr-link);
    --bs-btn-disabled-color: var(--hr-link);
    --bs-btn-disabled-border-color: var(--hr-link);
}
[data-bs-theme="dark"] .settings-page .btn-outline-danger {
    --bs-btn-color: #ffb3bc;
    --bs-btn-border-color: #ea868f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b02a37;
    --bs-btn-hover-border-color: #ea868f;
}
[data-bs-theme="dark"] .settings-page .text-danger { color: #ffb3bc !important; }
[data-bs-theme="dark"] .settings-page .text-success { color: #75d9af !important; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--hr-link);
    outline-offset: 3px;
}

/* Home: original card layout with typography and contrast refinements. */
.home-banner { padding: 1rem 1.25rem; }
.home-banner-inner { display: flex; align-items: center; gap: 1rem; }
.home-banner-avatar { width: 48px; height: 48px; }
.home-greeting { min-width: 0; flex: 1; }
.home-greeting-title { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.home-greeting-meta { font-size: .85rem; opacity: .85; margin-top: .2rem; }
.home-banner-extras { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; max-width: 38%; }
.home-banner .banner-ticker { font-size: .8rem; }
.home-sections .card-title, .home-notices .card-title { gap: .75rem; align-items: baseline; }
.home-sections .card-title > a, .home-notices .card-title > a { flex-shrink: 0; font-size: .85rem; }
.home-notices li { min-height: 38px; }
.home-notices li > a, .home-sections li a { color: var(--bs-body-color); }
.home-notices li > a:hover, .home-sections li a:hover { color: var(--hr-link); text-decoration: underline !important; }

/* Approval table keeps one data source; narrow screens present each row as a card. */
.approval-title a { color: var(--bs-body-color); text-decoration: none; }
.approval-title a:hover { color: var(--hr-link); text-decoration: underline; }
.approval-mobile-sort { display: none; }
.approval-date-caption { display: none; }
.approval-tabs .nav-link { color: var(--hr-link); }
.approval-tabs .nav-link.active { color: var(--bs-body-color); font-weight: 600; }

/* Settings: sections map to user tasks, with one explicit save action. */
.settings-page { max-width: 1200px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-wide { grid-column: 1 / -1; }
.settings-short-input { max-width: 280px; }
.quick-link-editor { display: grid; gap: .75rem; }
.quick-link-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) auto; gap: .5rem .75rem; align-items: end; }
.quick-link-row > div { min-width: 0; }
.quick-link-row .form-label { margin-bottom: .25rem; }
.quick-link-error { grid-column: 1 / -1; }
.settings-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); }
.settings-savebar > button { margin-left: auto; }

@media (max-width: 1100px) {
    .settings-grid { grid-template-columns: 1fr; }
    .quick-link-row { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: .75rem; border-bottom: 1px solid var(--bs-border-color); }
    .quick-link-row > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .quick-link-remove { grid-column: 2; grid-row: 1; min-height: 40px; }
    .quick-link-row input { font-size: 16px; }
}
@media (max-width: 640.98px) {
    .home-banner { padding: .75rem; }
    .home-banner-inner { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .5rem .65rem; align-items: start; }
    .home-banner .home-banner-avatar { width: 36px; height: 36px; }
    .home-greeting { grid-column: 2; }
    .home-greeting-title { font-size: 1rem; line-height: 1.45; }
    .home-greeting-meta { font-size: .75rem; }
    .home-banner-extras { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
    .home-banner .dday-chip { font-size: .72rem; padding: .15rem .45rem; }
    .home-notices li { flex-wrap: wrap; gap: .25rem .4rem !important; padding-block: .6rem !important; }
    .home-notices li > a { flex: 1 1 calc(100% - 32px); white-space: normal; overflow-wrap: anywhere; }
    .home-notices li > span:last-child { margin-left: 26px; font-size: .75rem; }
    .home-sections .card-title { flex-wrap: wrap; }
    .approval-mobile-sort { display: flex; align-items: center; gap: .5rem; }
    .approval-mobile-sort label, .approval-mobile-sort button { flex-shrink: 0; }
    .approval-mobile-sort select { min-width: 0; }
    .approval-tabs .nav-link { min-height: 44px; }
    .content .approval-list { display: block; overflow: visible; white-space: normal; background: transparent; }
    .content .approval-list thead { display: none; }
    .content .approval-list tbody { display: grid; gap: .75rem; }
    .content .approval-list tbody > tr {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem;
        padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .6rem;
        background: var(--bs-body-bg); cursor: pointer;
    }
    .content .approval-list tbody > tr > td {
        display: block; padding: 0; border: 0; background: transparent;
        box-shadow: none; white-space: normal !important; text-align: left !important;
        overflow-wrap: anywhere; min-width: 0;
    }
    .content .approval-list .approval-kind { order: 0; color: var(--bs-secondary-color); font-size: .8rem; }
    .content .approval-list .approval-title { order: 1; font-size: 1rem; font-weight: 600; line-height: 1.55; }
    .content .approval-list .approval-title a { display: block; padding-block: .15rem; }
    .content .approval-list .approval-status { order: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .3rem; }
    .content .approval-list .approval-status .badge { margin-left: 0 !important; }
    .content .approval-list .approval-requester { order: 3; font-size: .85rem; }
    .content .approval-list .approval-date { order: 4; font-size: .8rem; color: var(--bs-secondary-color); }
    .content .approval-list .approval-period { order: 5; }
    .content .approval-list .approval-detail { order: 6; }
    .content .approval-list .approval-days { order: 7; }
    .content .approval-list .approval-number { order: 8; }
    .content .approval-list .approval-draft-actions { order: 9; display: flex; gap: 1rem; align-items: center; }
    .content .approval-list td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 4.5em; margin-right: .5rem; color: var(--bs-secondary-color); font-weight: 400; }
    .content .approval-list .approval-empty, .content .approval-list .approval-open { display: none; }
    .content .approval-list tbody > tr.trip-group { border-left: 3px solid var(--bs-info); }
    .content .approval-list.table > tbody > tr.trip-group > td { background: transparent; border: 0; }
    .settings-page .card-body { padding: 1rem; }
    .settings-savebar > span { flex-basis: 100%; }
    .settings-savebar > button { width: 100%; }
}
@media (max-width: 374.98px) {
    .approval-date-range { display: grid !important; grid-template-columns: auto minmax(0, 1fr); width: 100%; gap: .5rem !important; }
    .approval-date-range input { min-width: 0; max-width: none !important; }
    .approval-date-caption { display: block; }
    .approval-date-separator { display: none; }
}