:root{
    --bg:#F5F6F8;
    --surface:#FFFFFF;
    --surface-2:#FAFBFC;
    --ink:#12141A;
    --ink-soft:#3A3D46;
    --muted:#6B7280;
    --faint:#9CA3AF;
    --border:#E7E9EE;
    --border-strong:#D7DAE1;

    --wa:#22C55E;
    --wa-deep:#0F8A4E;
    --wa-bg:#E9F9EF;
    --wa-text:#0B6B39;

    --ig-1:#F58529;
    --ig-2:#DD2A7B;
    --ig-3:#8134AF;
    --ig-bg:#FCEBF3;
    --ig-text:#9A2664;

    --accent:#4F46E5;
    --accent-bg:#EEEDFC;
    --accent-text:#3730A9;

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;
    --shadow-sm:0 1px 2px rgba(16,20,30,0.04);
    --shadow-md:0 6px 20px rgba(16,20,30,0.07);
    --shadow-lg:0 20px 45px rgba(16,20,30,0.12);
  }
  
  body{
    margin:0;
    background:var(--bg) !important;
    font-family:'Inter',sans-serif !important;
    color:var(--ink) !important;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{ font-family:'Manrope',sans-serif; }

  .shell{
    display:flex;
    min-height:100vh;
  }

  /* SIDEBAR */
  .sidebar{
    width:230px;
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    padding:20px 14px;
    height: 100vh;
    position: sticky;
    top: 0;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:4px 8px 22px;
  }
  .brand-mark{
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(135deg, var(--accent), #7C74F0);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px;
  }
  .brand-name{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15.5px; letter-spacing:-0.01em; color:var(--ink); margin-bottom:0 !important; }
  .brand-sub{ font-size:11px; color:var(--faint); margin-top:1px; line-height:1; }

  .nav-group-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--faint); font-weight:700; padding:14px 10px 6px;
  }
  .navlink{
    display:flex; align-items:center; gap:11px;
    padding:9px 10px; border-radius:10px;
    font-size:13.5px; font-weight:500; color:var(--ink-soft);
    text-decoration:none !important; cursor:pointer;
    transition:background .12s ease, color .12s ease;
  }
  .navlink i{ font-size:17px; color:var(--faint); }
  .navlink:hover{ background:var(--surface-2); }
  .navlink.active{ background:var(--accent-bg); color:var(--accent-text); }
  .navlink.active i{ color:var(--accent); }
  .navlink .badge{
    margin-left:auto; font-size:10.5px; font-weight:700;
    background:var(--ig-2); color:#fff; border-radius:20px; padding:1px 7px;
  }

  .sidebar-foot{
    margin-top:auto; padding:12px 10px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:10px; cursor:pointer;
    text-decoration: none !important;
  }
  .avatar{
    width:30px; height:30px; border-radius:50%; background:var(--accent);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; font-family:'Manrope',sans-serif;
  }
  .sidebar-foot .who{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:0;}
  .sidebar-foot .role{ font-size:11px; color:var(--faint); line-height:1;}

  /* MAIN */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; }

  .topbar{
    height:64px; flex-shrink:0;
    display:flex; align-items:center; gap:16px;
    padding:0 26px; border-bottom:1px solid var(--border);
    background:var(--surface);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .search{
    flex:1; max-width:360px; position:relative;
  }
  .search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; }
  .search input{
    width:100%; padding:8px 12px 8px 34px; border-radius:9px;
    border:1px solid var(--border); background:var(--surface-2);
    font-size:13px; font-family:inherit; color:var(--ink);
  }
  .search input:focus{ outline:none; border-color:var(--accent); background:#fff; }

  .status-chip{
    display:flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600; padding:6px 10px; border-radius:20px;
    border:1px solid var(--border); background:#fff;
  }
  .dot{ width:7px; height:7px; border-radius:50%; }
  .dot.on{ background:var(--wa); box-shadow:0 0 0 3px var(--wa-bg); }
  .dot.warn{ background:#F59E0B; box-shadow:0 0 0 3px #FEF3C7; }

  .icon-btn{
    width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); cursor:pointer; position:relative;
  }
  .icon-btn:hover{ background:var(--surface-2); }
  .icon-btn .ping{
    position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
    background:var(--ig-2); border:2px solid var(--surface);
  }

  .content{ padding:26px 30px 60px; overflow-y:auto; }

  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px; }
  .page-head h1{ font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; color:var(--ink); }
  .page-head p{ font-size:13px; color:var(--muted); margin:0; }

  .filterbar{
    display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:11px; padding:4px; margin-bottom: 0 !important;
  }
  .filterbar button{
    border:none; background:transparent; font-family:inherit; cursor:pointer;
    font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; color:var(--muted);
    display:flex; align-items:center; gap:6px; margin: 0; outline: none;
  }
  .filterbar button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
  .filterbar button i{ font-size:14px; }

  .content{ padding:26px 30px 60px; overflow-y:auto; }

  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px; }
  .page-head h1{ font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; }
  .page-head p{ font-size:13px; color:var(--muted); margin:0; }

  .filterbar{
    display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:11px; padding:4px;
  }
  .filterbar button{
    border:none; background:transparent; font-family:inherit; cursor:pointer;
    font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; color:var(--muted);
    display:flex; align-items:center; gap:6px;
  }
  .filterbar button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
  .filterbar button i{ font-size:14px; }

  /* STAT CARDS */
  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:24px; }
  .stat-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  }
  .stat-card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  }
  .stat-card.wa::before{ background:var(--wa); }
  .stat-card.ig::before{ background:linear-gradient(180deg, var(--ig-1), var(--ig-2), var(--ig-3)); }
  .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .stat-label{ font-size:12px; color:var(--muted); font-weight:600; }
  .stat-icon{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; }
  .stat-icon.wa{ background:var(--wa-bg); color:var(--wa-text); }
  .stat-icon.ig{ background:var(--ig-bg); color:var(--ig-text); }
  .stat-value{ font-size:25px; font-weight:800; font-family:'Manrope',sans-serif; letter-spacing:-0.01em; color:var(--ink); line-height: 1.1; margin:0;}
  .stat-delta{ font-size:11.5px; font-weight:600; margin-top:4px; }
  .stat-delta.up{ color:var(--wa-text); }
  .stat-delta.flat{ color:var(--faint); }

  /* TWO COLUMN */
  .cols{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:16px; align-items:start; }
  @media (max-width: 992px) {
    .cols { grid-template-columns: 1fr; }
  }
  .panel{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); overflow:hidden;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--border);
  }
  .panel-head h3{ font-size:14.5px; font-weight:700; margin:0; color:var(--ink); }
  .panel-head a{ font-size:12px; color:var(--accent); font-weight:600; text-decoration:none; }

  .inbox-row{
    display:flex; align-items:center; gap:11px; padding:12px 18px;
    border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none !important; color:var(--ink) !important;
  }
  .inbox-row:last-child{ border-bottom:none; }
  .inbox-row:hover{ background:var(--surface-2); }
  .ch-badge{
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
  }
  .ch-badge.wa{ background:var(--wa); }
  .ch-badge.ig{ background:linear-gradient(135deg, var(--ig-1), var(--ig-2), var(--ig-3)); }
  .inbox-name{ font-size:13.5px; font-weight:600; margin:0; line-height:1.2;}
  .inbox-msg{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; margin:0; line-height:1.2;}
  .inbox-time{ font-size:11px; color:var(--faint); margin-left:auto; flex-shrink:0; }
  .unread{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:8px; flex-shrink:0; }

  .rule-row{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border); }
  .rule-row:last-child{ border-bottom:none; }
  .chan-pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; flex-shrink:0; }
  .chan-pill.wa{ background:var(--wa-bg); color:var(--wa-text); }
  .chan-pill.ig{ background:var(--ig-bg); color:var(--ig-text); }
  .rule-text{ font-size:12.5px; flex:1; min-width:0; color:var(--ink); margin:0;}
  .rule-text b{ font-weight:600; }
  .toggle{ width:32px; height:18px; border-radius:20px; background:var(--wa); position:relative; flex-shrink:0; }
  .toggle.off{ background:var(--faint); }
  .toggle::after{ content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:2px; right:2px; box-shadow:var(--shadow-sm); }
  .toggle.off::after{ left:2px; right:auto; }

  /* Chart mock */
  .chart-panel{ margin-top:16px; padding:18px; }
  .bars{ display:flex; align-items:flex-end; gap:10px; height:120px; margin-top:14px; }
  .bar-group{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .bar-stack{ width:100%; display:flex; flex-direction:column; justify-content:flex-end; height:100px; border-radius:4px; overflow:hidden; }
  .bar-ig{ background:linear-gradient(180deg, var(--ig-1), var(--ig-2)); }
  .bar-wa{ background:var(--wa); }
  .bar-day{ font-size:10.5px; color:var(--faint); }

  /* TABS (screens) */
  .screen{ display:none; }
  .screen.active{ display:block; }
  .toppill-tabs{ display:flex; gap:6px; padding:0 26px; }

  /* INBOX SCREEN */
  .inbox-layout{ display:grid; grid-template-columns:290px 1fr 260px; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); min-height:560px; }
  @media (max-width: 992px) {
    .inbox-layout { grid-template-columns: 290px 1fr; }
    .side-info { display: none; }
  }
  @media (max-width: 768px) {
    .inbox-layout { grid-template-columns: 1fr; }
    .inbox-list { display: none; }
  }
  
  .inbox-list{ border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto;}
  .inbox-list-head{ padding:14px 16px; border-bottom:1px solid var(--border); }
  .inbox-list-head input{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); font-size:12.5px; font-family:inherit; background:var(--surface-2); }
  .thread-panel{ display:flex; flex-direction:column; }
  .thread-head{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
  .thread-body{ flex:1; padding:22px; display:flex; flex-direction:column; gap:12px; background:var(--surface-2); overflow-y:auto; }
  .bubble{ max-width:60%; padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.4; color:var(--ink); }
  .bubble.in{ background:#fff; border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
  .bubble.out{ background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
  .thread-input{ padding:14px 18px; border-top:1px solid var(--border); display:flex; gap:10px; background:var(--surface); }
  .thread-input input{ flex:1; padding:10px 14px; border-radius:10px; border:1px solid var(--border); font-family:inherit; font-size:13px; }
  .side-info{ padding:18px; border-left:1px solid var(--border); background:var(--surface);}
  .side-info h4{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); margin:0 0 10px; font-weight:700;}
  .info-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; color:var(--ink); margin:0;}

  /* AUTOMATION SCREEN */
  .auto-layout{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
  @media (max-width: 992px) {
    .auto-layout { grid-template-columns: 1fr; }
  }
  .rule-table .rule-row{ padding:14px 18px; }
  .builder-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:20px; }
  .builder-card h3{ font-size:14.5px; margin:0 0 4px; color:var(--ink); font-weight:700;}
  .builder-card .hint{ font-size:12px; color:var(--muted); margin:0 0 18px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .field input, .field select, .field textarea{
    width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--border);
    font-family:inherit; font-size:12.5px; background:var(--surface-2); color:var(--ink);
  }
  .chan-select{ display:flex; gap:8px; }
  .chan-opt{ flex:1; border:1.5px solid var(--border); border-radius:10px; padding:10px; text-align:center; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); }
  .chan-opt.sel-wa{ border-color:var(--wa); background:var(--wa-bg); color:var(--wa-text); }
  .chan-opt.sel-ig{ border-color:var(--ig-2); background:var(--ig-bg); color:var(--ig-text); }
  .save-btn{ width:100%; background:var(--accent); color:#fff; border:none; padding:11px; border-radius:10px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; margin-top:6px; }

  .btn-custom{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:9px 15px; border-radius:9px; cursor:pointer; font-family:inherit; border:1px solid var(--border); background:var(--surface); color:var(--ink); text-decoration:none; }
  .btn-custom:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
  .btn-custom.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn-custom.primary:hover{ background:var(--accent-text); color:#fff; }

  /* TABLE */
  table.data{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.data th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); font-weight:700; padding:11px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); }
  table.data td{ padding:12px 18px; border-bottom:1px solid var(--border); color:var(--ink); }
  table.data tr:last-child td{ border-bottom:none; }
  .status-pill{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; }
  .status-pill.sent{ background:var(--wa-bg); color:var(--wa-text); }
  .status-pill.scheduled{ background:#FEF3C7; color:#92600A; }
  .status-pill.draft{ background:var(--surface-2); color:var(--faint); border:1px solid var(--border); }

  /* Hide DataTables controls when inside a .panel */
  .panel .dataTables_length,
  .panel .dataTables_filter,
  .panel .dataTables_info,
  .panel .dataTables_paginate {
    display: none !important;
  }
  .panel .dataTables_wrapper {
    padding: 0;
  }

  /* CONTACTS */
  .contact-cell{ display:flex; align-items:center; gap:10px; }
  .init{ width:28px; height:28px; border-radius:50%; background:var(--accent-bg); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:'Manrope',sans-serif; flex-shrink:0; }
  .tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--accent-bg); color:var(--accent-text); display:inline-block; }

  /* SETTINGS */
  .settings-layout{ display:grid; grid-template-columns:200px 1fr; gap:20px; }
  @media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
  }
  .settings-nav{ display:flex; flex-direction:column; gap:2px; }
  .settings-nav a{ padding:9px 12px; border-radius:9px; font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none !important; cursor:pointer; }
  .settings-nav a:hover{ background:var(--surface-2); }
  .settings-nav a.active{ background:var(--accent-bg); color:var(--accent-text); font-weight:600; }
  .settings-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:22px; margin-bottom:16px; }
  .settings-section h3{ font-size:14.5px; margin:0 0 3px; color:var(--ink); font-weight:700;}
  .settings-section .hint{ font-size:12px; color:var(--muted); margin:0 0 18px; }
  .conn-row{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
  .conn-row:last-child{ margin-bottom:0; }
  .conn-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex-shrink:0; }
  .conn-icon.wa{ background:var(--wa); }
  .conn-icon.ig{ background:linear-gradient(135deg, var(--ig-1), var(--ig-2), var(--ig-3)); }
  .conn-status{ font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:5px; }
  
  /* OVERRIDES for Laravel forms inside our layout */
  .auto-layout form, .settings-layout form { margin:0; }
  .panel form { margin:0; }

  .icon-btn{
    width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); cursor:pointer; position:relative;
  }
  .icon-btn:hover{ background:var(--surface-2); }
  .icon-btn .ping{
    position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
    background:var(--ig-2); border:2px solid var(--surface);
  }