/*
 * MedInformer API admin panel.
 *
 * Matches the Share partner portal (apps/medinformer-share): the same
 * mi-* brand palette from its app/globals.css, Geist and Geist Mono,
 * a white collapsible sidebar (PortalShell.tsx) and rounded-2xl cards
 * with a 1px line border on a light grey page.
 *
 * Fonts are self-hosted (the admin CSP only allows font-src 'self'):
 * @fontsource/geist-sans@5.3.0 and @fontsource/geist-mono@5.3.0,
 * latin subset, downloaded from cdn.jsdelivr.net into public/fonts.
 * Licence: SIL Open Font License 1.1 (public/fonts/OFL-geist.txt).
 */

@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/geist-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 800; src: url('../fonts/geist-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/geist-mono-latin-500-normal.woff2') format('woff2'); }

[x-cloak] { display: none !important; }

:root {
    /* Brand palette, copied from medinformer-share/app/globals.css. */
    --mi-blue: #0e71b6;
    --mi-blue-dark: #0b5a92;
    --mi-blue-pale: #e7f1f9;
    --mi-blue-tint: #eaf2f9;
    --mi-green: #1e9e6a;
    --mi-green-pale: #e8f5ec;
    --mi-red: #c62828;
    --mi-red-pale: #fdecea;
    --mi-amber: #f57f17;
    --mi-amber-pale: #fff8e1;
    --mi-text: #1a1a1a;
    --mi-muted: #666666;
    --mi-faint: #98a2ae;
    --mi-page: #f5f7fa;
    --mi-card: #ffffff;
    --mi-line: #e6e9ee;

    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Tailwind's rounded-lg / rounded-xl / rounded-2xl, as the portal uses them. */
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    --sidebar-width: 240px;
    --sidebar-width-collapsed: 68px;
    --content-max: 1024px;
    --focus-ring: 0 0 0 3px rgba(14, 113, 182, 0.25);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mi-text);
    background: var(--mi-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--mi-blue); }

code, pre { font-family: var(--font-mono); }

code {
    font-size: 12px;
    color: var(--mi-muted);
}

button { font-family: inherit; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.svg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Shell (mirrors components/PortalShell.tsx)                          */
/* ------------------------------------------------------------------ */

.shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--sidebar-width);
    height: 100%;
    background: var(--mi-card);
    border-right: 1px solid var(--mi-line);
    transition: width 150ms ease;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 64px;
    flex-shrink: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--mi-line);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sidebar-logo img {
    display: block;
    height: 28px;
    width: auto;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--mi-faint);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--mi-page);
    color: var(--mi-text);
}

.sidebar-close { display: none; }

.sidebar-search {
    padding: var(--space-3) var(--space-3) 0;
}

.sidebar-search form {
    position: relative;
    margin: 0;
}

.sidebar-search form .svg-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mi-faint);
    pointer-events: none;
}

.sidebar-search input[type="search"] {
    width: 100%;
    padding-left: 34px;
    font-size: 13px;
}

.sidebar-search-button { display: none; }

.sidebar-nav {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
    padding: var(--space-3);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--mi-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms, color 150ms;
}

.nav-link:hover {
    background: var(--mi-page);
    color: var(--mi-text);
}

.nav-link.is-active {
    background: var(--mi-blue-pale);
    color: var(--mi-blue);
}

.nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-group > summary {
    list-style: none;
}

.nav-group > summary::-webkit-details-marker { display: none; }

/* A group header shows its children's active state as blue text only,
   like PortalShell's groupActive, not the pale-blue pill. */
.nav-group.is-active > summary,
.nav-group.is-active > summary:hover {
    background: transparent;
    color: var(--mi-blue);
}

.nav-chevron {
    width: 14px;
    height: 14px;
    transition: transform 150ms;
}

.nav-group:not([open]) .nav-chevron {
    transform: rotate(-90deg);
}

.nav-sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-1) 0 0 var(--space-4);
    padding-left: var(--space-3);
    border-left: 1px solid var(--mi-line);
}

.nav-sub .nav-link {
    padding: 8px 12px;
}

.sidebar-foot {
    flex-shrink: 0;
    padding: var(--space-3);
    border-top: 1px solid var(--mi-line);
}

.identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-1);
    min-width: 0;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mi-blue-pale);
    color: var(--mi-blue);
    font-size: 12px;
    font-weight: 800;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.identity-name,
.identity-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--mi-text);
}

.identity-meta {
    font-size: 11px;
    color: var(--mi-faint);
}

.sidebar-foot form { margin: 0; }

