/* Internal admin shell — built on Planetary Talent design tokens.
   Brand rules in force: 8-pt spacing, soft radii, pill buttons, no
   drop shadows, no gradients, sentence case, Phosphor icons only. */

/* ---------- Legacy aliases — keep templates working while the
   semantic token set takes over. New code should reference --pt-*. */
:root {
    --color-rocket-flame:     var(--pt-rocket-flame);
    --color-galactic-seafoam: var(--pt-galactic-seafoam);
    --color-solar-gold:       var(--pt-solar-gold);
    --color-pure-white:       var(--pt-white);
    --color-cosmic-fog:       var(--pt-cosmic-fog);
    --color-lunar-dust:       var(--pt-lunar-dust);
    --color-steel-gray:       var(--pt-steel-gray);
    --color-graphite-core:    var(--pt-graphite-core);
    --color-deep-void:        var(--pt-deep-void);
    --color-retro-blush:      var(--pt-rocket-flame-20);
    --color-red-alert:        var(--pt-red-alert);
    --color-atmosphere-blue:  var(--pt-atmosphere-blue);

    --background:           var(--pt-bg);
    --background-secondary: var(--pt-surface);
    --text-primary:         var(--pt-fg);
    --text-secondary:       var(--pt-fg-muted);
    --border-color:         var(--pt-border);

    /* Spacing/radius aliases on the 8-pt grid */
    --radius-sm: var(--pt-radius-sm);
    --radius-md: var(--pt-radius-md);
    --radius-lg: var(--pt-radius-lg);

    /* Surface tints — flat, derived from brand neutrals */
    --surface-muted:  #f0eceb;
    --surface-strong: var(--pt-lunar-dust);

    /* Accent helpers — paired with their 20% bg, no extra shadows */
    --accent-info-bg:         var(--pt-atmosphere-blue-20);
    --accent-info-bg-strong:  var(--pt-atmosphere-blue-20);
    --accent-info-text:       var(--pt-ink-on-blue-20);
    --accent-info-border:     var(--pt-atmosphere-blue);
    --accent-success-bg:      var(--pt-galactic-seafoam-20);
    --accent-success-bg-strong: var(--pt-galactic-seafoam-20);
    --accent-success-text:    var(--pt-ink-on-seafoam-20);
    --accent-success-border:  var(--pt-galactic-seafoam);
    --accent-warning-bg:      var(--pt-solar-gold-20);
    --accent-warning-bg-strong: var(--pt-solar-gold-20);
    --accent-warning-text:    var(--pt-ink-on-gold-20);
    --accent-warning-border:  var(--pt-solar-gold);
    --accent-danger-bg:       var(--pt-red-alert-20);
    --accent-danger-bg-strong: var(--pt-red-alert-20);
    --accent-danger-text:     var(--pt-ink-on-red-20);
    --accent-danger-border:   var(--pt-red-alert);
}

:root[data-theme="dark"] {
    --surface-muted:  #1a1b1e;
    --surface-strong: #2b2e31;
    --accent-info-text:    var(--pt-atmosphere-blue);
    --accent-success-text: var(--pt-galactic-seafoam);
    --accent-warning-text: var(--pt-solar-gold);
    --accent-danger-text:  var(--pt-red-alert);
}

