/* =============================================================================
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap");

/* ----------------------------------------------------------------------------
   1 · Tokens
   ---------------------------------------------------------------------------- */
body.portal-theme {
    /* Brand */
    --pt-navy: #001435;
    --pt-navy2: #002060;
    --pt-mint: #06d6a0;
    --pt-mint2: #00b386;
    /* Space-separated so `rgb(var(--pt-mint-rgb) / α)` stays valid CSS */
    --pt-mint-rgb: 6 214 160;

    /* Surfaces - light is the portal default (globals.css `.portal`) */
    --pt-bg: 244 246 250;   /* #f4f6fa */
    --pt-card: 255 255 255;
    --pt-text: 13 24 46;    /* #0d182e */
    --pt-line: 13 24 46;
    --pt-shadow: 0 1px 2px rgb(13 24 46 / 0.04), 0 8px 24px -12px rgb(13 24 46 / 0.12);
    --pt-shadow-lg: 0 4px 10px rgb(13 24 46 / 0.06), 0 24px 60px -20px rgb(13 24 46 / 0.22);

    /* Status ramp - statusColors.light from content/portal-demo.ts */
    --pt-st-submitted: #2a78d6;
    --pt-st-checked: #eda100;
    --pt-st-asserted: #4a3aa7;
    --pt-st-done: #1baf7a;
    --pt-st-rejected: #e34948;
    --pt-st-neutral: #5b6b82;

    /* Motion - framer-motion ease [0.16, 1, 0.3, 1] */
    --pt-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Radii */
    --pt-r-card: 24px;
    --pt-r-panel: 16px;
    --pt-r-field: 12px;
    --pt-r-pill: 999px;

    /* Re-map the Metronic brand tokens onto mint */
    --bs-primary: #06d6a0;
    --bs-primary-active: #00b386;
    --bs-primary-light: rgb(6 214 160 / 0.12);
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 6, 214, 160;
    --bs-link-color: #00b386;
    --bs-link-hover-color: #06d6a0;

    background: rgb(var(--pt-bg));
    color: rgb(var(--pt-text));
    font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-bs-theme="dark"] body.portal-theme {
    --pt-bg: 6 11 22;       /* #060b16 */
    --pt-card: 12 21 38;    /* #0c1526 */
    --pt-text: 244 247 251; /* #f4f7fb */
    --pt-line: 244 247 251;
    --pt-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --pt-shadow-lg: 0 4px 12px rgb(0 0 0 / 0.4), 0 24px 60px -20px rgb(0 0 0 / 0.7);

    /* statusColors.dark */
    --pt-st-submitted: #3987e5;
    --pt-st-checked: #c98500;
    --pt-st-asserted: #9085e9;
    --pt-st-done: #199e70;
    --pt-st-rejected: #e66767;
    --pt-st-neutral: #8496ad;
}

body.portal-theme,
body.portal-theme .menu,
body.portal-theme .btn,
body.portal-theme .form-control,
body.portal-theme .form-select,
body.portal-theme .table,
body.portal-theme .card,
body.portal-theme .badge,
body.portal-theme .modal,
body.portal-theme input,
body.portal-theme select,
body.portal-theme textarea,
body.portal-theme button {
    font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.portal-theme ::selection {
    background: rgb(6 214 160 / 0.28);
}

body.portal-theme :focus-visible {
    outline: 2px solid var(--pt-mint);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   2 · Typography
   ---------------------------------------------------------------------------- */
body.portal-theme h1,
body.portal-theme h2,
body.portal-theme h3,
body.portal-theme h4,
body.portal-theme h5,
body.portal-theme .h1,
body.portal-theme .h2,
body.portal-theme .h3 {
    color: rgb(var(--pt-text));
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.portal-theme .text-gray-400,
body.portal-theme .text-gray-500,
body.portal-theme .text-gray-600,
body.portal-theme .text-muted {
    color: rgb(var(--pt-text) / 0.55) !important;
}

body.portal-theme .text-gray-700,
body.portal-theme .text-gray-800,
body.portal-theme .text-gray-900 {
    color: rgb(var(--pt-text) / 0.9) !important;
}

body.portal-theme .text-primary,
body.portal-theme a.text-hover-primary:hover,
body.portal-theme .text-hover-primary:hover {
    color: var(--pt-mint2) !important;
}

body.portal-theme .panel-premium-eyebrow,
body.portal-theme .admin-premium-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--pt-text) / 0.4);
}

body.portal-theme .panel-premium-title,
body.portal-theme .admin-premium-title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(var(--pt-text));
    margin-top: 4px;
}

body.portal-theme .panel-premium-subtitle,
body.portal-theme .admin-premium-subtitle {
    font-size: 14px;
    font-weight: 300;
    color: rgb(var(--pt-text) / 0.55);
    margin-top: 4px;
}