.signout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--mi-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.signout .svg-icon { width: 14px; height: 14px; }

.signout:hover {
    background: var(--mi-red-pale);
    color: var(--mi-red);
}

/* Collapsed rail: set on <html> by an inline script in <head> before
   first paint, so a remembered collapse never flashes open. */
.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
.sidebar-collapsed .sidebar-head { justify-content: center; }
.sidebar-collapsed .sidebar-logo,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .nav-sub,
.sidebar-collapsed .identity,
.sidebar-collapsed .signout-label,
.sidebar-collapsed .sidebar-search form { display: none; }
.sidebar-collapsed .sidebar-search-button { display: flex; margin: 0 auto; }
.sidebar-collapsed .nav-link,
.sidebar-collapsed .signout { justify-content: center; }
.sidebar-collapsed .collapse-icon-open { display: none; }
.collapse-icon-closed { display: none; }
.sidebar-collapsed .collapse-icon-closed { display: block; }

.main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-7);
}

.main-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

.mobile-bar,
.sidebar-backdrop { display: none; }

/* Phones and small tablets: the sidebar becomes a slide-out menu. */
@media (max-width: 899px) {
    .shell {
        flex-direction: column;
    }

    .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        flex-shrink: 0;
        padding: 0 var(--space-3) 0 var(--space-4);
        background: var(--mi-card);
        border-bottom: 1px solid var(--mi-line);
    }

    .mobile-bar img { height: 24px; width: auto; display: block; }

    .sidebar,
    .sidebar-collapsed .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform 200ms ease;
    }

    .menu-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(16, 24, 40, 0.35);
    }

    .menu-open .sidebar-backdrop { display: block; }

    /* The collapse rail is a desktop idea; on mobile always show the full menu. */
    .sidebar-toggle { display: none; }
    .sidebar-close { display: inline-flex; }
    .sidebar-collapsed .sidebar-head { justify-content: space-between; }
    .sidebar-collapsed .sidebar-logo { display: flex; }
    .sidebar-collapsed .identity { display: flex; }
    .sidebar-collapsed .nav-label { display: block; }
    .sidebar-collapsed .nav-chevron,
    .sidebar-collapsed .signout-label { display: inline; }
    .sidebar-collapsed .nav-sub { display: flex; }
    .sidebar-collapsed .sidebar-search form { display: block; }
    .sidebar-collapsed .sidebar-search-button { display: none; }
    .sidebar-collapsed .nav-link,
    .sidebar-collapsed .signout { justify-content: flex-start; }

    .main {
        padding: var(--space-5) var(--space-4) var(--space-8);
    }
}

/* ------------------------------------------------------------------ */
/* Page header                                                         */
/* ------------------------------------------------------------------ */

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

.page-header h1,
.page-title {
    margin: 0 0 var(--space-1);
    font-size: 24px;
    line-height: 32px;
    font-weight: 800;
    color: var(--mi-text);
    overflow-wrap: anywhere;
}

.page-subtitle {
    margin: 0;
    max-width: 42rem;
    font-size: 14px;
    color: var(--mi-muted);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.page-actions form { margin: 0; }

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--mi-faint);
}

.breadcrumbs a {
    color: var(--mi-muted);
    text-decoration: none;
}

.breadcrumbs a:hover { color: var(--mi-blue); }

.breadcrumbs-sep { color: var(--mi-line); }

.breadcrumbs-current { color: var(--mi-text); }

.section-label,
.card-label,
.field-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--mi-faint);
}

/* Secondary navigation between a partner's own pages. */
.tab-nav {
    position: relative;
    display: flex;
    gap: var(--space-1);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space-1);
    background: var(--mi-card);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-xl);
}

.tab-nav a {
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    color: var(--mi-muted);
    text-decoration: none;
    white-space: nowrap;
}

.tab-nav a:hover {
    background: var(--mi-page);
    color: var(--mi-text);
}

.tab-nav a.active {
    background: var(--mi-blue-pale);
    color: var(--mi-blue);
}

/* ------------------------------------------------------------------ */
/* Cards and panels                                                    */
/* ------------------------------------------------------------------ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--mi-card);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-2xl);
}

.card-wide { grid-column: 1 / -1; }

.card-value {
    font-size: 24px;
    line-height: 32px;
    font-weight: 800;
    color: var(--mi-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.card-value-small {
    font-size: 16px;
    line-height: 32px;
}

.card-note {
    font-size: 12px;
    color: var(--mi-muted);
}

a.card-value-link,
.card-value-link {
    color: var(--mi-blue);
    text-decoration: none;
}

a.card-value-link:hover { text-decoration: underline; }

.chart-card canvas { margin-top: var(--space-3); }

.panel {
    background: var(--mi-card);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* A row-actions dropdown needs to escape the panel's rounded clip. */
