/* Admin Styles - Pronoco Design System */

/* Self-hosted fonts (vendored from Google Fonts: Inter v20, Montserrat v31,
   JetBrains Mono v24). URLs are relative to this file, so each frontend's
   base path (/assets/, /vault/assets/, /vault-plus/assets/, /crm/assets/,
   and super-admin's /) resolves correctly. External Google Fonts CDN is
   intentionally not used — the app must work on air-gapped networks and
   must not leak viewer metadata (IP, User-Agent, Referer) to Google on
   every page load. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Canonical tokens — match docs/design/assets/colors_and_type.css. */
    --color-black: #000; --color-white: #FFF;
    --color-teal: #00A6A6;
    /* AA-safe teal for body-size text on light backgrounds (4.6:1 on white).
       Use for links, inline code, and any teal text under 18px (or 14px non-bold).
       See docs/design/pronoco_design_manual_v3.md § Color. */
    --color-teal-text: #006666;
    /* Hover/active go DARKER (manual § Motion & Focus). */
    --color-teal-hover: #008C8C; --color-teal-active: #007373;
    --color-ice-blue: #0077B6;
    --color-blue-hover: #00629A; --color-blue-active: #004D7D;
    --color-coral: #E07A5F; --color-coral-hover: #D96A4F; --color-coral-active: #C85A3F;
    --color-light-gray: #F5F5F5; --color-off-white: #FAFAFA; --color-medium-gray: #555;
    --color-dark-gray: #2E2E2E; --color-border-gray: #E0E0E0;
    --color-success: #00A676; --color-success-active: #008f66;
    --color-warning: #F4A261; --color-warning-hover: #e59548; --color-warning-dark: #c27a30;
    --color-error: #D62828; --color-error-active: #b82020;
    --color-disabled-bg: #E0E0E0; --color-disabled-text: #7A7A7A;
    --focus-ring: 2px solid var(--color-teal); --focus-offset: 2px;
    /* Semantic background tints (used in badges, messages, header badges, highlights) */
    --tint-success: rgba(0,166,118,.15); --tint-success-light: rgba(0,166,118,.1); --tint-success-border: rgba(0,166,118,.3);
    --tint-warning: rgba(244,162,97,.15); --tint-warning-light: rgba(244,162,97,.1); --tint-warning-border: rgba(244,162,97,.3);
    --tint-error: rgba(214,40,40,.15); --tint-error-light: rgba(214,40,40,.1); --tint-error-border: rgba(214,40,40,.3);
    --tint-info: rgba(0,119,182,.15); --tint-info-light: rgba(0,119,182,.1); --tint-info-border: rgba(0,119,182,.3);
    --tint-teal: rgba(0,166,166,.1);
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'JetBrains Mono', 'Courier New', monospace;
    --text-h1: clamp(48px, 5vw, 56px); --text-h2: clamp(32px, 4vw, 40px);
    --text-h3: clamp(24px, 3vw, 28px); --text-h4: clamp(18px, 2vw, 20px);
    --text-body-lg: 18px; --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px;
    --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 2px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.12); --shadow-teal: 0 4px 12px rgba(0,166,166,.2);
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
    --transition-fast: .15s ease; --transition-base: .2s ease;
    /* ── Z-index scale (canonical) ── */
    --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400;
    /* ── Breakpoint tokens (canonical) ── */
    --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
    /* ── Semantic foreground / background / border aliases (canonical) ── */
    --fg-1: var(--color-black); --fg-2: var(--color-dark-gray); --fg-3: var(--color-medium-gray);
    --fg-disabled: var(--color-disabled-text); --fg-inverse: var(--color-white);
    --fg-brand: var(--color-teal); --fg-link: var(--color-teal-text);
    --bg-1: var(--color-white); --bg-2: var(--color-off-white); --bg-3: var(--color-light-gray);
    --bg-inverse: var(--color-dark-gray); --bg-brand: var(--color-teal);
    --border-default: var(--color-border-gray); --border-strong: var(--color-medium-gray); --border-brand: var(--color-teal);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; color: var(--color-dark-gray); background: var(--color-light-gray); min-height: 100vh; }