/* ----------------------------------------------------------------------------
   3 · Header  (PortalShell.tsx)
   ---------------------------------------------------------------------------- */
body.portal-theme .header {
    background: rgb(var(--pt-card) / 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgb(var(--pt-line) / 0.1);
    box-shadow: none;
}

body.portal-theme .header .container-xxl {
    max-width: 1280px;
}

body.portal-theme .header .separator {
    display: none;
}

/* Pill nav */
body.portal-theme .header .menu > .menu-item > .menu-link,
body.portal-theme .header .menu > .menu-item .menu-link.py-3 {
    border-radius: var(--pt-r-pill);
    padding: 6px 16px !important;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--pt-text) / 0.55) !important;
    background: transparent;
    transition: color 0.2s var(--pt-ease), background-color 0.2s var(--pt-ease);
}

body.portal-theme .header .menu > .menu-item > .menu-link:hover,
body.portal-theme .header .menu > .menu-item.here > .menu-link,
body.portal-theme .header .menu > .menu-item.show > .menu-link {
    color: rgb(var(--pt-text)) !important;
    background: rgb(var(--pt-line) / 0.07);
}

body.portal-theme .header .menu > .menu-item > .menu-link.active,
body.portal-theme .header .menu > .menu-item.menu-here-bg > .menu-link {
    color: rgb(var(--pt-text)) !important;
    background: rgb(var(--pt-line) / 0.07) !important;
}

/* Icon buttons (theme switch, notifications, user) */
body.portal-theme .header .btn.btn-icon,
body.portal-theme .header .btn-icon.btn-outline {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--pt-r-pill);
    background: transparent;
    color: rgb(var(--pt-text) / 0.6);
    transition: background-color 0.2s var(--pt-ease), color 0.2s var(--pt-ease),
        transform 0.2s var(--pt-ease);
}

body.portal-theme .header .btn.btn-icon:hover,
body.portal-theme .header .btn.btn-icon:focus,
body.portal-theme .header .btn.btn-icon.show {
    background: rgb(var(--pt-line) / 0.06);
    color: rgb(var(--pt-text));
}

body.portal-theme .header .btn.btn-icon:active {
    transform: scale(0.95);
}

