/* WBL Connect UI — canonical stylesheet */

/* =========================
       WBL CONNECT — DESIGN TOKENS (v0.9)
       Cel: spójne proporcje ERP + łatwe role/tryby bez „magii” w CSS.
       ========================= */

    :root{
      /* Typography */
      --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --fs-11: 11px;
      --fs-12: 12px;
      --fs-13: 13px;
      --fs-14: 14px;
      --fs-15: 15px;
      --fs-16: 16px;
      --fs-18: 18px;
      --fs-22: 22px;
      --fs-28: 28px;

      --fw-500: 500;
      --fw-600: 600;
      --fw-700: 700;
      --fw-800: 800;

      --lh-100: 1.0;
      --lh-120: 1.2;
      --lh-140: 1.4;

      /* Spacing (ERP-density) */
      --sp-2: 2px;
      --sp-4: 4px;
      --sp-6: 6px;
      --sp-8: 8px;
      --sp-10: 10px;
      --sp-12: 12px;
      --sp-14: 14px;
      --sp-16: 16px;
      --sp-20: 20px;
      --sp-24: 24px;
      --sp-28: 28px;
      --sp-32: 32px;

      /* Radii */
      --r-8: 8px;
      --r-10: 10px;
      --r-12: 12px;
      --r-14: 14px;
      --r-16: 16px;

      /* Elevation (soft, not black) */
      --shadow-soft: 0 12px 32px rgba(0,0,0,.28);
      --shadow-panel: 0 10px 26px rgba(0,0,0,.25);
      --shadow-chip: 0 6px 14px rgba(0,0,0,.22);

      /* Layout */
      --topbar-h: 64px;              /* mniejszy niż „hero”; statusowy */
      --sidebar-w: 260px;
      --content-max: 1240px;

      /* Table density */
      --row-h: 56px;
      --thead-h: 44px;
      --cell-pad-x: 14px;

      /* Motion */
      --t-fast: 120ms;
      --t-med: 180ms;
      --ease: cubic-bezier(.2,.8,.2,1);

      /* Role + Theme vars (ustawiane na <body>) */
      --app-bg: #061813;          /* background (very dark bottle green) */
      --surface-1: #0f2b21;       /* panels */
      --surface-2: #143d2c;       /* slightly brighter */
      --surface-3: #1b4d32;       /* highlights */
      --stroke: rgba(255,255,255,.08);
      --stroke-2: rgba(255,255,255,.12);

      --text: #ffffff;
      --text-muted: rgba(224,240,234,.68);
      --text-faint: rgba(224,240,234,.52);

      --cta: #e5c300;             /* warm yellow */
      --cta-text: #0b0b0b;

      --good: #35d07f;
      --warn: #ffcc33;
      --bad: #ff5b6b;

      --focus: rgba(229,195,0,.34);
      --glass: rgba(12,32,24,.55);
      --glass-2: rgba(10,26,20,.42);
    }

    /* Theme overrides (LIGHT) — nadal „zielony”, ale jaśniej i czytelnie */
    /* =========================
       THEME + ROLE ENGINE (global)
       Zasada: THEME ustawia luminancję i neutralne powierzchnie,
               ROLE ustawia akcent + klimat (glow).
       Dzięki temu "Jasny" i "Ciemny" są zawsze rozróżnialne na każdej zakładce/roli.
       ========================= */

    /* THEME: DARK (base) */
    body[data-theme="dark"]{
      --app-bg: #070A0F;
      --surface-1: rgba(255,255,255,.06);
      --surface-2: rgba(255,255,255,.08);
      --surface-3: rgba(255,255,255,.10);

      --stroke: rgba(255,255,255,.10);
      --stroke-2: rgba(255,255,255,.14);

      --text: rgba(255,255,255,.92);
      --text-muted: rgba(255,255,255,.68);
      --text-faint: rgba(255,255,255,.50);

      --glass: rgba(16,18,22,.58);
      --glass-2: rgba(16,18,22,.44);

      /* neutral dark glows (roles can override) */
      --bg-glow-1: rgba(255,154,47,.08);
      --bg-glow-2: rgba(88,140,255,.10);
      --vignette: rgba(0,0,0,.55);
    }

    /* THEME: LIGHT (base) — ERP, jasne tło + ciemny tekst */
    body[data-theme="light"]{
      --app-bg: #EEF2F8;
      --surface-1: #FFFFFF;
      --surface-2: #F6F8FC;
      --surface-3: #EDF2FA;

      --stroke: rgba(11,21,36,.12);
      --stroke-2: rgba(11,21,36,.18);

      --text: #0B1524;
      --text-muted: rgba(11,21,36,.72);
      --text-faint: rgba(11,21,36,.54);

      --glass: rgba(255,255,255,.72);
      --glass-2: rgba(255,255,255,.62);

      /* subtle light glows (roles can override) */
      --bg-glow-1: rgba(88,140,255,.07);
      --bg-glow-2: rgba(255,154,47,.05);
      --vignette: rgba(0,0,0,0);
    }

    /* ROLE: accents (independent of theme) */
    body[data-role="SERWIS"]{
      --cta:#ff9a2f;
      --cta-text:#111111;
      --focus: rgba(255,154,47,.30);
    }
    body[data-role="DEALER"]{
      --cta:#c9a400;
      --cta-text:#0b0b0b;
      --focus: rgba(201,164,0,.28);
    }
    body[data-role="ADMIN"]{
      --cta:#c7ff4f;
      --cta-text:#0d0f10;
      --focus: rgba(199,255,79,.24);
    }

    
    /* ROLE + THEME: LIGHT palettes (czytelne odróżnienie roli także w jasnym trybie) */
    body[data-role="SERWIS"][data-theme="light"]{
      --app-bg: #E9EEF7;
      --surface-2: #F1F5FD;
      --surface-3: #E6ECF8;
      --stroke: rgba(26,56,96,.14);
      --stroke-2: rgba(26,56,96,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(88,140,255,.22);
      --bg-glow-2: rgba(255,154,47,.10);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(226,236,252,.82);
    }
    body[data-role="DEALER"][data-theme="light"]{
      --app-bg: #EAF4EF;
      --surface-2: #F1FAF5;
      --surface-3: #E2F0E8;
      --stroke: rgba(14,48,32,.14);
      --stroke-2: rgba(14,48,32,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(30,130,80,.20);
      --bg-glow-2: rgba(201,164,0,.10);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(226,244,235,.82);
    }
    body[data-role="ADMIN"][data-theme="light"]{
      --app-bg: #F1F7EA;
      --surface-2: #F7FBEF;
      --surface-3: #EAF5D6;
      --stroke: rgba(38,46,20,.14);
      --stroke-2: rgba(38,46,20,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(199,255,79,.16);
      --bg-glow-2: rgba(88,140,255,.08);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(242,252,226,.82);
    }

/* ROLE + THEME: DARK palettes (pełny klimat na całym ekranie) */
    body[data-role="SERWIS"][data-theme="dark"]{
      --app-bg: #060915;          /* deep navy canvas */
      --surface-1:#0a1226;         /* primary panels */
      --surface-2:#0f1c37;         /* tables/secondary */
      --surface-3:#152a52;         /* highlights */

      --stroke: rgba(232,238,255,.10);
      --stroke-2: rgba(232,238,255,.14);

      --text: rgba(255,255,255,.92);
      --text-muted: rgba(232,238,255,.72);
      --text-faint: rgba(232,238,255,.56);

      --glass: rgba(10,18,38,.58);
      --glass-2: rgba(10,18,38,.44);

      /* Ambient glows for navy dark (analogicznie do zielonego dark) */
      --bg-glow-1: rgba(255,154,47,.10);   /* warm action glow */
      --bg-glow-2: rgba(88,140,255,.14);   /* cold navy glow */
    }

    body[data-role="DEALER"][data-theme="dark"]{
      --app-bg: #07140F;
      --surface-1: rgba(255,255,255,.06);
      --surface-2: rgba(255,255,255,.08);
      --surface-3: rgba(255,255,255,.10);

      --stroke: rgba(255,255,255,.10);
      --stroke-2: rgba(255,255,255,.14);

      --text: rgba(255,255,255,.92);
      --text-muted: rgba(255,255,255,.68);
      --text-faint: rgba(255,255,255,.50);

      --glass: rgba(7,20,15,.58);
      --glass-2: rgba(7,20,15,.44);

      --bg-glow-1: rgba(201,164,0,.10);
      --bg-glow-2: rgba(30,130,80,.12);
    }

    body[data-role="ADMIN"][data-theme="dark"]{
      --app-bg:#0b0f12;
      --surface-1:#121a20;
      --surface-2:#17222a;
      --surface-3:#1d2b35;

      --stroke: rgba(235,245,250,.10);
      --stroke-2: rgba(235,245,250,.14);

      --text: rgba(255,255,255,.92);
      --text-muted: rgba(235,245,250,.72);
      --text-faint: rgba(235,245,250,.56);

      --glass: rgba(18,26,32,.58);
      --glass-2: rgba(18,26,32,.44);

      --bg-glow-1: rgba(199,255,79,.08);
      --bg-glow-2: rgba(88,140,255,.10);
    }

    /* ROLE + THEME: LIGHT tints (subtelna identyfikacja, bez psucia ERP) */
    body[data-role="SERWIS"][data-theme="light"]{
      --app-bg: #E9EEF7;
      --surface-2: #F1F5FD;
      --surface-3: #E6ECF8;
      --stroke: rgba(26,56,96,.14);
      --stroke-2: rgba(26,56,96,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(88,140,255,.22);
      --bg-glow-2: rgba(255,154,47,.10);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(226,236,252,.82);
    }
    body[data-role="DEALER"][data-theme="light"]{
      --app-bg: #EAF4EF;
      --surface-2: #F1FAF5;
      --surface-3: #E2F0E8;
      --stroke: rgba(14,48,32,.14);
      --stroke-2: rgba(14,48,32,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(30,130,80,.20);
      --bg-glow-2: rgba(201,164,0,.10);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(226,244,235,.82);
    }
    body[data-role="ADMIN"][data-theme="light"]{
      --app-bg: #F1F7EA;
      --surface-2: #F7FBEF;
      --surface-3: #EAF5D6;
      --stroke: rgba(38,46,20,.14);
      --stroke-2: rgba(38,46,20,.20);

      /* Role-tinted light glows (widoczna różnica SERWIS vs DEALER 1:1) */
      --bg-glow-1: rgba(199,255,79,.16);
      --bg-glow-2: rgba(88,140,255,.08);

      --glass: rgba(255,255,255,.86);
      --glass-2: rgba(242,252,226,.82);
    }

    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--font-sans);
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 60% 110%, rgba(229,195,0,.10), transparent 55%),
        radial-gradient(900px 480px at 18% 12%, rgba(53,208,127,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 12%),
        var(--app-bg);
      overflow:hidden;
    }
    a{color:inherit;text-decoration:none}
    button, input, select {font:inherit}
    :focus-visible{outline:2px solid var(--cta); outline-offset:2px}

    /* App shell */
    .app{
      height:100%;
      display:grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: var(--topbar-h) 1fr;
      grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    }

    /* Topbar */
    .topbar{
      grid-area: topbar;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--sp-16);
      padding: 0 var(--sp-16);
      border-bottom: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      backdrop-filter: blur(10px);
    }
    .topbar-left{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap: 2px;
      min-width: 0;
    }
    .topbar-title{
      font-size: var(--fs-14);
      font-weight: var(--fw-700);
      letter-spacing:.3px;
      white-space:nowrap;
    }
    .topbar-meta{
      font-size: var(--fs-12);
      color: var(--text-muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 72vw;
      line-height: 1.25;
    }
    .topbar-right{
      display:flex; align-items:center; gap: var(--sp-10);
    }

    .pill{
      display:inline-flex; align-items:center; gap: var(--sp-8);
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border:1px solid var(--stroke);
      box-shadow: var(--shadow-chip);
      backdrop-filter: blur(10px);
    }
    .pill label{
      font-size: var(--fs-12);
      color: var(--text-muted);
    }

    .role-select{
      height: 34px;
      border-radius: 999px;
      background: rgba(0,0,0,.20);
      color: var(--text);
      border:1px solid var(--stroke);
      padding: 0 12px;
      outline: none;
      min-width: 160px;
    }

    .theme-toggle{
      display:flex;
      border-radius: 999px;
      overflow:hidden;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.20);
      height: 34px;
    }
    .theme-toggle button{
      border:0;
      background:transparent;
      color: var(--text-muted);
      padding: 0 12px;
      cursor:pointer;
      transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
      display:inline-flex; align-items:center; gap: 8px;
      font-size: var(--fs-12);
    }
    .theme-toggle button[aria-pressed="true"]{
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      color: var(--text);
    }

    .iconbtn{
      height: 34px; width: 42px;
      border-radius: 10px;
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color: var(--text);
      cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center;
      transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
    }
    .iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

    .logout{
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(229,195,0,.28);
      background: linear-gradient(180deg, rgba(229,195,0,.22), rgba(229,195,0,.12));
      color: var(--text);
      cursor:pointer;
      padding: 0 12px;
      font-weight: var(--fw-700);
      letter-spacing:.3px;
    }
    body[data-role="SERWIS"] .logout{
      border-color: rgba(255,154,47,.30);
      background: linear-gradient(180deg, rgba(255,154,47,.22), rgba(255,154,47,.12));
    }
    body[data-role="ADMIN"] .logout{
      border-color: rgba(199,255,79,.28);
      background: linear-gradient(180deg, rgba(199,255,79,.18), rgba(199,255,79,.10));
    }

    /* Sidebar */
    .sidebar{
      grid-area: sidebar;
      display:flex;
      flex-direction:column;
      border-right: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      backdrop-filter: blur(10px);
      padding: var(--sp-14);
      gap: var(--sp-12);
      overflow:hidden;
    }
    .brand{
      display:flex;
      gap: var(--sp-10);
      align-items:center;
      padding: var(--sp-10);
      border-radius: var(--r-14);
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.16);
      box-shadow: var(--shadow-panel);
    }
    .brand-logo{
      width: 40px; height: 40px;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06));
      border: 1px solid var(--stroke);
    }
    .brand-text{
      display:flex; flex-direction:column; min-width:0;
    }
    .brand-text .t1{ font-weight: var(--fw-800); letter-spacing:.4px; font-size: var(--fs-13); }
    .brand-text .t2{ font-size: var(--fs-11); color: var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .nav{
      overflow:auto;
      padding-right: 2px;
    }
    .nav::-webkit-scrollbar{ width: 8px; }
    .nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.06); border-radius: 99px; }
    .nav-section{
      margin-top: var(--sp-12);
    }
    .nav-section:first-child{ margin-top: 0; }
    .nav-title{
      font-size: var(--fs-11);
      letter-spacing: .9px;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 0 var(--sp-10);
      margin-bottom: var(--sp-8);
    }
    .nav-item{
      display:flex;
      align-items:center;
      gap: var(--sp-10);
      padding: 10px var(--sp-10);
      border-radius: 12px;
      border: 1px solid transparent;
      color: var(--text-muted);
      cursor:pointer;
      user-select:none;
      transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
      background: transparent;
    }
    .nav-item:hover{
      background: rgba(255,255,255,.05);
      border-color: var(--stroke);
      color: var(--text);
    }
    .nav-item.active{
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border-color: rgba(229,195,0,.22);
      color: var(--text);
    }
    body[data-role="SERWIS"] .nav-item.active{ border-color: rgba(255,154,47,.24); }
    body[data-role="ADMIN"] .nav-item.active{ border-color: rgba(199,255,79,.22); }

    .nav-ico{
      width: 18px; height: 18px;
      border-radius: 6px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.16);
      display:inline-flex; align-items:center; justify-content:center;
      font-size: 11px;
      color: var(--text-faint);
    }
    .nav-label{
      font-size: var(--fs-14);
      font-weight: var(--fw-600);
      flex:1;
    }
    .nav-badge{
      font-size: var(--fs-11);
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border:1px solid var(--stroke);
      color: var(--text-muted);
    }
    .sidebar-footer{
      margin-top:auto;
      display:flex;
      flex-direction:column;
      gap: var(--sp-10);
    }
    .partner{
      border-radius: 12px;
      padding: 10px 12px;
      background: linear-gradient(180deg, rgba(255,0,0,.20), rgba(255,0,0,.10));
      border:1px solid rgba(255,0,0,.22);
      font-weight: var(--fw-800);
      letter-spacing:.4px;
      text-transform: uppercase;
      font-size: var(--fs-12);
      text-align:center;
    }

    .partner{width:100%; cursor:pointer; text-align:center;}
    .partner:focus{outline:2px solid rgba(255,255,255,.15); outline-offset:2px;}
    .partner-download{
      margin-top:10px;
      background: linear-gradient(180deg, rgba(229,195,0,.25), rgba(229,195,0,.12));
      border:1px solid rgba(229,195,0,.28);
      color: rgba(255,255,255,.92);
    }
    .partner-download:hover{filter:brightness(1.05);}

    
    .partner.active{box-shadow:0 0 0 2px rgba(229,195,0,.25), 0 10px 30px rgba(0,0,0,.35);}