h1, h2, h3 { font-family: var(--font-heading); color: var(--color-black); }
h4, h5, h6 { font-family: var(--font-body); color: var(--color-dark-gray); }
h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: 1.2; }
h2, h3, h4 { font-weight: var(--weight-semibold); line-height: 1.3; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p { margin-bottom: var(--space-sm); }
a { color: var(--color-teal-text); text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: underline; }
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }
a.btn-primary:hover, a.btn-success:hover, a.btn-danger:hover, a.btn-secondary:hover { color: var(--color-white); }
code { font-family: var(--font-code); font-size: var(--text-body-sm); padding: 2px 6px; background: var(--color-light-gray); color: var(--color-teal-text); border-radius: var(--radius-sm); }

/* Layout */
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

/* Header */
.app-header { background: var(--color-white); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: var(--space-md) 0; }
.header-content, .header-right, .header-api-links, .header-status-bar, .header-status-item { display: flex; align-items: center; }
.header-content { justify-content: space-between; }
.header-right, .header-api-links { gap: var(--space-lg); }
.header-api-links { padding-right: var(--space-md); border-right: 1px solid var(--color-border-gray); gap: var(--space-md); }
.header-status-bar { gap: var(--space-lg); padding-top: var(--space-sm); margin-top: var(--space-sm); border-top: 1px solid var(--color-border-gray); flex-wrap: wrap; font-size: var(--text-body-sm); }
.header-status-item { gap: var(--space-xs); }
.logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo-img { height: 28px; width: auto; }
.logo-text { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--color-dark-gray); }
@media (min-width: 640px) { .logo-img { height: 36px; } }
@media (min-width: 1024px) { .logo-img { height: 40px; } }
.nav { display: flex; gap: var(--space-md); }
.nav-link, .header-link { font-size: var(--text-body-sm); font-weight: var(--weight-medium); text-decoration: none; transition: color var(--transition-base); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.nav-link { color: var(--color-medium-gray); }
.nav-link:hover { color: var(--color-black); text-decoration: none; background: var(--color-light-gray); }
.nav-link.active { color: var(--color-teal-text); }
.nav-link-dev { color: var(--color-ice-blue); font-size: var(--text-caption); opacity: 0.7; }
.nav-link-dev:hover { opacity: 1; color: var(--color-ice-blue); }
.header-link { color: var(--color-teal-text); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.header-link:hover { background: var(--color-light-gray); text-decoration: none; }
.header-status-label { color: var(--color-medium-gray); }
.header-status-value { font-weight: var(--weight-medium); color: var(--color-dark-gray); }
.header-status-badge { font-size: var(--text-caption); font-weight: var(--weight-medium); padding: 2px 8px; border-radius: var(--radius-sm); margin-right: var(--space-xs); }
.header-status-badge-success { background: var(--tint-success-light); color: var(--color-success); }
.header-status-badge-warning { background: var(--tint-warning-light); color: var(--color-warning); }
.status-healthy { color: var(--color-success); }
.status-error { color: var(--color-error); }
.status-dot-inline { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; }
@media (max-width: 640px) { .header-right, .header-api-links { gap: var(--space-sm); } .header-api-links { padding-right: var(--space-sm); } .header-status-bar { gap: var(--space-md); } }

/* Main */
.main-content { flex: 1; padding: var(--space-2xl) 0; padding-top: calc(var(--space-2xl) + 100px); }
.page-title { margin-bottom: var(--space-md); }
.section { margin-bottom: var(--space-md); }
.section-title, .section-header-title { font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--color-black); }
.section-title { margin-bottom: var(--space-sm); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); gap: var(--space-sm); flex-wrap: wrap; }
.section-header-actions, .btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Cards */
.card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-md); transition: box-shadow var(--transition-base); }
.card:hover { box-shadow: var(--shadow-lg); }
.card-bordered { background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-lg); padding: var(--space-md); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-gray); }
.card-title { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-black); }
.card-body { padding: var(--space-sm) 0; }
.card-muted { background: var(--color-light-gray); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); border: none; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base); text-decoration: none; padding: 12px 24px; font-size: var(--text-body); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn:active { box-shadow: none; }
.btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; opacity: .6; box-shadow: none; }
/* Color variants. Hover goes DARKER per manual § Motion & Focus (brighter-on-hover
   drops contrast below AA — see the originally-broken .btn-primary fix). */