html, body {
    background-color: var(--pt-bg);
    color: var(--pt-fg);
    font-family: var(--pt-font-body);
    line-height: var(--pt-leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Marketing-only display type — Moret stays out of dense in-product UI. */
.pt-display {
    font-family: var(--pt-font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: var(--pt-leading-tight);
    color: var(--pt-fg);
    margin: 0;
}

.pt-eyebrow {
    font-family: var(--pt-font-body);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--pt-fg-muted);
}

/* ---------- Status badge ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--green {
    background-color: var(--pt-galactic-seafoam-20);
    color: var(--pt-ink-on-seafoam-20);
}

.status-badge--yellow {
    background-color: var(--pt-solar-gold-20);
    color: var(--pt-ink-on-gold-20);
}

.status-badge--red {
    background-color: var(--pt-red-alert-20);
    color: var(--pt-ink-on-red-20);
}

[data-theme="dark"] .status-badge--green { color: var(--pt-galactic-seafoam); }
[data-theme="dark"] .status-badge--yellow { color: var(--pt-solar-gold); }
[data-theme="dark"] .status-badge--red { color: var(--pt-red-alert); }

/* ---------- Metadata labels ---------- */
.ui-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
}

.ui-label {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 4px 10px;
    border-radius: var(--pt-radius-pill);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    background: var(--surface-muted);
    color: var(--pt-fg);
}

.ui-label__icon {
    color: var(--pt-fg-muted);
}

/* ---------- App header ---------- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 110;
    display: flex;
    align-items: center;
    padding: 0 var(--pt-space-4);
    gap: var(--pt-space-2);
    background: var(--pt-bg);
    border-bottom: 1px solid var(--pt-border);
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-env-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--pt-radius-pill);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.header-env-badge[data-env="local"]   { background: var(--pt-solar-gold-20);       color: var(--pt-ink-on-gold-20); }
.header-env-badge[data-env="dev"]     { background: var(--pt-galactic-seafoam-20); color: var(--pt-ink-on-seafoam-20); }
.header-env-badge[data-env="staging"] { background: var(--pt-rocket-flame-20);     color: var(--pt-ink-on-flame-20); }

[data-theme="dark"] .header-env-badge[data-env="local"]   { color: var(--pt-solar-gold); }
[data-theme="dark"] .header-env-badge[data-env="dev"]     { color: var(--pt-galactic-seafoam); }
[data-theme="dark"] .header-env-badge[data-env="staging"] { color: var(--pt-rocket-flame); }

.workspace-tabs {
    display: flex;
    gap: var(--pt-space-1);
    margin-left: var(--pt-space-2);
}

.workspace-tab {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--pt-radius-pill);
    border: 1px solid transparent;
    color: var(--pt-fg-muted);
    text-decoration: none;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.workspace-tab:hover {
    background: var(--pt-surface);
    color: var(--pt-fg);
    text-decoration: none;
}

.workspace-tab.active {
    background: var(--pt-surface);
    border-color: var(--pt-border);
    color: var(--pt-fg);
}

.workspace-tab i {
    font-size: 16px;
}

.header-spacer {
    flex: 1;
}

.header-search-btn {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 6px var(--pt-space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-fg-muted);
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.header-search-btn:hover {
    border-color: var(--pt-fg);
    color: var(--pt-fg);
}

.header-kbd {
    padding: 1px 6px;
    font-size: 11px;
    background: var(--surface-muted);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-xs);
    color: var(--pt-fg-muted);
}

.header-user-greeting {
    font-size: 13px;
    color: var(--pt-fg-muted);
    white-space: nowrap;
}

.header-signout {
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-fg-muted);
    text-decoration: none;
    padding: 6px var(--pt-space-2);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.header-signout:hover {
    border-color: var(--pt-rocket-flame);
    color: var(--pt-rocket-flame);
    text-decoration: none;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: 220px;
    background: var(--pt-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: width var(--pt-dur-base) var(--pt-ease-paper);
}

.sidebar-nav {
    flex: 1;
    padding: var(--pt-space-2);
    overflow-y: auto;
}

.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 10px 12px;
    color: var(--pt-fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--pt-radius-md);
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.sidebar-nav a:hover {
    background: var(--pt-surface);
    text-decoration: none;
}

.sidebar-nav a.active {
    background: var(--pt-rocket-flame-20);
    color: var(--pt-ink-on-flame-20);
    font-weight: 600;
}

[data-theme="dark"] .sidebar-nav a.active {
    color: var(--pt-rocket-flame);
}

.sidebar-nav i {
    font-size: 18px;
    opacity: 0.85;
}

.sidebar-nav a.active i {
    opacity: 1;
}

.nav-section {
    margin-bottom: var(--pt-space-4);
}

.nav-section:last-child {
    margin-bottom: 0;
}

.nav-section-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pt-fg-muted);
    padding: 0 12px;
    margin-bottom: var(--pt-space-2);
}

.sidebar-footer {
    padding: var(--pt-space-2);
    border-top: 1px solid var(--pt-border);
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1);
}

.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: var(--pt-space-2) 12px;
    color: var(--pt-fg-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--pt-radius-md);
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.sidebar-footer-link:hover {
    background: var(--pt-surface);
    color: var(--pt-fg);
    text-decoration: none;
}

.sidebar-footer-link i {
    font-size: 16px;
    opacity: 0.85;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--pt-fg-muted);
    background: none;
    border: none;
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.theme-toggle:hover {
    background: var(--pt-surface);
    color: var(--pt-fg);
}

.theme-toggle i {
    font-size: 16px;
}

/* ---------- Main content ---------- */
.main-content {
    flex: 1;
    margin-left: 220px;
    margin-top: 64px;
    min-height: calc(100vh - 64px);
    transition: margin-left var(--pt-dur-base) var(--pt-ease-paper);
}

/* ---------- Sidebar collapse (desktop only) ---------- */
.sidebar-collapse-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: none;
    border: none;
    color: var(--pt-fg-muted);
    cursor: pointer;
    font-size: 16px;
    border-radius: var(--pt-radius-md);
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper);
}

