/*
 * HRX Design System
 * A calm, high-density visual system for healthcare operations.
 * Functional schedule-table mechanics remain in styles.css; this file owns
 * visual tokens, the application shell, shared controls, panels and tools.
 */

:root {
    --hrx-canvas: #f3f6f2;
    --hrx-canvas-deep: #e9efeb;
    --hrx-surface: #fffefa;
    --hrx-surface-raised: #ffffff;
    --hrx-surface-muted: #edf3ef;
    --hrx-ink: #132725;
    --hrx-ink-soft: #405c58;
    --hrx-muted: #6d817d;
    --hrx-border: #d5dfda;
    --hrx-border-strong: #b9c9c3;
    --hrx-brand: #0b6b61;
    --hrx-brand-strong: #074d46;
    --hrx-brand-soft: #dcefe9;
    --hrx-brand-faint: #eef8f5;
    --hrx-info: #2d65a8;
    --hrx-info-soft: #e7f0fa;
    --hrx-warning: #b86b13;
    --hrx-warning-soft: #fbefd9;
    --hrx-danger: #b64149;
    --hrx-danger-soft: #f9e6e7;
    --hrx-success: #237a53;
    --hrx-success-soft: #e2f2e8;
    --hrx-focus: #9a5b0a;
    --hrx-focus-on-dark: #f1c46e;
    --hrx-shadow-sm: 0 1px 2px rgba(16, 46, 41, 0.06), 0 1px 6px rgba(16, 46, 41, 0.04);
    --hrx-shadow-md: 0 14px 34px rgba(16, 46, 41, 0.10);
    --hrx-shadow-lg: 0 28px 70px rgba(7, 36, 33, 0.22);
    --hrx-radius-sm: 8px;
    --hrx-radius-md: 14px;
    --hrx-radius-lg: 22px;
    --hrx-space-1: 0.25rem;
    --hrx-space-2: 0.5rem;
    --hrx-space-3: 0.75rem;
    --hrx-space-4: 1rem;
    --hrx-space-5: 1.25rem;
    --hrx-space-6: 1.5rem;
    --hrx-space-8: 2rem;
    --hrx-control-height: 2.625rem;
    --hrx-transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

html {
    min-height: 100%;
    background: var(--hrx-canvas);
    color-scheme: light;
    scroll-behavior: smooth;
}

body.hrx-body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--hrx-ink);
    background: var(--hrx-canvas);
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hrx-body *,
body.hrx-body *::before,
body.hrx-body *::after {
    box-sizing: border-box;
}

body.hrx-body ::selection {
    color: var(--hrx-brand-strong);
    background: #c5e6dc;
}

body.hrx-body :focus-visible {
    outline: 3px solid var(--hrx-focus);
    outline-offset: 2px;
}

.hrx-topbar :focus-visible,
.hrx-admin-panel :focus-visible {
    outline-color: var(--hrx-focus-on-dark);
}

.hrx-skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100000;
    padding: 0.65rem 0.9rem;
    border-radius: var(--hrx-radius-sm);
    color: #ffffff;
    background: var(--hrx-brand-strong);
    font-weight: 700;
    transform: translateY(-180%);
    transition: transform var(--hrx-transition);
}

.hrx-skip-link:focus {
    transform: translateY(0);
}

.hrx-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--hrx-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Application shell */
.hrx-app-shell {
    width: min(100%, 1920px);
    min-height: 100vh;
    margin-inline: auto;
    padding: clamp(0.65rem, 1vw, 1rem) !important;
}

.hrx-app-shell > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.65rem !important;
}

.hrx-topbar {
    position: relative;
    isolation: isolate;
    min-height: 5.75rem;
    margin: 0 !important;
    padding: clamp(0.8rem, 1.25vw, 1.1rem) clamp(1rem, 1.6vw, 1.5rem);
    overflow: visible;
    border: 1px solid #1e4a45;
    border-radius: var(--hrx-radius-lg);
    color: #f4fbf8;
    background: #123c38;
    box-shadow: var(--hrx-shadow-md);
    gap: 0.6rem !important;
}

.hrx-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 120%, rgba(127, 197, 178, 0.16) 0 6rem, transparent 7rem);
}

.hrx-brand-group {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
}

.hrx-brand-mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(218, 244, 235, 0.36);
    border-radius: 0.9rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.hrx-topbar .hrx-eyebrow {
    margin-bottom: 0.15rem;
    color: #9fd7c7;
}