.btn-primary { background: var(--color-teal); color: var(--color-white); }
.btn-primary:hover { background: var(--color-teal-hover); box-shadow: var(--shadow-teal); }
.btn-primary:active { background: var(--color-teal-active); }
.btn-secondary { background: var(--color-ice-blue); color: var(--color-white); }
.btn-secondary:hover { background: var(--color-blue-hover); box-shadow: 0 4px 12px var(--tint-info); }
.btn-secondary:active { background: var(--color-blue-active); }
.btn-success { background: var(--color-success); color: var(--color-white); }
.btn-success:hover { background: var(--color-success-active); box-shadow: 0 4px 12px var(--tint-success); }
.btn-success:active { background: var(--color-success-active); }
.btn-danger { background: var(--color-error); color: var(--color-white); }
.btn-danger:hover:not(:disabled) { background: var(--color-error-active); box-shadow: 0 4px 12px var(--tint-error); }
.btn-danger:active { background: var(--color-error-active); }
.btn-warning { background: var(--color-warning); color: var(--color-white); }
.btn-warning:hover { background: var(--color-warning-hover); box-shadow: 0 2px 8px var(--tint-warning); }
.btn-outline { background: transparent; border: 2px solid var(--color-ice-blue); color: var(--color-ice-blue); padding: 10px 22px; }
.btn-outline:hover { background: var(--color-ice-blue); color: var(--color-white); }
.btn-subtle { background: transparent; border: 1.5px solid var(--color-border-gray); color: var(--color-dark-gray); }
.btn-subtle:hover { border-color: var(--color-teal); color: var(--color-teal-text); background: rgba(0,166,166,.04); }
.btn-ghost { background: transparent; color: var(--color-medium-gray); padding: 10px 16px; }
.btn-ghost:hover { background: var(--color-light-gray); color: var(--color-dark-gray); }
/* Size variants */
.btn-sm { padding: 8px 16px; font-size: var(--text-body-sm); min-height: 36px; }
.btn-xs { padding: 4px 10px; font-size: var(--text-caption); min-height: 28px; }
.btn-lg { padding: 16px 32px; font-size: var(--text-body-lg); }
.btn-full { width: 100%; }

/* Forms */
.form-group { margin-bottom: var(--space-sm); }
.form-label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-dark-gray); }
.form-input { width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-dark-gray); background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.form-input:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--tint-teal); }
.form-input.error { border-color: var(--color-error); }
.form-input.error:focus { box-shadow: 0 0 0 3px var(--tint-error-light); }
.form-input:disabled { background: var(--color-light-gray); color: var(--color-disabled-text); cursor: not-allowed; }
.form-helper { margin-top: var(--space-xs); font-size: var(--text-caption); color: var(--color-medium-gray); }
.form-error { margin-top: var(--space-xs); font-size: var(--text-caption); color: var(--color-error); }
.form-row { display: flex; gap: var(--space-lg); align-items: flex-start; }
.form-row .form-group { flex: 1; }
.form-input-sm { max-width: 120px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .form-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .form-grid-4 { grid-template-columns: 1fr; } }
.checkbox-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: var(--text-body-sm); }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
select.form-input, .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.form-select { width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-dark-gray); background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); }
.search-box { position: relative; }
.search-box .form-input { padding-left: 16px; padding-right: 40px; background: var(--color-off-white); border-color: transparent; }
.search-box .form-input:focus { background: var(--color-white); border-color: var(--color-teal); }

/* Messages & Alerts
   Canonical structure per docs/design/assets/components.css § Alerts: icon + body + title + desc.
   The icon circle is auto-injected via ::before so simple <div class="alert error">msg</div> callsites
   render with the required icon + shape + color cue (manual § Accessibility — never color alone).
   Explicit <div class="icon">…</div> children opt out of the auto-injection via :has(). */