/* The theme-mode toggle swaps its icon - mirror the rotate/scale of ThemeToggle */
body.portal-theme .header .btn.btn-icon i {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

body.portal-theme .header .btn.btn-icon:hover i {
    transform: rotate(-12deg);
}

/* Search field - expands on focus like the Shell search */
body.portal-theme .header-search .form-control {
    height: 36px;
    min-height: 36px;
    width: 176px;
    border-radius: var(--pt-r-pill);
    border: 1px solid rgb(var(--pt-line) / 0.15);
    background: rgb(var(--pt-line) / 0.03) !important;
    color: rgb(var(--pt-text));
    font-size: 13px;
    transition: width 0.3s var(--pt-ease), border-color 0.3s var(--pt-ease),
        box-shadow 0.3s var(--pt-ease);
}

body.portal-theme .header-search .form-control:focus {
    width: 224px;
    border-color: var(--pt-mint);
    box-shadow: 0 0 0 2px rgb(var(--pt-mint-rgb) / 0.2);
}

body.portal-theme .header-search .form-control::placeholder {
    color: rgb(var(--pt-text) / 0.35);
}

/* User chip - mint initials disc + caret, per PortalShell's user button */
body.portal-theme .header .btn.portal-user-chip {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 36px;
    padding: 0 10px 0 4px;
    gap: 6px;
    border: 1px solid rgb(var(--pt-line) / 0.15);
    border-radius: var(--pt-r-pill);
    background: rgb(var(--pt-line) / 0.03);
}

body.portal-theme .header .btn.portal-user-chip:hover {
    border-color: rgb(var(--pt-line) / 0.25);
    background: rgb(var(--pt-line) / 0.03);
}

body.portal-theme .header .btn.portal-user-chip .portal-user-chip-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(var(--pt-mint-rgb) / 0.15);
    color: var(--pt-mint2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

body.portal-theme .header .btn.portal-user-chip .portal-user-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.portal-theme .header .btn.portal-user-chip .portal-user-chip-caret {
    color: rgb(var(--pt-text) / 0.5);
    transition: transform 0.2s var(--pt-ease);
}

body.portal-theme .header .btn.portal-user-chip.show .portal-user-chip-caret {
    transform: rotate(180deg);
}

body.portal-theme .header .btn.portal-user-chip:hover i {
    transform: none;
}

body.portal-theme .header .pulse-ring {
    border-color: rgb(var(--pt-mint-rgb) / 0.6);
}

/* ----------------------------------------------------------------------------
   4 · Dropdown menus  (dropdownMotion)
   ---------------------------------------------------------------------------- */
body.portal-theme .menu-sub-dropdown {
    border-radius: var(--pt-r-panel);
    border: 1px solid rgb(var(--pt-line) / 0.1);
    background: rgb(var(--pt-card));
    box-shadow: var(--pt-shadow-lg);
    padding: 8px;
    animation: pt-dropdown-in 0.18s var(--pt-ease) both;
}

body.portal-theme .menu-sub-dropdown .menu-link {
    border-radius: var(--pt-r-field);
    font-size: 13px;
    color: rgb(var(--pt-text) / 0.75);
    transition: background-color 0.15s var(--pt-ease), color 0.15s var(--pt-ease);
}

body.portal-theme .menu-sub-dropdown .menu-link:hover,
body.portal-theme .menu-sub-dropdown .menu-item.hover > .menu-link,
body.portal-theme .menu-sub-dropdown .menu-link.active {
    background: rgb(var(--pt-line) / 0.04);
    color: rgb(var(--pt-text)) !important;
}

body.portal-theme .menu-sub-dropdown .separator {
    border-color: rgb(var(--pt-line) / 0.1);
}

/* Account menu - identity header + rows.
   Sized for the longest locale (German: "Sachbearbeiter", "Einstellungen",
   "Administrator"); every text run is a single line that ellipsises rather than
   breaking mid-word. */
body.portal-theme .portal-account-menu {
    width: 296px;
    padding: 8px 0;
}

body.portal-theme .portal-account-menu .menu-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.portal-theme .portal-account-menu .menu-content {
    padding: 10px 10px 12px !important;
}

body.portal-theme .portal-account-identity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

body.portal-theme .portal-account-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(var(--pt-mint-rgb) / 0.15);
    color: var(--pt-mint2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

body.portal-theme .portal-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.portal-theme .portal-account-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Without this the flex item refuses to shrink and the name wraps instead
       of ellipsising. */
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 1px;
}

body.portal-theme .portal-account-name,
body.portal-theme .portal-account-email {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.portal-theme .portal-account-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: rgb(var(--pt-text));
}

body.portal-theme .portal-account-email {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(var(--pt-text) / 0.55);
}

body.portal-theme .portal-account-role {
    max-width: 100%;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: var(--pt-r-pill);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgb(var(--pt-mint-rgb) / 0.14);
    color: var(--pt-mint2);
}

body.portal-theme .portal-account-role-staff {
    background: color-mix(in srgb, var(--pt-st-checked) 14%, transparent);
    color: var(--pt-st-checked);
}

body.portal-theme .portal-account-role-admin {
    background: color-mix(in srgb, var(--pt-st-asserted) 14%, transparent);
    color: var(--pt-st-asserted);
}

/* Rows: label left, value right, both on one line */
body.portal-theme .portal-account-menu .menu-link {
    padding: 9px 12px !important;
    gap: 10px;
    white-space: nowrap;
}

/* Beat `.menu-gray-800 .menu-item .menu-link .menu-title`, otherwise the one row
   that wraps its label in a .menu-title reads darker than its neighbours. */
body.portal-theme .portal-account-menu .menu-item .menu-link .menu-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

body.portal-theme .portal-account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.portal-theme .portal-account-value {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--pt-r-pill);
    background: rgb(var(--pt-line) / 0.05);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: rgb(var(--pt-text) / 0.7);
    white-space: nowrap;
}

body.portal-theme .portal-account-value img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Language picker sub-menu - keep each option on one line */
body.portal-theme .portal-account-menu .menu-sub .menu-link {
    white-space: nowrap;
}

@keyframes pt-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ----------------------------------------------------------------------------
   5 · Cards
   ---------------------------------------------------------------------------- */
body.portal-theme .card {
    background: rgb(var(--pt-card));
    border: 1px solid rgb(var(--pt-line) / 0.1);
    border-radius: var(--pt-r-card);
    box-shadow: var(--pt-shadow);
}

body.portal-theme .card-header {
    border-bottom: 1px solid rgb(var(--pt-line) / 0.1);
    padding: 18px 32px;
    min-height: unset;
}

body.portal-theme .card-header.border-0 {
    border-bottom: 0;
}

body.portal-theme .card-header .card-title h3,
body.portal-theme .card-header .card-title .card-label {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

body.portal-theme .card-body {
    padding: 24px 32px;
}

body.portal-theme .card-body.border-top,
body.portal-theme .card-footer {
    border-top: 1px solid rgb(var(--pt-line) / 0.1) !important;
}

body.portal-theme .card-footer {
    padding: 16px 32px;
    background: transparent;
}

body.portal-theme .card .separator {
    border-color: rgb(var(--pt-line) / 0.1);
}

/* Inset tiles inside cards (portal `bg-pline/[0.02]` blocks) */
body.portal-theme .card .border-dashed,
body.portal-theme .card .border-gray-300 {
    border-color: rgb(var(--pt-line) / 0.12) !important;
}

/* ----------------------------------------------------------------------------
   6 · Buttons
   ---------------------------------------------------------------------------- */
body.portal-theme .btn {
    border-radius: var(--pt-r-pill);
    font-size: 13px;
    font-weight: 600;
    /* Metronic's button padding lives behind a long :not() chain (11 classes),
       so the size rules need !important to land. */
    padding: 10px 20px !important;
    letter-spacing: 0;
    white-space: nowrap !important;
    transition: background-color 0.2s var(--pt-ease), color 0.2s var(--pt-ease),
        border-color 0.2s var(--pt-ease), box-shadow 0.2s var(--pt-ease),
        filter 0.2s var(--pt-ease), transform 0.12s var(--pt-ease);
}

body.portal-theme .btn:active {
    transform: scale(0.97);
}

body.portal-theme .btn.btn-lg {
    padding: 12px 28px !important;
    font-size: 14px;
}

body.portal-theme .btn.btn-sm {
    padding: 7px 16px !important;
    font-size: 12px;
}

body.portal-theme .btn.btn-icon {
    padding: 0 !important;
}

body.portal-theme .btn.btn-primary,
body.portal-theme .btn.btn-active-primary:active,
body.portal-theme .btn.btn-active-primary.active {
    background: var(--pt-mint);
    border-color: var(--pt-mint);
    color: #ffffff;
    box-shadow: 0 10px 24px -8px rgb(var(--pt-mint-rgb) / 0.5);
}

body.portal-theme .btn.btn-primary:hover,
body.portal-theme .btn.btn-primary:focus,
body.portal-theme .btn.btn-primary:active {
    background: var(--pt-mint);
    border-color: var(--pt-mint);
    color: #ffffff;
    filter: brightness(0.95);
    box-shadow: 0 12px 28px -8px rgb(var(--pt-mint-rgb) / 0.6);
}

body.portal-theme .btn.btn-primary:disabled,
body.portal-theme .btn.btn-primary.disabled {
    background: var(--pt-mint);
    border-color: var(--pt-mint);
    color: #ffffff;
    opacity: 0.4;
    box-shadow: none;
}

body.portal-theme .btn.btn-light,
body.portal-theme .btn.btn-secondary,
body.portal-theme .btn.btn-light-primary,
body.portal-theme .btn.btn-active-light {
    background: rgb(var(--pt-line) / 0.03);
    border: 1px solid rgb(var(--pt-line) / 0.15);
    color: rgb(var(--pt-text) / 0.78);
    box-shadow: none;
}

body.portal-theme .btn.btn-light:hover,
body.portal-theme .btn.btn-secondary:hover,
body.portal-theme .btn.btn-light-primary:hover,
body.portal-theme .btn.btn-light:focus,
body.portal-theme .btn.btn-light-primary:focus {
    background: rgb(var(--pt-line) / 0.06);
    border-color: rgb(var(--pt-line) / 0.25);
    color: rgb(var(--pt-text));
}

body.portal-theme .btn.btn-light-danger {
    background: rgb(248 113 113 / 0.1);
    border: 1px solid rgb(248 113 113 / 0.3);
    color: #ef4444;
}

body.portal-theme .btn.btn-light-danger:hover,
body.portal-theme .btn.btn-light-danger:focus {
    background: rgb(248 113 113 / 0.2);
    border-color: rgb(248 113 113 / 0.4);
    color: #ef4444;
}

html[data-bs-theme="dark"] body.portal-theme .btn.btn-light-danger {
    color: #fca5a5;
}

body.portal-theme .btn.btn-danger {
    background: rgb(248 113 113 / 0.9);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
}

body.portal-theme .btn.btn-danger:hover {
    background: #f87171;
    color: #fff;
}

body.portal-theme .btn.btn-success {
    background: var(--pt-st-done);
    border-color: var(--pt-st-done);
    color: #fff;
}

/* Metronic's info/warning are purple/amber out of the box - pull them onto the
   portal status ramp so secondary actions stay inside the palette. */
body.portal-theme .btn.btn-info {
    background: var(--pt-st-submitted);
    border-color: var(--pt-st-submitted);
    color: #fff;
}

body.portal-theme .btn.btn-info:hover,
body.portal-theme .btn.btn-info:focus {
    background: var(--pt-st-submitted);
    border-color: var(--pt-st-submitted);
    color: #fff;
    filter: brightness(0.95);
}

body.portal-theme .btn.btn-warning {
    background: var(--pt-st-checked);
    border-color: var(--pt-st-checked);
    color: #fff;
}

/* The "Watch tutorial" action - a quiet outline pill with a mint glyph */
body.portal-theme .btn.tutorial-trigger-btn {
    padding: 10px 20px !important;
    background: rgb(var(--pt-card));
    border: 1px solid rgb(var(--pt-line) / 0.15);
    color: rgb(var(--pt-text) / 0.8);
    border-radius: var(--pt-r-pill);
    box-shadow: none;
    gap: 8px;
    padding: 10px 20px;
}

body.portal-theme .btn.tutorial-trigger-btn:hover,
body.portal-theme .btn.tutorial-trigger-btn:focus,
body.portal-theme .btn.tutorial-trigger-btn:active {
    background: rgb(var(--pt-card));
    border-color: rgb(var(--pt-line) / 0.3);
    color: rgb(var(--pt-text));
    box-shadow: var(--pt-shadow);
    transform: none;
}

body.portal-theme .btn.tutorial-trigger-btn i {
    color: var(--pt-mint2) !important;
}

/* Pills never break mid-word, so narrow toolbars wrap the row instead */
body.portal-theme .card-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ----------------------------------------------------------------------------
   7 · Form fields
   ---------------------------------------------------------------------------- */
/* A form is a layout wrapper here, never a paragraph. The browser's own
   `form { margin-block-end: 1em }` is what put the "Mark paid out" button
   6.5 px above the CSV and PDF links beside it: an action tray is a flex row
   that centres each item's *margin box*, so a form carrying 13 px of unasked
   margin underneath rides that far up. The same margin left dead space at the
   foot of every modal and uneven gaps between the entries of a dropdown.

   `:where()` keeps the specificity at a bare element selector, so this only
   ever beats the browser's default: every rule that sets a form's spacing on
   purpose (`.ci-form-grid`, `.mb-6`) still wins. Anything that wants space
   below a form says so itself. */
:where(body.portal-theme) form {
    margin-block-end: 0;
}

body.portal-theme .form-control,
body.portal-theme .form-select,
body.portal-theme textarea.form-control {
    min-height: 46px;
    border-radius: var(--pt-r-field);
    border: 1px solid rgb(var(--pt-line) / 0.15);
    background: rgb(var(--pt-line) / 0.03) !important;
    color: rgb(var(--pt-text));
    font-size: 14px;
    padding: 11px 16px;
    transition: border-color 0.2s var(--pt-ease), box-shadow 0.2s var(--pt-ease);
}

body.portal-theme .form-control::placeholder,
body.portal-theme .form-select::placeholder {
    color: rgb(var(--pt-text) / 0.4);
}

body.portal-theme .form-control:focus,
body.portal-theme .form-select:focus,
body.portal-theme .form-control-solid:focus,
body.portal-theme .form-select-solid:focus,
body.portal-theme textarea.form-control:focus {
    border-color: var(--pt-mint) !important;
    box-shadow: 0 0 0 2px rgb(var(--pt-mint-rgb) / 0.2) !important;
    background-color: rgb(var(--pt-line) / 0.03) !important;
}

body.portal-theme .form-label,
body.portal-theme .form-check-label,
body.portal-theme label.fs-6 {
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--pt-text) / 0.7);
}