.panel--overflow-visible { overflow: visible; }

.panel-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--mi-line);
}

.panel-header:last-child { border-bottom: 0; }

.panel-header h2 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 800;
    color: var(--mi-text);
}

.panel-header p {
    margin: var(--space-1) 0 0;
    font-size: 12px;
    color: var(--mi-muted);
}

.panel-body {
    padding: var(--space-6);
}

.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }

.panel-body + .panel-body,
.panel-body + .table-scroll {
    border-top: 1px solid var(--mi-line);
}

.panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--mi-line);
}

.panel-toolbar form { margin: 0; }

.prose-text {
    margin: 0;
    font-size: 14px;
    color: var(--mi-text);
}

.prose-text.is-empty { color: var(--mi-muted); }

.bullet-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Callouts: the portal's amber "copy this now" box and a plain info box. */
.notice {
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-2xl);
    background: var(--mi-card);
    font-size: 14px;
}

.notice h2 {
    margin: 0 0 var(--space-1);
    font-size: 14px;
    font-weight: 800;
}

.notice p { margin: 0; }

.notice-warning {
    border-color: var(--mi-amber);
    background: var(--mi-amber-pale);
}

.notice-info {
    border-color: transparent;
    background: var(--mi-blue-pale);
}

.notice-success {
    border-color: transparent;
    background: var(--mi-green-pale);
}

.notice ul {
    margin: var(--space-2) 0 0;
    padding-left: 20px;
}

.secret-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.secret-label {
    min-width: 160px;
    font-weight: 600;
}

.secret {
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    background: var(--mi-card);
    font-size: 13px;
    color: var(--mi-text);
    word-break: break-all;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.table-scroll { width: 100%; }

.data-table,
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.data-table th,
.data-table td {
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--mi-line);
    text-align: left;
    vertical-align: middle;
}

.data-table thead th {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--mi-faint);
    white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr:hover td { background: #fafbfc; }

.data-table td a {
    color: var(--mi-text);
    font-weight: 600;
    text-decoration: none;
}

.data-table td a:hover {
    color: var(--mi-blue);
}

.data-table td.muted,
.data-table .muted { color: var(--mi-muted); }

.data-table td.empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--mi-muted);
}

.data-table tbody tr:hover td.empty { background: transparent; }

.data-table td.align-top { vertical-align: top; }

.data-table form {
    display: inline-block;
    margin: 0;
}

.data-table code { white-space: nowrap; }

.nowrap { white-space: nowrap; }

.mono { font-family: var(--font-mono); font-size: 12px; }

.error-detail {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--mi-red-pale);
    color: var(--mi-red);
    font-size: 12px;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------------ */
/* Read-only field grids                                               */
/* ------------------------------------------------------------------ */

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    background: var(--mi-page);
    font-size: 14px;
    font-weight: 600;
    color: var(--mi-text);
    overflow-wrap: anywhere;
}

a.field-value {
    color: var(--mi-blue);
    text-decoration: none;
}

a.field-value:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Row actions and menus                                               */
/* ------------------------------------------------------------------ */

.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.data-table td.row-actions { display: table-cell; text-align: right; white-space: nowrap; }
.data-table td.row-actions > * + * { margin-left: var(--space-3); }

.row-actions form { margin: 0; }

/* Plain action buttons inside tables read as text links, like the
   portal's "Rotate" / "Revoke" row actions. */
.row-actions > a:not([class*="btn-"]),
.row-actions > form > button:not([class*="btn-"]) {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--mi-blue);
    text-decoration: none;
    cursor: pointer;
}

.row-actions > a:not([class*="btn-"]):hover,
.row-actions > form > button:not([class*="btn-"]):hover {
    text-decoration: underline;
}

.row-actions > form > button.link-danger { color: var(--mi-red); }

.actions-menu {
    position: relative;
    display: inline-block;
}

.actions-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--mi-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.actions-menu-trigger:hover {
    background: var(--mi-page);
    border-color: var(--mi-line);
    color: var(--mi-text);
}

.actions-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: var(--space-1);
    background: var(--mi-card);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
    text-align: left;
}

.actions-menu-dropdown a,
.actions-menu-dropdown button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--mi-muted);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.data-table td .actions-menu-dropdown a { color: var(--mi-muted); font-weight: 600; }

