/*
 * DEV-1.14A | Patient System V2 Global Visual Foundation
 *
 * Reference:
 * 2026-08-20 V2 主頁視覺定稿
 *
 * Ownership rule:
 * - This file owns global visual tokens and reusable visual primitives.
 * - Domain/page CSS may consume these variables.
 * - Domain/page CSS must NOT create a second independent color/spacing/radius system.
 * - DEV-1.14A intentionally does NOT restyle existing Phase 1 pages yet.
 *   DEV-1.14B will migrate AppShell + Work Home onto these tokens.
 */

:root {
    /* ---------------------------------------------------------
       01 | Brand / Core palette
       --------------------------------------------------------- */
    --v2-color-brand-950: #023b48;
    --v2-color-brand-900: #024a59;
    --v2-color-brand-850: #045968;
    --v2-color-brand-800: #056878;
    --v2-color-brand-700: #087f8a;
    --v2-color-brand-600: #0a929c;
    --v2-color-brand-500: #12aab3;
    --v2-color-brand-100: #e6f6f7;
    --v2-color-brand-050: #f2fbfb;

    /* Main text is navy rather than pure black, matching V2 artwork. */
    --v2-color-ink-950: #0b2940;
    --v2-color-ink-900: #102f47;
    --v2-color-ink-800: #24465d;
    --v2-color-ink-700: #47657a;
    --v2-color-ink-600: #6e8494;
    --v2-color-ink-500: #8c9ca8;

    /* Surfaces */
    --v2-color-page: #f3f6f8;
    --v2-color-workspace: #f7f9fa;
    --v2-color-surface: #ffffff;
    --v2-color-surface-soft: #fbfcfd;
    --v2-color-surface-muted: #f5f8fa;
    --v2-color-overlay: rgba(11, 41, 64, 0.42);

    /* Lines */
    --v2-color-border: #dde6eb;
    --v2-color-border-soft: #eaf0f3;
    --v2-color-border-strong: #cbd9e0;

    /* ---------------------------------------------------------
       02 | Semantic palette
       --------------------------------------------------------- */
    --v2-color-info: #2f78d4;
    --v2-color-info-bg: #eaf3ff;
    --v2-color-success: #16a05d;
    --v2-color-success-bg: #e8f7ef;
    --v2-color-warning: #f0782e;
    --v2-color-warning-bg: #fff1e8;
    --v2-color-danger: #e6493f;
    --v2-color-danger-bg: #fff0ef;
    --v2-color-purple: #7759e9;
    --v2-color-purple-bg: #f0edff;

    /* ---------------------------------------------------------
       03 | Typography
       --------------------------------------------------------- */
    --v2-font-sans:
        "Segoe UI",
        "Microsoft JhengHei",
        "PingFang TC",
        "Noto Sans TC",
        Arial,
        sans-serif;

    --v2-font-mono:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        "Liberation Mono",
        monospace;

    --v2-font-size-10: 10px;
    --v2-font-size-11: 11px;
    --v2-font-size-12: 12px;
    --v2-font-size-13: 13px;
    --v2-font-size-14: 14px;
    --v2-font-size-16: 16px;
    --v2-font-size-18: 18px;
    --v2-font-size-20: 20px;
    --v2-font-size-24: 24px;
    --v2-font-size-30: 30px;

    --v2-font-weight-regular: 400;
    --v2-font-weight-medium: 500;
    --v2-font-weight-semibold: 600;
    --v2-font-weight-bold: 700;
    --v2-font-weight-heavy: 800;

    --v2-line-height-tight: 1.2;
    --v2-line-height-normal: 1.45;
    --v2-line-height-relaxed: 1.65;

    /* Typography aliases */
    --v2-type-page-title-size: var(--v2-font-size-24);
    --v2-type-section-title-size: var(--v2-font-size-18);
    --v2-type-card-title-size: var(--v2-font-size-13);
    --v2-type-body-size: var(--v2-font-size-13);
    --v2-type-small-size: var(--v2-font-size-11);
    --v2-type-kpi-size: var(--v2-font-size-30);
    --v2-type-table-size: var(--v2-font-size-12);

    /* ---------------------------------------------------------
       04 | Spacing scale
       --------------------------------------------------------- */
    --v2-space-0: 0;
    --v2-space-1: 4px;
    --v2-space-2: 8px;
    --v2-space-3: 12px;
    --v2-space-4: 16px;
    --v2-space-5: 20px;
    --v2-space-6: 24px;
    --v2-space-7: 28px;
    --v2-space-8: 32px;
    --v2-space-10: 40px;

    /* ---------------------------------------------------------
       05 | Radius / Shadow
       --------------------------------------------------------- */
    --v2-radius-xs: 6px;
    --v2-radius-sm: 8px;
    --v2-radius-md: 10px;
    --v2-radius-lg: 12px;
    --v2-radius-xl: 16px;
    --v2-radius-pill: 999px;

    --v2-shadow-xs:
        0 1px 2px rgba(11, 41, 64, 0.04);
    --v2-shadow-card:
        0 4px 14px rgba(11, 41, 64, 0.055);
    --v2-shadow-floating:
        0 12px 30px rgba(11, 41, 64, 0.13);
    --v2-shadow-focus:
        0 0 0 3px rgba(18, 170, 179, 0.17);

    /* ---------------------------------------------------------
       06 | Control / Density
       --------------------------------------------------------- */
    --v2-control-height-sm: 30px;
    --v2-control-height: 36px;
    --v2-control-height-lg: 44px;

    --v2-table-row-height-compact: 34px;
    --v2-table-row-height: 38px;
    --v2-table-row-height-comfortable: 44px;

    --v2-sidebar-width: 214px;
    --v2-header-height: 96px;

    /* ---------------------------------------------------------
       07 | Motion / Focus
       --------------------------------------------------------- */
    --v2-motion-fast: 120ms;
    --v2-motion-normal: 180ms;
    --v2-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --v2-focus-outline: 2px solid var(--v2-color-brand-500);
    --v2-focus-offset: 2px;
}


