:root{
      /* Corporate palette */
      --brand-900:#0b3b69;  /* header achtergrond */
      --brand-700:#135a9c;  /* knoppen hover */
      --brand-600:#5B9BD5;  /* primair */
      --accent-500:#A1B8DF; /* accent (tegel/accent) */
      --bg:#f5f7fb;
      --paper:#ffffff;
      --ink:#0f172a;
      --muted:#6b7280;
      --border:#e5e7eb;
      --danger:#dc2626;
      --warning:#f59e0b;
      --success:#16a34a;

      --radius:10px;
      --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 10px rgba(16,24,40,.07);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }
    
    /* Ensure hidden attribute works properly */
    [hidden]{display:none !important}

    tr{
        text-align: left;
    }

    /* ===== Layout: topbar + shell ===== */
    .topbar{
      position:fixed; top:0; left:0; right:0; z-index:1000;
      background:var(--brand-900); color:#fff; overflow:visible;
      box-shadow:var(--shadow);
    }
    .topbar .row{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:10px 16px; max-width:1400px; margin:0 auto; overflow:visible;
    }
    .topbar .breadcrumb{
      display:flex; align-items:center; gap:6px; font-size:12px;
      color:#dbeafe; padding:6px 16px 10px; max-width:1400px; margin:0 auto;
    }
    .topbar .breadcrumb a{color:#fff; text-decoration:none; font-weight:600}
    .topbar .breadcrumb .sep{opacity:.6}
    .icon-btn{
      display:none; align-items:center; justify-content:center;
      width:36px; height:36px; border-radius:8px; border:1px solid #ffffff33;
      background:#ffffff10; color:#fff; cursor:pointer; font-size:18px;
    }
    .icon-btn:hover{background:#ffffff1a}
    .brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;}
    .brand svg{display:block}
    .brand .title{font-weight:700; letter-spacing:.2px}

    .top-actions{display:flex; align-items:center; gap:8px;}
    
    /* Tenant Selector */
    .tenant-selector{display:flex; align-items:center; gap:8px; padding:0 12px; border-right:1px solid #ffffff33}
    .tenant-label{color:#dbeafe; font-size:12px; font-weight:600; white-space:nowrap}
    .tenant-select{
      appearance:none; background:#ffffff15; border:1px solid #ffffff33; border-radius:6px;
      color:#fff; padding:6px 8px; font-size:12px; cursor:pointer; min-width:140px;
      transition:.15s ease;
    }
    .tenant-select:hover{background:#ffffff22; border-color:#ffffff55}
    .tenant-select:focus{outline:none; background:#ffffff22; border-color:#fff}
    .tenant-select option{background:var(--brand-900); color:#fff}
    
    .status{color:#dbeafe; font-size:12px; margin-right:6px}
    .btn{
      appearance:none; border:1px solid var(--brand-700); border-radius:8px;
      padding:8px 12px; background:var(--brand-600); color:#fff; cursor:pointer;
      font-weight:600; transition:.15s ease; display:flex; align-items:center; gap:6px;
    }
    .btn:hover{background:var(--brand-700)}
    .btn.secondary{background:transparent; border:1px solid #d1d5db; color:var(--brand-600);}
    .btn.secondary i{color:inherit; stroke:inherit;}
    .btn .lucide{stroke:currentColor;}
    .btn .lucide-check-circle{stroke:currentColor !important;}
    .btn.secondary:hover{background:#f3f4f6; border-color:#9ca3af; color:var(--muted);}
    .btn.secondary:hover i{stroke:inherit;}
    .main .btn.secondary{background:#dbeafe; border:1px solid #7dd3fc; color:var(--brand-600); font-weight:700;}
    .main .btn.secondary:hover{background:#bae6fd; border-color:#38bdf8;}
    .avatar-wrap{
      position:relative; display:inline-flex; align-items:center;
    }
    .avatar{
      width:32px; height:32px; border-radius:50%; background:#ffffff22; display:grid; place-items:center;
      font-weight:700; color:#fff; border:1px solid #ffffff33;
      position:relative; overflow:hidden; cursor:pointer;
    }
    .avatar img{width:100%; height:100%; object-fit:cover; display:none}
    .avatar.has-image img{display:block}
    .avatar.has-image span{display:none}
    .avatar-menu{
      position:absolute; right:0; top:40px; min-width:160px;
      background:#fff; border:1px solid var(--border); border-radius:10px;
      box-shadow:0 10px 28px rgba(15,23,42,.15); padding:6px; z-index:1500;
      pointer-events:auto;
      display:none;
    }
    .avatar-wrap.open .avatar-menu{display:block}
    .avatar-menu-item{
      width:100%; text-align:left; background:transparent; border:none; padding:8px 10px;
      border-radius:8px; cursor:pointer; font-weight:600; color:var(--ink);
    }
    .avatar-menu-item:hover{background:#f3f6fb}

    /* Shell: sidebar + main */
    .shell{display:grid; grid-template-columns:280px 1fr; gap:18px; max-width:1400px; margin:112px auto 16px; padding:0 16px;}
    .sidebar{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
      padding:12px; height:fit-content; position:sticky; top:84px;
    }
    .sidebar h3{margin:6px 8px 10px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
    .nav{
      display:flex; flex-direction:column; gap:4px;
    }
    .nav-spacer{margin-top:auto}
    .nav a{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; border:1px solid transparent;
    }
    .nav a:hover{background:#f3f6fb}
    .nav a.active{background:#eef6ff; border-color:#dbeafe; color:var(--brand-600)}
    .collapse-toggle{
      display:none; margin:0 0 10px; width:100%;
      background:#f3f6fb; border:1px solid var(--border); color:var(--ink);
    }

    .main{
      min-height:60vh;
    }
    .breadcrumb{
      display:flex; align-items:center; gap:6px; margin:4px 0 12px; color:var(--muted);
      font-size:12px;
    }
    .breadcrumb a{color:var(--brand-600); text-decoration:none; font-weight:600}
    .breadcrumb .sep{opacity:.6}
    .detail-link{color:var(--brand-600); font-weight:600; text-decoration:none}
    .detail-link:hover{text-decoration:underline}

    /* Tasks dashboard */
    .tasks-dashboard{max-width:1400px; margin:112px auto 24px; padding:0 16px;}
    .task-board{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
    .task-column{
      background:var(--paper); border:1px solid var(--border); border-radius:12px;
      min-height:420px; display:flex; flex-direction:column; padding:12px;
      box-shadow:var(--shadow);
    }
    .task-column-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
    .task-column-header h3{margin:0; font-size:16px;}
    .task-count{background:#eef6ff; color:var(--brand-600); padding:2px 8px; border-radius:999px; font-weight:700;}
    .task-add{width:100%; margin-bottom:10px; border-color:#dbeafe; color:var(--brand-600); background:#eef6ff;}
    .task-add:hover{background:#dbeafe}
    .task-dropzone{flex:1; display:flex; flex-direction:column; gap:10px;}
    .task-dropzone.drop-hover{background:#f8fafc; border-radius:10px;}
    .task-card{
      background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px;
      box-shadow:0 2px 6px rgba(15,23,42,.06); cursor:grab;
    }
    .task-card.dragging{opacity:.6; cursor:grabbing;}
    .task-title{font-weight:700; color:var(--ink); margin-bottom:6px;}
    .task-summary{font-size:12px; color:var(--muted); margin-bottom:8px;}
    .task-actions{display:flex; justify-content:flex-end; margin-bottom:8px;}
    .task-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted);}
    .task-tenant{background:#f3f6fb; color:var(--brand-600); padding:2px 6px; border-radius:6px; font-weight:600;}
    .tenant-badge{
      display:inline-block;
      padding:4px 10px;
      border-radius:12px;
      font-size:11px;
      font-weight:700;
      box-shadow:0 1px 2px rgba(0,0,0,0.06);
    }
    .tenant-badge-topright{
      position:absolute; top:8px; right:8px; z-index:5;
    }

    @media (max-width:900px){
      .tenant-badge{padding:3px 8px; font-size:10px}
      .tenant-badge-topright{top:6px; right:6px}
    }
    @media (max-width:600px){
      .tenant-badge{padding:2px 6px; font-size:10px}
      .tenant-badge-topright{top:6px; right:6px}
    }
    .task-date{font-weight:600;}
    .error-banner{color:var(--danger); margin-bottom:12px;}
    .empty-state{background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:16px;}

    .modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2200;}
    .modal[hidden]{display:none}
    .modal-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.35);}
    .modal-card{
      position:relative; background:#fff; border-radius:12px; border:1px solid var(--border);
      box-shadow:0 18px 40px rgba(15,23,42,.2); width:min(560px, 92vw); padding:16px;
    }
    .form{display:flex; flex-direction:column; gap:12px;}
    .form-row{display:flex; flex-direction:column; gap:6px;}
    .form-row input,.form-row select,.form-row textarea{
      border:1px solid var(--border); border-radius:8px; padding:8px; font:inherit;
    }
    .textarea-wrap{position:relative;}
    .textarea-wrap textarea,
    .textarea-wrap input{width:100%; padding-right:88px;}
    .textarea-actions{
      position:absolute; right:8px; top:8px; display:flex; gap:6px;
    }
    .mic-btn,.ai-btn{
      width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px;
    }
    .mic-btn.is-recording{background:#feecee; border-color:#f5b5bd; color:#9b1c1c;}

    body.is-loading::after{
      content: attr(data-loading); position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
      background:rgba(15,23,42,.2); color:#fff; font-weight:700; z-index:2000;
      backdrop-filter: blur(2px);
    }

    /* Dashboard */
    .cards{
      display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:18px;
    }
    .card{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:16px;
    }
    .card h4{margin:0 0 6px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
    .metric{font-size:28px; font-weight:800; margin:2px 0 8px}
    .trend{font-size:12px}
    .trend.up{color:var(--success)} .trend.down{color:var(--danger)} .trend.flat{color:var(--muted)}

    .panels{
      display:grid; grid-template-columns:2fr 1fr; gap:16px;
    }
    .panel{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:16px;
    }
    .panel h3{margin:0 0 10px}

    /* Chart canvas wrappers */
    .chart-wrap{position:relative; height:260px}
    canvas{max-width:100%; display:block}

    /* Table preview (kan later echte datatable worden) */
    .table{width:100%; border-collapse:collapse; font-size:13px}
    .table th, .table td{padding:10px 8px; border-bottom:1px solid var(--border)}
    .table th{color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:12px}
    .table th.sortable{cursor:pointer; position:relative; user-select:none}
    .table th.sortable::after{content:'↕'; font-size:10px; margin-left:6px; opacity:.35}
    .table th.sort-asc::after{content:'↑'; opacity:.8}
    .table th.sort-desc::after{content:'↓'; opacity:.8}
    .table td{max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .table .table-filters th{padding:6px 8px; background:var(--bg)}
    .table .table-filters input{
      width:100%; min-width:0; padding:4px 6px; font-size:12px;
      border:1px solid var(--border); border-radius:6px; background:var(--paper); color:var(--ink);
    }
    .pill{padding:4px 8px; border-radius:999px; font-size:12px}
    .pill.ok{background:#e8f7f1; color:#036b3f}
    .pill.warn{background:#fff4e5; color:#a15c07}
    .pill.err{background:#feecee; color:#9b1c1c}
    .pill.info{background:#e7f1ff; color:#1a68b3}

    /* Dashboard ratio coloring */
    .ratio-ok{color:#036b3f; font-weight:700}
    .ratio-warn{color:#a15c07; font-weight:700}
    .ratio-err{color:#9b1c1c; font-weight:700}
    
    /* Hide less important columns on mobile */
    @media (max-width:900px){
      .table{font-size:12px}
      .table th, .table td{padding:8px 6px}
      .table td{max-width:150px}
      .table .table-filters input{font-size:11px; padding:3px 4px}
      /* Hide columns marked with mobile-hide class */
      .table th.mobile-hide, .table td.mobile-hide{display:none}
    }
    @media (max-width:600px){
      .table{font-size:11px}
      .table th, .table td{padding:6px 4px}
      .table td{max-width:100px}
      .table .table-filters input{font-size:10px; padding:2px 3px}
    }

    /* Responsive */
    @media (max-width:1200px){
      .cards{grid-template-columns:repeat(3,1fr)}
      .panels{grid-template-columns:1fr}
    }
    @media (max-width:900px){
      .topbar .row{padding-left:0; padding-right:0;}
      .topbar .breadcrumb{padding-left:12px; padding-right:12px;}
      .shell{margin:112px 0 16px; padding-left:0; padding-right:0;}
      .shell{grid-template-columns:1fr}
      .collapse-toggle{display:none}
      .icon-btn{display:inline-flex}
      .sidebar{
        display:none; position:fixed; z-index:1200; top:64px; left:0; right:0;
        max-height:calc(100vh - 76px); overflow:auto;
      }
      .sidebar.is-open{display:block}
      .cards{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:600px){
      .topbar .row{padding-left:0; padding-right:0;}
      .topbar .breadcrumb{padding-left:12px; padding-right:12px;}
      .shell{margin:112px 0 16px; padding-left:0; padding-right:0;}
      .cards{grid-template-columns:1fr}
      .brand .title{display:none}
    }

    
td.no-wrap, th.no-wrap {
    white-space: nowrap;
}
/* ===== Layout helpers ===== */
.section-split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.flex-1{flex:1}
.flex-2{flex:2}

.panel-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.panel-header.toolbar{
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  margin-bottom:8px;
}
.toolbar-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto;}
.btn[data-icon]::before{content:attr(data-icon); margin-right:6px; font-size:13px; line-height:1;}
.btn.small[data-icon]::before{font-size:12px;}
.panel-header h3{margin:0}

/* ===== Detail Columns ===== */
.detail-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:20px; align-items:start;}
.detail-main{min-width:0;}
.detail-side{min-width:0;}
.detail-side .detail-columns{margin-top:0;}
.detail-columns{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px;}
.detail-column{display:flex; flex-direction:column; gap:8px; min-width:260px; flex:1 1 0; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--paper);}
.detail-column .panel-header{margin-top:0}
@media (max-width:1100px){
  .detail-layout{grid-template-columns:1fr;}
  .detail-column{min-width:100%;}
}

/* ===== Compact Details Card ===== */
.details-card{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--paper);
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.details-card + .details-card{margin-top:12px}
.details-card-header{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.details-card-icon{font-size:18px}
.details-card-title{font-weight:800; color:var(--ink); flex:1}

.details-card-a{border-left:4px solid var(--brand-600)}
.details-card-a.status-ok{border-left-color:#22c55e}
.details-card-a.status-warn{border-left-color:#f59e0b}
.details-card-a.status-err{border-left-color:#ef4444}
.details-card-a.status-info{border-left-color:#0ea5e9}

.details-card-b .details-card-header{background:#f3f6fb; padding:8px 10px; border-radius:8px}
.details-card-b.status-ok .details-card-header{background:#ecfdf5}
.details-card-b.status-warn .details-card-header{background:#fffbeb}
.details-card-b.status-err .details-card-header{background:#fef2f2}
.details-card-b.status-info .details-card-header{background:#eff6ff}

.details-card-c{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
.details-card-c .detail-item{background:#fff}
.details-card-c .details-card-icon{background:#eef6ff; border-radius:8px; padding:6px 8px}
.details-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px;}
.detail-item{padding:8px 10px; border-radius:8px; background:var(--bg); border:1px solid var(--border);}
.detail-label{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.4px; margin-bottom:4px;}
.detail-value{font-size:13px; color:var(--ink); word-break:break-word;}

/* ===== AI Advice (Conversation Block) ===== */
.ai-advice-panel{margin-top:12px;}
.ai-thread{display:flex; flex-direction:column; gap:10px;}
.ai-bubble{max-width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--paper); box-shadow:var(--shadow);}
.ai-bubble.ai{align-self:flex-start; background:#eef6ff; border-color:#cfe3ff;}
.ai-bubble.user{align-self:flex-end; background:#f8fafc;}
.ai-bubble.loading{opacity:.7;}
.ai-bubble.error{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.ai-meta{font-size:11px; color:var(--muted); margin-bottom:4px;}
.ai-text{font-size:13px; color:var(--ink); white-space:pre-wrap;}
.typing-indicator{display:inline-flex; align-items:center; gap:4px; font-style:italic; color:var(--muted);}
.typing-dots{display:inline-flex; gap:3px;}
.typing-dots span{display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; animation:typing-bounce 1.4s infinite;}
.typing-dots span:nth-child(2){animation-delay:0.2s;}
.typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes typing-bounce{0%,60%,100%{opacity:0.3; transform:translateY(0);}30%{opacity:1; transform:translateY(-4px);}}
.ai-input-row{display:flex; gap:8px; align-items:center; margin-top:8px;}
.ai-input-row input{flex:1 1 auto;}

/* ===== Forms ===== */
.form-group{margin-bottom:14px}
.form-group label{display:block; margin-bottom:4px; font-weight:600; font-size:13px; color:var(--ink)}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px;
  font-family:inherit; font-size:13px; color:var(--ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--brand-600); box-shadow:0 0 0 2px #1a68b322;
}
.form-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; justify-content:flex-end}
.form-actions button{flex:0 1 auto}

.case-status-actions-list{display:flex; flex-direction:column; gap:10px;}
.case-status-actions-list .btn{width:100%; justify-content:center;}

/* Toggle Switch Checkboxes */
.form-group label input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:relative; width:44px; height:24px; background:#dc2626; border-radius:12px;
  cursor:pointer; transition:background .3s ease; vertical-align:middle; margin-right:8px;
}
.form-group label input[type="checkbox"]:before{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  background:#fff; border-radius:50%; transition:left .3s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.form-group label input[type="checkbox"]:checked{background:#16a34a}
.form-group label input[type="checkbox"]:checked:before{left:22px}
.form-group label input[type="checkbox"]:focus{
  outline:none; box-shadow:0 0 0 3px rgba(22,163,74,.3);
}
.form-group label input[type="checkbox"]:disabled{opacity:.5; cursor:not-allowed}

.wizard-body{display:flex; flex-direction:column; gap:10px;}
.wizard-meta{font-size:12px; color:var(--muted);}
.wizard-question{font-size:15px; font-weight:600;}

.nav-section{margin:12px 8px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700;}
.nav-section-toggle{display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;}
.nav-section-arrow{font-size:11px; color:var(--muted); margin-left:8px;}
.nav-section-body{margin-bottom:6px;}

/* ===== Modals ===== */
.modal{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px;
}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-content{
  position:relative; z-index:1; background:var(--paper); border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.2); max-width:500px; width:100%; max-height:90vh;
  overflow-y:auto; padding:20px;
}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.modal-header h3{margin:0}
.modal-header .btn{margin-left:auto}

/* ===== Buttons ===== */
.btn.small{padding:6px 10px; font-size:12px}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#b91c1c}
.btn.success{background:var(--success)}
.btn.success:hover{background:#15803d}
.btn.secondary.danger-light{color:var(--brand-600); border-color:#fecaca;}
.btn.secondary.danger-light:hover{background:#fee2e2; color:var(--danger);}
.btn.secondary.success-light{color:var(--brand-600); border-color:#bbf7d0;}
.btn.secondary.success-light:hover{background:#dcfce7; color:var(--success);}
#btn-item-whitelist i[data-lucide="check-circle"]{stroke:var(--brand-600) !important;}
#btn-item-whitelist:hover i[data-lucide="check-circle"]{stroke:var(--muted) !important;}

/* ===== Tenant detail panel ===== */
#tenant-detail-panel h4{margin-top:0; margin-bottom:8px; font-size:13px}
#grid-actions-detail{font-size:12px}

/* ===== Loading Screen (light) ===== */
.loading-screen{
  position:fixed; inset:0; z-index:9999;
  background: var(--bg); display:grid; place-items:center;
  overflow:hidden;
}
.loading-screen[hidden]{display:none}

.matrix-bg{
  position:absolute; inset:-10%;
  background: linear-gradient(180deg, rgba(245,247,251,0.6), rgba(255,255,255,0.6));
  filter: blur(8px);
}

.matrix-bg::before,
.matrix-bg::after{
  content: '';
}

.loading-card{
  position:relative; z-index:1;
  padding:24px 28px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--paper);
  box-shadow:var(--shadow);
  text-align:center;
  min-width:320px;
}

.loading-title{
  font-weight:800;
  letter-spacing:1px;
  color:var(--brand-600);
  margin-bottom:8px;
}

.loading-sub{
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}

.loading-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--border);
  overflow:hidden;
}

.loading-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--brand-600), var(--brand-700));
  transition:width .2s ease;
}

/* ===== Global Search ===== */
.global-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  min-width:260px;
}
.global-search input{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:13px;
}
.global-search .search-icon{font-size:13px; opacity:.7;}

.search-results{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:420px;
  max-height:420px;
  overflow:auto;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
  z-index:2000;
}
.search-result-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.search-result-item:hover{background:#f1f5f9;}
.search-result-icon{
  position:relative;
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#f8fafc;
  border:1px solid var(--border);
  font-size:14px;
  flex:0 0 auto;
}
.search-result-title{font-weight:600; color:var(--ink); font-size:13px;}
.search-result-meta{font-size:11px; color:var(--muted); margin-top:2px;}
.search-result-empty{padding:12px; color:var(--muted); font-size:12px; text-align:center;}
.search-result-loading{padding:12px; color:var(--muted); font-size:12px; text-align:center;}

.search-result-icon .case-dot{
  right:-2px; top:-2px;
}

/* Floating action buttons */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:1500; display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.fab-main{
  width:48px; height:48px; border-radius:50%; border:none; background:var(--brand-600); color:#fff;
  font-size:24px; cursor:pointer; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
}
.fab-actions{
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.fab-action{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--paper); color:var(--ink);
  cursor:pointer; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}

.fab-action [data-lucide],
.fab-action .lucide {
  width: 1.25rem;
  height: 1.25rem;
}

@keyframes matrixRain{
  0%{transform:translateY(0)}
  100%{transform:translateY(10%)}
}

@keyframes matrixChars{
  0%{transform:translateY(-10%)}
  100%{transform:translateY(10%)}
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .section-split{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .collapse-toggle{display:block}
  .sidebar{position:static}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .brand .title{display:none}
  .modal-content{max-width:100%; padding:16px}
}
  /* ===== Tabs in tenant detail ===== */
  .tabs{display:block}
  .tab-buttons{display:flex; gap:8px; margin-bottom:12px}
  .tab-btn{appearance:none; border:1px solid var(--border); background:transparent; color:var(--ink); padding:8px 10px; border-radius:8px; cursor:pointer}
  .tab-btn.active{background:#eef6ff; border-color:#dbeafe; color:var(--brand-600); font-weight:700}
  .tab-content{background:transparent}

  /* ===== Properties Display (Read-Only) ===== */
  .properties-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:20px}
  .property-item{padding:12px; background:var(--bg); border:1px solid var(--border); border-radius:8px}
  .property-item.full-width{grid-column:1 / -1}
  .property-label{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.5px; margin-bottom:6px}
  .property-value{font-size:14px; color:var(--ink); word-break:break-word}

  /* ===== Toggle Controls ===== */
  .toggle-group{display:flex; gap:12px; align-items:center; margin-top:6px}
  .toggle-label{display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none}
  .toggle-label input[type="radio"]{cursor:pointer; width:16px; height:16px}
  .toggle-label span{font-size:13px; color:var(--ink)}

  /* ===== Grid Icons ===== */
  .icon-cell{position:relative; padding-left:26px;}
  .icon-cell::before{
    content:attr(data-icon);
    position:absolute; left:6px; top:50%; transform:translateY(-50%);
    font-size:14px; opacity:.9;
  }
  .icon-only{padding-left:0; text-align:center; width:28px;}
  .icon-only::before{position:static; transform:none;}
  .icon-col{width:28px;}

  .user-subtext{font-size:11px; color:var(--muted); font-weight:500; margin-top:2px;}

  .case-dot{
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--danger);
    box-shadow:0 0 6px rgba(239,68,68,0.8);
    right:4px; top:4px;
    animation:caseDotPulse 1.8s ease-in-out infinite;
  }

  .case-dot-inline{
    position:static;
    display:inline-block;
    margin-left:8px;
    vertical-align:middle;
  }

  @keyframes caseDotPulse{
    0%, 100%{opacity:0.6; transform:scale(0.95);}
    50%{opacity:1; transform:scale(1);}
  }

  /* ===== Notes Timeline (Detail Views) ===== */
  .notes-timeline{display:flex; flex-direction:column; gap:12px;}
  .note-card{
    position:relative;
    padding:12px 14px 12px 18px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--paper);
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .note-card::before{
    content:'';
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    background:var(--brand-600);
    border-radius:3px;
    opacity:.75;
  }
  .note-card:hover{border-color:#dbeafe; box-shadow:0 8px 20px rgba(2,6,23,.08);}
  .note-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .note-date{padding:2px 6px; border-radius:999px; background:#eef6ff; color:var(--brand-600); font-weight:600;}
  .note-title{font-weight:700; color:var(--ink);}
  .note-body{white-space:pre-wrap; color:var(--ink); line-height:1.5;}
  .note-empty{color:var(--muted); font-style:italic; padding:6px 2px;}

  /* ===== Tasks/Cases Timeline (Detail Views) ===== */
  .timeline-list{display:flex; flex-direction:column; gap:12px;}
  .timeline-card{
    position:relative;
    padding:12px 14px 12px 18px;
    border:1px solid var(--border);
    border-radius:12px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .timeline-card::before{
    content:'';
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    background:var(--brand-600);
    border-radius:3px;
    opacity:.6;
  }
  .timeline-card:hover{border-color:#dbeafe; box-shadow:0 10px 24px rgba(2,6,23,.08);}
  .timeline-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .timeline-date{padding:2px 6px; border-radius:999px; background:#eef6ff; color:var(--brand-600); font-weight:600;}
  .timeline-title{font-weight:700; color:var(--ink); margin-bottom:4px;}
  .timeline-body{white-space:pre-wrap; color:var(--ink); line-height:1.5;}
  .timeline-footer{margin-top:6px; font-size:12px; color:var(--muted);}
  .task-title.completed{text-decoration:line-through; color:var(--muted);}
  .task-complete{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
  .task-complete-toggle{width:14px; height:14px; accent-color:var(--brand-600); cursor:pointer;}
  .task-complete-label{opacity:.85;}
  .tag{display:inline-flex; align-items:center; padding:2px 6px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.2px;}
  .tag-case{background:#e0f2fe; color:#0369a1;}

  /* ===== Dashboard Task Overview ===== */
  .task-overview{display:flex; flex-direction:column; gap:12px;}
  .task-overview-empty{color:var(--muted); font-style:italic; padding:6px 2px;}
  .task-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--paper);
    padding:12px 14px;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .task-card:hover{border-color:#dbeafe; box-shadow:0 10px 24px rgba(2,6,23,.08);}
  .task-card-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .task-card-due{font-weight:600; color:var(--brand-600);}
  .task-card-title{font-weight:700; color:var(--ink); margin-bottom:4px; display:flex; align-items:center; gap:6px;}
  .task-card-icon{width:16px; height:16px; color:var(--brand-600); flex:0 0 auto;}
  .task-card-body{color:var(--muted); line-height:1.4;}
  .task-card.overdue .task-card-due{color:#b91c1c;}
  .task-card.today .task-card-due{color:#0ea5e9;}

  /* ===== Dashboard Cards ===== */
  .dashboard-cards{display:flex; flex-direction:column; gap:12px;}
  .dashboard-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--paper);
    padding:12px 14px;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .dashboard-card:hover{border-color:#dbeafe; box-shadow:0 10px 24px rgba(2,6,23,.08);}
  .dashboard-card-head{display:flex; align-items:center; gap:8px;}
  .dashboard-card-icon{font-size:16px;}
  .dashboard-card-title{font-weight:500; color:var(--ink); flex:1;}
  .dashboard-card-badge{font-size:11px; color:var(--brand-600); background:#eef6ff; padding:2px 6px; border-radius:999px;}
  .dashboard-card-meta{margin-top:4px; font-size:12px; color:var(--muted);}
  .dashboard-card-body{margin-top:6px; color:var(--ink); line-height:1.4;}

  .cert-charts{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;}
  .cert-card{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--paper);}
  .cert-donut{width:96px; height:96px; border-radius:50%; position:relative; display:grid; place-items:center;}
  .cert-donut::after{content:""; width:64px; height:64px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--border);} 
  .cert-center{position:absolute; text-align:center; font-weight:700; font-size:16px; color:var(--ink);}
  .cert-center small{display:block; font-weight:600; font-size:11px; color:var(--muted);} 
  .cert-meta{display:flex; flex-direction:column; gap:6px;}
  .cert-title{font-weight:700;}
  .cert-legend{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted);} 
  .cert-legend span{display:flex; align-items:center; gap:6px;} 
  .cert-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}

  /* ===== Ratio Cards ===== */
  .ratio-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;}
  .ratio-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--paper);
    padding:12px;
    box-shadow:var(--shadow);
  }
  .ratio-head{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
  .ratio-icon{font-size:18px; display:flex; align-items:center; width:1.25rem; height:1.25rem;}
  .ratio-title{font-weight:700; color:var(--ink);}
  .ratio-meta{font-size:12px; color:var(--muted); margin-bottom:8px;}
  .ratio-bar{height:8px; background:#eef2f7; border-radius:999px; overflow:hidden;}
  .ratio-fill{height:100%; border-radius:999px;}
  .ratio-fill.ok{background:#22c55e;}
  .ratio-fill.warn{background:#f59e0b;}
  .ratio-fill.err{background:#ef4444;}
  .ratio-value{margin-top:6px; font-weight:700; font-size:14px;}
  .ratio-value.ok{color:#16a34a;}
  .ratio-value.warn{color:#d97706;}
  .ratio-value.err{color:#dc2626;}

  /* ===== ONBOARDING MODAL ===== */
  .modal-overlay{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000;
    background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center;
  }
  .modal-content{
    background:var(--paper); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
    max-width:600px; width:90%; max-height:80vh; overflow-y:auto; position:relative; padding:32px;
  }
  .modal-close{
    position:absolute; top:12px; right:12px; border:none; background:transparent;
    font-size:24px; cursor:pointer; color:var(--muted); padding:4px 8px;
  }
  .modal-close:hover{color:var(--ink)}

  .onboarding-modal h2{margin:0 0 16px; font-size:1.5rem; color:var(--ink)}
  .onboarding-content{padding:16px 0}
  .onboarding-content p{margin:12px 0; color:var(--ink)}
  .onboarding-content ul{margin:12px 0; padding-left:20px; color:var(--ink)}
  .onboarding-content li{margin:6px 0}

  .onboarding-step{display:none}
  .onboarding-step.active{display:block}

  .info-box{
    background:#f0f9ff; border-left:4px solid var(--brand-600); padding:16px;
    border-radius:8px; margin:16px 0;
  }
  .info-box strong{color:var(--brand-600)}

  .form-group{margin:16px 0; display:flex; flex-direction:column}
  .form-group label{font-weight:600; margin-bottom:6px; color:var(--ink)}
  .form-group input, .form-group select{
    padding:10px 12px; border:1px solid var(--border); border-radius:8px;
    font-size:14px; background:var(--paper); color:var(--ink);
  }
  .form-group input:focus, .form-group select:focus{
    outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(91,155,213,0.1);
  }

  .onboarding-progress{
    display:flex; gap:12px; justify-content:center; margin-top:32px; padding-top:24px;
    border-top:1px solid var(--border);
  }
  .progress-step{
    width:36px; height:36px; border-radius:50%; border:2px solid var(--border);
    display:grid; place-items:center; font-weight:700; color:var(--muted);
    transition:.2s ease;
  }
  .progress-step.active{
    background:var(--brand-600); color:#fff; border-color:var(--brand-600);
  }

  #registration-details{margin-top:16px}
  #registration-details p{margin:8px 0; font-size:14px}
  #registration-details p span{font-weight:600; color:var(--brand-600)}

  /* Incident indicator - red flashing flag */
  @keyframes incident-flash {
    0%, 100% { color: #dc2626; opacity: 1; }
    50% { color: #991b1b; opacity: 0.6; }
  }
  
  .incident-flag {
    animation: incident-flash 1s ease-in-out infinite;
    margin-right: 8px;
    font-size: 16px;
  }

  /* Execution Details View */
  .execution-details-content {
    display: grid;
    gap: 24px;
    padding: 16px 0;
    width: 100%;
  }

  .execution-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .info-item.full-width {
    grid-column: 1 / -1;
  }

  .info-item label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
  }

  .info-item span {
    color: var(--ink);
    font-weight: 600;
  }

  .info-item .exec-status {
    width: fit-content;
  }

  .exec-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .exec-status.completed {
    background: #dcfce7;
    color: #166534;
  }

  .exec-status.failed {
    background: #fee2e2;
    color: #991b1b;
  }

  .exec-status.inprogress {
    background: #fef3c7;
    color: #92400e;
  }

  .exec-status.default {
    background: var(--border);
    color: #374151;
  }

  .execution-steps h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--ink);
  }

  #execution-steps-list {
    display: grid;
    gap: 12px;
  }

  .execution-step {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--brand-600);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
  }

  .step-content {
    flex: 1;
    display: grid;
    gap: 6px;
  }

  .step-description {
    color: var(--ink);
    font-weight: 600;
  }

  .step-webhook,
  .step-wait {
    color: var(--muted);
    font-size: 0.85rem;
  }

  @media (max-width: 640px) {
    .execution-info {
      grid-template-columns: 1fr;
    }
  }