.hrx-topbar h1 {
    margin: 0;
    color: #ffffff !important;
    font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.hrx-topbar h1 + p {
    max-width: 48rem;
    margin-top: 0.2rem !important;
    color: #c6dcd6 !important;
    font-size: 0.9rem;
}

.hrx-topbar-actions {
    align-items: stretch;
    gap: 0.5rem !important;
}

#month-picker {
    min-height: var(--hrx-control-height);
    border: 1px solid rgba(222, 241, 235, 0.35) !important;
    color: #f8fffc;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
    color-scheme: dark;
}

#auth-user-badge {
    min-height: var(--hrx-control-height);
    border-color: rgba(222, 241, 235, 0.26) !important;
    color: #eef9f5;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

#auth-user-badge :is(#auth-user-display, #auth-user-role) {
    color: inherit !important;
}

#auth-user-badge button:not(#auth-logout-btn) {
    color: #c8e2da !important;
}

#auth-logout-btn {
    position: relative;
    z-index: 2;
    color: #ffd1d3 !important;
}

/* Primary navigation and global context */
.hrx-navigation-shell {
    position: sticky;
    top: 0;
    z-index: 45;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.4rem;
    border: 1px solid rgba(185, 201, 195, 0.88) !important;
    border-radius: 1rem;
    background: rgba(255, 254, 250, 0.94);
    box-shadow: var(--hrx-shadow-sm);
    backdrop-filter: blur(14px);
}

.hrx-navigation-row {
    align-items: center;
    gap: 0.45rem !important;
}

.hrx-primary-nav,
.hrx-secondary-nav {
    display: flex;
    gap: 0.25rem;
    scrollbar-width: thin;
}

.hrx-primary-nav > :not([hidden]) ~ :not([hidden]),
.hrx-secondary-nav > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
}

.hrx-primary-nav > button,
.hrx-secondary-nav > button {
    min-height: 2.35rem;
    padding: 0.5rem 0.72rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.65rem !important;
    color: var(--hrx-ink-soft) !important;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color var(--hrx-transition), background var(--hrx-transition), border-color var(--hrx-transition);
}

.hrx-primary-nav > button:hover,
.hrx-secondary-nav > button:hover {
    border-color: var(--hrx-border) !important;
    color: var(--hrx-brand-strong) !important;
    background: var(--hrx-surface-muted);
}

.hrx-primary-nav > button.border-indigo-500,
.hrx-secondary-nav > button.border-indigo-500,
.hrx-primary-nav > button[aria-current="page"],
.hrx-secondary-nav > button[aria-current="page"] {
    border-color: #b9d8cf !important;
    color: var(--hrx-brand-strong) !important;
    background: var(--hrx-brand-soft);
}

.hrx-secondary-nav:empty,
.hrx-secondary-nav:has(> button.hidden:only-child) {
    display: none;
}

.hrx-global-tools {
    min-width: 0;
    justify-content: flex-end;
    gap: 0.5rem !important;
}

.hrx-filter-bar {
    min-height: 2.6rem;
    padding: 0.3rem 0.45rem !important;
    border-color: var(--hrx-border) !important;
    border-radius: 0.7rem !important;
    background: var(--hrx-surface-muted) !important;
}

.hrx-filter-bar button {
    min-height: 2rem;
    border-color: var(--hrx-border-strong) !important;
    color: var(--hrx-ink-soft) !important;
    background: var(--hrx-surface) !important;
    box-shadow: none !important;
}

#unified-filter-clear-btn {
    border: 0 !important;
    background: transparent !important;
}

#calendar-open-modal-btn,
#announcement-header-btn,
#full-refresh-btn {
    min-height: 2.6rem;
    border: 1px solid transparent;
    border-radius: 0.7rem !important;
    box-shadow: none;
    font-weight: 600;
}

#calendar-open-modal-btn {
    border-color: #b9d2ea;
    color: #234f80;
    background: var(--hrx-info-soft) !important;
}

#announcement-header-btn {
    border-color: #ecd1a6;
    color: #8a4d0f;
    background: var(--hrx-warning-soft) !important;
}

#full-refresh-btn {
    border-color: #b5d4ca;
    color: var(--hrx-brand-strong);
    background: var(--hrx-brand-soft) !important;
}

#calendar-badge,
#announcement-badge {
    border: 0 !important;
    color: inherit !important;
    background: rgba(255, 255, 255, 0.78) !important;
    font-family: "IBM Plex Mono", monospace;
}

.hrx-workspace {
    min-height: calc(100vh - 12rem);
    padding: 0;
}

.tab-content {
    color: var(--hrx-ink);
}

/* Shared controls */
.hrx-body button,
.hrx-body input,
.hrx-body select,
.hrx-body textarea {
    font: inherit;
}