body.portal-theme .form-check-input {
    border-radius: 6px;
    border-color: rgb(var(--pt-line) / 0.25);
    background-color: rgb(var(--pt-line) / 0.03);
}

body.portal-theme .form-check-input:checked {
    background-color: var(--pt-mint);
    border-color: var(--pt-mint);
}

body.portal-theme .form-switch .form-check-input {
    border-radius: var(--pt-r-pill);
}

body.portal-theme .required::after {
    color: #f87171;
}

/* File inputs double as the portal dropzones */
body.portal-theme input[type="file"].form-control {
    padding: 14px 16px;
    cursor: pointer;
}

body.portal-theme input[type="file"].form-control::file-selector-button {
    border-radius: var(--pt-r-pill);
    border: 0;
    background: rgb(var(--pt-mint-rgb) / 0.12);
    color: var(--pt-mint2);
    font-weight: 600;
    padding: 8px 16px;
    margin-right: 14px;
    transition: background-color 0.2s var(--pt-ease);
}

body.portal-theme input[type="file"].form-control::file-selector-button:hover {
    background: rgb(var(--pt-mint-rgb) / 0.2);
}

/* Dropzones (claim stock upload, wizard upload) */
body.portal-theme .panel-premium-upload-zone,
body.portal-theme .dropzone {
    border: 2px dashed rgb(var(--pt-line) / 0.2);
    border-radius: var(--pt-r-panel);
    background: transparent;
    padding: 24px;
    transition: border-color 0.25s var(--pt-ease), background-color 0.25s var(--pt-ease);
}