.alert { background: var(--color-white); border: 1px solid var(--color-border-gray); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--space-md) 20px var(--space-md) 18px; display: flex; gap: 14px; align-items: flex-start; }
.alert::before { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 16px; line-height: 1; color: var(--color-white); }
.alert:has(> .icon)::before { display: none; }
.alert > .icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 16px; line-height: 1; color: var(--color-white); }
.alert > .body { flex: 1; min-width: 0; }
.alert > .body .title { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); color: var(--color-black); margin: 0 0 var(--space-xs); }
.alert > .body .desc { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: 13px; color: var(--color-dark-gray); margin: 0; line-height: 1.5; }
/* Severity: chained class (canonical) + hyphenated alias (legacy) */
.alert.success, .alert-success { border-left-color: var(--color-success); }
.alert.success::before, .alert-success::before { content: "\2713"; background: var(--color-success); }
.alert.success > .icon { background: var(--color-success); }
.alert.warning, .alert-warning { border-left-color: var(--color-warning); }
.alert.warning::before, .alert-warning::before { content: "!"; background: var(--color-warning); }
.alert.warning > .icon { background: var(--color-warning); }
.alert.error, .alert-error, .alert.danger, .alert-danger { border-left-color: var(--color-error); }
.alert.error::before, .alert-error::before, .alert.danger::before, .alert-danger::before { content: "\2715"; background: var(--color-error); }
.alert.error > .icon, .alert.danger > .icon { background: var(--color-error); }
.alert.info, .alert-info { border-left-color: var(--color-ice-blue); }
.alert.info::before, .alert-info::before { content: "i"; background: var(--color-ice-blue); font-style: italic; }
.alert.info > .icon { background: var(--color-ice-blue); }
.message { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-body-sm); }
.message-success { background: var(--tint-success-light); color: var(--color-success); border: 1px solid var(--tint-success-border); }
.message-warning { background: var(--tint-warning-light); color: var(--color-warning-dark); border: 1px solid var(--tint-warning-border); }
.message-error { background: var(--tint-error-light); color: var(--color-error); border: 1px solid var(--tint-error-border); }
.message-info { background: var(--tint-info-light); color: var(--color-ice-blue); border: 1px solid var(--tint-info-border); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: var(--weight-semibold); border-radius: var(--radius-pill); background: var(--color-teal); color: var(--color-white); letter-spacing: 0.02em; }
.badge-secondary { background: #E0E0E0; color: var(--color-dark-gray); }
.badge-success { background: var(--tint-success); color: var(--color-success); }
.badge-warning { background: var(--tint-warning); color: var(--color-warning-dark); }
.badge-error { background: var(--tint-error); color: var(--color-error); }
.badge-info { background: var(--tint-info); color: var(--color-ice-blue); }
.badge-outline { background: transparent; border: 1px solid var(--color-border-gray); color: var(--color-medium-gray); }
.badge-info-outline { background: transparent; border: 1px solid var(--color-ice-blue); color: var(--color-ice-blue); }
.badge-warning-outline { background: transparent; border: 1px solid var(--color-warning-dark); color: var(--color-warning-dark); }
.badge-error-outline { background: transparent; border: 1px solid var(--color-error); color: var(--color-error); }

/* Status */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot-success { background: var(--color-success); }
.status-dot-warning { background: var(--color-warning); }
.status-dot-error { background: var(--color-error); }
.status-dot-info { background: var(--color-ice-blue); }
.status-row { display: flex; align-items: center; gap: var(--space-sm); }

/* Loading & Empty */
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-border-gray); border-top-color: var(--color-teal); border-radius: 50%; animation: spin 1s linear infinite; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg); text-align: center; }
.loading-text { margin-top: var(--space-md); color: var(--color-medium-gray); }
.empty-state { color: var(--color-medium-gray); }
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: .5; }
.empty-state-title { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); color: var(--color-dark-gray); margin-bottom: var(--space-sm); }
.empty-state-description { font-size: var(--text-body-sm); }

/* Lists */
.item-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Item Cards */
.item-card, .admin-card, .user-card-enhanced, .context-card, .audit-entry-card { padding: var(--space-sm) var(--space-md); background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.item-card:hover, .admin-card:hover, .user-card-enhanced:hover, .context-card:hover { border-color: rgba(0,166,166,.3); box-shadow: 0 2px 8px rgba(0,166,166,.06); }
.item-card, .admin-card { display: flex; align-items: flex-start; justify-content: space-between; }
.user-card-enhanced, .context-card { display: flex; flex-direction: column; }
.user-card-enhanced { gap: var(--space-md); }
.context-card { gap: var(--space-sm); }
.admin-card-info, .context-card-info { flex: 1; min-width: 0; }
.admin-card-email { font-weight: var(--weight-semibold); color: var(--color-black); margin-bottom: var(--space-xs); }
.admin-card-name, .admin-card-meta, .context-card-desc, .context-card-meta { font-size: var(--text-body-sm); color: var(--color-medium-gray); }
.admin-card-meta, .context-card-meta { font-size: var(--text-caption); }
.context-card-desc { margin-top: var(--space-xs); }
.admin-card-actions, .context-card-header-actions, .context-card-edit-actions { display: flex; gap: var(--space-sm); }
.context-card-header-actions { align-items: center; flex-shrink: 0; }
.admin-card-status { margin-left: var(--space-md); }
.user-card-header, .context-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.user-card-body { padding-top: var(--space-sm); }
.user-card-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; padding-top: var(--space-sm); margin-top: var(--space-sm); }
.context-card-url { font-family: var(--font-code); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--color-teal-text); word-break: break-all; }
.context-card-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border-gray); }
.context-card-meta-section { display: flex; flex-direction: column; gap: var(--space-xs); }
.context-card-meta-title { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-dark-gray); text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--space-xs); }
.context-card-meta-item { display: flex; gap: var(--space-sm); font-size: var(--text-caption); }
.context-card-meta-item .meta-label { color: var(--color-medium-gray); min-width: 90px; }
.context-card-meta-item .meta-value { color: var(--color-dark-gray); font-family: var(--font-code); }
.context-card-edit-form { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border-gray); }
.context-card-edit-actions { margin-top: var(--space-sm); }
.context-card-actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-end; }
.endpoint-item { padding: var(--space-md); background: var(--color-light-gray); border-radius: var(--radius-md); border: 1px solid var(--color-border-gray); }
.endpoint-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.endpoint-path { font-family: var(--font-code); font-size: var(--text-body-sm); color: var(--color-dark-gray); }
.endpoint-description { font-size: var(--text-body-sm); margin-bottom: var(--space-xs); }
.endpoint-auth { font-size: var(--text-caption); color: var(--color-medium-gray); font-style: italic; }

