/* =========================================================================
   Nostos SuperAdmin — global stylesheet
   Μεταφερμένο αυτούσιο από το αρχικό HTML prototype (nostos_superadmin_cloude.html).
   Οι κλάσεις .page / .page.active δεν χρησιμοποιούνται πλέον (η πλοήγηση
   γίνεται τώρα με Blazor routing αντί για JS show/hide), αλλά αφήνονται
   ως έχουν ώστε το CSS να παραμείνει 1-1 συγκρίσιμο με το πρωτότυπο.
   ========================================================================= */

    :root{
      --primary-900:#1B2140; --primary-800:#252D56; --primary-700:#32406D;
      --primary-600:#42538B; --primary-200:#D8DFF5; --primary-100:#EEF1FC;
      /* Brand teal — "Deep Teal" επίσημη παλέτα του Nostos λογότυπου (Logos.png, variant 3). */
      --accent-700:#134E4A; --accent-600:#0F766E; --accent-500:#14B8A6;
      --gray-0:#FFFFFF; --gray-25:#FCFCFD; --gray-50:#F8F9FB; --gray-100:#F2F4F7;
      --gray-200:#E4E7EC; --gray-300:#D0D5DD; --gray-400:#98A2B3;
      --gray-500:#667085; --gray-600:#475467; --gray-700:#344054;
      --gray-800:#1D2939; --gray-900:#101828;
      --success-bg:#ECFDF3; --success-border:#ABEFC6; --success-text:#067647;
      --warning-bg:#FFF7E6; --warning-border:#FFD699; --warning-text:#B54708;
      --danger-bg:#FEF3F2; --danger-border:#FECDCA; --danger-text:#B42318;
      --cancel-bg:#F4F4F5; --cancel-border:#D4D4D8; --cancel-text:#52525B;
      --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.04);
    }
    *{box-sizing:border-box}
    html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--gray-50);color:var(--gray-900)}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .app{min-height:100vh;display:flex}
    .sidebar{width:280px;min-height:100vh;background:var(--primary-900);padding:20px 16px;display:flex;flex-direction:column;position:fixed;overflow:hidden;inset:0 auto 0 0;z-index:20}
    .brand{display:flex;align-items:center;gap:12px;padding:0 12px;margin-bottom:30px}
    .brand-mark{width:40px;height:auto;object-fit:contain;flex:0 0 auto}
    .brand-name{font-size:19px;font-weight:700;color:white}.brand-sub{font-size:12px;color:#A9B6E5;margin-top:2px}
    .nav{display:grid;gap:4px;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:2px;scrollbar-width:thin}
    .nav-link{width:100%;border:0;background:transparent;color:#D8DFF5;padding:11px 14px;border-radius:10px;display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;font-weight:550;transition:background .15s ease,color .15s ease}
    .nav-link:hover{background:rgba(255,255,255,.07)}
    .nav-link.active{background:rgba(255,255,255,.11);color:#fff}
    .nav-icon{width:20px;height:20px;flex:0 0 20px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
    .nav-icon svg{width:19px;height:19px}
    .sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:18px 12px 0;display:flex;gap:11px;align-items:center}
    .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:white;font-weight:700}
    .user-name{font-size:14px;color:white;font-weight:600}.user-role{font-size:12px;color:#A9B6E5;margin-top:2px}
    .shell{margin-left:280px;min-width:0;flex:1}
    .topbar{height:72px;background:white;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:10}
    .breadcrumbs{font-size:14px;color:var(--gray-500)}.breadcrumbs strong{color:var(--gray-900);font-weight:600}
    .top-actions{display:flex;align-items:center;gap:12px}
    .global-search{width:360px;height:40px;border:1px solid var(--gray-300);border-radius:12px;padding:0 13px;color:var(--gray-600);background:white}
    .icon-btn{width:40px;height:40px;border:1px solid var(--gray-300);background:white;border-radius:12px;position:relative;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-600)}
    .notif-placeholder{width:40px;height:40px;flex:0 0 auto}
    .icon-btn:hover{background:var(--gray-50);color:var(--gray-900)}
    .icon-btn svg{width:19px;height:19px}
    .notification-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--danger-text);right:8px;top:7px;border:1.5px solid white}
    /* position:fixed (όχι relative) ώστε το κουδούνι/panel να ξεφεύγει από το χαμηλό stacking
       context του .topbar (z-index:10) — αλλιώς ένα ανοιχτό drawer/modal (z-index 40-90), που
       καλύπτει ολόκληρη την πάνω-δεξιά γωνία της οθόνης, "θάβει" ακόμη και το ίδιο το κουμπί.
       84px = το ίδιο άθροισμα (topbar padding 32px + avatar 40px + gap 12px) που θα έδινε και το
       κανονικό flex layout, άρα οπτικά μένει ακριβώς εκεί που ήταν. */
    .notif-wrap{position:fixed;top:16px;right:84px;z-index:110}
    .notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:340px;max-height:420px;overflow-y:auto;background:white;border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 16px 40px rgba(16,24,40,.14);opacity:0;pointer-events:none;transform:translateY(-6px);transition:.15s}
    .notif-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
    .notif-panel-head{padding:14px 16px;font-size:13px;font-weight:750;border-bottom:1px solid var(--gray-200)}
    .notif-empty{padding:24px 16px;text-align:center;color:var(--gray-500);font-size:13px}
    .notif-item{width:100%;display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:0;border-bottom:1px solid var(--gray-100);background:white;text-align:left;cursor:pointer}
    .notif-item:last-child{border-bottom:0}
    .notif-item:hover{background:var(--gray-50)}
    .notif-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto}
    .notif-dot.danger{background:var(--danger-text)}
    .notif-dot.warning{background:var(--warning-text)}
    .notif-dot.info{background:var(--gray-500)}
    .notif-item-body{display:flex;flex-direction:column;gap:2px}
    .notif-item-title{font-size:13px;font-weight:700;color:var(--gray-900)}
    .notif-item-message{font-size:12px;color:var(--gray-500);line-height:1.4}
    .content{max-width:1600px;margin:0 auto;padding:32px}
    .page{display:none}.page.active{display:block}
    .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
    h1{font-size:32px;line-height:1.2;margin:0;font-weight:750;letter-spacing:-.02em}
    h2{font-size:18px;margin:0;font-weight:700}
    .subtitle{font-size:14px;color:var(--gray-500);margin:8px 0 0}
    .card{background:white;border:1px solid var(--gray-200);border-radius:16px;box-shadow:var(--shadow)}
    .btn{height:40px;padding:0 14px;border-radius:10px;font-weight:650;font-size:14px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px}
    .btn-primary{background:var(--accent-500);color:white}.btn-primary:hover{background:var(--accent-600)}
    .btn-secondary{background:white;border-color:var(--gray-300);color:var(--gray-700)}.btn-secondary:hover{background:var(--gray-50)}
    .btn-danger{background:var(--danger-text);color:white}
    .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:24px}
    .kpi{padding:24px;min-height:140px}.kpi-top{display:flex;justify-content:space-between;align-items:flex-start}
    .kpi-label{font-size:14px;color:var(--gray-500);font-weight:600}.kpi-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary-700)}
    .kpi-main{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px}.kpi-value{font-size:36px;line-height:1;font-weight:760}.trend{font-size:14px;font-weight:700}.trend.good{color:var(--success-text)}.trend.bad{color:var(--danger-text)}
    .kpi-note{font-size:12px;color:var(--gray-400);margin-top:8px}
    .dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(330px,1fr);gap:24px;margin-bottom:24px}
    .panel{padding:24px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
    .panel-copy{font-size:14px;color:var(--gray-500);margin-top:5px}
    .chart-wrap{height:310px;padding-top:4px}.chart-svg{width:100%;height:100%;display:block}
    .watchlist{display:grid;gap:16px}.watch-item{padding-bottom:16px;border-bottom:1px solid var(--gray-200)}.watch-item:last-child{border-bottom:0;padding-bottom:0}
    .watch-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.watch-title{font-size:14px;font-weight:700}.watch-sub{font-size:12px;color:var(--gray-500);margin-top:4px}.watch-actions{display:flex;gap:8px;margin-top:12px}
    .chip{display:inline-flex;align-items:center;border:1px solid;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;white-space:nowrap}
    .success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}
    .warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}
    .danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}
    .muted{background:var(--cancel-bg);border-color:var(--cancel-border);color:var(--cancel-text)}
    .suspended{background:#FFF4ED;border-color:#FFD6AE;color:#B93815}
    .type-single{background:var(--gray-50);border-color:var(--gray-200);color:var(--gray-600)}
    .type-chain{background:var(--primary-100);border-color:var(--primary-200);color:var(--primary-700)}
    .table-card{overflow:hidden}.table-toolbar{padding:20px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:12px}
    .field,.select{height:44px;border:1px solid var(--gray-300);border-radius:11px;background:white;color:var(--gray-700);padding:0 13px;outline:none}
    .field:focus,.select:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
    .table-search{flex:1;max-width:460px}.select{min-width:175px}
    .table-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}
    .table-scroll::-webkit-scrollbar{height:8px}
    .table-scroll::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:8px}
    .table-scroll::-webkit-scrollbar-track{background:transparent}
    table{width:100%;min-width:max-content;border-collapse:collapse;font-size:14px}
    thead{background:var(--gray-25)}th{text-align:left;padding:15px 24px;color:var(--gray-500);font-size:12px;text-transform:uppercase;letter-spacing:.045em}
    td{padding:15px 24px;border-top:1px solid var(--gray-200);vertical-align:middle}tbody tr{transition:background .15s}tbody tr:hover{background:var(--gray-50);cursor:pointer}
    .org-name{font-weight:700}.org-email{font-size:12px;color:var(--gray-500);margin-top:4px}
    .table-footer{padding:16px 24px;border-top:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center;color:var(--gray-500);font-size:14px}
    .pagination{display:flex;align-items:center;gap:8px}.page-btn{min-width:38px;height:38px;border-radius:9px;border:1px solid var(--gray-300);background:white;color:var(--gray-700)}
    .page-btn.active{background:var(--primary-700);border-color:var(--primary-700);color:white}
    .overlay{position:fixed;inset:0;background:rgba(16,24,40,.36);backdrop-filter:blur(1px);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s ease}
    .overlay.open{opacity:1;pointer-events:auto}
    .drawer{position:fixed;z-index:50;top:0;right:0;width:min(500px,100vw);height:100vh;background:white;border-left:1px solid var(--gray-200);box-shadow:-20px 0 50px rgba(16,24,40,.12);transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer-head{padding:26px 26px 20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;gap:20px}
    .drawer-title{font-size:22px;font-weight:750}.drawer-subtitle{font-size:13px;color:var(--gray-500);margin-top:6px;line-height:1.5}
    .drawer-close{width:38px;height:38px;border:0;background:var(--gray-50);border-radius:10px;font-size:22px}
    .drawer-body{padding:24px 26px;overflow:auto;display:grid;gap:20px}
    .form-group{display:grid;gap:8px}.form-label{font-size:13px;font-weight:700;color:var(--gray-700)}.required{color:var(--danger-text)}
    .form-input,.form-select{width:100%;height:44px;border:1px solid var(--gray-300);border-radius:10px;padding:0 13px;outline:none;color:var(--gray-800);background:white}
    .form-input:focus,.form-select:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
    .section-label{font-size:14px;font-weight:750;margin-top:4px}
    .radio-stack{display:grid;gap:10px}.radio-card{border:1px solid var(--gray-200);border-radius:12px;padding:13px;display:flex;gap:11px;align-items:flex-start}.radio-card:has(input:checked){border-color:var(--accent-500);background:#F4FCFA}
    .radio-card input{margin-top:3px;accent-color:var(--accent-500)}.radio-title{font-size:14px;font-weight:700}.radio-copy{font-size:12px;color:var(--gray-500);margin-top:3px}
    .helper{font-size:12px;color:var(--gray-500);line-height:1.5}
    .drawer-footer{margin-top:auto;padding:18px 26px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:12px;background:white}
    .toast{position:fixed;right:28px;bottom:28px;z-index:80;background:var(--gray-900);color:white;border-radius:12px;padding:14px 16px;box-shadow:0 12px 30px rgba(16,24,40,.25);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s}
    .toast.show{transform:translateY(0);opacity:1}
    .ticket-thread{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;padding-right:2px}
    .ticket-message{border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.55;border:1px solid var(--gray-200);background:var(--gray-50)}
    .ticket-message.agent{background:#F4FCFA;border-color:var(--accent-500)}
    .ticket-message-meta{font-size:11.5px;color:var(--gray-500);margin-bottom:5px}
    .ticket-message-body{color:var(--gray-800);white-space:pre-wrap}
    @media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.global-search{width:260px}}
    @media(max-width:820px){.sidebar{width:76px;padding:20px 10px}.brand-copy,.nav-label,.sidebar-user .user-copy{display:none}.brand{padding:0;justify-content:center}.nav-link{justify-content:center}.shell{margin-left:76px}.content{padding:22px}.topbar{padding:0 20px}.global-search{display:none}.kpis{grid-template-columns:1fr}.table-toolbar{flex-wrap:wrap}.table-search{max-width:none;width:100%}.notif-wrap{right:72px}}
  
    .detail-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
    .detail-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .detail-actions{display:flex;gap:10px;flex-wrap:wrap}
    .tabs{display:flex;gap:4px;border-bottom:1px solid var(--gray-200);margin-bottom:24px}
    .tab-btn{border:0;background:transparent;padding:13px 16px;color:var(--gray-500);font-size:14px;font-weight:650;border-bottom:2px solid transparent}
    .tab-btn:hover{color:var(--gray-900)}
    .tab-btn.active{color:var(--primary-700);border-bottom-color:var(--primary-700)}
    .tab-panel{display:none}.tab-panel.active{display:block}
    .detail-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
    .span-8{grid-column:span 8}.span-4{grid-column:span 4}.span-12{grid-column:span 12}.span-6{grid-column:span 6}
    .info-card{padding:24px}
    .info-list{display:grid;gap:18px}
    .info-row{display:flex;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--gray-200)}
    .info-row:last-child{border-bottom:0;padding-bottom:0}
    .info-label{font-size:13px;color:var(--gray-500)}
    .info-value{font-size:14px;font-weight:650;text-align:right}
    .plan-card{padding:26px}
    .plan-badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:var(--primary-100);color:var(--primary-700);font-size:12px;font-weight:750}
    .plan-name{font-size:30px;font-weight:760;margin-top:16px}
    .plan-price{font-size:14px;color:var(--gray-500);margin-top:5px}
    .plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .billing-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
    .summary-box{background:var(--gray-25);border:1px solid var(--gray-200);border-radius:12px;padding:16px}
    .summary-label{font-size:12px;color:var(--gray-500)}
    .summary-value{font-size:18px;font-weight:750;margin-top:7px}
    .feature-list{display:grid;gap:12px;margin-top:18px}
    .feature-item{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--gray-700)}
    .feature-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--success-bg);color:var(--success-text);font-size:12px;font-weight:800}
    .danger-zone{border-color:var(--danger-border);background:#FFFBFA}
    .empty-note{padding:30px;text-align:center;color:var(--gray-500)}
    @media(max-width:1100px){.span-8,.span-4,.span-6{grid-column:span 12}.billing-summary{grid-template-columns:1fr}}

  
    .plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
    .plan-pricing-card{padding:24px;display:flex;flex-direction:column;min-height:470px;position:relative}
    .plan-pricing-card.featured{border-color:var(--accent-500);box-shadow:0 0 0 2px rgba(20,184,166,.08),var(--shadow)}
    .plan-ribbon{position:absolute;top:16px;right:16px;background:var(--accent-500);color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:750}
    .plan-title{font-size:22px;font-weight:760}
    .plan-desc{font-size:13px;color:var(--gray-500);margin-top:6px;min-height:40px;line-height:1.5}
    .plan-price-row{display:flex;align-items:flex-end;gap:7px;margin-top:22px}
    .plan-price-large{font-size:38px;line-height:1;font-weight:780}
    .plan-period{font-size:13px;color:var(--gray-500);padding-bottom:4px}
    .plan-feature-list{display:grid;gap:12px;margin-top:24px}
    .plan-feature{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gray-700)}
    .plan-feature .feature-check{flex:0 0 auto}
    .plan-card-bottom{margin-top:auto;padding-top:24px}
    .subscriber-count{font-size:13px;color:var(--gray-500);margin-bottom:14px}
    .subscriber-count strong{color:var(--gray-900);font-size:16px}
    .full-btn{width:100%}
    @media(max-width:1280px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:760px){.plans-grid{grid-template-columns:1fr}}

  
    .billing-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}
    .billing-kpis.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .billing-kpi{padding:20px 22px;min-height:112px}
    .billing-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .billing-kpi-label{font-size:13px;color:var(--gray-500);font-weight:650}
    .billing-kpi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary-700);font-weight:750}
    .billing-kpi-value{font-size:28px;font-weight:780;line-height:1;margin-top:14px}
    .billing-kpi-note{font-size:12px;color:var(--gray-500);margin-top:7px}
    .mydata-success{background:#EFF8FF;border-color:#B2DDFF;color:#175CD3}
    .mydata-pending{background:#FFF7E6;border-color:#FFD699;color:#B54708}
    .mydata-error{background:#FEF3F2;border-color:#FECDCA;color:#B42318}
    .amount-cell{font-weight:750}
    @media(max-width:900px){.billing-kpis{grid-template-columns:1fr}}

  
    .analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
    .analytics-card{padding:24px;min-height:360px}
    .analytics-card.large{grid-column:span 2;min-height:410px}
    .chart-area{height:280px;margin-top:18px}
    .chart-area.large{height:320px}
    .donut-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.75fr);align-items:center;gap:24px;height:280px}
    .donut-wrap{position:relative;height:250px;display:grid;place-items:center}
    .donut-center{position:absolute;text-align:center}
    .donut-center strong{display:block;font-size:28px}
    .donut-center span{font-size:12px;color:var(--gray-500)}
    .legend{display:grid;gap:12px}
    .legend-item{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:13px}
    .legend-label{display:flex;align-items:center;gap:9px;color:var(--gray-700)}
    .legend-dot{width:10px;height:10px;border-radius:50%}
    .legend-value{font-weight:750}
    @media(max-width:1000px){.analytics-grid{grid-template-columns:1fr}.analytics-card.large{grid-column:span 1}.donut-layout{grid-template-columns:1fr;height:auto}}

  
    .subscription-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
    .subscription-kpi{padding:18px 20px;min-height:108px}
    .subscription-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
    .org-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary-700);font-size:12px;font-weight:800;flex:0 0 auto}
    .org-cell{display:flex;align-items:center;gap:11px}
    .plan-chip{background:var(--primary-100);border-color:var(--primary-200);color:var(--primary-700)}
    .payment-method{display:flex;align-items:center;gap:7px;color:var(--gray-700);white-space:nowrap}
    .row-menu{width:34px;height:34px;border:1px solid var(--gray-300);background:white;border-radius:9px;font-weight:800}
    .row-menu-catcher{position:fixed;inset:0;z-index:150;background:transparent}
    .row-menu-panel{position:fixed;z-index:151;width:210px;background:white;border:1px solid var(--gray-200);border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
    .row-menu-item{width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;border-radius:8px;font-size:14px;font-weight:600;color:var(--gray-700);cursor:pointer}
    .row-menu-item:hover{background:var(--gray-50)}
    .row-menu-item.danger{color:var(--danger-text)}
    .risk-card{padding:20px;position:sticky;top:96px}
    .risk-list{display:grid;gap:15px;margin-top:18px}
    .risk-item{padding-bottom:15px;border-bottom:1px solid var(--gray-200)}
    .risk-item:last-child{border-bottom:0;padding-bottom:0}
    .risk-top{display:flex;justify-content:space-between;gap:10px}
    .risk-name{font-size:13px;font-weight:750}
    .risk-text{font-size:12px;color:var(--gray-500);margin-top:4px;line-height:1.45}
    .risk-actions{display:flex;gap:8px;margin-top:10px}
    .subscription-drawer-section{padding-bottom:20px;border-bottom:1px solid var(--gray-200)}
    .subscription-drawer-section:last-child{border-bottom:0}
    .mini-invoices{display:grid;gap:10px;margin-top:12px}
    .mini-invoice{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:10px 0;border-bottom:1px solid var(--gray-100)}
    .notes-area{width:100%;min-height:110px;border:1px solid var(--gray-300);border-radius:10px;padding:12px;resize:vertical;outline:none}
    .notes-area:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
    .drawer-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
    .drawer-action-grid .btn{width:100%}
    @media(max-width:1250px){.subscription-layout{grid-template-columns:1fr}.risk-card{position:static}.subscription-kpis{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:760px){.subscription-kpis{grid-template-columns:1fr}.drawer-action-grid{grid-template-columns:1fr}}

  
    .data-sync-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text);font-size:12px;font-weight:750}
    .data-sync-dot{width:8px;height:8px;border-radius:50%;background:var(--success-text)}
    .clickable-kpi{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
    .clickable-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.08)}

  
    .modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.42);backdrop-filter:blur(2px);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
    .modal-backdrop.open{display:flex}
    .modal-card{width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;border:1px solid var(--gray-200);box-shadow:0 24px 70px rgba(16,24,40,.24)}
    .modal-head{padding:22px 24px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;gap:18px}
    .modal-title{font-size:20px;font-weight:760}
    .modal-sub{font-size:13px;color:var(--gray-500);margin-top:5px;line-height:1.5}
    .modal-body{padding:24px;display:grid;gap:18px}
    .modal-footer{padding:18px 24px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:10px}
    .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .danger-box{padding:14px;border-radius:12px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-text);font-size:13px;line-height:1.5}
    .warning-box{padding:14px;border-radius:12px;background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning-text);font-size:13px;line-height:1.5}
    .invoice-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .invoice-line{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:14px}
    .invoice-line:last-child{border-bottom:0}
    .invoice-total{font-size:18px;font-weight:780}
    @media(max-width:700px){.two-col,.invoice-detail-grid{grid-template-columns:1fr}}

  
    .back-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--gray-500);font-size:13px;font-weight:650;padding:0;margin-bottom:12px}
    .back-btn:hover{color:var(--gray-900)}
    .activity-type{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:var(--primary-100);color:var(--primary-700)}
    .activity-entity{font-size:12px;color:var(--gray-500);margin-top:4px}
    .audit-detail{font-size:12px;color:var(--gray-600);margin-top:5px;line-height:1.45}
    .filter-banner{display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:12px;background:var(--primary-100);border:1px solid var(--primary-200);color:var(--primary-700);font-size:13px;margin-bottom:16px}
    .filter-banner.show{display:flex}
    .link-button{border:0;background:transparent;color:var(--primary-700);font-weight:700;padding:0}
    .recent-row-link{cursor:pointer}

  
    .metric-note{font-size:12px;color:var(--gray-500);margin-top:6px}
    .analytics-empty{height:100%;display:grid;place-items:center;color:var(--gray-500);font-size:13px}

  
    .state-panel{padding:34px;text-align:center;border:1px dashed var(--gray-300);border-radius:14px;background:var(--gray-25)}
    .state-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin:0 auto 14px;background:var(--primary-100);color:var(--primary-700);font-size:22px}
    .state-title{font-size:16px;font-weight:760}.state-copy{font-size:13px;color:var(--gray-500);margin-top:6px;line-height:1.5}
    .skeleton{position:relative;overflow:hidden;background:var(--gray-100);border-radius:8px}
    .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 1.2s infinite}
    @keyframes shimmer{100%{transform:translateX(100%)}}
    .permission-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--warning-border);background:var(--warning-bg);color:var(--warning-text);border-radius:12px;margin-bottom:18px;font-size:13px}
    .role-chip{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:var(--primary-100);color:var(--primary-700);font-size:11px;font-weight:750}
    .disabled-action{opacity:.45;pointer-events:none}
    .inline-error{font-size:12px;color:var(--danger-text);margin-top:6px}
    .operation-status{position:fixed;left:50%;top:88px;transform:translateX(-50%) translateY(-14px);opacity:0;z-index:120;background:white;border:1px solid var(--gray-200);box-shadow:0 14px 36px rgba(16,24,40,.14);padding:12px 16px;border-radius:12px;display:flex;gap:10px;align-items:center;transition:.2s;pointer-events:none}
    .operation-status.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .spinner{width:16px;height:16px;border:2px solid var(--gray-200);border-top-color:var(--accent-500);border-radius:50%;animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    .auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--primary-900)}
    .auth-card{width:100%;max-width:380px;padding:32px;background:white}
    .auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
    .auth-logo{width:40px;height:40px;border-radius:11px;background:var(--primary-700);color:white;display:grid;place-items:center;font-weight:800;font-size:18px}
    .auth-logo-mark{width:22px;height:auto;object-fit:contain}
    .auth-logo-icon{width:60px;height:60px;border-radius:16px;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(140,180,255,.28),0 6px 16px rgba(0,0,0,.35)}
    .auth-logo-icon img{width:100%;height:100%;object-fit:cover;display:block}
    .auth-title{font-size:16px;font-weight:800;color:var(--gray-900)}
    .auth-subtitle{font-size:12px;color:var(--gray-500)}
    .auth-error{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-text);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:16px}
    .auth-divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--gray-400);font-size:12px}
    .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--gray-200)}