/* ============================================================
   Shared visual primitives
   These are additive classes for all future V2 pages.
   Existing Phase 1 selectors will be migrated in DEV-1.14B.
   ============================================================ */

.v2-page {
    color: var(--v2-color-ink-900);
    font-family: var(--v2-font-sans);
    font-size: var(--v2-type-body-size);
}

.v2-page-surface {
    background: var(--v2-color-page);
}

.v2-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-4);

    min-height: 52px;
}

.v2-page-title {
    margin: 0;

    color: var(--v2-color-ink-950);

    font-size: var(--v2-type-page-title-size);
    font-weight: var(--v2-font-weight-bold);
    line-height: var(--v2-line-height-tight);
}

.v2-page-subtitle {
    margin-top: var(--v2-space-1);

    color: var(--v2-color-ink-600);

    font-size: var(--v2-type-small-size);
}

.v2-card,
.v2-panel {
    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-lg);

    background: var(--v2-color-surface);
    box-shadow: var(--v2-shadow-card);
}

.v2-card {
    padding: var(--v2-space-4);
}

.v2-panel {
    overflow: hidden;
}

.v2-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-3);

    min-height: 48px;
    padding: 0 var(--v2-space-4);

    border-bottom: 1px solid var(--v2-color-border-soft);
}

.v2-panel__title {
    color: var(--v2-color-ink-950);

    font-size: var(--v2-type-section-title-size);
    font-weight: var(--v2-font-weight-bold);
}

.v2-kpi-card {
    position: relative;

    min-height: 132px;
    padding: var(--v2-space-5);

    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-lg);

    background: var(--v2-color-surface);
    box-shadow: var(--v2-shadow-card);

    transition:
        transform var(--v2-motion-normal) var(--v2-ease-standard),
        border-color var(--v2-motion-normal) var(--v2-ease-standard),
        box-shadow var(--v2-motion-normal) var(--v2-ease-standard);
}

.v2-kpi-card[role="button"],
button.v2-kpi-card {
    cursor: pointer;
}

.v2-kpi-card[role="button"]:hover,
button.v2-kpi-card:hover {
    transform: translateY(-1px);

    border-color: var(--v2-color-border-strong);
    box-shadow: var(--v2-shadow-floating);
}

.v2-kpi-label {
    color: var(--v2-color-ink-800);

    font-size: var(--v2-type-card-title-size);
    font-weight: var(--v2-font-weight-semibold);
}

.v2-kpi-value {
    margin-top: var(--v2-space-3);

    color: var(--v2-color-ink-950);

    font-size: var(--v2-type-kpi-size);
    font-weight: var(--v2-font-weight-bold);
    line-height: 1;
}

.v2-kpi-note {
    margin-top: var(--v2-space-4);

    color: var(--v2-color-ink-600);

    font-size: var(--v2-type-small-size);
}

.v2-button {
    min-height: var(--v2-control-height);
    padding: 0 var(--v2-space-3);

    border: 1px solid var(--v2-color-border-strong);
    border-radius: var(--v2-radius-sm);

    background: var(--v2-color-surface);
    color: var(--v2-color-ink-800);

    font: inherit;
    font-weight: var(--v2-font-weight-semibold);

    cursor: pointer;

    transition:
        border-color var(--v2-motion-fast) var(--v2-ease-standard),
        background var(--v2-motion-fast) var(--v2-ease-standard),
        color var(--v2-motion-fast) var(--v2-ease-standard);
}

.v2-button:hover {
    border-color: var(--v2-color-brand-500);
    background: var(--v2-color-brand-050);
    color: var(--v2-color-brand-900);
}

.v2-button--primary {
    border-color: var(--v2-color-brand-700);
    background: var(--v2-color-brand-700);
    color: #fff;
}

.v2-button--primary:hover {
    border-color: var(--v2-color-brand-800);
    background: var(--v2-color-brand-800);
    color: #fff;
}

.v2-button--danger {
    border-color: var(--v2-color-danger);
    background: var(--v2-color-danger);
    color: #fff;
}

.v2-input,
.v2-select {
    width: 100%;
    min-height: var(--v2-control-height-lg);
    padding: 0 var(--v2-space-3);

    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-md);

    background: var(--v2-color-surface);
    color: var(--v2-color-ink-900);

    font: inherit;

    transition:
        border-color var(--v2-motion-fast) var(--v2-ease-standard),
        box-shadow var(--v2-motion-fast) var(--v2-ease-standard);
}

.v2-input::placeholder {
    color: var(--v2-color-ink-500);
}

.v2-input:focus,
.v2-select:focus {
    outline: none;

    border-color: var(--v2-color-brand-500);
    box-shadow: var(--v2-shadow-focus);
}

.v2-toolbar {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);

    min-height: 52px;
    padding: var(--v2-space-2) var(--v2-space-3);

    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-lg);

    background: var(--v2-color-surface);
}

.v2-table-wrap {
    width: 100%;

    overflow: auto;
}

.v2-table {
    width: 100%;

    border-collapse: collapse;

    color: var(--v2-color-ink-900);

    font-size: var(--v2-type-table-size);
}

.v2-table th {
    height: var(--v2-table-row-height-compact);
    padding: 0 var(--v2-space-3);

    border-bottom: 1px solid var(--v2-color-border);

    background: var(--v2-color-surface-muted);
    color: var(--v2-color-ink-600);

    text-align: left;
    font-size: var(--v2-font-size-11);
    font-weight: var(--v2-font-weight-semibold);
    white-space: nowrap;
}

.v2-table td {
    height: var(--v2-table-row-height);
    padding: 0 var(--v2-space-3);

    border-bottom: 1px solid var(--v2-color-border-soft);

    vertical-align: middle;
}

.v2-table tbody tr:hover {
    background: var(--v2-color-brand-050);
}

.v2-badge {
    display: inline-flex;
    align-items: center;

    min-height: 22px;
    padding: 2px 8px;

    border-radius: var(--v2-radius-pill);

    font-size: var(--v2-font-size-10);
    font-weight: var(--v2-font-weight-bold);
    line-height: 1;
    white-space: nowrap;
}

.v2-badge--info {
    background: var(--v2-color-info-bg);
    color: var(--v2-color-info);
}

.v2-badge--success {
    background: var(--v2-color-success-bg);
    color: var(--v2-color-success);
}

.v2-badge--warning {
    background: var(--v2-color-warning-bg);
    color: var(--v2-color-warning);
}

.v2-badge--danger {
    background: var(--v2-color-danger-bg);
    color: var(--v2-color-danger);
}

.v2-badge--purple {
    background: var(--v2-color-purple-bg);
    color: var(--v2-color-purple);
}

.v2-dropdown {
    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-lg);

    background: var(--v2-color-surface);
    box-shadow: var(--v2-shadow-floating);
}

.v2-empty-state,
.v2-loading-state {
    display: grid;
    place-items: center;

    min-height: 180px;
    padding: var(--v2-space-6);

    color: var(--v2-color-ink-600);

    text-align: center;
    font-size: var(--v2-font-size-12);
}

.v2-icon-chip {
    display: inline-grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: var(--v2-color-brand-100);
    color: var(--v2-color-brand-700);
}

.v2-icon-chip--blue {
    background: var(--v2-color-info-bg);
    color: var(--v2-color-info);
}

.v2-icon-chip--green {
    background: var(--v2-color-success-bg);
    color: var(--v2-color-success);
}

.v2-icon-chip--orange {
    background: var(--v2-color-warning-bg);
    color: var(--v2-color-warning);
}

.v2-icon-chip--purple {
    background: var(--v2-color-purple-bg);
    color: var(--v2-color-purple);
}


/* ============================================================
   Accessibility / motion
   ============================================================ */

.v2-button:focus-visible,
.v2-kpi-card[role="button"]:focus-visible,
button.v2-kpi-card:focus-visible {
    outline: var(--v2-focus-outline);
    outline-offset: var(--v2-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    .v2-button,
    .v2-kpi-card {
        transition: none;
    }
}


/* ============================================================
   DEV-1.14D-2 | Shared Back Button
   All independent Workspace pages should consume .v2-back-button.
   Current MA-05 / standard-list uses the same shared visual owner.
   ============================================================ */

.v2-back-button {
    min-width: 122px;
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 18px;

    border: 1px solid var(--v2-color-brand-800);
    border-radius: var(--v2-radius-md);

    background:
        linear-gradient(
            180deg,
            var(--v2-color-brand-700) 0%,
            var(--v2-color-brand-900) 100%
        );

    color: #fff;

    box-shadow:
        0 6px 14px
        rgba(2, 74, 89, 0.20);

    font: inherit;
    font-size: var(--v2-font-size-16);
    font-weight: var(--v2-font-weight-bold);
    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--v2-motion-fast) var(--v2-ease-standard),
        background var(--v2-motion-fast) var(--v2-ease-standard),
        box-shadow var(--v2-motion-fast) var(--v2-ease-standard);
}

.v2-back-button:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            var(--v2-color-brand-800) 0%,
            var(--v2-color-brand-950) 100%
        );

    color: #fff;

    box-shadow:
        0 8px 18px
        rgba(2, 74, 89, 0.24);
}

.v2-back-button:focus-visible {
    outline: var(--v2-focus-outline);
    outline-offset: 3px;
}

.v2-back-button__arrow {
    display: inline-block;

    transform: translateY(-1px);

    font-size: 22px;
    font-weight: var(--v2-font-weight-regular);
    line-height: 1;
}

@media (max-width: 980px) {
    .v2-back-button {
        min-width: 108px;
        min-height: 46px;

        padding: 0 14px;

        font-size: var(--v2-font-size-14);
    }
}