.hrx-body button {
    transition: color var(--hrx-transition), background-color var(--hrx-transition), border-color var(--hrx-transition), box-shadow var(--hrx-transition), transform var(--hrx-transition);
}

.hrx-body button:disabled {
    cursor: not-allowed;
    filter: saturate(0.55);
}

.hrx-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.hrx-body select,
.hrx-body textarea {
    border-color: var(--hrx-border-strong) !important;
    border-radius: var(--hrx-radius-sm) !important;
    color: var(--hrx-ink);
    background-color: var(--hrx-surface-raised);
    box-shadow: inset 0 1px 1px rgba(18, 60, 56, 0.03);
}

.hrx-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.hrx-body select:focus,
.hrx-body textarea:focus {
    border-color: var(--hrx-brand) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(11, 107, 97, 0.14) !important;
}

.hrx-body input::placeholder,
.hrx-body textarea::placeholder {
    color: #849690;
}

.hrx-btn {
    display: inline-flex;
    min-height: var(--hrx-control-height);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.68rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    font-weight: 700;
}

.hrx-btn-primary {
    color: #ffffff;
    background: var(--hrx-brand);
    box-shadow: 0 8px 18px rgba(11, 107, 97, 0.18);
}

.hrx-btn-primary:hover {
    background: var(--hrx-brand-strong);
}

.hrx-btn-secondary {
    border-color: var(--hrx-border-strong);
    color: var(--hrx-ink-soft);
    background: var(--hrx-surface-raised);
}

.hrx-btn-secondary:hover {
    border-color: #9cb8af;
    color: var(--hrx-brand-strong);
    background: var(--hrx-brand-faint);
}

/* Schedule command surface */
.hrx-action-bar {
    gap: 0.45rem !important;
    margin-bottom: 0.55rem !important;
    padding: 0.45rem;
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-md);
    background: var(--hrx-surface);
    box-shadow: var(--hrx-shadow-sm);
}

.hrx-action-bar > button,
.hrx-action-bar > .relative > button,
.hrx-action-bar > .ai-schedule-dropdown > button {
    min-height: 2.3rem;
    border-radius: 0.65rem !important;
    box-shadow: none !important;
    font-weight: 650;
}

#load-g-sheet-btn,
#save-g-sheet-btn {
    border-color: #b7d8c6 !important;
    color: #246043 !important;
    background: var(--hrx-success-soft) !important;
}

#schedule-fullscreen-btn {
    border-color: #dfc49a !important;
    color: #814b10 !important;
    background: var(--hrx-warning-soft) !important;
}

#import-btn,
#export-btn {
    border-color: #b9d2ea !important;
    color: #254f7b !important;
    background: var(--hrx-info-soft) !important;
}

#clear-schedule-btn {
    border-color: #e4b9bc !important;
    color: #92363d !important;
    background: var(--hrx-danger-soft) !important;
}

.hrx-action-primary,
.hrx-action-bar .bg-blue-600,
#schedule-helper-btn {
    border-color: var(--hrx-brand) !important;
    color: #ffffff !important;
    background: var(--hrx-brand) !important;
}

.hrx-action-primary:hover,
.hrx-action-bar .bg-blue-600:hover,
#schedule-helper-btn:hover {
    background: var(--hrx-brand-strong) !important;
}

.hrx-action-bar label {
    color: var(--hrx-muted) !important;
    font-weight: 600;
}

#director-support-days {
    min-height: 2.2rem;
}

#schedule-zoom-controls {
    min-height: 2.45rem;
    overflow: hidden;
    border-color: var(--hrx-border) !important;
    border-radius: 0.65rem !important;
    background: var(--hrx-surface-muted) !important;
}

#schedule-zoom-controls button:hover,
#schedule-column-visibility-btn:hover {
    color: var(--hrx-brand-strong) !important;
    background: var(--hrx-brand-soft) !important;
}

.ai-dropdown-menu,
#schedule-helper-menu,
#schedule-column-visibility-panel,
#notification-panel {
    overflow: hidden;
    border-color: var(--hrx-border) !important;
    border-radius: var(--hrx-radius-md) !important;
    background: var(--hrx-surface-raised) !important;
    box-shadow: var(--hrx-shadow-md) !important;
}

#notification-panel {
    position: fixed !important;
    right: auto !important;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem);
    margin-top: 0 !important;
    overflow: hidden !important;
}

#notification-panel.hidden,
#notification-panel[hidden] {
    display: none !important;
}

#notification-panel .notification-panel-toolbar {
    flex: 0 0 auto;
}

#notification-panel .notification-tablist {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--hrx-border);
}

#notification-panel .notification-tablist [role="tab"] {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--hrx-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