/* Striped Row Lists */
.row-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border-gray); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); overflow: hidden; }
.audit-row, .document-row, .user-row { display: flex; align-items: center; gap: var(--space-sm); background: var(--color-white); font-size: var(--text-body-sm); transition: background var(--transition-fast); }
.audit-row { padding: var(--space-sm) var(--space-md); min-height: 40px; }
.document-row { padding: 6px var(--space-sm); }
.user-row { gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.audit-row:hover, .user-row:hover { background: var(--color-off-white); }
.document-row:hover { background: var(--color-light-gray); }
/* Document row: expand/collapse toggle */
.version-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: var(--radius-sm); padding: 0; cursor: pointer; color: var(--color-medium-gray); transition: color var(--transition-fast), background var(--transition-fast); }
.version-toggle:hover { background: var(--color-light-gray); color: var(--color-dark-gray); }
.version-toggle-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: transform var(--transition-fast); }
.version-toggle-icon svg { width: 16px; height: 16px; }
.version-toggle-open .version-toggle-icon { transform: rotate(180deg); }
/* Audit row details */
.audit-row-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; }
.audit-row-icon-ok { color: var(--color-success); }
.audit-row-icon-fail { color: var(--color-error); }
.audit-row-main { flex: 1; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-width: 0; }
.audit-row-event { font-weight: var(--weight-semibold); color: var(--color-black); white-space: nowrap; }
.audit-row-meta, .audit-row-sep { color: var(--color-medium-gray); font-size: var(--text-caption); }
.audit-row-value { font-family: var(--font-code); font-size: var(--text-caption); color: var(--color-dark-gray); }
.audit-row-ip { margin-left: auto; }
.audit-row-time { flex-shrink: 0; color: var(--color-medium-gray); font-size: var(--text-caption); white-space: nowrap; }
.audit-entry-changes { padding: var(--space-xs) var(--space-md); background: #F0F9FF; font-size: var(--text-caption); font-family: var(--font-code); color: var(--color-black); }
.audit-entry-error { padding: var(--space-xs) var(--space-md); background: #FEF2F2; font-size: var(--text-caption); color: var(--color-error); }
.audit-detail-label { color: var(--color-medium-gray); }

/* Audit Filter Bar & Panel */
.audit-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.audit-filter-bar-left { display: flex; align-items: center; gap: var(--space-sm); }
.audit-filter-panel { background: var(--color-off-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.audit-filter-row { display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.audit-filter-field { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
.audit-filter-label { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-medium-gray); }
.audit-filter-input { padding: 6px 10px !important; font-size: var(--text-body-sm) !important; min-height: 32px; }
.audit-filter-actions { display: flex; gap: var(--space-xs); align-items: flex-end; flex-shrink: 0; }

/* Event Filter Dropdown */
.event-filter-container { position: relative; }
.event-filter-button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; }
.event-filter-arrow { margin-left: var(--space-sm); font-size: var(--text-caption); color: var(--color-medium-gray); }
.event-filter-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; z-index: var(--z-dropdown); margin-top: var(--space-xs); min-width: 220px; }
.event-filter-item { display: flex; align-items: center; gap: var(--space-sm); padding: 4px var(--space-md); cursor: pointer; transition: background var(--transition-fast); font-size: var(--text-body-sm); }
.event-filter-item:hover { background: var(--color-light-gray); }
.event-filter-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-teal); cursor: pointer; }

/* Permission Tags */
.permission-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.permission-tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-light-gray); border-radius: var(--radius-sm); font-family: var(--font-code); font-size: var(--text-caption); color: var(--color-teal-text); }
.permission-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: transparent; color: var(--color-error); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 50%; transition: background var(--transition-fast); }
.permission-tag-remove:hover { background: var(--tint-error-light); }

