/* theme-dark.css - dark theme variables only

Defines the dark/default portal theme.

Put theme-specific values here:
- colours
- backgrounds
- borders
- shadows
- status colours
- form/widget colour tokens

Do not put component layout or selectors here unless they are variable definitions.
*/

.portal[data-theme="dark"]{
    /* Base */
    --p-bg: #0b1020;
    --p-bg2: #0e1630;
    --p-surface: #0b1220;

    --p-page-bg:
            radial-gradient(1200px 700px at 20% 0%, rgba(110,168,254,.12), transparent 55%),
            radial-gradient(900px 600px at 80% 10%, rgba(139,92,246,.12), transparent 55%),
            linear-gradient(180deg, var(--p-bg), var(--p-bg2));

    --p-html-bg: #0b1220;

    /* Text */
    --p-text: rgba(255,255,255,.92);
    --p-text-strong: #ffffff;
    --p-muted: rgba(255,255,255,.66);
    --p-muted-2: rgba(255,255,255,.52);
    --p-link: var(--p-text);
    --p-link-hover: #ffffff;

    /* Surfaces */
    --p-surface-1: rgba(255,255,255,.04);
    --p-surface-2: rgba(255,255,255,.06);
    --p-surface-3: rgba(255,255,255,.09);

    --p-border: rgba(255,255,255,.10);
    --p-border-strong: rgba(255,255,255,.16);

    /* Accent colours */
    --p-primary: #6ea8fe;
    --p-accent: #8b5cf6;
    --p-success: #34d399;
    --p-warning: #fbbf24;
    --p-danger: #fb7185;

    /* Radius / spacing / motion */
    --p-radius: 14px;
    --p-radius-sm: 10px;
    --p-radius-lg: 18px;

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

    --p-font: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --p-ease: cubic-bezier(.2,.8,.2,1);
    --p-ring: 0 0 0 4px rgba(110,168,254,.18);

    /* Shadows */
    --p-shadow-1: 0 10px 22px rgba(0,0,0,.25);
    --p-shadow-2: 0 14px 40px rgba(0,0,0,.35);
    --p-shadow-3: 0 18px 60px rgba(0,0,0,.55);

    /* Cards / panels */
    --p-card-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    --p-card-border: rgba(255,255,255,.14);
    --p-card-shadow: 0 18px 45px rgba(0,0,0,.35);

    --p-panel-bg: rgba(10,16,30,.96);
    --p-panel-border: rgba(255,255,255,.12);
    --p-panel-shadow: var(--p-shadow-3);

    /* Dropdowns / menus */
    --p-dropdown-bg: var(--p-bg2);
    --p-dropdown-border: var(--p-border);
    --p-dropdown-shadow: 0 18px 60px rgba(0,0,0,.40);
    --p-dropdown-item-hover-bg: var(--p-surface-2);
    --p-dropdown-item-active-bg: var(--p-surface-3);

    /* Header / nav */
    --p-header-bg: var(--p-surface);
    --p-header-border: rgba(255,255,255,.08);
    --p-header-shadow: 0 10px 30px rgba(0,0,0,.35);

    --p-mobile-nav-bg: rgba(10,16,30,.92);
    --p-mobile-nav-border: rgba(255,255,255,.10);
    --p-mobile-nav-text: rgba(255,255,255,.92);

    --p-mobile-sheet-bg: rgba(10,16,30,.96);
    --p-mobile-sheet-border: rgba(255,255,255,.12);
    --p-mobile-sheet-backdrop: rgba(0,0,0,.55);

    /* Tiles / chips */
    --p-tile-bg: transparent;
    --p-tile-hover-bg: rgba(255,255,255,.03);
    --p-tile-border: rgba(255,255,255,.10);
    --p-tile-border-hover: rgba(255,255,255,.16);
    --p-tile-shadow: 0 8px 28px rgba(0,0,0,.35);
    --p-tile-shadow-hover: 0 12px 40px rgba(0,0,0,.45);

    --p-chip-bg: rgba(255,255,255,.04);
    --p-chip-border: rgba(110,168,254,.35);
    --p-chip-text: rgba(255,255,255,.92);

    /* Status pills */
    --p-status-info-text: #93c5fd;
    --p-status-info-bg: rgba(59,130,246,.12);
    --p-status-info-border: rgba(59,130,246,.45);

    --p-status-success-text: #4ade80;
    --p-status-success-bg: rgba(34,197,94,.12);
    --p-status-success-border: rgba(34,197,94,.45);

    --p-status-warning-text: #facc15;
    --p-status-warning-bg: rgba(234,179,8,.12);
    --p-status-warning-border: rgba(234,179,8,.55);

    --p-status-danger-text: #fb7185;
    --p-status-danger-bg: rgba(244,63,94,.12);
    --p-status-danger-border: rgba(244,63,94,.45);

    /* Forms / controls */
    --p-control-bg: rgba(255,255,255,.06);
    --p-control-bg-hover: rgba(255,255,255,.08);
    --p-control-border: rgba(255,255,255,.14);
    --p-control-border-strong: rgba(255,255,255,.25);
    --p-control-text: rgba(255,255,255,.92);

    /* Loaders */
    --p-spinner-track: rgba(255,255,255,.18);
    --p-spinner-active: rgba(255,255,255,.85);
    --p-spinner-inner: rgba(255,255,255,.35);
    --p-loading-bar-bg: rgba(255,255,255,.14);
    --p-loading-bar-fill: rgba(255,255,255,.70);

    /* Date/time widgets */
    --p-picker-bg: rgba(13,20,35,.98);
    --p-picker-border: rgba(255,255,255,.14);
    --p-picker-shadow: 0 18px 60px rgba(0,0,0,.55);
    --p-picker-cell-hover-bg: rgba(255,255,255,.06);
    --p-picker-muted: rgba(255,255,255,.35);



    /* Alerts */
    --p-alert-bg: rgba(10,16,30,.78);
    --p-alert-border: rgba(255,255,255,.10);
    --p-alert-shadow: 0 18px 70px rgba(0,0,0,.40);

    --p-alert-icon-bg: rgba(255,255,255,.06);
    --p-alert-icon-border: rgba(255,255,255,.10);

    --p-alert-title: rgba(255,255,255,.92);
    --p-alert-desc: rgba(255,255,255,.72);

    --p-alert-close: rgba(255,255,255,.65);
    --p-alert-close-hover: rgba(255,255,255,.92);
    --p-alert-close-hover-bg: rgba(255,255,255,.06);

    --p-alert-bar-bg: rgba(255,255,255,.08);
    --p-alert-bar-fill: rgba(255,255,255,.38);

    --p-alert-info-border: rgba(80,140,255,.28);
    --p-alert-success-border: rgba(40,180,120,.26);
    --p-alert-warning-border: rgba(255,200,0,.24);
    --p-alert-danger-border: rgba(255,80,80,.25);

    --p-alert-info-icon-bg: rgba(80,140,255,.16);
    --p-alert-success-icon-bg: rgba(40,180,120,.16);
    --p-alert-warning-icon-bg: rgba(255,200,0,.14);
    --p-alert-danger-icon-bg: rgba(255,80,80,.14);

    --p-alert-info-icon: rgba(205,220,255,.95);
    --p-alert-success-icon: rgba(190,255,220,.95);
    --p-alert-warning-icon: rgba(255,235,170,.95);
    --p-alert-danger-icon: rgba(255,200,200,.95);

    --p-alert-solid-bg: rgba(255,255,255,.06);
    --p-alert-solid-border: rgba(255,255,255,.10);
    --p-alert-solid-shadow: 0 14px 44px rgba(0,0,0,.35);

    --p-alert-solid-info-bg: linear-gradient(180deg, rgba(37,99,235,.22), rgba(30,58,138,.18));
    --p-alert-solid-success-bg: linear-gradient(180deg, rgba(34,197,94,.18), rgba(20,83,45,.16));
    --p-alert-solid-warning-bg: linear-gradient(180deg, rgba(234,179,8,.16), rgba(113,63,18,.16));
    --p-alert-solid-danger-bg: linear-gradient(180deg, rgba(244,63,94,.16), rgba(127,29,29,.16));



    /* Flash notifications */
    --txf-surface: color-mix(in srgb, var(--p-surface, #0b1220) 70%, transparent);
    --txf-text: #f9fafb;
    --txf-muted: rgba(249,250,251,.82);
    --txf-close: rgba(249,250,251,.72);
    --txf-shadow: 0 18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
    --txf-border-mix: 75%;
    --txf-backdrop-saturate: 1.2;

    --txf-primary-icon-bg: rgba(59,130,246,.18);
    --txf-primary-icon: #bfdbfe;
    --txf-success-icon-bg: rgba(34,197,94,.20);
    --txf-success-icon: #bbf7d0;
    --txf-warning-icon-bg: rgba(234,179,8,.20);
    --txf-warning-icon: #fef9c3;
    --txf-danger-icon-bg: rgba(239,68,68,.20);
    --txf-danger-icon: #fecaca;

    /* Bell notifications */
    --p-bell-item-bg: rgba(255,255,255,.02);
    --p-bell-item-hover-bg: rgba(255,255,255,.04);
    --p-bell-item-border: rgba(255,255,255,.10);
    --p-bell-item-hover-border: rgba(110,168,254,.28);
    --p-bell-item-shadow: 0 10px 30px rgba(0,0,0,.25);
    --p-bell-item-hover-shadow: 0 14px 42px rgba(0,0,0,.35);
    --p-bell-unread-outline: rgba(110,168,254,.75);

    --p-bell-icon-bg: rgba(255,255,255,.05);
    --p-bell-icon-border: rgba(255,255,255,.10);
    --p-bell-icon-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    --p-bell-icon: rgba(147,197,253,.95);

    --p-bell-title: rgba(255,255,255,.92);
    --p-bell-meta: rgba(255,255,255,.62);
    --p-bell-right-bg: rgba(255,255,255,.04);
    --p-bell-right-border: rgba(255,255,255,.10);
    --p-bell-right-text: rgba(255,255,255,.55);
    --p-bell-scrollbar: rgba(255,255,255,.18);

    /* Chat */
    --p-chat-card-bg: rgba(10,16,30,.88);
    --p-chat-card-border: rgba(255,255,255,.12);
    --p-chat-card-shadow: 0 18px 55px rgba(0,0,0,.36);
    --p-chat-stream-bg: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
    --p-chat-composer-bg: rgba(10,16,30,.96);
    --p-chat-message-mine-bg: #2563eb;
    --p-chat-message-mine-text: #ffffff;
    --p-chat-message-mine-meta: rgba(255,255,255,.72);
    --p-chat-message-theirs-bg: rgba(96,165,250,.20);
    --p-chat-message-theirs-text: rgba(255,255,255,.92);
    --p-chat-message-theirs-meta: rgba(219,234,254,.68);


    /* User group cards */
    --p-usergroup-card-bg: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    --p-usergroup-card-border: rgba(255,255,255,.12);
    --p-usergroup-card-shadow: 0 14px 36px rgba(0,0,0,.28);

    --p-usergroup-glow-opacity: .55;
    --p-usergroup-glow-mix: 14%;

    --p-usergroup-icon-bg: rgba(255,255,255,.06);
    --p-usergroup-icon-border: rgba(255,255,255,.12);

    --p-usergroup-title: #ffffff;
    --p-usergroup-sub: var(--p-muted);

    --p-usergroup-message-bg: rgba(255,255,255,.04);
    --p-usergroup-message-border: rgba(255,255,255,.08);
    --p-usergroup-message-text: rgba(255,255,255,.86);

    --p-usergroup-subtle-bg: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
    --p-usergroup-subtle-border: rgba(255,255,255,.10);
    --p-usergroup-subtle-shadow: 0 10px 26px rgba(0,0,0,.20);
    --p-usergroup-subtle-icon-bg: rgba(255,255,255,.045);
    --p-usergroup-subtle-sub: rgba(255,255,255,.60);

    --p-usergroup-warning-border: rgba(234,179,8,.52);
    --p-usergroup-warning-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(234,179,8,.12);
    --p-usergroup-warning-icon-bg: rgba(234,179,8,.14);
    --p-usergroup-warning-icon-border: rgba(234,179,8,.28);
    --p-usergroup-warning-icon: rgba(250,204,21,1);

    --p-usergroup-standby-border: rgba(245,158,11,.52);
    --p-usergroup-standby-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.12);
    --p-usergroup-standby-icon-bg: rgba(245,158,11,.14);
    --p-usergroup-standby-icon-border: rgba(245,158,11,.28);
    --p-usergroup-standby-icon: rgba(251,191,36,1);

    --p-usergroup-danger-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
    --p-usergroup-danger-border: rgba(239,68,68,.62);
    --p-usergroup-danger-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 40px rgba(0,0,0,.34), 0 0 0 1px rgba(239,68,68,.16);
    --p-usergroup-danger-stripe: #ff5a5a;
    --p-usergroup-danger-icon-bg: rgba(239,68,68,.20);
    --p-usergroup-danger-icon-border: rgba(239,68,68,.42);
    --p-usergroup-danger-icon: #ff7b7b;

    --p-usergroup-success-compact-text: #4ade80;
    --p-usergroup-success-compact-border: rgba(34,197,94,.35);

    /* Schedule date badges */
    --p-schedule-date-accent: var(--p-primary);
    --p-schedule-date-bg: color-mix(in srgb, var(--p-primary) 13%, var(--p-surface) 87%);
    --p-schedule-date-border: rgba(110,168,254,.32);
    --p-schedule-date-label-bg: var(--p-primary);
    --p-schedule-date-label-text: #ffffff;
    --p-schedule-date-number: #ffffff;
    --p-schedule-date-sub-bg: rgba(255,255,255,.08);
    --p-schedule-date-sub-text: rgba(219,234,254,.78);

    /* Upcoming hub shifts */
    --p-upcoming-date-accent: var(--p-schedule-date-accent);
    --p-upcoming-date-body: var(--p-schedule-date-bg);
    --p-upcoming-date-border: var(--p-schedule-date-border);
    --p-upcoming-date-month-bg: var(--p-schedule-date-label-bg);
    --p-upcoming-date-month: var(--p-schedule-date-label-text);
    --p-upcoming-date-day: var(--p-schedule-date-number);
    --p-upcoming-date-dow-bg: var(--p-schedule-date-sub-bg);
    --p-upcoming-date-dow: var(--p-schedule-date-sub-text);
    --p-upcoming-bg: linear-gradient(90deg, rgba(59,130,246,.12), transparent 40%), var(--p-card-bg);
    --p-upcoming-border: rgba(110,168,254,.30);
    --p-upcoming-shadow: 0 14px 34px rgba(0,0,0,.30);
    --p-upcoming-state-bg: rgba(34,197,94,.12);
    --p-upcoming-state-border: rgba(34,197,94,.30);
    --p-upcoming-state-text: #86efac;
    --p-upcoming-action-bg: linear-gradient(90deg, rgba(245,158,11,.14), transparent 40%), var(--p-card-bg);
    --p-upcoming-action-border: rgba(245,158,11,.34);
    --p-upcoming-action-state-bg: rgba(245,158,11,.14);
    --p-upcoming-action-state-border: rgba(245,158,11,.30);
    --p-upcoming-action-state-text: #fde68a;
    --p-upcoming-note: rgba(255,255,255,.68);

    /* Pending hub shifts */
    --p-pending-accent: #f59e0b;
    --p-pending-bg: linear-gradient(90deg, rgba(245,158,11,.10), transparent 28%), var(--p-card-bg);
    --p-pending-border: rgba(245,158,11,.28);
    --p-pending-shadow: 0 10px 26px rgba(0,0,0,.24);
    --p-pending-topline: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    --p-pending-chip-bg: rgba(245,158,11,.12);
    --p-pending-chip-border: rgba(245,158,11,.26);
    --p-pending-chip-text: #fde68a;
    --p-pending-hint: rgba(255,255,255,.62);


    /* Confirm modal */
    --p-cmodal-backdrop: rgba(0,0,0,.85);
    --p-cmodal-backdrop-blur: none;

    --p-cmodal-panel-bg: var(--p-surface-1);
    --p-cmodal-panel-border: var(--p-border);
    --p-cmodal-panel-shadow: 0 24px 70px rgba(0,0,0,.60);

    --p-cmodal-title: #ffffff;
    --p-cmodal-subtitle: rgba(255,255,255,.82);
    --p-cmodal-body: rgba(255,255,255,.86);

    --p-cmodal-close-bg: rgba(0,0,0,.14);
    --p-cmodal-close-bg-hover: rgba(0,0,0,.22);
    --p-cmodal-close-border: rgba(255,255,255,.14);
    --p-cmodal-close-text: rgba(255,255,255,.90);

    --p-cmodal-icon-bg: rgba(0,0,0,.18);
    --p-cmodal-icon-border: rgba(255,255,255,.14);
    --p-cmodal-icon-text: rgba(255,255,255,.92);

    --p-cmodal-info-bg: rgba(59,130,246,.18);
    --p-cmodal-info-border: rgba(59,130,246,.38);
    --p-cmodal-info-icon-bg: rgba(59,130,246,.30);
    --p-cmodal-info-icon-border: rgba(59,130,246,.40);
    --p-cmodal-info-icon-text: #dbeafe;

    --p-cmodal-success-bg: rgba(34,197,94,.18);
    --p-cmodal-success-border: rgba(34,197,94,.38);
    --p-cmodal-success-icon-bg: rgba(34,197,94,.30);
    --p-cmodal-success-icon-border: rgba(34,197,94,.40);
    --p-cmodal-success-icon-text: #dcfce7;

    --p-cmodal-warning-bg: rgba(234,179,8,.18);
    --p-cmodal-warning-border: rgba(234,179,8,.40);
    --p-cmodal-warning-icon-bg: rgba(234,179,8,.32);
    --p-cmodal-warning-icon-border: rgba(234,179,8,.44);
    --p-cmodal-warning-icon-text: #fef9c3;

    --p-cmodal-danger-bg: rgba(244,63,94,.18);
    --p-cmodal-danger-border: rgba(244,63,94,.42);
    --p-cmodal-danger-icon-bg: rgba(244,63,94,.32);
    --p-cmodal-danger-icon-border: rgba(244,63,94,.46);
    --p-cmodal-danger-icon-text: #ffe4e6;


}