#notification-panel .notification-tablist [role="tab"][aria-selected="true"] {
    color: var(--hrx-brand-strong);
    border-bottom-color: var(--hrx-brand);
    background: var(--hrx-brand-faint);
}

#notification-panel .notification-tablist [role="tab"]:focus-visible {
    outline: 2px solid var(--hrx-brand);
    outline-offset: -2px;
}

#notification-panel .notification-tab-count {
    min-width: 1.15rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--hrx-surface-muted);
    color: var(--hrx-ink-soft);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15rem;
}

#notification-panel .notification-tablist [role="tab"][aria-selected="true"] .notification-tab-count {
    background: var(--hrx-brand-soft);
    color: var(--hrx-brand-strong);
}

#notification-panel .notification-tab-count.is-unread {
    background: var(--hrx-danger);
    color: #fff;
}

#notification-panel .notification-tabpanel {
    min-height: 0;
    flex: 1 1 auto;
}

#notification-panel .notification-tabpanel.hidden,
#notification-panel .notification-tabpanel[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #notification-panel .notification-tablist [role="tab"] {
        transition: none;
    }
}

#notification-bell-btn {
    position: relative;
    z-index: 2;
    overflow: visible;
}

#notification-badge {
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
}

.ai-dropdown-menu button:hover,
#schedule-helper-menu button:hover {
    color: var(--hrx-brand-strong) !important;
    background: var(--hrx-brand-faint) !important;
}

.hrx-disclosure {
    overflow: hidden;
    margin-bottom: 0.55rem !important;
    border-color: #bfd6cf !important;
    border-radius: var(--hrx-radius-md) !important;
    color: var(--hrx-ink-soft);
    background: var(--hrx-brand-faint) !important;
}

.hrx-disclosure button,
.hrx-disclosure #schedule-mode-content {
    color: var(--hrx-brand-strong) !important;
}

.hrx-disclosure > button {
    padding-block: 0.5rem !important;
}

#active-announcements-panel:empty,
#schedule-review-action-panel.hidden {
    display: none !important;
    margin: 0 !important;
}

#validation-errors-container > .flex.mb-4,
#compliance-alert-container {
    margin-bottom: 0.55rem !important;
}

#compliance-alert-container > div:first-child {
    padding-block: 0.55rem !important;
}

/* Data surfaces */
.hrx-data-surface {
    border-color: var(--hrx-border-strong) !important;
    border-radius: var(--hrx-radius-md) !important;
    background: var(--hrx-surface-raised) !important;
    box-shadow: var(--hrx-shadow-sm) !important;
    scrollbar-color: #9ab3ab transparent;
    scrollbar-width: thin;
}

.hrx-data-surface::-webkit-scrollbar,
.hrx-workspace *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.hrx-data-surface::-webkit-scrollbar-thumb,
.hrx-workspace *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #9ab3ab;
    background-clip: padding-box;
}

#schedule-table {
    color: var(--hrx-ink-soft);
    font-size: 0.78rem;
}

#schedule-table thead th {
    border-color: var(--hrx-border) !important;
    color: #294742 !important;
    background: #e4ece8 !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#schedule-table thead tr:first-child th[data-holiday="true"] {
    color: #dc2626 !important;
    background: #fff1f2 !important;
}

#schedule-table thead tr:nth-child(2) th {
    background: #edf2ef !important;
}

#schedule-table tbody td {
    border-color: #e0e8e4 !important;
    background-color: #fffefa;
}

#schedule-table tbody tr:hover td,
#schedule-table tbody tr:hover td.sticky-col {
    background-color: #f1f7f4 !important;
}

#schedule-table tbody td.sticky-col {
    color: var(--hrx-ink);
    background: #f8faf7;
    font-weight: 650;
}

#schedule-table select,
#schedule-table select.shift-select {
    border-radius: 0.35rem !important;
    font-family: "IBM Plex Mono", "Noto Sans TC", monospace;
    font-weight: 600;
}

#schedule-table tfoot td {
    border-color: #bfcfc8 !important;
    color: var(--hrx-ink);
    background: #dbe7e1 !important;
}

#schedule-table tfoot tr.schedule-notes-row td {
    background: #f5efe3 !important;
}

#schedule-table input[data-note-input],
#schedule-table textarea {
    color: var(--hrx-ink-soft);
    background: rgba(255, 255, 255, 0.72) !important;
}

#validation-errors-container > * {
    border-radius: var(--hrx-radius-md) !important;
    box-shadow: var(--hrx-shadow-sm);
}

#schedule-tool-compare-panel {
    border-color: var(--hrx-border) !important;
    border-radius: var(--hrx-radius-md) !important;
    background: var(--hrx-surface) !important;
    box-shadow: var(--hrx-shadow-sm) !important;
}