.sidebar-collapse-toggle:hover {
    background: var(--pt-surface);
    color: var(--pt-fg);
}

.sidebar-collapse-toggle i {
    transition: transform var(--pt-dur-base) var(--pt-ease-paper);
}

@media (min-width: 768px) {
    .sidebar-collapse-toggle { display: inline-flex; }

    html[data-sidebar-collapsed="true"] .sidebar { width: 64px; }
    html[data-sidebar-collapsed="true"] .main-content { margin-left: 64px; }

    html[data-sidebar-collapsed="true"] .sidebar-nav a {
        justify-content: center;
        padding: 10px 8px;
        gap: 0;
    }

    html[data-sidebar-collapsed="true"] .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    html[data-sidebar-collapsed="true"] .nav-section-header {
        opacity: 0;
        height: 1px;
        margin: 0 12px var(--pt-space-2);
        padding: 0;
        background: var(--pt-border);
        overflow: hidden;
        text-indent: -9999px;
    }

    html[data-sidebar-collapsed="true"] .sidebar-collapse-toggle i {
        transform: rotate(180deg);
    }
}

/* ---------- Logo theme switch ---------- */
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark  { display: block; }

/* ---------- Tailwind utility overrides for dark mode ---------- */
html[data-theme="dark"] .bg-white      { background-color: var(--pt-surface) !important; }
html[data-theme="dark"] .bg-gray-50    { background-color: var(--surface-muted) !important; }
html[data-theme="dark"] .bg-gray-100   { background-color: var(--surface-muted) !important; }
html[data-theme="dark"] .bg-gray-200   { background-color: var(--surface-strong) !important; }
html[data-theme="dark"] .bg-gray-500   { background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) !important; }

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 { color: var(--pt-fg) !important; }

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300 { color: var(--pt-fg-muted) !important; }

html[data-theme="dark"] .border-gray-400,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-100 { border-color: var(--pt-border) !important; }

html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--pt-border) !important; }

html[data-theme="dark"] .ring-gray-300,
html[data-theme="dark"] .ring-gray-200 { --tw-ring-color: var(--pt-border) !important; }

html[data-theme="dark"] .placeholder-gray-400::placeholder,
html[data-theme="dark"] .placeholder-gray-500::placeholder { color: var(--pt-fg-muted) !important; }

html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: var(--surface-muted) !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-strong) !important; }

html[data-theme="dark"] .hover\:text-gray-600:hover,
html[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--pt-fg) !important; }

html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-purple-50    { background-color: var(--pt-atmosphere-blue-20) !important; }

html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-blue-200,
html[data-theme="dark"] .bg-indigo-100, html[data-theme="dark"] .bg-indigo-200,
html[data-theme="dark"] .bg-purple-100, html[data-theme="dark"] .bg-purple-200 { background-color: var(--pt-atmosphere-blue-20) !important; }

html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-500, html[data-theme="dark"] .text-blue-400,
html[data-theme="dark"] .text-indigo-800, html[data-theme="dark"] .text-indigo-700, html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-500, html[data-theme="dark"] .text-indigo-400,
html[data-theme="dark"] .text-purple-800, html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-500, html[data-theme="dark"] .text-purple-400 { color: var(--pt-atmosphere-blue) !important; }

html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-indigo-200, html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-purple-200, html[data-theme="dark"] .border-purple-100 { border-color: var(--pt-atmosphere-blue) !important; }

html[data-theme="dark"] .bg-green-50  { background-color: var(--pt-galactic-seafoam-20) !important; }
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-green-200 { background-color: var(--pt-galactic-seafoam-20) !important; }
html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-500, html[data-theme="dark"] .text-green-400 { color: var(--pt-galactic-seafoam) !important; }
html[data-theme="dark"] .border-green-200, html[data-theme="dark"] .border-green-100 { border-color: var(--pt-galactic-seafoam) !important; }