/* Pattern Selector */
.pattern-selector { border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; }
.pattern-selector-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background var(--transition-fast); }
.pattern-selector-item:hover { background: var(--color-light-gray); }
.pattern-selector-item.selected { background: var(--tint-teal); }
.pattern-selector-checkbox { width: 20px; height: 20px; accent-color: var(--color-teal); }
.pattern-selector-label { flex: 1; font-family: var(--font-code); font-size: var(--text-body-sm); }

/* Navigation — shared base for section pills and tab buttons */
.tab-btn, .section-btn { display: flex; align-items: center; gap: var(--space-sm); border: none; background: transparent; color: var(--color-medium-gray); font-family: var(--font-body); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--transition-base); white-space: nowrap; }
.tab-btn:hover, .section-btn:hover { color: var(--color-dark-gray); }
.tab-icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-medium-gray); }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Section pills (top-level, inside dashboard header) */
.section-nav { display: flex; gap: var(--space-sm); padding: var(--space-xs); background: var(--color-off-white); border-radius: var(--radius-lg); }
.section-btn { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-size: var(--text-body); }
.section-btn:hover { background: var(--color-white); }
.section-btn.active { color: var(--color-teal-text); background: var(--color-white); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); }
/* Tab underline buttons */
.tab-container { display: flex; flex-direction: column; min-height: calc(100vh - 200px); }
.tab-nav { display: flex; gap: 0; background: var(--color-white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-border-gray); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn { justify-content: center; padding: var(--space-md) var(--space-lg); min-height: 52px; border-bottom: 2px solid transparent; border-radius: 0; font-size: var(--text-body-sm); margin-bottom: -1px; position: relative; }
.tab-btn:hover { background: var(--color-off-white); }
.tab-btn.active { color: var(--color-teal-text); border-bottom-color: var(--color-teal); background: transparent; font-weight: var(--weight-semibold); }
.tab-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: var(--weight-bold); border-radius: var(--radius-pill); background: var(--color-light-gray); color: var(--color-medium-gray); }
.tab-btn.active .tab-btn-count { background: var(--tint-teal); color: var(--color-teal-text); }
.tab-content { flex: 1; background: var(--color-white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-md); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media (max-width: 640px) { .dashboard-header-main { flex-direction: column; align-items: stretch; } .dashboard-header-right { justify-content: space-between; } .section-nav { justify-content: center; } .tab-nav { flex-wrap: wrap; } .tab-btn { flex: 1 1 calc(50% - 2px); min-width: unset; padding: var(--space-sm) var(--space-md); font-size: var(--text-caption); } }

/* Dashboard & Admin */
.dashboard-header { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-md); }
.dashboard-header-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dashboard-header-right { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.dashboard-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-bold); margin: 0; color: var(--color-black); letter-spacing: -0.01em; }
.admin-details { background: var(--color-off-white); border-radius: var(--radius-md); padding: var(--space-md); }
.admin-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border-gray); }
.detail-row:last-child { border-bottom: none; }
/* Grid-cell detail item: label on top (small gray), value below. `min-width: 0`
   lets long values wrap inside the grid track instead of overflowing into the
   next column (which caused the filename / size / type row to overlap). */
.detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-label { color: var(--color-medium-gray); font-size: var(--text-body-sm); }
.detail-value { font-weight: var(--weight-medium); color: var(--color-black); overflow-wrap: anywhere; }

/* WebAuthn */
.webauthn-prompt { text-align: center; padding: var(--space-2xl); }
.webauthn-icon { font-size: 4rem; margin-bottom: var(--space-lg); }
.webauthn-title { font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--color-black); margin-bottom: var(--space-sm); }
.webauthn-description { color: var(--color-medium-gray); margin-bottom: var(--space-lg); }

