:root {
    --brand: #006ab4;
    --brand-hover: #005a9a;
    --background: hsl(0 0% 100%);
    --foreground: hsl(240 10% 3.9%);
    --muted: hsl(220 14% 97.5%);
    --muted-foreground: hsl(240 3.8% 46.1%);
    --border: hsl(240 5.9% 90%);
    --input: hsl(240 5.9% 90%);
    --ring: hsl(240 5.9% 10%);
    --primary: var(--brand);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(240 4.8% 95.9%);
    --secondary-foreground: hsl(240 5.9% 10%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --accent: hsl(240 4.8% 95.9%);
    --accent-foreground: hsl(240 5.9% 10%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(240 10% 3.9%);
    --radius: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--muted);
    color: var(--foreground);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ── Typography ── */
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }

/* ── Flash messages (macOS-style fixed notifications) ── */
.flash-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
}

.flash {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.flash-success {
    background: rgba(255, 255, 255, 0.95);
    color: hsl(142 72% 29%);
    border-color: hsl(142 69% 85%);
}
.flash-error {
    background: rgba(255, 255, 255, 0.95);
    color: hsl(0 74% 42%);
    border-color: hsl(0 84% 89%);
}

@keyframes notification-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes notification-fade-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}
.flash-animate-in {
    animation: notification-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.flash-animate-out {
    animation: notification-fade-out 0.25s ease-in forwards;
}

/* ── Search ── */
.search-bar {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}
.search-bar .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    color: var(--muted-foreground);
    pointer-events: none;
    flex-shrink: 0;
}
.search-bar .search-icon svg { width: 18px; height: 18px; }
.search-bar input {
    width: 100%;
    padding: 14px 16px 14px 12px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    outline: none;
    background: transparent;
    color: var(--foreground);
}
.search-bar input::placeholder { color: var(--muted-foreground); }
.search-bar:focus-within {
    box-shadow: 0 0 0 2px var(--ring);
}

/* ── Card / Section (collapsible) ── */
.section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
}
.section-toggle {
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--border);
}
.section-toggle::-webkit-details-marker { display: none; }
.section-toggle h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.section-toggle .fold-icon { display: inline-flex; color: var(--muted-foreground); transition: transform 0.2s ease; flex-shrink: 0; }
.section-toggle .fold-icon svg { width: 16px; height: 16px; }
.section:not([open]) .section-toggle .fold-icon { transform: rotate(-90deg); }
.section:not([open]) .section-toggle { border-bottom: none; }

/* ── Badge ── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.6;
}
.badge-unknown { background: hsl(24 10% 93%); color: hsl(24 10% 40%); }
.badge-whitelist { background: hsl(142 76% 94%); color: hsl(142 72% 29%); }
.badge-blacklist { background: hsl(0 86% 95%); color: hsl(0 74% 42%); }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border-bottom: 1px solid var(--border);
}
th:first-child { padding-left: 20px; padding-right: 8px; }
td {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: 0.8125rem;
}
td:first-child { padding-left: 20px; padding-right: 8px; }
tr:last-child td { border-bottom: none; }
tr.hidden-row { display: none; }
tbody tr:hover td { background: var(--accent); }

/* ── Row animations ── */
.row-animating {
    will-change: opacity, transform;
    backface-visibility: hidden;
}
.cell-flash {
    transition: background-color 0.8s ease;
    background-color: hsl(48 96% 89%) !important;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
    line-height: 1.25;
}
.btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-sm { padding: 5px 12px; font-size: 0.75rem; }
.btn-xs { padding: 5px 10px; font-size: 0.6875rem; }
.btn-xs svg { width: 12px; height: 12px; }

.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--brand-hover); }

.btn-outline { background: var(--background); color: var(--foreground); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: hsl(240 4.8% 90%); }

.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }

.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-destructive:hover { background: hsl(0 84.2% 50%); }

.btn-destructive-ghost { background: transparent; color: var(--destructive); }
.btn-destructive-ghost:hover { background: hsl(0 86% 97%); }

.btn-whitelist { background: hsl(142 76% 97%); color: hsl(142 60% 30%); border: 1px solid hsl(142 50% 82%); transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s; }
.btn-whitelist:hover:not(:disabled) { background: hsl(142 76% 93%); }

.btn-blacklist { background: hsl(0 76% 97%); color: hsl(0 60% 40%); border: 1px solid hsl(0 50% 86%); transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s; }
.btn-blacklist:hover:not(:disabled) { background: hsl(0 76% 93%); }

.btn-whitelist:disabled, .btn-blacklist:disabled {
    background: var(--muted);
    color: var(--muted-foreground);
    border-color: var(--border);
    cursor: default;
    opacity: 0.6;
}

.btn-group { display: inline-flex; gap: 6px; align-items: center; }

