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

Defines the light portal theme.

Put light-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="light"]{
    /* Base */
    --p-bg: #f8fafc;
    --p-bg2: #eef3f9;
    --p-surface: #ffffff;

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

    --p-html-bg: #f8fafc;

    /* Text */
    --p-text: rgba(15,23,42,.92);
    --p-text-strong: rgba(15,23,42,.96);
    --p-muted: rgba(51,65,85,.72);
    --p-muted-2: rgba(71,85,105,.58);
    --p-link: var(--p-primary);
    --p-link-hover: #1d4ed8;

    /* Surfaces */
    --p-surface-1: rgba(255,255,255,.92);
    --p-surface-2: rgba(241,245,249,.92);
    --p-surface-3: rgba(226,232,240,.95);

    --p-border: rgba(15,23,42,.10);
    --p-border-strong: rgba(15,23,42,.16);

    /* Accent colours */
    --p-primary: #3b82f6;
    --p-accent: #8b5cf6;
    --p-success: #22c55e;
    --p-warning: #f59e0b;
    --p-danger: #ef4444;

    /* 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(59,130,246,.16);

    /* Shadows */
    --p-shadow-1: 0 10px 24px rgba(15,23,42,.08);
    --p-shadow-2: 0 16px 40px rgba(15,23,42,.12);
    --p-shadow-3: 0 18px 40px rgba(15,23,42,.12);

    /* Cards / panels */
    --p-card-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    --p-card-border: rgba(15,23,42,.10);
    --p-card-shadow: 0 18px 45px rgba(15,23,42,.10);

    --p-panel-bg: rgba(255,255,255,.98);
    --p-panel-border: rgba(15,23,42,.10);
    --p-panel-shadow: var(--p-shadow-3);

    /* Dropdowns / menus */
    --p-dropdown-bg: rgba(255,255,255,.98);
    --p-dropdown-border: rgba(15,23,42,.10);
    --p-dropdown-shadow: 0 18px 40px rgba(15,23,42,.10);
    --p-dropdown-item-hover-bg: rgba(15,23,42,.04);
    --p-dropdown-item-active-bg: rgba(15,23,42,.08);

    /* Header / nav */
    --p-header-bg: rgba(255,255,255,.96);
    --p-header-border: rgba(15,23,42,.08);
    --p-header-shadow: 0 10px 30px rgba(15,23,42,.10);
    --p-mobile-safe-bg: #0f172a;

    --p-mobile-nav-bg: rgba(255,255,255,.96);
    --p-mobile-nav-border: rgba(15,23,42,.10);
    --p-mobile-nav-text: rgba(15,23,42,.88);

    --p-mobile-sheet-bg: rgba(255,255,255,.98);
    --p-mobile-sheet-border: rgba(15,23,42,.10);
    --p-mobile-sheet-backdrop: rgba(15,23,42,.35);

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

    --p-chip-bg: rgba(59,130,246,.06);
    --p-chip-border: rgba(110,168,254,.24);
    --p-chip-text: rgba(15,23,42,.92);

    /* Status pills */
    --p-status-info-text: #2563eb;
    --p-status-info-bg: rgba(59,130,246,.10);
    --p-status-info-border: rgba(59,130,246,.28);

    --p-status-success-text: #15803d;
    --p-status-success-bg: rgba(34,197,94,.10);
    --p-status-success-border: rgba(34,197,94,.28);

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

    --p-status-danger-text: #dc2626;
    --p-status-danger-bg: rgba(244,63,94,.10);
    --p-status-danger-border: rgba(244,63,94,.28);

    /* Forms / controls */
    --p-control-bg: rgba(255,255,255,.96);
    --p-control-bg-hover: rgba(248,250,252,.96);
    --p-control-border: rgba(15,23,42,.12);
    --p-control-border-strong: rgba(15,23,42,.22);
    --p-control-text: rgba(15,23,42,.92);

    /* Loaders */
    --p-spinner-track: rgba(15,23,42,.14);
    --p-spinner-active: rgba(15,23,42,.70);
    --p-spinner-inner: rgba(15,23,42,.24);
    --p-loading-bar-bg: rgba(15,23,42,.10);
    --p-loading-bar-fill: rgba(15,23,42,.55);

    /* Date/time widgets */
    --p-picker-bg: rgba(255,255,255,.98);
    --p-picker-border: rgba(15,23,42,.10);
    --p-picker-shadow: 0 18px 40px rgba(15,23,42,.12);
    --p-picker-cell-hover-bg: rgba(15,23,42,.04);
    --p-picker-muted: rgba(51,65,85,.35);


    /* Alerts */
    --p-alert-bg: rgba(255,255,255,.94);
    --p-alert-border: rgba(15,23,42,.10);
    --p-alert-shadow: 0 18px 40px rgba(15,23,42,.10);

    --p-alert-icon-bg: rgba(15,23,42,.04);
    --p-alert-icon-border: rgba(15,23,42,.08);

    --p-alert-title: rgba(15,23,42,.94);
    --p-alert-desc: rgba(51,65,85,.82);

    --p-alert-close: rgba(51,65,85,.62);
    --p-alert-close-hover: rgba(15,23,42,.88);
    --p-alert-close-hover-bg: rgba(15,23,42,.05);

    --p-alert-bar-bg: rgba(15,23,42,.08);
    --p-alert-bar-fill: rgba(15,23,42,.22);

    --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,.28);
    --p-alert-danger-border: rgba(255,80,80,.28);

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

    --p-alert-info-icon: #2563eb;
    --p-alert-success-icon: #15803d;
    --p-alert-warning-icon: #b45309;
    --p-alert-danger-icon: #dc2626;

    --p-alert-solid-bg: rgba(248,250,252,.98);
    --p-alert-solid-border: rgba(15,23,42,.10);
    --p-alert-solid-shadow: 0 14px 36px rgba(15,23,42,.10);

    --p-alert-solid-info-bg: linear-gradient(180deg, rgba(37,99,235,.10), rgba(191,219,254,.65));
    --p-alert-solid-success-bg: linear-gradient(180deg, rgba(34,197,94,.10), rgba(220,252,231,.70));
    --p-alert-solid-warning-bg: linear-gradient(180deg, rgba(245,158,11,.10), rgba(254,243,199,.76));
    --p-alert-solid-danger-bg: linear-gradient(180deg, rgba(239,68,68,.10), rgba(254,226,226,.72));




    /* Flash notifications */
    --txf-surface: color-mix(in srgb, var(--p-surface, #ffffff) 94%, transparent);
    --txf-text: #0f172a;
    --txf-muted: rgba(51,65,85,.84);
    --txf-close: rgba(51,65,85,.70);
    --txf-shadow: 0 16px 36px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.65);
    --txf-border-mix: 35%;
    --txf-backdrop-saturate: 1.08;

    --txf-primary-icon-bg: rgba(59,130,246,.12);
    --txf-primary-icon: #2563eb;
    --txf-success-icon-bg: rgba(34,197,94,.14);
    --txf-success-icon: #15803d;
    --txf-warning-icon-bg: rgba(234,179,8,.16);
    --txf-warning-icon: #a16207;
    --txf-danger-icon-bg: rgba(239,68,68,.14);
    --txf-danger-icon: #dc2626;

    /* Bell notifications */
    --p-bell-item-bg: rgba(255,255,255,.92);
    --p-bell-item-hover-bg: #f8fafc;
    --p-bell-item-border: rgba(15,23,42,.08);
    --p-bell-item-hover-border: rgba(59,130,246,.24);
    --p-bell-item-shadow: 0 10px 24px rgba(15,23,42,.08);
    --p-bell-item-hover-shadow: 0 14px 30px rgba(15,23,42,.12);
    --p-bell-unread-outline: rgba(37,99,235,.65);

    --p-bell-icon-bg: rgba(59,130,246,.08);
    --p-bell-icon-border: rgba(59,130,246,.14);
    --p-bell-icon-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    --p-bell-icon: #2563eb;

    --p-bell-title: rgba(15,23,42,.92);
    --p-bell-meta: rgba(71,85,105,.78);
    --p-bell-right-bg: rgba(15,23,42,.04);
    --p-bell-right-border: rgba(15,23,42,.08);
    --p-bell-right-text: rgba(51,65,85,.68);
    --p-bell-scrollbar: rgba(15,23,42,.16);

    /* Chat */
    --p-chat-card-bg: rgba(255,255,255,.96);
    --p-chat-card-border: rgba(15,23,42,.10);
    --p-chat-card-shadow: 0 18px 45px rgba(15,23,42,.10);
    --p-chat-stream-bg: linear-gradient(180deg, rgba(248,250,252,.92), rgba(241,245,249,.88));
    --p-chat-composer-bg: rgba(255,255,255,.96);
    --p-chat-message-mine-bg: #3b82f6;
    --p-chat-message-mine-text: #ffffff;
    --p-chat-message-mine-meta: rgba(255,255,255,.76);
    --p-chat-message-theirs-bg: #dbeafe;
    --p-chat-message-theirs-text: rgba(15,23,42,.92);
    --p-chat-message-theirs-meta: rgba(51,65,85,.70);




    /* User group cards */
    --p-usergroup-card-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    --p-usergroup-card-border: rgba(15,23,42,.10);
    --p-usergroup-card-shadow: 0 14px 32px rgba(15,23,42,.08);

    --p-usergroup-glow-opacity: .5;
    --p-usergroup-glow-mix: 12%;

    --p-usergroup-icon-bg: rgba(15,23,42,.04);
    --p-usergroup-icon-border: rgba(15,23,42,.08);

    --p-usergroup-title: rgba(15,23,42,.95);
    --p-usergroup-sub: var(--p-muted);

    --p-usergroup-message-bg: rgba(248,250,252,.92);
    --p-usergroup-message-border: rgba(15,23,42,.08);
    --p-usergroup-message-text: rgba(51,65,85,.88);

    --p-usergroup-subtle-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
    --p-usergroup-subtle-border: rgba(15,23,42,.08);
    --p-usergroup-subtle-shadow: 0 10px 24px rgba(15,23,42,.06);
    --p-usergroup-subtle-icon-bg: rgba(15,23,42,.04);
    --p-usergroup-subtle-sub: rgba(71,85,105,.72);

    --p-usergroup-warning-border: rgba(234,179,8,.36);
    --p-usergroup-warning-shadow: 0 14px 32px rgba(15,23,42,.08), 0 0 0 1px rgba(234,179,8,.10);
    --p-usergroup-warning-icon-bg: rgba(234,179,8,.10);
    --p-usergroup-warning-icon-border: rgba(234,179,8,.20);
    --p-usergroup-warning-icon: #ca8a04;

    --p-usergroup-standby-border: rgba(245,158,11,.36);
    --p-usergroup-standby-shadow: 0 14px 32px rgba(15,23,42,.08), 0 0 0 1px rgba(245,158,11,.10);
    --p-usergroup-standby-icon-bg: rgba(245,158,11,.10);
    --p-usergroup-standby-icon-border: rgba(245,158,11,.20);
    --p-usergroup-standby-icon: #d97706;

    --p-usergroup-danger-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,242,242,.94));
    --p-usergroup-danger-border: rgba(239,68,68,.42);
    --p-usergroup-danger-shadow: 0 16px 36px rgba(15,23,42,.10), 0 0 0 1px rgba(239,68,68,.12);
    --p-usergroup-danger-stripe: #ef4444;
    --p-usergroup-danger-icon-bg: rgba(239,68,68,.10);
    --p-usergroup-danger-icon-border: rgba(239,68,68,.22);
    --p-usergroup-danger-icon: #dc2626;

    --p-usergroup-success-compact-text: #16a34a;
    --p-usergroup-success-compact-border: rgba(34,197,94,.28);

    /* Schedule date badges */
    --p-schedule-date-accent: var(--p-primary);
    --p-schedule-date-bg: color-mix(in srgb, var(--p-primary) 9%, rgba(255,255,255,.94));
    --p-schedule-date-border: rgba(59,130,246,.24);
    --p-schedule-date-label-bg: var(--p-primary);
    --p-schedule-date-label-text: #ffffff;
    --p-schedule-date-number: #0f172a;
    --p-schedule-date-sub-bg: rgba(15,23,42,.05);
    --p-schedule-date-sub-text: rgba(51,65,85,.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(239,246,255,.96), rgba(255,255,255,.98) 42%), var(--p-card-bg);
    --p-upcoming-border: rgba(59,130,246,.24);
    --p-upcoming-shadow: 0 12px 30px rgba(15,23,42,.08);
    --p-upcoming-state-bg: rgba(240,253,244,.96);
    --p-upcoming-state-border: rgba(34,197,94,.24);
    --p-upcoming-state-text: #15803d;
    --p-upcoming-action-bg: linear-gradient(90deg, rgba(255,251,235,.94), rgba(255,255,255,.98) 42%), var(--p-card-bg);
    --p-upcoming-action-border: rgba(245,158,11,.28);
    --p-upcoming-action-state-bg: rgba(255,251,235,.96);
    --p-upcoming-action-state-border: rgba(245,158,11,.26);
    --p-upcoming-action-state-text: #b45309;
    --p-upcoming-note: rgba(51,65,85,.76);

    /* Pending hub shifts */
    --p-pending-accent: #f59e0b;
    --p-pending-bg: linear-gradient(90deg, rgba(255,251,235,.88), rgba(255,255,255,.98) 36%), var(--p-card-bg);
    --p-pending-border: rgba(245,158,11,.22);
    --p-pending-shadow: 0 10px 24px rgba(146,64,14,.08);
    --p-pending-topline: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    --p-pending-chip-bg: rgba(255,251,235,.92);
    --p-pending-chip-border: rgba(245,158,11,.22);
    --p-pending-chip-text: #b45309;
    --p-pending-hint: rgba(71,85,105,.70);



    /* Confirm modal */
    --p-cmodal-backdrop: rgba(15,23,42,.44);
    --p-cmodal-backdrop-blur: blur(2px);

    --p-cmodal-panel-bg: var(--p-surface);
    --p-cmodal-panel-border: var(--p-border);
    --p-cmodal-panel-shadow: 0 24px 60px rgba(15,23,42,.16);

    --p-cmodal-title: rgba(15,23,42,.96);
    --p-cmodal-subtitle: rgba(51,65,85,.80);
    --p-cmodal-body: rgba(51,65,85,.88);

    --p-cmodal-close-bg: rgba(15,23,42,.04);
    --p-cmodal-close-bg-hover: rgba(15,23,42,.08);
    --p-cmodal-close-border: rgba(15,23,42,.10);
    --p-cmodal-close-text: rgba(15,23,42,.82);

    --p-cmodal-icon-bg: rgba(15,23,42,.05);
    --p-cmodal-icon-border: rgba(15,23,42,.08);
    --p-cmodal-icon-text: rgba(15,23,42,.78);

    --p-cmodal-info-bg: rgba(239,246,255,.98);
    --p-cmodal-info-border: rgba(59,130,246,.28);
    --p-cmodal-info-icon-bg: rgba(59,130,246,.14);
    --p-cmodal-info-icon-border: rgba(59,130,246,.20);
    --p-cmodal-info-icon-text: #2563eb;

    --p-cmodal-success-bg: rgba(240,253,244,.98);
    --p-cmodal-success-border: rgba(34,197,94,.28);
    --p-cmodal-success-icon-bg: rgba(34,197,94,.14);
    --p-cmodal-success-icon-border: rgba(34,197,94,.20);
    --p-cmodal-success-icon-text: #15803d;

    --p-cmodal-warning-bg: rgba(255,251,235,.98);
    --p-cmodal-warning-border: rgba(234,179,8,.30);
    --p-cmodal-warning-icon-bg: rgba(234,179,8,.16);
    --p-cmodal-warning-icon-border: rgba(234,179,8,.22);
    --p-cmodal-warning-icon-text: #a16207;

    --p-cmodal-danger-bg: rgba(254,242,242,.98);
    --p-cmodal-danger-border: rgba(244,63,94,.30);
    --p-cmodal-danger-icon-bg: rgba(244,63,94,.16);
    --p-cmodal-danger-icon-border: rgba(244,63,94,.22);
    --p-cmodal-danger-icon-text: #dc2626;



}