#tool-usage-stats-modal {
    z-index: 70;
}

#tool-usage-stats-modal [role="dialog"] {
    background: var(--hrx-surface);
    color: var(--hrx-ink);
}

#tool-usage-stats-modal button:focus-visible,
#tool-usage-stats-modal select:focus-visible,
#tool-usage-stats-modal input:focus-visible {
    outline: 2px solid var(--hrx-brand);
    outline-offset: 2px;
}

/* Panels, metrics and common generated pages */
.hrx-panel,
.hrx-tool-page,
.hrx-workspace :is(form.bg-white, .bg-white.rounded-lg.shadow-sm) {
    border-color: var(--hrx-border) !important;
    background: var(--hrx-surface) !important;
    box-shadow: var(--hrx-shadow-sm) !important;
}

.hrx-panel {
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-md) !important;
}

.hrx-panel h2,
.hrx-workspace h1,
.hrx-workspace h2,
.hrx-workspace h3 {
    color: var(--hrx-ink) !important;
    letter-spacing: -0.018em;
}

.hrx-workspace > .tab-content > :first-child > :first-child:is(h1, h2),
.hrx-tool-layout > :first-child:is(h1, h2) {
    margin-top: 0;
}

.hrx-metric {
    position: relative;
    min-height: 8.5rem;
    padding: 1.25rem !important;
    overflow: hidden;
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-md) !important;
    text-align: left !important;
    background: var(--hrx-surface) !important;
    box-shadow: var(--hrx-shadow-sm) !important;
}

.hrx-metric::after {
    content: "";
    position: absolute;
    right: -1.5rem;
    bottom: -2.25rem;
    width: 6rem;
    height: 6rem;
    border: 1.1rem solid rgba(11, 107, 97, 0.07);
    border-radius: 50%;
}

.hrx-metric h3 {
    color: var(--hrx-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

.hrx-metric p {
    color: var(--hrx-brand-strong) !important;
    font-family: "IBM Plex Mono", "Noto Sans TC", monospace;
    font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
    letter-spacing: -0.05em;
}

#detail-panel-date {
    border: 1px solid #b9d8cf;
    border-radius: 0.55rem !important;
    color: var(--hrx-brand-strong) !important;
    background: var(--hrx-brand-soft) !important;
}

.hrx-workspace table:not(#schedule-table) {
    width: 100%;
    border-color: var(--hrx-border);
    color: var(--hrx-ink-soft);
}

.hrx-workspace table:not(#schedule-table) thead,
.hrx-workspace table:not(#schedule-table) th {
    color: #38534f !important;
    background: #edf2ef !important;
}

.hrx-workspace table:not(#schedule-table) tr:hover td {
    background: var(--hrx-brand-faint);
}

/* Converter module */
.hrx-tool-page {
    padding: clamp(1rem, 2.4vw, 2rem) !important;
    border-radius: var(--hrx-radius-lg) !important;
}

.hrx-tool-layout {
    max-width: 1200px;
    margin-inline: auto;
}

.converter-container {
    padding: 0;
    color: var(--hrx-ink-soft);
    background: transparent;
}

.converter-h1,
.gap-calc-h1 {
    margin: 0 0 1.5rem;
    color: var(--hrx-ink) !important;
    font-size: clamp(1.55rem, 2.7vw, 2.15rem) !important;
    font-weight: 700;
    text-align: left !important;
}

.converter-upload-area {
    margin-bottom: 1.25rem;
    padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.5rem, 4vw, 3.25rem);
    border: 1.5px dashed #8bb4a8;
    border-radius: var(--hrx-radius-md);
    text-align: center;
    background: var(--hrx-brand-faint);
    transition: border-color var(--hrx-transition), background var(--hrx-transition);
}

.converter-upload-area:hover,
.converter-upload-area.dragover {
    border-color: var(--hrx-brand);
    background: #e3f2ed;
}

.converter-upload-btn,
.converter-process-btn {
    display: inline-flex;
    min-height: var(--hrx-control-height);
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.3rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--hrx-brand) !important;
    border-radius: 0.7rem;
    color: #ffffff;
    background: var(--hrx-brand) !important;
    font-size: 0.9rem;
    font-weight: 700;
}

.converter-upload-btn:hover,
.converter-process-btn:hover {
    background: var(--hrx-brand-strong) !important;
}

.converter-batch-convert-btn {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.85rem 1.6rem;
    border: 2px solid #9a3412 !important;
    border-radius: 0.85rem;
    color: #fff7ed;
    background: #c2410c !important;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px -6px rgba(154, 52, 18, 0.55);
}