/* Main */
    .main{
      grid-area: main;
      overflow:auto;
      padding: var(--sp-16);
      position:relative;
    }
    .main::-webkit-scrollbar{ width: 10px; }
    .main::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.07); border-radius: 99px; }

    .content{
      max-width: var(--content-max);
      margin: 0 auto;
      padding-bottom: 90px; /* space for bottom search bar */
    }

    .page-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: var(--sp-16);
      margin: var(--sp-6) 0 var(--sp-12);
    }
    .page-title{
      font-size: var(--fs-22);
      letter-spacing:.6px;
      font-weight: var(--fw-800);
      text-transform: uppercase;
    }
    .page-sub{
      margin-top: 6px;
      font-size: var(--fs-13);
      color: var(--text-muted);
    }

    /* Operational mini banners (only in operational tabs) */
    .op-banners{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: var(--sp-10);
      margin-bottom: var(--sp-12);
    }
    .op-card{
      border-radius: var(--r-14);
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      box-shadow: var(--shadow-panel);
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--sp-12);
      min-height: 44px;
    }
    .op-card .k{ font-size: var(--fs-12); color: var(--text-muted); font-weight: var(--fw-600); }
    .op-card .v{ font-size: var(--fs-16); font-weight: var(--fw-800); letter-spacing:.2px; }

    /* Panel */
    .panel{
      border-radius: var(--r-16);
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow-panel);
      backdrop-filter: blur(12px);
      overflow:hidden;
    }
    .panel-inner{ padding: var(--sp-14); }

    /* Tables */
    table{ width:100%; border-collapse: collapse; }
    thead th{
      height: var(--thead-h);
      font-size: var(--fs-11);
      letter-spacing:.9px;
      text-transform: uppercase;
      color: var(--text-faint);
      text-align:left;
      padding: 0 var(--cell-pad-x);
      border-bottom: 1px solid var(--stroke);
      background: rgba(0,0,0,.16);
    }
    tbody td{
      height: var(--row-h);
      padding: 0 var(--cell-pad-x);
      border-bottom: 1px solid rgba(255,255,255,.06);
      color: var(--text);
      font-size: var(--fs-14);
      vertical-align: middle;
    }
    tbody tr:hover td{ background: rgba(255,255,255,.04); }
    tbody tr:last-child td{ border-bottom: 0; }

    .muted{ color: var(--text-muted); font-size: var(--fs-12); }
    .strong{ font-weight: var(--fw-800); }
    .status{
      display:inline-flex; align-items:center; gap: 8px;
      font-weight: var(--fw-800);
      text-transform: uppercase;
      letter-spacing:.4px;
      font-size: var(--fs-12);
    }
    .dot{
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(53,208,127,.12);
    }
    .dot.warn{ background: var(--warn); box-shadow: 0 0 0 4px rgba(255,204,51,.12); }
    .dot.bad{ background: var(--bad); box-shadow: 0 0 0 4px rgba(255,91,107,.12); }

    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      height: 38px;
      min-width: 118px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.18);
      background: linear-gradient(180deg, rgba(229,195,0,.95), rgba(229,195,0,.78));
      color: var(--cta-text);
      font-weight: var(--fw-900);
      letter-spacing:.3px;
      cursor:pointer;
      transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
      box-shadow: 0 10px 18px rgba(0,0,0,.24);
    }
    body[data-role="SERWIS"] .cta{
      background: linear-gradient(180deg, rgba(255,154,47,.95), rgba(255,154,47,.78));
      color: var(--cta-text);
    }
    body[data-role="ADMIN"] .cta{
      background: linear-gradient(180deg, rgba(199,255,79,.95), rgba(199,255,79,.78));
      color: var(--cta-text);
    }
    .cta:hover{ transform: translateY(-1px); filter: brightness(1.02); }
    .cta:active{ transform: translateY(0px); filter: brightness(.98); }

    .cta.secondary{
      background: rgba(255,255,255,.06);
      border-color: var(--stroke);
      color: var(--text);
      box-shadow:none;
      font-weight: var(--fw-700);
      min-width: 140px;
    }

    /* Paginator (small) */
    .paginator{
      display:flex; align-items:center; justify-content:center; gap: 10px;
      padding: 12px;
      border-top: 1px solid var(--stroke);
      background: rgba(0,0,0,.14);
    }
    .pgbtn{
      width: 34px; height: 34px;
      border-radius: 10px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color: var(--text);
      cursor:pointer;
    }
    .pglabel{ color: var(--text-muted); font-weight: var(--fw-700); letter-spacing:.4px; }

    /* Bottom global search (only operational list views) */
    .bottom-search{
      position: fixed;
      left: calc(var(--sidebar-w) + 16px);
      right: 16px;
      bottom: 14px;
      max-width: calc(var(--content-max) + 32px);
      margin: 0 auto;
      display:none;
      gap: 10px;
      align-items:center;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.28);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow-soft);
      z-index: 40;
    }
    .bottom-search.show{ display:flex; }
    .bottom-search .sicon{
      width: 36px; height: 36px;
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      display:flex; align-items:center; justify-content:center;
      color: var(--text-muted);
      flex: 0 0 auto;
    }
    .bottom-search input{
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 0 12px;
      flex: 1;
      outline:none;
    }
    .bottom-search input::placeholder{ color: rgba(255,255,255,.35); }
    .bottom-search .cta{ height: 40px; min-width: 112px; border-radius: 12px; }

    /* =========================
       CASE MODE (inside a single case)
       ========================= */
    .case-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      z-index: 80;
      display:none;
      padding: 16px;
    }
    .case-overlay.show{ display:block; }

    .case-shell{
      height: calc(100vh - 32px);
      max-width: calc(var(--content-max) + 220px);
      margin: 0 auto;
      border-radius: var(--r-16);
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow-soft);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }

    /* =========================
       WORKSPACE OVERLAY (ADMIN — klient)
       Topbar + Sidebar zostają. Overlay tylko w obszarze roboczym.
       ========================= */
    .work-overlay{
      position: fixed;
      top: var(--topbar-h);
      left: var(--sidebar-w);
      right: 0;
      bottom: 0;
      z-index: 70;
      display:none;
      padding: 18px;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
    }
    .work-overlay.show{ display:block; }
    .work-shell{
      height: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      display:flex;
      flex-direction: column;
      gap: 12px;
    }
    .work-card{
      flex: 1 1 auto;
      min-height: 0;
      border-radius: var(--r-16);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow-panel);
      overflow:hidden;
      display:flex;
      flex-direction: column;
    }
    .work-head{
      height: 56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 0 14px;
      border-bottom: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
    }
    .work-tabs{
      display:flex;
      gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--stroke);
      background: rgba(255,255,255,.03);
      flex-wrap: wrap;
    }
    .work-tab{
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--text-muted);
      font-size: var(--fs-13);
      cursor:pointer;
      user-select:none;
    }
    .work-tab.is-on{
      border-color: rgba(229,195,0,.55);
      box-shadow: 0 0 0 3px rgba(229,195,0,.15);
      color: var(--text);
    }
    .work-body{
      padding: 14px;
      overflow:auto;
    }

    .case-top{
      height: 56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 14px;
      border-bottom: 1px solid var(--stroke);
      background: rgba(0,0,0,.18);
    }
    .case-top .left{
      display:flex; align-items:center; gap: 10px; min-width:0;
    }
    .case-chip{
      font-size: var(--fs-12);
      letter-spacing:.9px;
      text-transform: uppercase;
      font-weight: var(--fw-900);
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      color: var(--text);
      white-space:nowrap;
    }
    .case-title{
      min-width:0;
      display:flex; flex-direction:column;
    }
    .case-title .line1{
      font-weight: var(--fw-900);
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .case-title .line2{
      font-size: var(--fs-12);
      color: var(--text-muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .case-top .right{
      display:flex; align-items:center; gap: 10px;
    }
    .case-close{
      width: 42px; height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(255,91,107,.35);
      background: linear-gradient(180deg, rgba(255,91,107,.22), rgba(255,91,107,.10));
      color: var(--text);
      cursor:pointer;
      font-weight: var(--fw-900);
      display:flex; align-items:center; justify-content:center;
    }
    .case-back{
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor:pointer;
      padding: 0 12px;
      font-weight: var(--fw-800);
    }

    .case-body{
      padding: 14px;
      overflow:auto;
    }
    .case-body::-webkit-scrollbar{ width: 10px; }
    .case-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.07); border-radius: 99px; }

    .module{
      border-radius: var(--r-14);
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.16);
      overflow:hidden;
      margin-bottom: 12px;
    }
    .module-h{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 12px;
      cursor:pointer;
      user-select:none;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }
    .module-h .t{
      display:flex; align-items:center; gap: 10px; min-width:0;
      font-weight: var(--fw-900);
      letter-spacing:.3px;
      text-transform: uppercase;
      font-size: var(--fs-13);
    }
    .module-h .t span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .module-h .a{
      display:flex; align-items:center; gap: 10px;
      color: var(--text-muted);
      font-size: var(--fs-12);
      font-weight: var(--fw-800);
    }
    .chev{
      width: 34px; height: 34px;
      border-radius: 10px;
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.16);
      display:flex; align-items:center; justify-content:center;
    }
    .module-c{
      display:none;
      padding: 12px;
      border-top: 1px solid var(--stroke);
    }
    .module.open .module-c{ display:block; }

    .kv{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px;
      margin-bottom: 10px;
    }
    .kv .box{
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      padding: 10px;
    }
    .kv .k{ font-size: var(--fs-11); color: var(--text-faint); text-transform: uppercase; letter-spacing: .9px; }
    .kv .v{ margin-top: 6px; font-weight: var(--fw-900); }

    .note{
      border-radius: 12px;
      border: 1px dashed rgba(255,255,255,.16);
      background: rgba(255,255,255,.03);
      padding: 10px 12px;
      color: var(--text-muted);
      font-size: var(--fs-13);
      line-height: var(--lh-140);
    }

    @media (max-width: 1100px){
      :root{ --sidebar-w: 260px; --content-max: 1080px; }
      .op-banners{ grid-template-columns: 1fr; }
      .kv{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 860px){
      body{ overflow:auto; }
      .app{
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-h) auto 1fr;
        grid-template-areas:
          "topbar"
          "sidebar"
          "main";
      }
      .sidebar{ border-right:0; border-bottom:1px solid var(--stroke); }
      .bottom-search{ left: 16px; }
    }
  