.actions-menu-dropdown a:hover,
.actions-menu-dropdown button:hover,
.data-table td .actions-menu-dropdown a:hover {
    background: var(--mi-page);
    color: var(--mi-text);
}

.actions-menu-dropdown form {
    display: block;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Badges and status                                                   */
/* ------------------------------------------------------------------ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mi-page);
    color: var(--mi-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.badge + .badge { margin-left: 4px; }

.badge-neutral { background: var(--mi-page); color: var(--mi-muted); }
.badge-brand { background: var(--mi-blue-pale); color: var(--mi-blue); }
.badge-success { background: var(--mi-green-pale); color: var(--mi-green); }
.badge-warning { background: var(--mi-amber-pale); color: #b45309; }
.badge-danger { background: var(--mi-red-pale); color: var(--mi-red); }
.badge-mono { font-family: var(--font-mono); text-transform: uppercase; font-weight: 500; }

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--mi-text);
    white-space: nowrap;
}

.capitalize { text-transform: capitalize; }

.status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

.status-dot-success { background: var(--mi-green); }
.status-dot-warning { background: var(--mi-amber); }
.status-dot-danger { background: var(--mi-red); }
.status-dot-neutral { background: var(--mi-faint); }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn-primary,
.btn-secondary,
.btn-approve,
.btn-reject,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 150ms, border-color 150ms, background-color 150ms, color 150ms;
}

.btn-primary {
    background: var(--mi-blue);
    color: #fff;
}

.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
    background: var(--mi-card);
    border-color: var(--mi-line);
    color: var(--mi-text);
}

.btn-secondary:hover { border-color: var(--mi-blue); }

.btn-approve {
    background: var(--mi-green);
    color: #fff;
}

.btn-approve:hover { opacity: 0.9; }

.btn-reject,
.btn-danger {
    background: var(--mi-card);
    border-color: var(--mi-line);
    color: var(--mi-red);
}

.btn-reject:hover,
.btn-danger:hover {
    background: var(--mi-red-pale);
    border-color: var(--mi-red-pale);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 16px;
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--mi-blue);
    cursor: pointer;
}

.link-button:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-lg);
    background: var(--mi-card);
    color: var(--mi-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}

textarea { min-height: 0; resize: vertical; }

select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mi-blue);
    box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled {
    background: var(--mi-page);
    color: var(--mi-muted);
}

input::placeholder,
textarea::placeholder { color: var(--mi-faint); }

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mi-blue);
}

input[type="color"] {
    width: 56px;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-lg);
    background: var(--mi-card);
    cursor: pointer;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 520px;
    margin: 0;
    padding: var(--space-6);
}

.admin-form label,
.sync-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mi-text);
}

.admin-form .check-label,
.sync-form .check-label,
.check-label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--mi-text);
    cursor: pointer;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.form-hint {
    margin: 0;
    font-size: 12px;
    color: var(--mi-muted);
}

.form-errors {
    padding: var(--space-3) var(--space-4);
    border: 1px solid #f5c2c0;
    border-radius: var(--radius-xl);
    background: var(--mi-red-pale);
    color: var(--mi-red);
    font-size: 14px;
    font-weight: 500;
}

/* Filter row above a list: fields side by side, wrapping on small screens. */
.sync-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: 0;
}

.sync-form input[type="number"] { width: 160px; }

.sync-form .check-label {
    min-height: 42px;
}

.override-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.override-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.override-form input[type="number"] { width: 160px; }

.sync-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.sync-actions form {
    display: flex;
    gap: var(--space-2);
    margin: 0;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2) var(--space-4);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    cursor: pointer;
}

.checkbox-item:hover { background: var(--mi-page); }

.inline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 320px;
    margin: 0;
}

.data-table .inline-edit-form { display: flex; }

.inline-edit-form textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}

.inline-edit-form .row-actions { justify-content: flex-start; }

.link-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list a {
    font-weight: 600;
    text-decoration: none;
}

.link-list a:hover { text-decoration: underline; }

.checklist {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checklist li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checklist li::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1.5px solid var(--mi-faint);
    border-radius: 4px;
    background: var(--mi-card);
}

.progress {
    height: 10px;
    margin-top: var(--space-3);
    overflow: hidden;
    border-radius: 999px;
    background: var(--mi-blue-pale);
}

.progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--mi-blue);
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 12px;
    color: var(--mi-muted);
}

.pagination-links {
    display: flex;
    gap: var(--space-2);
}

.pagination-link {
    padding: 6px 12px;
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-lg);
    background: var(--mi-card);
    font-size: 12px;
    font-weight: 700;
    color: var(--mi-text);
    text-decoration: none;
}