/* ── Loading state ── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.btn-loading {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}
.btn-loading .spinner {
    animation: spin 0.7s linear infinite;
    width: 13px;
    height: 13px;
}

/* ── Actions cell ── */
.cell-actions {
    text-align: right;
    white-space: nowrap;
}
.cell-actions .actions-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Batch bar ── */
.batch-bar {
    padding: 8px 20px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}
.batch-bar label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted-foreground); font-size: 0.75rem; }
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary);
    border-radius: 3px;
}

/* ── Workflow info ── */
.workflow-info {
    margin-bottom: 24px;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    border: none;
    background: none;
    border-radius: 0;
}
.workflow-info summary {
    padding: 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}
.workflow-info summary:hover { color: var(--foreground); text-decoration-color: var(--muted-foreground); }
.workflow-info summary::-webkit-details-marker { display: none; }
.workflow-info summary .chevron { transition: transform 0.15s; display: inline-flex; }
.workflow-info summary .chevron svg { width: 14px; height: 14px; }
.workflow-info[open] summary .chevron { transform: rotate(90deg); }
.workflow-info .workflow-content {
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.workflow-info h1 { font-size: 0.875rem; margin-bottom: 8px; color: var(--foreground); }
.workflow-info ol, .workflow-info ul { padding-left: 20px; margin-bottom: 8px; }
.workflow-info li { margin-bottom: 4px; }
.workflow-info p { margin-bottom: 8px; }
.workflow-info strong { color: var(--foreground); }

/* ── ROME codes section ── */
.rome-codes-section {
    margin-top: 24px;
    padding-top: 0;
}
.rome-codes-section summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-foreground);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}
.rome-codes-section summary::-webkit-details-marker { display: none; }
.rome-codes-section summary .chevron {
    transition: transform 0.15s;
    display: inline-flex;
}
.rome-codes-section summary .chevron svg {
    width: 12px;
    height: 12px;
}
.rome-codes-section[open] summary .chevron {
    transform: rotate(90deg);
}
.rome-codes-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}
.rome-codes-table {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.6875rem;
}
.rome-codes-table thead th {
    text-align: left;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 0.625rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--border);
}
.rome-codes-table tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.rome-codes-table tbody tr:last-child td {
    border-bottom: none;
}
.rome-codes-table tbody tr:hover {
    background: var(--accent);
}

/* ── Site logo ── */
.site-logo-bar {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
}
.site-logo { height: 56px; width: auto; margin-bottom: 8px; }

/* ── Page header ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.page-header h1 { margin: 0; }

/* ── Refresh counts button ── */
.btn-refresh {
    background: hsl(240 5.9% 10%);
    color: hsl(0 0% 100%);
    border: none;
    padding: 9px 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 4px;
    gap: 6px;
}
.btn-refresh:hover { background: hsl(240 5.9% 20%); }
.btn-refresh svg { width: 14px; height: 14px; }

.empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

/* ── Three-dot dropdown ── */
.dropdown {
    position: relative;
    display: inline-flex;
}
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted-foreground);
    font-size: 16px;
    transition: background 0.1s;
    line-height: 1;
}
.dropdown-trigger:hover { background: var(--accent); color: var(--foreground); }
.dropdown-trigger svg { width: 15px; height: 15px; }

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    z-index: 50;
    min-width: 180px;
    padding: 4px;
    animation: dropdown-in 0.1s ease-out;
}
.dropdown-menu.open { display: block; }

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    font-size: 0.75rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    cursor: pointer;
    color: var(--foreground);
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}
.dropdown-item:hover { background: var(--accent); }
.dropdown-item--danger { color: var(--destructive); }
.dropdown-item--danger:hover { background: hsl(0 86% 97%); }

.text-muted { color: var(--muted-foreground); }
.font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.75rem; }

/* ── Separator ── */
.dropdown-separator { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Select (shadcn UI style) ── */
.famille-select {
    display: flex;
    height: 36px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--input);
    background-color: var(--background);
    padding: 0 12px 0 12px;
    font-size: 0.8125rem;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.famille-select:hover:not(:disabled) {
    border-color: var(--ring);
    background-color: var(--accent);
}

.famille-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px hsla(240, 5.9%, 10%, 0.1);
}

.famille-select:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--muted);
}

.famille-select option {
    font-size: 0.8125rem;
    padding: 8px 12px;
    background-color: var(--background);
    color: var(--foreground);
}

.famille-select option:disabled {
    color: var(--muted-foreground);
}

.famille-select option:first-child {
    color: var(--muted-foreground);
    font-style: italic;
}

/* Loading state for select */
.famille-select.select-loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
    animation: select-spin 0.8s linear infinite;
}

@keyframes select-spin {
    from { background-position: right 8px center; }
    to { background-position: right 8px center; }
}

/* Dark theme support for select arrow */
@media (prefers-color-scheme: dark) {
    .famille-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }
}

@media (max-width: 768px) {
    .container { padding: 16px 12px; }
    th, td { padding: 8px 12px; }
    .famille-select { font-size: 0.75rem; height: 32px; }
}