.converter-batch-convert-btn:hover {
    background: #9a3412 !important;
}

.converter-status {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border-radius: var(--hrx-radius-sm);
    text-align: center;
}

.converter-status.success {
    border: 1px solid #afd7bd;
    color: #245f42;
    background: var(--hrx-success-soft);
}

.converter-status.error {
    border: 1px solid #e4b9bc;
    color: #8a333a;
    background: var(--hrx-danger-soft);
}

.converter-status.info {
    border: 1px solid #b9d2ea;
    color: #294f78;
    background: var(--hrx-info-soft);
}

.converter-info-box {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--hrx-info);
    color: #355673;
    background: #edf4fa;
}

.converter-info-box h4,
.converter-shift-table h4 {
    margin-top: 0;
    color: var(--hrx-ink) !important;
}

.converter-preview {
    max-height: 400px;
    margin-top: 1.25rem;
    overflow: auto;
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-sm);
}

.converter-preview table,
.converter-shift-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.converter-preview :is(th, td),
.converter-shift-table :is(th, td) {
    padding: 0.55rem;
    border: 1px solid var(--hrx-border);
    text-align: left;
}

.converter-progress {
    display: none;
    width: 100%;
    height: 0.65rem;
    margin: 0.75rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--hrx-surface-muted);
}

.converter-progress-bar {
    width: 0;
    height: 100%;
    background: var(--hrx-brand);
    transition: width 240ms ease-out;
}

.converter-shift-table {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hrx-border);
}

/* Gap calculator */
.gap-calc-container {
    max-width: 1200px;
    padding: 0;
}

.gap-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: start;
}

.gap-card {
    padding: clamp(1rem, 2.2vw, 1.5rem);
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-md);
    background: var(--hrx-surface);
    box-shadow: var(--hrx-shadow-sm);
}

.gap-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gap-row label {
    color: var(--hrx-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.gap-input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
}

.gap-btn {
    min-height: var(--hrx-control-height);
    padding: 0.7rem 1rem;
    border: 1px solid var(--hrx-brand);
    border-radius: 0.7rem;
    color: #ffffff;
    background: var(--hrx-brand);
    font-size: 0.9rem;
    font-weight: 700;
}

.gap-btn:hover {
    background: var(--hrx-brand-strong);
}

.gap-kpi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
    margin: 0;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--hrx-border);
    background: transparent;
}

.gap-kpi:first-child {
    padding-top: 0;
}

.gap-kpi:last-of-type {
    border-bottom: 0;
}

.gap-kpi-summary {
    grid-template-columns: 1fr;
}

.gap-kpi-summary .gap-big {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    letter-spacing: -0.02em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.gap-kpi h3 {
    margin: 0;
    color: var(--hrx-muted) !important;
    font-size: 0.82rem;
    font-weight: 600;
}

.gap-big {
    color: var(--hrx-brand-strong);
    font-family: "IBM Plex Mono", "Noto Sans TC", monospace;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 600;
}

.gap-muted {
    color: var(--hrx-muted);
    font-size: 0.76rem;
}

.gap-advice {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-sm);
    background: var(--hrx-surface-muted);
    font-size: 0.82rem;
}

.gap-ok { color: var(--hrx-success); }
.gap-warn,
.gap-pre { color: var(--hrx-warning); }
.gap-bad { color: var(--hrx-danger); }

/* Floating administration drawer */
.hrx-admin-drawer {
    color: #e9f6f1;
}

.hrx-admin-panel {
    overflow: hidden;
    border-color: #27534e !important;
    border-left: 0 !important;
    border-radius: 0 var(--hrx-radius-md) var(--hrx-radius-md) 0 !important;
    background: rgba(14, 53, 49, 0.97) !important;
    box-shadow: var(--hrx-shadow-lg) !important;
}

#mgmt-drag-handle {
    border-color: rgba(220, 240, 233, 0.16) !important;
    color: #effaf6;
}

#mgmt-drag-handle > div,
#mgmt-collapse-btn {
    color: inherit !important;
}

.hrx-admin-menu button {
    min-height: 2.5rem;
    border-radius: 0.55rem !important;
    color: #c9ded8 !important;
}

.hrx-admin-menu button:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.hrx-admin-trigger {
    left: 0 !important;
    width: 2rem;
    height: 2.75rem;
    padding: 0.35rem !important;
    border: 1px solid #75ae9e;
    border-left: 0;
    border-radius: 0 0.7rem 0.7rem 0 !important;
    color: #ffffff;
    background: var(--hrx-brand) !important;
    box-shadow: 0 10px 24px rgba(7, 50, 45, 0.24) !important;
}