body.portal-theme .panel-premium-upload-zone:hover,
body.portal-theme .dropzone:hover,
body.portal-theme .dropzone.dz-drag-hover {
    border-color: rgb(var(--pt-mint-rgb) / 0.5);
    background: rgb(var(--pt-line) / 0.02);
}

body.portal-theme .panel-premium-click-select {
    border-radius: var(--pt-r-pill);
    border: 1px solid rgb(var(--pt-line) / 0.15);
    background: rgb(var(--pt-line) / 0.03);
    color: rgb(var(--pt-text) / 0.85);
    min-height: 46px;
    font-size: 13px;
    font-weight: 600;
    padding: 0 20px;
    transition: background-color 0.2s var(--pt-ease), border-color 0.2s var(--pt-ease);
}

body.portal-theme .panel-premium-click-select:hover {
    background: rgb(var(--pt-line) / 0.06);
    border-color: rgb(var(--pt-line) / 0.25);
}

/* ----------------------------------------------------------------------------
   8 · Tables
   ---------------------------------------------------------------------------- */
body.portal-theme .table thead th {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--pt-text) / 0.4) !important;
    border-bottom: 0 !important;
    padding-bottom: 12px;
}

body.portal-theme .table tbody td {
    color: rgb(var(--pt-text) / 0.75);
    font-size: 13px;
    font-weight: 400;
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
}