/* Super Admin */
.mtls-banner { background: linear-gradient(90deg, var(--color-success) 0%, #00C9A7 100%); color: var(--color-white); padding: var(--space-xs) 0; font-size: var(--text-body-sm); font-weight: var(--weight-medium); text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); }
.mtls-banner .container { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mtls-icon { display: inline-block; vertical-align: middle; }
.app-container.super-admin .app-header { top: 26px; border-bottom: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.app-container.super-admin .main-content { padding-top: calc(var(--space-2xl) + 126px); }
.app-container.super-admin .logo-text { color: var(--color-success); }
.app-container.super-admin .logo:hover .logo-text { color: #00C9A7; }

/* Utilities */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-medium-gray); }
.text-bold { font-weight: 600; }
.font-mono { font-family: monospace; font-size: 12px; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.list-muted { margin-left: var(--space-lg); margin-top: var(--space-sm); color: var(--color-medium-gray); }
.list-muted li { margin-bottom: var(--space-xs); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-overlay); padding: var(--space-lg); }
.modal-content { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-lg); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-title { font-size: var(--text-h4); font-weight: var(--weight-semibold); margin-bottom: var(--space-sm); }

/* Responsive */
@media (max-width: 767px) {
    .hide-mobile { display: none; }
    .btn-group { flex-direction: column; }
    .admin-card { flex-direction: column; gap: var(--space-md); }
    .admin-card-actions { width: 100%; }
    .admin-card-actions .btn { flex: 1; }
}

/* Landing Page */
.landing-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-off-white); margin: calc(var(--space-2xl) * -1) calc(var(--space-lg) * -1); padding: var(--space-xl); }
.landing-content { text-align: center; max-width: 420px; width: 100%; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2xl) var(--space-xl); }
.landing-logo { width: 72px; margin: 0 auto var(--space-lg); }
.landing-logo img { width: 100%; height: auto; }
.landing-title { font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--color-black); margin-bottom: var(--space-xs); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.landing-instance { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--color-medium-gray); }
.landing-tagline { font-family: var(--font-heading); font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-teal-text); letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--space-sm); }
.landing-description { font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-medium-gray); margin-bottom: var(--space-lg); }
.landing-page .btn-lg { padding: 12px var(--space-xl); font-size: var(--text-body); width: 100%; max-width: 280px; }
.landing-features { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-gray); display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; }
.landing-feature { display: flex; align-items: center; gap: var(--space-xs); font-size: 11px; color: var(--color-medium-gray); }
.landing-feature .feature-icon { width: 16px; height: 16px; fill: var(--color-teal); }
.landing-register-link { margin-top: var(--space-sm); font-size: var(--text-caption); }
.landing-register-link .link { color: var(--color-teal-text); }
.landing-footer { margin-top: var(--space-lg); font-size: 11px; color: var(--color-medium-gray); }
.landing-footer a { color: var(--color-teal-text); }