html[data-theme="dark"] .bg-yellow-50  { background-color: var(--pt-solar-gold-20) !important; }
html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-yellow-200 { background-color: var(--pt-solar-gold-20) !important; }
html[data-theme="dark"] .text-yellow-800, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-600,
html[data-theme="dark"] .text-yellow-500, html[data-theme="dark"] .text-yellow-400 { color: var(--pt-solar-gold) !important; }
html[data-theme="dark"] .border-yellow-200, html[data-theme="dark"] .border-yellow-100 { border-color: var(--pt-solar-gold) !important; }

html[data-theme="dark"] .bg-red-50  { background-color: var(--pt-red-alert-20) !important; }
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-red-200 { background-color: var(--pt-red-alert-20) !important; }
html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-400 { color: var(--pt-red-alert) !important; }
html[data-theme="dark"] .border-red-200, html[data-theme="dark"] .border-red-100 { border-color: var(--pt-red-alert) !important; }

html[data-theme="dark"] .hover\:bg-blue-100:hover,
html[data-theme="dark"] .hover\:bg-indigo-100:hover,
html[data-theme="dark"] .hover\:bg-purple-100:hover { background-color: var(--pt-atmosphere-blue-20) !important; }

html[data-theme="dark"] .hover\:bg-green-100:hover  { background-color: var(--pt-galactic-seafoam-20) !important; }
html[data-theme="dark"] .hover\:bg-yellow-100:hover { background-color: var(--pt-solar-gold-20) !important; }
html[data-theme="dark"] .hover\:bg-red-100:hover,
html[data-theme="dark"] .hover\:bg-red-50:hover     { background-color: var(--pt-red-alert-20) !important; }

/* ---------- Action popover ---------- */
.action-popover-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-white);
    background: var(--pt-rocket-flame);
    border: none;
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
    white-space: nowrap;
}

.action-popover-trigger:hover { background: #d95428; }
.action-popover-trigger:active { transform: scale(0.97); }

.action-popover-panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--pt-space-1));
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--pt-space-2);
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    z-index: 50;
}

.action-popover-group-label {
    padding: var(--pt-space-2) 10px var(--pt-space-1);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pt-fg-muted);
}

.action-popover-divider {
    height: 1px;
    margin: var(--pt-space-1) 10px;
    background: var(--pt-border);
    flex-shrink: 0;
}

.action-popover-item {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 10px;
    border-radius: var(--pt-radius-sm);
    text-decoration: none;
    color: var(--pt-fg);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper);
}

.action-popover-item:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.action-popover-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--pt-radius-sm);
    font-size: 16px;
}

.action-popover-icon--info    { background: var(--pt-atmosphere-blue-20);  color: var(--pt-ink-on-blue-20); }
.action-popover-icon--success { background: var(--pt-galactic-seafoam-20); color: var(--pt-ink-on-seafoam-20); }
.action-popover-icon--danger  { background: var(--pt-red-alert-20);        color: var(--pt-ink-on-red-20); }
.action-popover-icon--neutral { background: var(--surface-muted);          color: var(--pt-fg-muted); }

[data-theme="dark"] .action-popover-icon--info    { color: var(--pt-atmosphere-blue); }
[data-theme="dark"] .action-popover-icon--success { color: var(--pt-galactic-seafoam); }
[data-theme="dark"] .action-popover-icon--danger  { color: var(--pt-red-alert); }

.action-popover-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--pt-fg);
}

.action-popover-desc {
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    color: var(--pt-fg-muted);
}

/* ---------- Match filter bar ---------- */
.match-filter-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-3);
}

.match-filter-chip {
    display: inline-flex;
    align-items: stretch;
    font-size: 12px;
    background: var(--pt-surface);
    border: var(--pt-border-hairline);
    border-radius: var(--pt-radius-pill);
    color: var(--pt-fg);
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper),
                background var(--pt-dur-instant) var(--pt-ease-paper);
}

.match-filter-chip:hover { background: var(--surface-muted); }

.match-filter-chip.is-active {
    border-color: var(--pt-rocket-flame);
    color: var(--pt-rocket-flame);
}

.match-filter-chip-body {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 4px 4px 4px 12px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.match-filter-chip-label { font-weight: 500; }

.match-filter-chip-op {
    color: var(--pt-fg-muted);
    font-weight: 400;
}

.match-filter-chip-value {
    color: var(--pt-rocket-flame);
    font-weight: 600;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 2px;
    border-radius: var(--pt-radius-pill);
    color: var(--pt-fg-muted);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
}

.match-filter-chip-remove:hover {
    background: var(--surface-muted);
    color: var(--pt-fg);
    text-decoration: none;
}

.match-filter-add {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pt-fg-muted);
    background: transparent;
    border: 1px dashed var(--pt-border);
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper),
                background var(--pt-dur-instant) var(--pt-ease-paper);
}

.match-filter-add:hover {
    border-style: solid;
    border-color: var(--pt-fg);
    color: var(--pt-fg);
    background: var(--surface-muted);
}

.match-filter-clear {
    font-size: 12px;
    color: var(--pt-fg-muted);
    text-decoration: underline;
    background: none;
    border: none;
    padding: var(--pt-space-1) 6px;
    cursor: pointer;
    font-family: inherit;
}

.match-filter-clear:hover { color: var(--pt-fg); }

.match-filter-popover {
    position: absolute;
    top: calc(100% + var(--pt-space-1));
    left: 0;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--pt-space-2);
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    z-index: 50;
}

.match-filter-popover-search {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-fg);
    font-family: inherit;
}

.match-filter-popover-search:focus {
    outline: none;
    border-color: var(--pt-fg);
}

.match-filter-popover-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.match-filter-popover-item {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 8px 10px;
    border-radius: var(--pt-radius-sm);
    border: none;
    background: none;
    color: var(--pt-fg);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    font-family: inherit;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper);
}

.match-filter-popover-item:hover { background: var(--surface-muted); }

.match-filter-popover-item input[type="checkbox"] {
    accent-color: var(--pt-rocket-flame);
}

.match-filter-popover-count {
    font-size: 11px;
    color: var(--pt-fg-muted);
    margin-left: auto;
}

.match-filter-popover-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pt-space-1);
    margin-top: var(--pt-space-2);
    padding-top: var(--pt-space-2);
    border-top: 1px solid var(--pt-border);
}

.match-filter-range-inputs {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: 6px 4px 10px;
}

.match-filter-range-inputs input {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-fg);
    font-family: inherit;
}

.match-filter-range-inputs input:focus {
    outline: none;
    border-color: var(--pt-fg);
}

.match-filter-apply {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pt-white);
    background: var(--pt-rocket-flame);
    border: none;
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
    font-family: inherit;
}

.match-filter-apply:hover { background: #d95428; }
.match-filter-apply:active { transform: scale(0.97); }

.match-filter-cancel {
    padding: 6px 14px;
    font-size: 12px;
    color: var(--pt-fg-muted);
    background: transparent;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.match-filter-cancel:hover {
    color: var(--pt-fg);
    border-color: var(--pt-fg);
    text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .workspace-tabs        { display: none; }
    .header-user-greeting  { display: none; }
    .header-signout        { display: none; }
    .header-search-btn span { display: none; }
    .header-search-btn .header-kbd { display: none; }
    .header-env-badge      { display: none; }
    .app-header            { padding: 0 12px; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--pt-dur-base) var(--pt-ease-paper);
        z-index: 115;
    }
    .sidebar.is-open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .kanban-col { height: calc(100vh - 320px) !important; }
}

@media (min-width: 768px) {
    .mobile-only       { display: none !important; }
    .sidebar-backdrop  { display: none !important; }
    .review-resume     { display: block !important; }
    .review-details    { display: flex !important; }
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    top: 64px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 114;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pt-dur-base) var(--pt-ease-paper);
}

.sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Environment border overlay ---------- */
body[data-env="local"]::before,
body[data-env="dev"]::before,
body[data-env="staging"]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

body[data-env="local"]::before   { border: 4px solid var(--pt-solar-gold); }
body[data-env="dev"]::before     { border: 4px solid var(--pt-galactic-seafoam); }
body[data-env="staging"]::before { border: 4px solid var(--pt-rocket-flame); }

/* Primary brand-orange button. Defined as hand-written CSS rather than a
   Tailwind utility because Tailwind tree-shaking removes color utilities
   that only appear in JS strings. */
.btn-pt-primary {
    background-color: #ea580c;
    color: var(--color-pure-white, #fff);
}
.btn-pt-primary:hover { background-color: #c2410c; }