/* ==============================
   WBL CONNECT — Enterprise Light System Overrides (v1)
   Scope: LIGHT only (DARK keeps cinematic glass)
   ============================== */

/* Workspace geometry (fundament) */
.main{ padding: 24px 32px; }
.content{ padding-bottom: 90px; } /* keep space for bottom search bar */

/* Typography — calm enterprise */
.page-title{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: none;
}
.nav-item{ font-weight: 500; }

/* Light theme base (ERP) */
body[data-theme="light"]{
  --row-h: 64px;
  --thead-h: 44px;

  --text: #0B1524;
  --text-muted: rgba(11,21,36,.72);
  --text-faint: rgba(11,21,36,.54);

  --stroke: rgba(11,21,36,.12);
  --stroke-2: rgba(11,21,36,.18);

  --shadow-panel: 0 8px 24px rgba(0,0,0,.06);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.06);

  /* default row hover (overridden per role for subtle tint) */
  --row-hover: rgba(11,21,36,.035);
  --focus-ring: rgba(229,138,36,.15);
  --nav-active-bg: rgba(11,21,36,.06);
  --nav-active-fg: #0B1524;
}

/* Role-tinted LIGHT palettes (must be visibly different) */
body[data-theme="light"][data-role="SERWIS"]{
  /* Sidebar gradient */
  --glass: #E9EDF5;
  --glass-2: #F6F8FB;

  /* Workspace canvas */
  --app-bg: linear-gradient(180deg, #F3F6FB 0%, #E9EEF7 100%);
  --bg-glow-1: rgba(28,61,122,.10);
  --bg-glow-2: rgba(229,138,36,.10);

  /* Active nav */
  --nav-active-bg: #DDE6F6;
  --nav-active-fg: #1C3D7A;

  --row-hover: rgba(28,61,122,.045);
  --focus-ring: rgba(229,138,36,.15);
  --nav-active-bg: rgba(11,21,36,.06);
  --nav-active-fg: #0B1524;
}

body[data-theme="light"][data-role="DEALER"]{
  --glass: #EAF3EC;
  --glass-2: #F7FBF8;

  --app-bg: linear-gradient(180deg, #F4FBF7 0%, #EAF4EF 100%);
  --bg-glow-1: rgba(46,107,68,.10);
  --bg-glow-2: rgba(201,164,0,.10);

  --nav-active-bg: #DCEFE2;
  --nav-active-fg: #2E6B44;

  --row-hover: rgba(46,107,68,.045);
  --focus-ring: rgba(201,164,0,.15);
}

/* Sidebar — sizing and behavior (LIGHT) */
body[data-theme="light"] .sidebar{
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
}
body[data-theme="light"] .nav-title{ color: rgba(11,21,36,.55); }
body[data-theme="light"] .nav-item{
  height: 44px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  color: rgba(11,21,36,.78);
  border-color: transparent;
}
body[data-theme="light"] .nav-item:hover{
  background: rgba(255,255,255,.60);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  border-color: transparent;
}
body[data-theme="light"] .nav-item.active{
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  border-color: transparent;
  box-shadow: none;
}

/* Workspace panel — operational card */
body[data-theme="light"] .panel{
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(11,21,36,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  backdrop-filter: none;
}
body[data-theme="light"] .panel-inner{ padding: 24px; }

/* Tables — low contrast enterprise */
body[data-theme="light"] thead th{
  background: #F3F5F9;
  border-bottom: 1px solid rgba(11,21,36,.10);
  color: rgba(11,21,36,.60);
}
body[data-theme="light"] tbody td{
  border-bottom: 1px solid rgba(11,21,36,.08);
  color: rgba(11,21,36,.92);
}
body[data-theme="light"] tbody tr:hover td{ background: var(--row-hover); }

/* Global bottom search (LIGHT) */
body[data-theme="light"] .bottom-search{
  border: 1px solid rgba(11,21,36,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
body[data-theme="light"] .bottom-search .sicon{
  background: #F3F5F9;
  border: 1px solid rgba(11,21,36,.10);
  color: rgba(11,21,36,.60);
}
body[data-theme="light"] .bottom-search input{
  height: 44px;
  background: #F3F5F9;
  border: 1px solid transparent;
  color: rgba(11,21,36,.92);
}
body[data-theme="light"] .bottom-search input::placeholder{ color: rgba(11,21,36,.45); }
body[data-theme="light"] .bottom-search input:focus{
  border-color: var(--cta);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Buttons in LIGHT keep role accent but avoid heavy glow */
body[data-theme="light"] .btn{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

  /* ===== ADMIN REGISTRATION UI ===== */
  .wbl-statusbar{
    position: sticky;
    top: 0;
    z-index: 25;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding: 12px 14px;
    margin: -8px -8px 16px;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--panelEdge);
  }
  .wbl-statusbar__left, .wbl-statusbar__right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .wbl-statuschip{
    display:flex; gap:8px; align-items:center;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--chipEdge);
    color: var(--text);
    font-size: 12.5px;
  }
  .wbl-statuschip .dot{ width:8px; height:8px; border-radius:50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(46,204,113,0.15); }
  .wbl-acc{ margin-bottom: 14px; }
  .wbl-acc__head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--panelEdge);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    cursor:pointer;
  }
  .wbl-acc__title{ font-weight: 700; letter-spacing: .2px; }
  .wbl-acc__actions{ display:flex; gap:10px; align-items:center; opacity:.85; }
  .wbl-acc__hint{ font-size: 12.5px; }
  .wbl-acc__chev{ font-size: 16px; }
  .wbl-acc__body{ margin-top: 12px; }
  .wbl-card{ padding: 18px; border-radius: 16px; }
  .wbl-card__title{ font-weight: 700; margin-bottom: 10px; }
  .wbl-grid2{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 14px; }
  .wbl-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .wbl-muted{ opacity: .75; font-size: 13px; line-height: 1.3; }
  .wbl-divider{ height:1px; background: var(--line); margin: 14px 0; }
  .wbl-form--grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .wbl-form__row{ display:flex; flex-direction:column; gap:6px; }
  .wbl-form__label{ font-size: 12.5px; opacity:.78; }
  .req{ color: var(--danger); font-weight: 700; margin-left: 4px; }
  .wbl-brandsbox{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed var(--panelEdge);
    background: rgba(0,0,0,0.02);
  }
  body[data-theme="dark"] .wbl-brandsbox{ background: rgba(255,255,255,0.03); }
  .wbl-brandsbox.is-disabled{ opacity:.55; filter: grayscale(1); }
  .wbl-check{ display:flex; gap:8px; align-items:center; font-size: 13px; }
  .wbl-check input{ transform: translateY(1px); }
  .wbl-kv{ display:grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 13px; }
  .wbl-kv .k{ opacity:.7; }
  .wbl-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--chipEdge);
    background: var(--chip);
    cursor:pointer;
    user-select:none;
    font-size: 13px;
  }
  .wbl-pill input{ display:none; }
  .wbl-pill.is-on{ border-color: rgba(255,165,0,0.6); box-shadow: 0 0 0 3px rgba(255,165,0,0.15); }
  .wbl-branch__head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom: 10px; }
  .wbl-branch__title{ font-weight: 800; letter-spacing: .2px; }
  .wbl-branch__meta{ opacity:.7; font-size: 12.5px; }
  @media (max-width: 1100px){
    .wbl-grid2{ grid-template-columns: 1fr; }
    .wbl-form--grid{ grid-template-columns: 1fr; }
    .wbl-brandsbox{ grid-template-columns: 1fr; }
  }

  .wbl-radio{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.6)}
  .wbl-radio input{transform:scale(1.05)}