a.pagination-link:hover { border-color: var(--mi-blue); }

.pagination-link.disabled {
    color: var(--mi-faint);
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* Sign-in page (the portal's gateway look)                            */
/* ------------------------------------------------------------------ */

.gateway {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 64px var(--space-4);
}

.gateway-inner {
    width: 100%;
    max-width: 420px;
}

.gateway-head {
    margin-bottom: var(--space-8);
    text-align: center;
}

.gateway-head img {
    display: block;
    height: 32px;
    width: auto;
    margin: 0 auto var(--space-6);
}

.gateway-head h1 {
    margin: 0 0 var(--space-2);
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
}

.gateway-head p {
    margin: 0;
    font-size: 14px;
    color: var(--mi-muted);
}

.gateway-card {
    padding: var(--space-6);
    background: var(--mi-card);
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-2xl);
}

.gateway-card .section-label { margin: 0 0 var(--space-4); }

.gateway-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.gateway-form input { width: 100%; }

.gateway-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--mi-line);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 700;
    color: var(--mi-text);
    text-decoration: none;
}

.gateway-google:hover { border-color: var(--mi-blue); }

.gateway-google svg { width: 18px; height: 18px; }

.gateway-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    font-size: 12px;
    color: var(--mi-faint);
}

.gateway-divider::before,
.gateway-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mi-line);
}

.gateway-error {
    margin: 0 0 var(--space-4);
    font-size: 14px;
    font-weight: 500;
    color: var(--mi-red);
}

.gateway-foot {
    margin-top: var(--space-6);
    text-align: center;
    font-size: 12px;
    color: var(--mi-faint);
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 899px) {
    .table-scroll { overflow-x: auto; }

    .data-table th,
    .data-table td { padding: var(--space-3) var(--space-4); }

    .panel-header,
    .panel-toolbar { padding: var(--space-4); }

    .panel-body,
    .admin-form { padding: var(--space-4); }

    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

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

    .sync-form label,
    .sync-form input,
    .sync-form select { width: 100%; }

    .sync-form input[type="number"] { width: 100%; }

    .sync-form .check-label { width: auto; min-height: 0; }

    .override-form input[type="text"] { max-width: none; }

    .inline-edit-form { min-width: 240px; }

    .secret-label { min-width: 0; width: 100%; }
}

.icon-lg { width: 20px; height: 20px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.panel-body + .panel-toolbar { border-top: 1px solid var(--mi-line); }

.theme-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.colour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.colour-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 899px) {
    .theme-editor { grid-template-columns: minmax(0, 1fr); }
}

.panel-title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 800;
    color: var(--mi-text);
}

/* Chart.js canvases: fixed-height box so the chart doesn't scale with width. */
.chart-box {
    position: relative;
    height: 260px;
}

.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tables that turn into stacked cards on phones instead of scrolling
   sideways (the sign-off queue, where each row is a small form). */
@media (max-width: 899px) {
    .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-span-mobile { grid-column: 1 / -1; }

    .stack-mobile thead { display: none; }
    .stack-mobile,
    .stack-mobile tbody,
    .stack-mobile tr,
    .stack-mobile td { display: block; width: 100%; }
    .stack-mobile tr {
        position: relative;
        padding: var(--space-4);
        border-bottom: 1px solid var(--mi-line);
    }
    .stack-mobile tbody tr:last-child { border-bottom: 0; }
    .stack-mobile td,
    .stack-mobile tbody tr:last-child td { padding: 0; border: 0; }
    .stack-mobile td + td { margin-top: var(--space-3); }
    .stack-mobile td.stack-check { position: absolute; top: var(--space-4); right: var(--space-4); width: auto; margin: 0; }
    .stack-mobile td.row-actions { text-align: left; }
    .stack-mobile tr:hover td { background: transparent; }
    .stack-mobile .inline-edit-form { min-width: 0; }
}

.data-table .col-check { width: 1%; padding-right: 0; }

/* BD-032: "3 things" editor with the site's draft preview beside it */
.three-things-editor { display: grid; gap: 24px; grid-template-columns: minmax(280px, 1fr); }
.three-things-fields { display: flex; flex-direction: column; gap: 16px; }
.three-things-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.three-things-preview-bar { display: flex; justify-content: space-between; gap: 12px; }
.three-things-preview iframe { width: 100%; height: 75vh; min-height: 520px; border: 1px solid var(--mi-line); border-radius: 8px; background: #fff; }
@media (min-width: 1100px) {
    .three-things-editor { grid-template-columns: minmax(300px, 2fr) 3fr; }
}