/* ClearVault Admin Styles */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.project-card { cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.project-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.project-meta { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); flex-wrap: wrap; }
.documents-view, .users-view, .settings-view { padding: var(--space-sm) 0; }
.toolbar { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.folder-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.folder-item { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px var(--space-sm); background: var(--color-light-gray); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-body-sm); transition: background var(--transition-fast); }
.folder-item:hover { background: var(--color-border-gray); }
.folder-icon { display: flex; align-items: center; color: var(--color-teal-active); }
.folder-icon .icon-sm { color: var(--color-teal-active); }
.folder-name { font-weight: var(--weight-medium); font-size: var(--text-body-sm); }
/* Document/user row details (vault-specific) */
.document-icon { display: flex; align-items: center; color: var(--color-medium-gray); }
.document-info { flex: 1; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.document-title { font-weight: var(--weight-medium); font-size: var(--text-body-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-desc { font-size: var(--text-caption); color: var(--color-medium-gray); }
.document-meta { flex-shrink: 0; font-size: var(--text-caption); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-body-sm); margin-bottom: var(--space-sm); }
.breadcrumb-item { cursor: pointer; color: var(--color-medium-gray); transition: color var(--transition-fast); }
.breadcrumb-item:hover { color: var(--color-teal); }
.breadcrumb-item.active { color: var(--color-dark-gray); font-weight: var(--weight-medium); cursor: default; }
.breadcrumb-separator { color: var(--color-border-gray); font-size: var(--text-caption); }
.user-info { flex: 1; display: flex; align-items: center; gap: var(--space-sm); }
.user-primary { display: flex; align-items: center; flex-wrap: wrap; }
.user-secondary { display: flex; align-items: center; gap: var(--space-sm); }
.user-email { font-weight: var(--weight-medium); font-size: var(--text-body-sm); }
.user-name { font-size: var(--text-body-sm); color: var(--color-medium-gray); }
.user-meta { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.user-actions { flex-shrink: 0; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-border-gray); font-size: var(--text-body-sm); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: var(--weight-medium); color: var(--color-medium-gray); }
.settings-value { color: var(--color-dark-gray); }
.section-header-title-group { display: flex; align-items: center; gap: var(--space-sm); }

/* Footer — thin gray bar, slide-footer pattern from pronoco_design_manual_v3.md */
.app-footer { background: var(--color-light-gray); color: var(--color-medium-gray); border-top: 1px solid var(--color-border-gray); padding: var(--space-sm) 0; font-size: var(--text-caption); }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.footer-links { display: flex; gap: var(--space-md); }
.footer-links a { color: var(--color-medium-gray); font-size: var(--text-caption); text-decoration: none; transition: color var(--transition-base); }
.footer-links a:hover { color: var(--color-teal); text-decoration: none; }
.footer-copyright { color: var(--color-medium-gray); font-size: var(--text-caption); }

/* Schedule Calendar Grid */
.schedule-grid { display: grid; border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-caption); user-select: none; }
.schedule-grid.cols-5 { grid-template-columns: 56px repeat(5, 1fr); }
.schedule-grid.cols-7 { grid-template-columns: 56px repeat(7, 1fr); }
.schedule-grid-header { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-off-white); border-bottom: 2px solid var(--color-border-gray); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); color: var(--color-dark-gray); }
.schedule-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; cursor: pointer; font-size: 11px; border-radius: var(--radius-sm); opacity: 0.4; transition: opacity var(--transition-fast), background var(--transition-fast); }
.schedule-copy-btn:hover { opacity: 1; background: var(--color-border-gray); }
.schedule-time-label { display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px var(--space-sm) 0; font-family: var(--font-code); font-size: 10px; color: var(--color-medium-gray); background: var(--color-off-white); border-right: 1px solid var(--color-border-gray); border-bottom: 1px solid var(--color-border-gray); min-height: 24px; }
.schedule-time-label-half { font-size: 0; }
.schedule-cell { position: relative; min-height: 24px; border-right: 1px solid var(--color-border-gray); border-bottom: 1px solid var(--color-border-gray); cursor: pointer; transition: background var(--transition-fast); }
.schedule-cell:hover { background: rgba(0,166,166,.06); }
.schedule-cell-active { background: var(--tint-success); }
.schedule-cell-active:hover { background: rgba(0,166,118,.25); }
.schedule-cell-inactive { background: var(--color-light-gray); opacity: 0.7; }
.schedule-cell-anchor { background: rgba(0,166,166,.15); outline: 2px dashed var(--color-teal); outline-offset: -2px; animation: pulse-border 1.5s ease-in-out infinite; }
@keyframes pulse-border { 0%, 100% { outline-color: var(--color-teal); } 50% { outline-color: transparent; } }
.schedule-cell-selected { background: rgba(0,119,182,.15); outline: 2px solid var(--color-ice-blue); outline-offset: -2px; z-index: 2; position: relative; overflow: visible; }
.schedule-cell-mid { border-top-color: transparent; }
.schedule-slot-label { display: block; padding: 1px 3px; font-size: 10px; font-family: var(--font-code); color: var(--color-success-active); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-cell-inactive .schedule-slot-label { color: var(--color-medium-gray); }
.schedule-slot-actions { position: absolute; top: 100%; left: 0; z-index: 20; display: flex; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); white-space: nowrap; }
.schedule-hint { font-size: var(--text-caption); color: var(--color-medium-gray); margin-top: var(--space-sm); font-style: italic; }
@media (max-width: 640px) { .schedule-grid { font-size: 10px; } .schedule-grid.cols-5 { grid-template-columns: 44px repeat(5, 1fr); } .schedule-grid.cols-7 { grid-template-columns: 44px repeat(7, 1fr); } .schedule-cell { min-height: 20px; } .schedule-slot-actions { flex-direction: column; } }

/* Accessibility */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-contrast: high) { .btn-primary { background: var(--color-black); border: 2px solid var(--color-black); } .btn-outline { border-width: 3px; } .form-input { border-width: 2px; } .card { border: 2px solid var(--color-black); } }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }