/* Company-system semantic tokens and reusable UI primitives. */
:root {
    --color-primary: #176b78;
    --color-primary-hover: #115762;
    --color-primary-subtle: #e8f2f2;
    --color-primary-border: #9fc6ca;
    --color-primary-rgb: 23, 107, 120;
    --color-text: #111827;
    --color-muted: #66758a;
    --color-border: #dce4ef;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f9fc;
    --color-page: #eef2f7;
    --color-success: #087b5c;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --color-info: #1d4ed8;
    --font-family-ui: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    --font-size-caption: 0.75rem;
    --font-size-data: 0.75rem;
    --font-size-body: 0.8125rem;
    --font-size-section-title: 0.9375rem;
    --font-size-page-title: 1.125rem;
    --line-height-tight: 1.25;
    --line-height-compact: 1.4;
    --line-height-body: 1.5;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.05);
    --control-height-sm: 1.875rem;
    --control-height-md: 2.25rem;
    --table-row-height: 2.5rem;
    --focus-ring: 0 0 0 3px rgba(23, 107, 120, 0.26);

    /* Maintained compatibility aliases for the existing enterprise modules. */
    --erp-border: var(--color-border);
    --erp-bg: var(--color-page);
    --erp-surface: var(--color-surface);
    --erp-surface-soft: var(--color-surface-subtle);
    --erp-text: var(--color-text);
    --erp-muted: var(--color-muted);
    --erp-primary: var(--color-primary);
    --erp-shadow: var(--shadow-card);

    /* Bootstrap compatibility: semantic primary is owned by this file. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 23, 107, 120;
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
}

.app-shell {
    font-family: var(--font-family-ui);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.btn {
    text-align: center;
}

button.btn,
a.btn,
label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    line-height: 1.2;
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: 23, 107, 120;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 23, 107, 120;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: var(--color-primary);
}

/* Dataset or mode navigation belongs immediately below its filter bar. */
.ui-section-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    min-height: 34px;
    padding: 4px 7px 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-bottom-color: #c9d5e3;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-surface-subtle);
    scrollbar-width: thin;
}

.ui-section-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #c9d5e3;
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: #405166;
    background: var(--color-surface);
    font-size: var(--font-size-data);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.ui-section-tab:hover {
    border-color: #8fb8bd;
    color: var(--color-primary-hover);
    background: #f2f8f8;
}

.ui-section-tab.is-active,
.ui-section-tab[aria-current="page"] {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary);
}

.ui-section-tab:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* Sibling page navigation in the global titlebar uses a quieter segmented form. */
.ui-context-tabs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.ui-context-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: var(--radius-sm);
    color: #405166;
    font-size: var(--font-size-data);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ui-context-tab:hover {
    color: var(--color-primary-hover);
    background: #e8f2f2;
}

.ui-context-tab.is-active,
.ui-context-tab[aria-current="page"] {
    color: #fff;
    background: var(--color-primary);
}

.ui-context-tab:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.ui-page-header__copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.ui-page-header h1,
.ui-page-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-page-title);
    font-weight: 800;
    line-height: var(--line-height-tight);
}

.ui-page-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.ui-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.ui-form-field {
    display: grid;
    flex: 1 1 10rem;
    gap: var(--space-1);
    min-width: 0;
}

.ui-form-field > span,
.ui-form-field > label {
    color: var(--color-muted);
    font-size: var(--font-size-data);
    font-weight: 700;
}

.ui-form-field .form-control,
.ui-form-field .form-select {
    min-height: var(--control-height-md);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
}

.ui-form-field .form-control:focus,
.ui-form-field .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.ui-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-caption);
    font-weight: 750;
}

.ui-status-badge--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface)); }
.ui-status-badge--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface)); }
.ui-status-badge--danger { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface)); }
.ui-status-badge--info { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 15%, var(--color-surface)); }
.ui-status-badge--neutral { color: var(--color-muted); background: var(--color-border); }

.ui-data-table {
    width: 100%;
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-data);
    line-height: var(--line-height-compact);
}

.ui-data-table th {
    height: var(--table-row-height);
    color: var(--color-muted);
    background: var(--color-surface-subtle);
}

.ui-data-table td {
    min-height: var(--table-row-height);
    border-color: var(--color-border);
}

.ui-type-scale {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ui-type-scale > div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.ui-type-scale span {
    color: var(--color-muted);
    font-size: var(--font-size-body);
}

.ui-type-scale__page { font-size: var(--font-size-page-title); line-height: var(--line-height-tight); }
.ui-type-scale__section { font-size: var(--font-size-section-title); line-height: var(--line-height-tight); }
.ui-type-scale__body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.ui-type-scale__data { font-size: var(--font-size-data); line-height: var(--line-height-compact); }
.ui-type-scale__caption { font-size: var(--font-size-caption); line-height: var(--line-height-compact); }

.ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-4);
    color: var(--color-muted);
    text-align: center;
}