.hrx-admin-trigger svg {
    width: 1rem;
    height: 1rem;
}

/* Authentication */
.hrx-auth-overlay {
    padding: clamp(1rem, 4vw, 3rem);
    background: #0e2927 !important;
}

.hrx-auth-shell {
    display: grid;
    width: min(100%, 66rem);
    min-height: 36rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
    overflow: hidden;
    border: 1px solid rgba(201, 226, 218, 0.22);
    border-radius: 1.75rem;
    background: #163a36;
    box-shadow: var(--hrx-shadow-lg);
}

.hrx-auth-story {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 4rem);
    color: #d6e8e2;
}

.hrx-auth-story .hrx-eyebrow {
    color: #91cdbd;
}

.hrx-auth-story h1 {
    max-width: 13ch;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.12;
}

.hrx-auth-story h1 + p {
    max-width: 40rem;
    margin: 1.1rem 0 0;
    color: #b7d0c9;
}

.hrx-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #aacbc2;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hrx-auth-brand-mark {
    padding: 0.55rem 0.6rem;
    border: 1px solid rgba(210, 235, 227, 0.3);
    border-radius: 0.55rem;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
}

.hrx-auth-benefits {
    display: grid;
    gap: 0.75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.hrx-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #c7dbd5;
    font-size: 0.82rem;
}

.hrx-auth-benefits span {
    color: #83bdae;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.7rem;
}

.hrx-auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--hrx-ink);
    background: var(--hrx-surface);
}

.hrx-auth-heading {
    margin-bottom: 1rem;
}

.hrx-auth-heading h2 {
    margin: 0;
    color: var(--hrx-ink);
    font-size: 1.75rem;
    letter-spacing: -0.035em;
}

.hrx-auth-heading > p:last-child {
    margin: 0.4rem 0 0;
    color: var(--hrx-muted);
    font-size: 0.86rem;
}

.hrx-auth-card label {
    color: var(--hrx-ink-soft) !important;
    font-weight: 600;
}

.hrx-auth-card input {
    min-height: var(--hrx-control-height);
}

.hrx-form-message:not(:empty) {
    margin-bottom: 0.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e7c1c3;
    border-radius: var(--hrx-radius-sm);
    color: #91373e !important;
    background: var(--hrx-danger-soft);
}

.hrx-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    margin: 1.15rem 0;
    color: var(--hrx-muted);
    font-size: 0.72rem;
}

.hrx-auth-divider span:not(:nth-child(2)) {
    height: 1px;
    background: var(--hrx-border);
}

.hrx-auth-footnote {
    margin: 1rem 0 0;
    color: var(--hrx-muted);
    font-size: 0.7rem;
    line-height: 1.6;
    text-align: center;
}

/* Static and generated dialogs */
.hrx-body > [id$="-modal"].fixed.inset-0,
.hrx-body > [id$="-overlay"].fixed.inset-0:not(#auth-overlay) {
    background-color: rgba(8, 33, 30, 0.62) !important;
    backdrop-filter: blur(6px);
}

.hrx-body > [id$="-modal"].fixed.inset-0 > div,
.hrx-body > [id$="-overlay"].fixed.inset-0:not(#auth-overlay) > div {
    border: 1px solid var(--hrx-border) !important;
    border-radius: var(--hrx-radius-lg) !important;
    background: var(--hrx-surface) !important;
    box-shadow: var(--hrx-shadow-lg) !important;
}

.hrx-body > [id$="-modal"] h2,
.hrx-body > [id$="-modal"] h3 {
    color: var(--hrx-ink) !important;
    letter-spacing: -0.02em;
}

.hrx-body > [id$="-modal"] .bg-gray-50 {
    background: var(--hrx-surface-muted) !important;
}

/* Normalize frequently generated Tailwind accents to the HRX system. */
.hrx-workspace .text-indigo-600,
.hrx-workspace .text-blue-600,
.hrx-workspace .text-purple-600 {
    color: var(--hrx-brand) !important;
}

.hrx-workspace .bg-indigo-600,
.hrx-workspace .bg-blue-600,
.hrx-workspace .bg-purple-600 {
    background-color: var(--hrx-brand) !important;
}

.hrx-workspace .border-indigo-500,
.hrx-workspace .border-blue-500,
.hrx-workspace .border-purple-500 {
    border-color: var(--hrx-brand) !important;
}

.hrx-workspace .bg-gray-50 {
    background-color: var(--hrx-surface-muted) !important;
}

.hrx-workspace .text-gray-900,
.hrx-workspace .text-gray-800,
.hrx-workspace .text-gray-700 {
    color: var(--hrx-ink) !important;
}