/* Portal tables divide rows with a solid hairline, not Metronic's dashes */
body.portal-theme .table.table-row-dashed tbody tr,
body.portal-theme .table.table-row-dashed > :not(caption) > * > * {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(var(--pt-line) / 0.06);
    transition: background-color 0.2s var(--pt-ease);
}

body.portal-theme .table thead th,
body.portal-theme .table.table-row-dashed > thead > tr,
body.portal-theme .table.table-row-dashed > thead > tr > th {
    border-bottom-width: 0 !important;
}

body.portal-theme .table.table-row-dashed tbody tr:last-child,
body.portal-theme .table.table-row-dashed tbody tr:last-child > * {
    border-bottom-width: 0;
}

body.portal-theme .table tbody tr:hover {
    background: rgb(var(--pt-line) / 0.03);
}

body.portal-theme .table tbody td p,
body.portal-theme .table tbody td a p {
    font-size: 14px;
    font-weight: 500;
    color: rgb(var(--pt-text) / 0.9);
    margin-bottom: 2px;
}

body.portal-theme .table tbody td span {
    color: rgb(var(--pt-text) / 0.45);
    font-size: 12px;
}

body.portal-theme .table tbody td a:hover p,
body.portal-theme .table tbody td a:hover {
    color: var(--pt-mint2);
}

/* ----------------------------------------------------------------------------
   9 · Status pills  (portal claim table)
   ---------------------------------------------------------------------------- */