.ui-empty-state i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.ui-skeleton {
    display: block;
    min-height: 0.75rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-subtle) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: ui-skeleton-pulse 1.4s ease-in-out infinite;
}

.ui-auth-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* Shared date controls: the native input remains the no-JS fallback. */
.ui-date-control {
    --ui-date-control-trigger-height: var(--control-height-md);
    --ui-date-control-font-size: inherit;
    --ui-date-control-line-height: inherit;
    --ui-date-control-padding-left: 0.75rem;
    --ui-date-control-padding-right: 0.75rem;
    --ui-date-control-border-radius: var(--radius-sm);
    position: relative;
    display: block;
    min-width: 0;
}
.ui-date-control--sm {
    --ui-date-control-trigger-height: var(--control-height-sm);
    --ui-date-control-font-size: 0.875rem;
    --ui-date-control-padding-left: 0.5rem;
    --ui-date-control-padding-right: 0.5rem;
}
.ui-date-control__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.ui-date-control__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    height: var(--ui-date-control-trigger-height);
    min-height: var(--ui-date-control-trigger-height);
    padding: 0 var(--ui-date-control-padding-right) 0 var(--ui-date-control-padding-left);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-date-control-border-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--ui-date-control-font-size);
    line-height: var(--ui-date-control-line-height);
    text-align: left;
}
.ui-date-control__trigger [data-date-control-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-date-control__trigger > i { flex: 0 0 auto; }
.ui-date-control__trigger:focus-visible, .ui-date-control__trigger:hover { border-color: var(--color-primary); }
.ui-date-control__trigger[aria-invalid="true"] { border-color: var(--color-danger); }
.ui-date-control__trigger:disabled { cursor: not-allowed; opacity: 0.65; }
.ui-date-control__panel { position: fixed; z-index: var(--z-dropdown, 1050); display: grid; gap: var(--space-2); width: min(292px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ui-date-control__panel[hidden] { display: none; }
.ui-date-control__outer-nav, .ui-date-control__inner-nav { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: var(--space-1); align-items: center; }
.ui-date-control__outer-nav button, .ui-date-control__inner-nav button, .ui-date-control__days button, .ui-date-control__months button { min-width: 0; min-height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); }
.ui-date-control__outer-nav button:hover, .ui-date-control__inner-nav button:hover, .ui-date-control__days button:hover, .ui-date-control__months button:hover, .ui-date-control__outer-nav button:focus-visible, .ui-date-control__inner-nav button:focus-visible, .ui-date-control__days button:focus-visible, .ui-date-control__months button:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.ui-date-control__outer-nav strong, .ui-date-control__inner-nav strong { text-align: center; }
.ui-date-control__weekdays, .ui-date-control__days, .ui-date-control__months { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.ui-date-control__weekdays { color: var(--color-muted); font-size: var(--font-size-caption); text-align: center; }
.ui-date-control__months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-date-control__days button.is-outside { color: var(--color-muted); opacity: 0.58; }
.ui-date-control__days button.is-current:not(.is-selected), .ui-date-control__months button.is-current:not(.is-selected) { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary); }
.ui-date-control__days button.is-selected, .ui-date-control__months button.is-selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 700; }
.ui-date-control__days button:disabled, .ui-date-control__months button:disabled { cursor: not-allowed; opacity: 0.45; }
.ui-date-control__time { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--font-size-caption); }
.ui-date-control__time input { min-height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.ui-date-control__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); border-top: 1px solid var(--color-border); }
.ui-date-control__footer button { min-height: 36px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--color-primary); font-weight: 600; }
.ui-date-control__footer button:hover, .ui-date-control__footer button:focus-visible { text-decoration: underline; }

@keyframes ui-skeleton-pulse {
    to { background-position-x: -200%; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; }
}

@media (max-width: 767.98px) {
    .ui-page-header { align-items: stretch; flex-direction: column; }
    .ui-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-filter-bar__actions { grid-column: 1 / -1; }
    .ui-type-scale > div { grid-template-columns: 1fr; gap: var(--space-1); }

    /* Context tabs are direct touch navigation on mobile, not compact desktop chips. */
    .ui-context-tab { min-height: 44px; }

    /* Canonical mobile form contract: controls remain readable and thumb-safe. */
    .ui-form-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .ui-filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 44px;
        height: 44px;
        font-size: 16px;
    }

    .ui-filter-bar :is(button, a.btn, .btn),
    .ui-filter-bar__actions :is(button, a.btn, .btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        height: 44px;
        font-size: 16px;
    }

    .ui-date-control__trigger {
        height: max(44px, var(--ui-date-control-trigger-height));
        min-height: 44px;
        font-size: 16px;
    }

    .ui-date-control__panel {
        width: min(366px, calc(100vw - 24px));
    }

    .ui-date-control__outer-nav,
    .ui-date-control__inner-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .ui-date-control__outer-nav button,
    .ui-date-control__inner-nav button,
    .ui-date-control__days button,
    .ui-date-control__months button,
    .ui-date-control__time input,
    .ui-date-control__footer button {
        min-height: 44px;
    }
}