.hrx-workspace .text-gray-600,
.hrx-workspace .text-gray-500,
.hrx-workspace .text-gray-400 {
    color: var(--hrx-muted) !important;
}

/* Manpower module alignment */
#manpower-app-root {
    min-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--hrx-border);
    border-radius: var(--hrx-radius-lg);
    color: var(--hrx-ink);
    background: var(--hrx-surface) !important;
    box-shadow: var(--hrx-shadow-sm);
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
}

#manpower-app-root .nav-item.active {
    border-left-color: #77bba8;
    background-color: rgba(119, 187, 168, 0.13);
}

/* Responsive adaptation */
@media (max-width: 1180px) {
    .hrx-navigation-row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .hrx-global-tools {
        width: 100%;
        justify-content: flex-start;
    }

    .hrx-filter-bar {
        flex: 1 1 auto;
    }
}

@media (max-width: 960px) {
    .gap-grid {
        grid-template-columns: 1fr;
    }

    .hrx-auth-shell {
        grid-template-columns: 1fr;
    }

    .hrx-auth-story {
        min-height: 15rem;
        gap: 1.5rem;
        padding-bottom: 2rem;
    }

    .hrx-auth-story h1 {
        max-width: 18ch;
        font-size: clamp(1.8rem, 7vw, 2.7rem);
    }

    .hrx-auth-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hrx-auth-benefits li {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .hrx-app-shell {
        padding: 0.5rem !important;
    }

    .hrx-app-shell > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem !important;
    }

    .hrx-topbar {
        min-height: auto;
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .hrx-brand-group {
        align-items: flex-start;
    }

    .hrx-brand-mark {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
        font-size: 0.76rem;
    }

    .hrx-topbar h1 {
        font-size: 1.25rem !important;
    }

    .hrx-topbar h1 + p {
        font-size: 0.76rem;
    }

    .hrx-topbar-actions,
    #month-picker {
        width: 100%;
    }

    #auth-user-badge {
        width: 100%;
        justify-content: space-between;
    }

    .hrx-navigation-shell {
        top: 0.35rem;
        margin-top: 0 !important;
        padding: 0.35rem;
        border-radius: 0.8rem;
    }

    .hrx-primary-nav {
        width: 100%;
        padding-bottom: 0.2rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .hrx-primary-nav > button {
        flex: 0 0 auto;
        min-height: 2.4rem;
        scroll-snap-align: start;
    }

    .hrx-global-tools {
        display: flex !important;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        scrollbar-width: thin;
    }

    .hrx-filter-bar {
        flex: 0 0 auto;
        min-width: max-content;
    }

    #calendar-toolbar,
    #announcement-toolbar,
    .hrx-global-tools > .flex {
        flex: 0 0 auto;
    }

    .hrx-action-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding: 0.4rem;
        scroll-snap-type: x proximity;
    }

    .hrx-action-bar > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .hrx-disclosure {
        margin-bottom: 0.5rem !important;
    }

    .hrx-panel,
    .hrx-tool-page {
        padding: 1rem !important;
        border-radius: 0.9rem !important;
    }

    .hrx-metrics-grid {
        gap: 0.65rem !important;
    }

    .hrx-metric {
        min-height: 7.25rem;
        padding: 0.9rem !important;
    }

    .gap-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .gap-kpi {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .converter-upload-area {
        padding: 1.25rem 0.75rem;
    }

    .converter-upload-btn,
    .converter-process-btn {
        width: 100%;
        margin-inline: 0;
    }

    .hrx-auth-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 0.65rem;
    }

    .hrx-auth-shell {
        min-height: 0;
        border-radius: 1.1rem;
    }

    .hrx-auth-story {
        min-height: auto;
        padding: 1.5rem;
    }

    .hrx-auth-brand span:last-child,
    .hrx-auth-benefits {
        display: none;
    }

    .hrx-auth-story h1 {
        font-size: 1.65rem;
    }

    .hrx-auth-card {
        padding: 1.4rem;
    }

    .hrx-admin-drawer {
        top: auto !important;
        bottom: 5rem;
    }
}

@media (max-width: 480px) {
    .hrx-brand-mark {
        display: none;
    }

    .hrx-topbar .hrx-eyebrow {
        font-size: 0.62rem;
    }

    .hrx-topbar h1 {
        font-size: 1.22rem !important;
    }

    .hrx-primary-nav > button {
        padding-inline: 0.7rem !important;
        font-size: 0.76rem;
    }

    .hrx-metric p {
        font-size: 1.55rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hrx-body *,
    .hrx-body *::before,
    .hrx-body *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}