body.portal-theme .badge {
    border-radius: var(--pt-r-pill);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.portal-theme .badge[class*="badge-light-"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

body.portal-theme .badge.badge-light-info {
    color: var(--pt-st-submitted);
    background: rgb(from var(--pt-st-submitted) r g b / 0.12);
}

body.portal-theme .badge.badge-light-warning {
    color: var(--pt-st-checked);
    background: rgb(from var(--pt-st-checked) r g b / 0.12);
}

body.portal-theme .badge.badge-light-primary {
    color: var(--pt-st-asserted);
    background: rgb(from var(--pt-st-asserted) r g b / 0.12);
}

body.portal-theme .badge.badge-light-success {
    color: var(--pt-st-done);
    background: rgb(from var(--pt-st-done) r g b / 0.12);
}

body.portal-theme .badge.badge-light-danger {
    color: var(--pt-st-rejected);
    background: rgb(from var(--pt-st-rejected) r g b / 0.12);
}

body.portal-theme .badge.badge-light-secondary,
body.portal-theme .badge.badge-light-dark {
    color: var(--pt-st-neutral);
    background: rgb(from var(--pt-st-neutral) r g b / 0.12);
}

/* Fallback for engines without relative colour syntax */
@supports not (color: rgb(from #fff r g b / 0.5)) {
    body.portal-theme .badge.badge-light-info {
        background: rgb(42 120 214 / 0.12);
    }
    body.portal-theme .badge.badge-light-warning {
        background: rgb(237 161 0 / 0.12);
    }
    body.portal-theme .badge.badge-light-primary {
        background: rgb(74 58 167 / 0.12);
    }
    body.portal-theme .badge.badge-light-success {
        background: rgb(27 175 122 / 0.12);
    }
    body.portal-theme .badge.badge-light-danger {
        background: rgb(227 73 72 / 0.12);
    }
    body.portal-theme .badge.badge-light-secondary,
    body.portal-theme .badge.badge-light-dark {
        background: rgb(91 107 130 / 0.12);
    }
}

/* ----------------------------------------------------------------------------
   10 · Metronic symbols
   ----------------------------------------------------------------------------
   The up-section used to live here (profile card + donut + stat tiles). It is
   now `custom/portal/up-section.css`, a layer of its own with no Metronic
   markup left to override. The initials chip is all that is still shared -
   admin/subscriptions.html renders one.
   ---------------------------------------------------------------------------- */
body.portal-theme .symbol-label.bg-light-primary {
    background: rgb(var(--pt-mint-rgb) / 0.1) !important;
    color: var(--pt-mint2) !important;
    border-radius: var(--pt-r-panel) !important;
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   11 · Claim wizard  (/claims/create)
   ----------------------------------------------------------------------------
   The wizard owns its own layer, `custom/claims/create-claim.css`, which is
   loaded after this file by `templates/claims/base.html`. Only the page
   backdrop lives here; everything else , rail, card, fields, upload, review,
   is defined there against the tokens above.
   ---------------------------------------------------------------------------- */
body.portal-theme.claims-stepper-page {
    background: rgb(var(--pt-bg));
}

/* ----------------------------------------------------------------------------
   12 · Modals, toasts, footer
   ---------------------------------------------------------------------------- */
body.portal-theme .modal-content {
    background: rgb(var(--pt-card));
    border: 1px solid rgb(var(--pt-line) / 0.1);
    border-radius: var(--pt-r-card);
    box-shadow: var(--pt-shadow-lg);
}

body.portal-theme .modal-header,
body.portal-theme .modal-footer {
    border-color: rgb(var(--pt-line) / 0.1);
    padding: 20px 32px;
}

body.portal-theme .modal-body {
    padding: 24px 32px;
}

/* The flash toast sits top-right, overlapping the header. It has to win against
   every fixed layer in the app, and the admin header is the reason this rule
   exists: `.admin-redesign .header` is z-index 1200 and `.admin-redesign .modal`
   1510 (custom/admin/admin-redesign.css), so the container's old inline
   z-index:1000 left the toast hidden *behind* the admin header. 1600 clears the
   header, the modal and its backdrop; the templates carry no inline z-index any
   more, so this is the one place it is set. */
body.portal-theme .toast-container {
    z-index: 1600;
}

body.portal-theme .toast {
    border-radius: var(--pt-r-panel);
    border: 1px solid rgb(var(--pt-line) / 0.1);
    background: rgb(var(--pt-card));
    box-shadow: var(--pt-shadow-lg);
}

body.portal-theme .toast-header {
    border-bottom: 1px solid rgb(var(--pt-line) / 0.08);
    background: transparent;
    border-radius: var(--pt-r-panel) var(--pt-r-panel) 0 0;
}

body.portal-theme .footer {
    border-top: 1px solid rgb(var(--pt-line) / 0.1);
    background: transparent;
}

body.portal-theme .footer,
body.portal-theme .footer a,
body.portal-theme .footer .menu-link {
    font-size: 12px;
    color: rgb(var(--pt-text) / 0.4) !important;
    font-weight: 400;
}

body.portal-theme .footer a:hover,
body.portal-theme .footer .menu-link:hover {
    color: rgb(var(--pt-text)) !important;
}

body.portal-theme #kt_scrolltop {
    border-radius: var(--pt-r-pill);
    background: var(--pt-mint);
    color: #ffffff;
    box-shadow: 0 10px 24px -8px rgb(var(--pt-mint-rgb) / 0.5);
}

/* ----------------------------------------------------------------------------
   13 · Page shell
   ---------------------------------------------------------------------------- */
body.portal-theme .app-container,
body.portal-theme .container-xxl {
    max-width: 1280px;
}

body.portal-theme #kt_app_content {
    padding-bottom: 40px;
}

body.portal-theme .panel-premium-page-header,
body.portal-theme .admin-premium-page-header {
    margin-bottom: 24px;
}

/* ----------------------------------------------------------------------------
   14 · Motion  (mirrors the framer-motion entrances of the portal pages)
   ---------------------------------------------------------------------------- */
@keyframes pt-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pt-pop {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    70% {
        transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pt-drift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(4%, -6%) scale(1.08);
    }
    66% {
        transform: translate(-5%, 4%) scale(0.96);
    }
}

body.portal-theme .pt-reveal {
    opacity: 0;
    animation: pt-fade-up 0.45s var(--pt-ease) forwards;
    animation-delay: calc(var(--pt-i, 0) * 50ms);
}

body.portal-theme .pt-pop {
    opacity: 0;
    animation: pt-pop 0.6s var(--pt-ease) forwards;
}

body.portal-theme .pt-drift {
    animation: pt-drift 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.portal-theme *,
    body.portal-theme *::before,
    body.portal-theme *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body.portal-theme .pt-reveal,
    body.portal-theme .pt-pop {
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   15 · Video embeds  (partials/video-embed.html + portal/video.js)
   ----------------------------------------------------------------------------
   A tile that looks like a player but is only a thumbnail until it is clicked.
   The iframe that replaces it lands in the same box, so nothing on the page
   moves when the video loads.
   ---------------------------------------------------------------------------- */
body.portal-theme .pt-video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--pt-r-panel);
    background: #05070d;
    box-shadow: var(--pt-shadow);
}

body.portal-theme .pt-video-facade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

body.portal-theme .pt-video-facade[hidden] {
    display: none;
}

body.portal-theme .pt-video-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--pt-ease), opacity 0.3s var(--pt-ease);
}