/* =========================
   WBL UI UTILITIES — extracted from inline styles in index.html
   ========================= */
.is-grid{display:grid;}
.is-flex{display:flex;}
.is-hidden{display:none !important;}
.is-block{display:block !important;}
.block{display:block;}
.prewrap{white-space:pre-wrap;}
.overflow-hidden{overflow:hidden;}
.overflow-auto{overflow:auto;}
.text-right{text-align:right;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.flex-1{flex:1;}
.row{display:flex;}
.gap-8{gap:8px;}
.gap-10{gap:10px;}
.gap-12{gap:12px;}
.gap-18{gap:18px;}
.gap-sp-10{gap:var(--sp-10);}
.gap-sp-12{gap:var(--sp-12);}
.gap-sp-16{gap:var(--sp-16);}
.mt-neg-2{margin-top:-2px;}
.mt-4{margin-top:4px;}
.mt-6{margin-top:6px;}
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mt-12{margin-top:12px;}
.mt-14{margin-top:14px;}
.mt-sp-10{margin-top:var(--sp-10);}
.mt-sp-12{margin-top:var(--sp-12);}
.mt-sp-14{margin-top:var(--sp-14);}
.mt-sp-16{margin-top:var(--sp-16);}
.mt-sp-24{margin-top:var(--sp-24);}
.mb-6{margin-bottom:6px;}
.mb-8{margin-bottom:8px;}
.mb-12{margin-bottom:12px;}
.mb-sp-14{margin-bottom:var(--sp-14);}
.ml-6{margin-left:6px;}
.m-0{margin:0;}
.p-16{padding:16px;}
.p-18{padding:18px;}
.p-sp-12{padding:var(--sp-12);}
.opacity-75{opacity:.75;}
.opacity-85{opacity:.85;}
.opacity-55{opacity:.55;}
.fs-12{font-size:var(--fs-12);}
.fs-14{font-size:var(--fs-14);}
.fs-15{font-size:var(--fs-15);}
.fs-16{font-size:var(--fs-16);}
.fs-18{font-size:var(--fs-18);}
.fw-800{font-weight:800;}
.fw-900{font-weight:900;}
.lh-115{line-height:1.15;}
.minw-120{min-width:120px;}
.minw-140{min-width:140px;}
.minw-160{min-width:160px;}
.minw-170{min-width:170px;}
.minw-180{min-width:180px;}
.minw-260{min-width:260px;}
.minw-360{min-width:360px;}
.minw-980{min-width:980px;}
.maxw-200{max-width:200px;}
.maxw-240{max-width:240px;}
.radius-10{border-radius:10px;}
.btn-34{height:34px;}
.btn-38{height:38px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;}
.grid-11-9{display:grid;grid-template-columns:1.1fr .9fr;}
.grid-12-8{display:grid;grid-template-columns:1.2fr .8fr;}
.grid-brand-form{display:grid;grid-template-columns:220px 1fr 160px;}
.ui-input{height:44px;border-radius:12px;padding:0 12px;border:1px solid transparent;color:var(--text);width:100%;}
.ui-input-surface-1{background:var(--surface-1);}
.ui-input-surface-2{background:var(--surface-2);}
.ui-input-sm-stroke{height:38px;border-radius:10px;padding:0 10px;border:1px solid var(--stroke);background:var(--surface-1);color:var(--text);width:100%;}
.box-surface-2{border:1px solid var(--stroke);border-radius:var(--r-14);background:var(--surface-2);}
.box-stroke-rounded{border:1px solid var(--stroke);border-radius:var(--r-14);}
.scroll-surface-560{max-height:560px;overflow:auto;background:var(--surface-2);}
.scroll-surface-320{max-height:320px;overflow:auto;background:var(--surface-2);}
.col-lp{width:80px;}
.col-lp-70{width:70px;}
.col-status{width:200px;}
.col-date{width:200px;}
.col-cta{width:190px;}
.col-id-90{width:90px;}
.col-code-160{width:160px;}
.col-status-140{width:140px;}
.col-actions-220{width:220px;}
.col-120{width:120px;}
.col-140{width:140px;}
.col-170{width:170px;}
.ov-head-meta{display:flex;flex-direction:column;gap:2px;min-width:280px;}
.pill-stroke-2{border-color:var(--stroke-2);}
.admin-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);font-size:var(--fs-12);color:var(--text-muted);}
.admin-reg-error{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,0,0,.25);background:rgba(255,0,0,.06);color:var(--text);font-size:13px;}
.wbl-toast-box{position:fixed;left:24px;bottom:24px;z-index:99999;max-width:420px;}
.wbl-toast-item{margin-top:10px;padding:12px 14px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);backdrop-filter:blur(10px);color:#fff;font-size:14px;line-height:1.35;transition:opacity .25s ease;}
.wbl-toast-item.is-danger{background:rgba(160,40,40,.90);}
.wbl-toast-item.is-success{background:rgba(30,120,70,.90);}
.wbl-toast-item.is-neutral{background:rgba(30,30,30,.85);}
.wbl-toast-item.is-fading{opacity:0;}
.wbl-global-error-box{position:fixed;left:16px;bottom:16px;max-width:520px;z-index:999999;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,0,0,.25);background:rgba(0,0,0,.72);color:#fff;font:12px/1.35 system-ui,Segoe UI,Inter,Arial;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none;white-space:pre-wrap;}
.wbl-global-error-title{font-weight:700;margin-bottom:6px;}
.wbl-global-error-text{opacity:.9;}
.wbl-global-error-close{margin-top:10px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;}