body.portal-theme .pt-video-facade:hover .pt-video-thumb {
    transform: scale(1.03);
}

body.portal-theme .pt-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--pt-ease);
}

body.portal-theme .pt-video-play svg {
    display: block;
    width: 100%;
    height: auto;
}

body.portal-theme .pt-video-play-bg {
    fill: rgb(5 7 13 / 0.72);
    transition: fill 0.3s var(--pt-ease);
}

body.portal-theme .pt-video-play-arrow {
    fill: #fff;
}

body.portal-theme .pt-video-facade:hover .pt-video-play,
body.portal-theme .pt-video-facade:focus-visible .pt-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

body.portal-theme .pt-video-facade:hover .pt-video-play-bg,
body.portal-theme .pt-video-facade:focus-visible .pt-video-play-bg {
    fill: var(--pt-mint2);
}

body.portal-theme .pt-video-facade:focus-visible {
    outline: 2px solid var(--pt-mint);
    outline-offset: -2px;
}

/* The caption sits on a scrim rather than on the still itself: thumbnails are
   whatever the video happens to open on, and white text has to survive one. */
body.portal-theme .pt-video-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 40px 20px 16px;
    background: linear-gradient(to top, rgb(5 7 13 / 0.85), rgb(5 7 13 / 0));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

body.portal-theme .pt-video-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A modal that exists to hold a player: the video runs edge to edge and the
   chrome around it stays out of the way. */
body.portal-theme .pt-video-modal .modal-body {
    padding: 0;
}

/* The player is 16:9 and as wide as the dialog, so the dialog has to be sized
   by the shorter of the two axes. The last term is the width at which a 16:9
   box still clears the header, the tab row and the dialog's own margins on a
   short screen; without it a laptop viewport clips the bottom of the video. */
body.portal-theme .pt-video-modal .modal-dialog {
    max-width: min(1080px, 94vw, calc((100vh - 210px) * 16 / 9));
}

body.portal-theme .pt-video-modal .pt-video {
    border-radius: 0;
    box-shadow: none;
}

/* Tabs above the player, one per topic. */
body.portal-theme .pt-video-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* The body itself has no padding, so the row carries its own. */
    padding: 18px 24px 16px;
    border: 0;
}

body.portal-theme .pt-video-tabs .nav-link {
    padding: 8px 16px;
    border: 1px solid rgb(var(--pt-line) / 0.15);
    border-radius: var(--pt-r-pill);
    color: rgb(var(--pt-text) / 0.75);
    font-size: 14px;
    font-weight: 600;
}

body.portal-theme .pt-video-tabs .nav-link:hover {
    border-color: rgb(var(--pt-line) / 0.3);
    color: rgb(var(--pt-text));
}

body.portal-theme .pt-video-tabs .nav-link.active {
    border-color: transparent;
    background: var(--pt-mint2);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   16 · Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.portal-theme .card-header,
    body.portal-theme .card-body,
    body.portal-theme .card-footer,
    body.portal-theme .modal-header,
    body.portal-theme .modal-body,
    body.portal-theme .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.portal-theme .panel-premium-title,
    body.portal-theme .admin-premium-title {
        font-size: 24px;
    }

}

@media (max-width: 767.98px) {
    body.portal-theme .pt-video-tabs {
        gap: 6px;
        padding: 14px 16px 12px;
    }

    body.portal-theme .pt-video-tabs .nav-link {
        padding: 7px 13px;
        font-size: 13px;
    }

    body.portal-theme .pt-video-play {
        width: 56px;
    }

    body.portal-theme .pt-video-caption {
        padding: 32px 16px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    /* Every modal goes full-screen at this width (responsive.css), which would
       leave the player pinned under the header with the screen empty below it.
       Centre the tabs and the video in the space instead. */
    body.portal-theme .pt-video-modal .modal-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.portal-theme .pt-video-modal .tab-content {
        width: 100%;
    }
}