/* WBL accordion hard fix */
.wbl-acc__body{display:none;}
.wbl-acc__body.is-block{display:block !important;}
.wbl-acc__body.is-hidden{display:none !important;}
.wbl-acc__head{cursor:pointer;}


/* ===== ADMIN — SEND LINK STATES ===== */
.btn-send-link{
  min-width: 148px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}
.btn-send-link:hover:not(:disabled){ transform: translateY(-1px); }
.btn-send-link:disabled{ cursor: not-allowed; }
.btn-send-link.is-ready{
  color: #fff;
  background: linear-gradient(180deg, rgba(68,111,255,.95), rgba(53,88,212,.92));
  border-color: rgba(130,164,255,.45);
  box-shadow: 0 8px 20px rgba(40,74,180,.24);
}
.btn-send-link.is-sent{
  color: #d9e6ff;
  background: linear-gradient(180deg, rgba(56,70,99,.94), rgba(41,51,74,.94));
  border-color: rgba(151,168,210,.28);
  box-shadow: 0 8px 18px rgba(18,24,38,.20);
}
.btn-send-link.is-sent:disabled{
  opacity: 1;
}
.btn-send-link.is-reactivate{
  color: #1b1200;
  background: linear-gradient(180deg, rgba(255,201,92,.96), rgba(239,171,39,.92));
  border-color: rgba(255,214,128,.52);
  box-shadow: 0 8px 20px rgba(171,113,15,.22);
}
body[data-theme="light"] .btn-send-link.is-ready{
  color:#fff;
  background: linear-gradient(180deg, rgba(84,120,224,.96), rgba(66,98,194,.92));
  border-color: rgba(94,123,202,.36);
}
body[data-theme="light"] .btn-send-link.is-sent{
  color:#516178;
  background: linear-gradient(180deg, rgba(240,244,250,.98), rgba(226,232,242,.96));
  border-color: rgba(125,142,171,.24);
  box-shadow: 0 6px 16px rgba(77,93,122,.08);
}
body[data-theme="light"] .btn-send-link.is-reactivate{
  color:#402d00;
  background: linear-gradient(180deg, rgba(255,215,126,.98), rgba(244,186,69,.94));
  border-color: rgba(210,163,55,.34);
}