:root{
    --blue:#1e6fd9;
    --blue-dark:#1557ad;
    --green:#28a879;
    --purple:#7c5cd6;
    --orange:#f0932b;
    --red:#e04d4d;
    --ink:#1c2536;
    --muted:#6b7688;
    --line:#e7eaf0;
    --bg:#f3f5f9;
    --card:#ffffff;
    --sidebar-w:250px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none; color:inherit;}
  button{font-family:inherit; cursor:pointer; border:none;}
  input, textarea{font-family:inherit;}

  .app{ min-height:100vh; }

  /* ---------- Sidebar ---------- */
  .sidebar{
    background:#fff;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    z-index:40;
    transition:transform .25s ease;
  }
  .brand{ padding:22px 24px 16px; border-bottom:1px solid var(--line); }
  .brand-name{ font-size:22px; font-weight:800; letter-spacing:.5px; color:var(--blue); line-height:1.1; }
  .brand-sub{ font-size:10px; letter-spacing:1px; color:var(--muted); margin-top:4px; }
  .brand-tag{ font-size:11px; color:#9aa2b1; font-style:italic; margin-top:6px; }
  .nav{ flex:1; overflow-y:auto; padding:14px 12px; }
  .nav-item{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    padding:12px 14px; border-radius:10px; font-size:14.5px;
    color:#3c4557; margin-bottom:4px; transition:background .15s, color .15s;
  }
  .nav-item svg{width:19px; height:19px; flex-shrink:0;}
  .nav-item:hover{background:#f1f4f9;}
  .nav-item.active{ background:var(--blue); color:#fff; font-weight:600; }
  .sidebar-footer{ padding:14px 20px 20px; border-top:1px solid var(--line); }
  .logout{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:10px; border:1px solid var(--line);
    color:#3c4557; font-size:14px; background:#fafbfc; width:100%;
  }
  .logout:hover{background:#f1f4f9;}

  /* ---------- Main column ---------- */
  .main{
    margin-left:var(--sidebar-w);
    display:flex;
    flex-direction:column;
    min-height:100vh;
    width:calc(100% - var(--sidebar-w));
  }

  /* ---------- Top header ---------- */
  .topbar{
    background:#fff; border-bottom:1px solid var(--line);
    padding:16px 28px; display:flex; align-items:center;
    justify-content:flex-start; gap:16px;
    position:sticky; top:0; z-index:20;
  }
  .hamburger{ background:none; display:none; flex-direction:column; gap:4px; padding:6px; }
  .hamburger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .top-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
  .theme-switch{display:flex; align-items:center; justify-content:center;}
  .theme-btn,
  .bell-wrap{
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:#fff; color:#4a5568;
    transition:background .15s, border-color .15s, color .15s, transform .15s;
  }
  .theme-btn{padding:0; cursor:pointer;}
  .theme-btn:hover,
  .bell-wrap:hover{background:#f1f4f9; border-color:#d9dee8;}
  .theme-btn:active{transform:scale(.96);}
  .theme-btn svg{width:19px; height:19px;}
  .bell-wrap{position:relative;}
  .bell-wrap svg{width:20px; height:20px; color:inherit;}
  .badge{
    position:absolute; top:-6px; right:-7px; background:#e63946; color:#fff;
    font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .admin{ display:flex; align-items:center; gap:10px; }
  .avatar{
    width:36px; height:36px; border-radius:50%; background:#e7eaf0;
    display:flex; align-items:center; justify-content:center; color:#8b94a5;
  }
  .avatar svg{width:20px; height:20px;}
  .admin-name{font-size:14px; font-weight:700;}
  .admin-role{font-size:11.5px; color:var(--muted);}
  .chev{width:14px; height:14px; color:#9aa2b1;}

  /* ---------- Content shell ---------- */
  .content{ padding:26px 28px 40px; flex:1; }
  .page-section{ display:none; }
  .page-section.active{ display:block; }

  .page-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:20px; flex-wrap:wrap; margin-bottom:20px;
  }
  .page-title{ font-size:26px; font-weight:800; letter-spacing:.3px; }
  .page-sub{ color:var(--muted); font-size:14px; margin-top:6px; }

  .date-card{
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:12px 20px; display:flex; align-items:center; gap:12px; min-width:230px;
  }
  .date-icon{
    width:34px; height:34px; border-radius:9px; background:#eaf1fd;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .date-icon svg{width:18px; height:18px; color:var(--blue);}
  .date-line1{font-size:13.5px; font-weight:700;}
  .date-line2{font-size:12.5px; color:var(--muted); margin-top:2px;}

  /* ---------- Buttons (shared) ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px; border-radius:10px; font-size:14px; font-weight:700; letter-spacing:.2px;
  }
  .btn svg{width:16px; height:16px;}
  .btn-primary{ background:var(--blue); color:#fff; }
  .btn-primary:hover{ background:var(--blue-dark); }
  .btn-outline{ background:#fff; color:var(--ink); border:1px solid var(--line); }
  .btn-outline:hover{ background:#f5f7fa; }
  .btn-danger{ background:var(--red); color:#fff; }
  .btn-danger:hover{ filter:brightness(.94); }

  /* ---------- Stat cards (Dashboard) ---------- */
  .stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:26px; }
  .stat-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 22px 18px; position:relative; overflow:hidden; }
  .stat-icon{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:14px; }
  .stat-icon svg{width:26px; height:26px;}
  .stat-num{font-size:30px; font-weight:800; line-height:1;}
  .stat-label{font-size:12.5px; font-weight:700; letter-spacing:.4px; margin-top:6px;}
  .stat-desc{font-size:13px; color:var(--muted); margin-top:10px; line-height:1.4;}
  .stat-bar{ position:absolute; left:0; right:0; bottom:0; height:4px; }
  .c-blue .stat-icon{background:var(--blue);} .c-blue .stat-label{color:var(--blue);} .c-blue .stat-bar{background:var(--blue);}
  .c-green .stat-icon{background:var(--green);} .c-green .stat-label{color:var(--green);} .c-green .stat-bar{background:var(--green);}
  .c-purple .stat-icon{background:var(--purple);} .c-purple .stat-label{color:var(--purple);} .c-purple .stat-bar{background:var(--purple);}
  .c-orange .stat-icon{background:var(--orange);} .c-orange .stat-label{color:var(--orange);} .c-orange .stat-bar{background:var(--orange);}

  /* ---------- Panels ---------- */
  .panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:24px; overflow:hidden; }
  .panel-head{
    display:flex; align-items:center; gap:10px; padding:18px 22px;
    border-bottom:1px solid var(--line); font-weight:800; font-size:15px; color:var(--blue-dark);
  }
  .panel-head svg{width:17px; height:17px;}

  .table-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left; font-size:12px; letter-spacing:.4px; color:#4a5568;
    background:#f7f9fc; padding:14px 22px; font-weight:700; white-space:nowrap;
  }
  tbody td{ padding:15px 22px; font-size:13.5px; border-top:1px solid var(--line); color:#3c4557; vertical-align:top; }
  .detail-cell{display:flex; align-items:center; gap:10px; font-weight:600;}
  .detail-cell svg{width:16px; height:16px; color:var(--blue);}
  .dash{color:#c3c9d4;}

  #dashboard table{ min-width:640px; }
  #associates table{ min-width:920px; }
  #associates tbody tr:hover{ background:#fafbfd; }
  #clients table, #employees table{ min-width:860px; }
  #clients tbody tr:hover, #employees tbody tr:hover{ background:#fafbfd; }

  /* quick actions (Dashboard) */
  .actions{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; padding:20px 22px 24px; }
  .action-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 10px; border-radius:10px; font-size:13.5px; font-weight:700; letter-spacing:.3px; color:#fff;
  }
  .action-btn svg{width:16px; height:16px;}
  .a-blue{background:var(--blue);} .a-green{background:var(--green);}
  .a-purple{background:var(--purple);} .a-orange{background:var(--orange);}
  .a-outline{background:#fff; color:var(--ink); border:1px solid var(--line);}
  .action-btn:hover{filter:brightness(0.94);}

  footer{ text-align:center; font-size:12.5px; color:var(--muted); padding:18px 20px 26px; }
  footer a{ color:var(--blue); font-weight:600; }

  /* ---------- Associates page ---------- */
  .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
  .search-box{
    display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
    border-radius:10px; padding:9px 14px; min-width:240px; flex:1; max-width:340px;
  }
  .search-box svg{width:16px; height:16px; color:#9aa2b1; flex-shrink:0;}
  .search-box input{ border:none; outline:none; font-size:13.5px; width:100%; }

  .id-chip{
    display:inline-block; background:#eaf1fd; color:var(--blue-dark);
    font-weight:700; font-size:12px; padding:4px 10px; border-radius:20px;
  }
  .cell-name{font-weight:700;}
  .cell-sub{color:var(--muted); font-size:12px; margin-top:2px;}
  .referral-chip{
    display:inline-block; background:#eefaf3; color:var(--green);
    font-weight:700; font-size:12px; padding:4px 10px; border-radius:20px;
  }
  .row-actions{ display:flex; gap:8px; white-space:nowrap; }
  .icon-btn{
    width:32px; height:32px; border-radius:8px; display:flex;
    align-items:center; justify-content:center; border:1px solid var(--line); background:#fff;
  }
  .icon-btn svg{width:15px; height:15px;}
  .icon-edit{ color:var(--blue); }
  .icon-edit:hover{ background:#eaf1fd; border-color:#c9dcf7; }
  .icon-delete{ color:var(--red); }
  .icon-delete:hover{ background:#fdeaea; border-color:#f6c9c9; }

  .empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
  .empty-state svg{ width:44px; height:44px; color:#c3c9d4; margin-bottom:12px; }
  .empty-state p{ font-size:14px; margin-bottom:16px; }

  /* ---------- Leads page (New Lead Entry) ---------- */
  .lead-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:18px; padding:20px;
  }
  .lead-field{ display:flex; flex-direction:column; gap:7px; }
  .lead-field.full{ grid-column:1 / -1; }
  .lead-field label{ font-size:12.5px; font-weight:700; color:#3c4557; }
  .lead-field input, .lead-field select, .lead-field textarea{
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
    outline:none; font-size:13.5px; color:var(--ink); background:#fbfcfd;
  }
  .lead-field select,
  .field select{
    min-height:42px;
    padding:10px 38px 10px 12px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
    background-color:#fbfcfd;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:15px 15px;
    transition:border-color .15s, box-shadow .15s, background-color .15s;
  }
  .lead-field select:hover,
  .field select:hover{border-color:#c6ccd6; background-color:#fff;}
  .lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus,
  .field select:focus{
    border-color:var(--blue); background:#fff;
    box-shadow:0 0 0 3px rgba(30,111,217,.08);
  }
  .lead-field select option,
  .field select option{
    padding:10px;
    color:var(--ink);
    background:#fff;
  }
  .lead-field textarea{ min-height:80px; resize:vertical; }

  .amount-box{
    background:#fff7e6; border:1px solid #f0c36d; padding:16px 20px;
    margin:0 20px 20px; border-radius:8px; font-size:14px;
  }
  .amount-box strong{ color:#b36b00; }

  .form-buttons{ display:flex; justify-content:flex-end; gap:10px; padding:20px; }
  .btn-success{ background:var(--green); color:#fff; }
  .btn-success:hover{ filter:brightness(.94); }

  /* ---------- Client Details form ---------- */
  .entity-form{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:24px;
  }
  .entity-form-head{
    background:#edf6fd;
    border-bottom:1px solid var(--line);
    padding:22px 26px;
  }
  .entity-form-head h2{
    color:#245276;
    font-size:22px;
    font-weight:800;
    margin:0;
  }
  .entity-form-body{
    padding:28px;
  }
  .client-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }
  .client-field{
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .client-field label{
    font-size:15px;
    font-weight:700;
    color:#30343b;
  }
  .client-field input,
  .client-field textarea{
    width:100%;
    border:1px solid #cfd2d6;
    border-radius:10px;
    padding:15px 18px;
    font-size:16px;
    color:var(--ink);
    background:#fff;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  .client-field input{
    min-height:58px;
  }
  .client-field textarea{
    min-height:120px;
    resize:vertical;
  }
  .client-field input::placeholder,
  .client-field textarea::placeholder{
    color:#7c7f84;
  }
  .client-field input:focus,
  .client-field textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(30,111,217,.08);
  }
  .client-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:20px 28px;
    border-top:1px solid var(--line);
    background:#fbfcfd;
  }
  @media (max-width:620px){
    .entity-form-head{padding:18px 20px;}
    .entity-form-body{padding:20px;}
    .client-form-actions{padding:16px 20px; flex-direction:column-reverse;}
    .client-form-actions .btn{justify-content:center;}
  }

  /* placeholder page (unbuilt sections) */
  .placeholder{ text-align:center; padding:80px 20px; color:var(--muted); }
  .placeholder svg{ width:48px; height:48px; color:#c3c9d4; margin-bottom:14px; }
  .placeholder h3{ font-size:17px; color:var(--ink); margin-bottom:6px; }

  /* ---------- Modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(15,20,30,.45);
    display:none; align-items:center; justify-content:center; padding:20px; z-index:100;
  }
  .modal-overlay.show{ display:flex; }
  .modal{
    background:#fff; border-radius:16px; width:100%; max-width:640px;
    max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(20,30,50,.25);
  }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); }
  .modal-title{ font-size:17px; font-weight:800; }
  .modal-close{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f1f4f9; color:#4a5568; }
  .modal-close:hover{ background:#e7eaf0; }
  .modal-close svg{ width:16px; height:16px; }
  .modal-body{ padding:22px 24px; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-size:12.5px; font-weight:700; color:#3c4557; }
  .field .required{ color:var(--red); }
  .field input, .field textarea{
    border:1px solid var(--line); border-radius:9px; padding:10px 12px;
    font-size:13.5px; outline:none; color:var(--ink); background:#fbfcfd;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--blue); background:#fff; }
  .field textarea{ resize:vertical; min-height:64px; }
  .pw-wrap{ position:relative; }
  .pw-wrap input{ width:100%; padding-right:38px; }
  .pw-toggle{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; color:#9aa2b1; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
  }
  .pw-toggle svg{ width:16px; height:16px; }
  .field-hint{ font-size:11.5px; color:var(--muted); }
  .field-error{ font-size:11.5px; color:var(--red); display:none; }
  .field.has-error input, .field.has-error textarea{ border-color:var(--red); background:#fef6f6; }
  .field.has-error .field-error{ display:block; }
  .modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--line); }
  .entity-modal .modal{max-width:720px;}
  .entity-modal .modal-body{padding:22px 24px;}
  .entity-modal .form-grid{gap:16px 18px;}
  .entity-modal .field textarea{min-height:88px;}

  .toast{
    position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff;
    padding:13px 18px; border-radius:10px; font-size:13.5px; font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.2); display:flex; align-items:center; gap:10px;
    transform:translateY(20px); opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
  }
  .toast.show{ transform:translateY(0); opacity:1; }
  .toast svg{ width:16px; height:16px; color:#7ee0a8; flex-shrink:0; }

  .overlay{ position:fixed; inset:0; background:rgba(15,20,30,.4); z-index:30; display:none; }
  .overlay.show{ display:block; }

  /* ---------- Dark theme ---------- */
  body.dark-theme{
    --ink:#e8edf5; --muted:#a9b3c4; --line:#303a4a; --bg:#111722; --card:#18202d;
    color:var(--ink); background:var(--bg);
  }
  body.dark-theme .sidebar,
  body.dark-theme .topbar,
  body.dark-theme .panel,
  body.dark-theme .stat-card,
  body.dark-theme .date-card,
  body.dark-theme .search-box,
  body.dark-theme .icon-btn,
  body.dark-theme .calendar-shell,
  body.dark-theme .calendar-day,
  body.dark-theme .modal,
  body.dark-theme .entity-form,
  body.dark-theme .theme-btn,
  body.dark-theme .bell-wrap{
    background:#18202d; border-color:#303a4a; color:var(--ink);
  }
  body.dark-theme .brand,
  body.dark-theme .sidebar-footer,
  body.dark-theme .topbar,
  body.dark-theme .panel-head,
  body.dark-theme .modal-head,
  body.dark-theme .modal-footer,
  body.dark-theme .entity-form-head,
  body.dark-theme .client-form-actions{border-color:#303a4a;}
  body.dark-theme .brand-sub,
  body.dark-theme .brand-tag,
  body.dark-theme .page-sub,
  body.dark-theme .cell-sub,
  body.dark-theme .stat-desc,
  body.dark-theme footer,
  body.dark-theme .field-hint{color:#a9b3c4;}
  body.dark-theme .nav-item{color:#cbd3df;}
  body.dark-theme .nav-item:hover,
  body.dark-theme .logout:hover,
  body.dark-theme .theme-btn:hover,
  body.dark-theme .bell-wrap:hover{background:#222c3b;}
  body.dark-theme .logout{background:#18202d;color:var(--ink);border-color:#303a4a;}
  body.dark-theme thead th{background:#202a39;color:#b9c3d2;}
  body.dark-theme tbody td{border-color:#303a4a;color:#cbd3df;}
  body.dark-theme .modal-close{background:#222c3b;color:#cbd3df;}
  body.dark-theme .modal-close:hover{background:#2b3749;}
  body.dark-theme .field label,
  body.dark-theme .lead-field label,
  body.dark-theme .client-field label{color:#d7deea;}
  body.dark-theme .field input,
  body.dark-theme .field textarea,
  body.dark-theme .field select,
  body.dark-theme .lead-field input,
  body.dark-theme .lead-field select,
  body.dark-theme .lead-field textarea,
  body.dark-theme .client-field input,
  body.dark-theme .client-field textarea{
    background:#121a26; color:#e8edf5; border-color:#3a4658;
  }
  body.dark-theme .field input::placeholder,
  body.dark-theme .field textarea::placeholder,
  body.dark-theme .lead-field input::placeholder,
  body.dark-theme .lead-field textarea::placeholder,
  body.dark-theme .client-field input::placeholder,
  body.dark-theme .client-field textarea::placeholder{color:#7f8ba0;}
  body.dark-theme .field select:hover,
  body.dark-theme .lead-field select:hover,
  body.dark-theme .field select:focus,
  body.dark-theme .lead-field select:focus{background-color:#182230;}
  body.dark-theme .field select option,
  body.dark-theme .lead-field select option{background:#18202d;color:#e8edf5;}
  body.dark-theme .calendar-week>div{background:#202a39;color:#a9b3c4;}
  body.dark-theme .calendar-day.muted{background:#151d29;color:#596579;}
  body.dark-theme .calendar-day.today{background:#172942;}
  body.dark-theme .empty-state,
  body.dark-theme .placeholder{color:#a9b3c4;}
  body.dark-theme .amount-box{background:#2a2518;border-color:#69552b;}
  body.dark-theme .amount-box strong{color:#e3b85c;}
  body.dark-theme .theme-btn,
  body.dark-theme .bell-wrap{color:#dbe4f0;}
  /* ---------- Responsive ---------- */
  @media (max-width: 1080px){
    .stats{grid-template-columns:repeat(2, 1fr);}
    .actions{grid-template-columns:repeat(3, 1fr);}
    .lead-grid{grid-template-columns:repeat(2, 1fr);}
    .lead-field.full{grid-column:span 2;}
  }
  @media (max-width: 900px){
    :root{--sidebar-w:230px;}
    .sidebar{ transform:translateX(-100%); }
    .sidebar.open{ transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,.12); }
    .main{ margin-left:0; width:100%; }
    .hamburger{ display:flex; }
  }
  @media (max-width: 620px){
    .topbar{ padding:14px 16px; }
    .content{ padding:18px 16px 30px; }
    .stats{ grid-template-columns:1fr 1fr; }
    .actions{ grid-template-columns:1fr 1fr; }
    .page-title{ font-size:21px; }
    .admin-name, .admin-role{ display:none; }
    .chev{ display:none; }
    .date-card{ min-width:0; width:100%; }
    .page-head{ flex-direction:column; }
    .toolbar{ flex-direction:column; align-items:stretch; }
    .search-box{ max-width:none; }
    .form-grid{ grid-template-columns:1fr; }
    .lead-grid{ grid-template-columns:1fr; }
    .lead-field.full{ grid-column:span 1; }
    .form-buttons{ flex-direction:column-reverse; }
    .form-buttons .btn{ justify-content:center; }
  }
  @media (max-width: 420px){
    .stats{grid-template-columns:1fr;}
    .actions{grid-template-columns:1fr;}
  }

  /* ---------- Enquiries / Tasks / Reports / Calendar / Settings ---------- */
  .status-chip{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;background:#eef2f7;color:#4a5568;white-space:nowrap}.status-chip.open{background:#eaf1fd;color:var(--blue-dark)}.status-chip.progress{background:#fff5e6;color:#b36b00}.status-chip.completed{background:#eefaf3;color:var(--green)}.status-chip.cancelled{background:#fdeaea;color:var(--red)}
  .priority-high{color:var(--red);font-weight:700}.priority-medium{color:var(--orange);font-weight:700}.priority-low{color:var(--green);font-weight:700}
  .report-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px}.report-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}.report-card span{display:block;color:var(--muted);font-size:12px;font-weight:700}.report-card strong{display:block;font-size:27px;margin-top:8px}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .calendar-shell{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.calendar-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}.calendar-head>div{flex:1}.calendar-head .btn{margin-left:auto}.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-week>div{padding:12px;text-align:center;font-size:12px;font-weight:700;color:var(--muted);background:#f7f9fc;border-right:1px solid var(--line)}.calendar-grid{border-left:1px solid var(--line)}.calendar-day{min-height:110px;padding:8px;border-right:1px solid var(--line);border-top:1px solid var(--line);background:#fff}.calendar-day.muted{background:#fafbfc;color:#c3c9d4}.calendar-day.today{background:#f3f8ff}.calendar-number{font-size:12px;font-weight:800}.calendar-day.today .calendar-number{display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff}.calendar-event{display:block;margin-top:6px;padding:4px 6px;border-radius:5px;background:#eaf1fd;color:var(--blue-dark);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px}.settings-grid .field.full{grid-column:1/-1}.settings-grid textarea{min-height:100px}.theme-switch{display:flex;align-items:center;gap:10px;margin-left:8px}.theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center}.theme-btn:hover{background:#f1f4f9}.dark-theme{--bg:#111827;--card:#182131;--ink:#edf2f7;--muted:#a8b1c2;--line:#2c3749}.dark-theme .sidebar,.dark-theme .topbar,.dark-theme .modal,.dark-theme .panel,.dark-theme .stat-card,.dark-theme .date-card,.dark-theme .search-box,.dark-theme .calendar-shell,.dark-theme .calendar-day,.dark-theme .report-card,.dark-theme .field input,.dark-theme .field textarea,.dark-theme .client-field input,.dark-theme .client-field textarea,.dark-theme .settings-grid input,.dark-theme .settings-grid textarea{background:#182131;color:var(--ink);border-color:var(--line)}.dark-theme .nav-item{color:#cbd5e1}.dark-theme .nav-item:hover{background:#202b3d}.dark-theme .nav-item.active{color:#fff}.dark-theme thead th,.dark-theme .calendar-week>div{background:#202b3d;color:#cbd5e1}.dark-theme tbody td{color:#cbd5e1}.dark-theme .action-btn.a-outline,.dark-theme .btn-outline,.dark-theme .theme-btn{background:#182131;color:var(--ink);border-color:var(--line)}.dark-theme .entity-form-head{background:#1d3147}.dark-theme .entity-form-head h2{color:#b8d9f7}
  @media(max-width:1080px){.report-cards{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){.report-grid,.settings-grid{grid-template-columns:1fr}.settings-grid .field.full{grid-column:span 1}.report-cards{grid-template-columns:1fr 1fr}.calendar-day{min-height:80px}.calendar-event{font-size:9px}.calendar-head{flex-wrap:wrap}.calendar-head .btn{margin-left:0}}
  @media(max-width:420px){.report-cards{grid-template-columns:1fr}.calendar-day{min-height:65px;padding:5px}}
</style>

<style id="dropdown-rounded-fix">
/* Dropdowns: make them visually match the rounded text inputs */
.field select,
.lead-field select,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 10px 42px 10px 12px !important;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink);
  background-color: #fbfcfd !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #7b8798 50%),
    linear-gradient(135deg, #7b8798 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 21px,
    calc(100% - 12px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.field select:hover,
.lead-field select:hover,
select:hover {
  border-color: #cbd3df !important;
  background-color: #fff !important;
}

.field select:focus,
.lead-field select:focus,
select:focus {
  border-color: var(--blue) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(30,111,217,.10);
}

/* Keep native option list readable; the closed control is fully custom styled above. */
select option {
  color: #1c2536;
  background: #fff;
  padding: 8px;
}

/* Dark theme */
body.dark-theme .field select,
body.dark-theme .lead-field select,
body.dark-theme select {
  color: #e8edf5;
  background-color: #202938 !important;
  border-color: #3a4658 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #aeb8c8 50%),
    linear-gradient(135deg, #aeb8c8 50%, transparent 50%);
}

body.dark-theme .field select:hover,
body.dark-theme .lead-field select:hover,
body.dark-theme select:hover,
body.dark-theme .field select:focus,
body.dark-theme .lead-field select:focus,
body.dark-theme select:focus {
  background-color: #263244 !important;
  border-color: var(--blue) !important;
}

body.dark-theme select option {
  color: #e8edf5;
  background: #202938;
}

/* ---------- Error toast ---------- */
.toast.error{ background:var(--red); }
.toast.error svg{ color:#fff; }

/* ---------- Logout (form wrapper) ---------- */
.logout-form{ margin:0; }

/* ---------- Busy buttons ---------- */
.btn:disabled{ opacity:.6; cursor:progress; }

/* ---------- Calendar event delete ---------- */
.calendar-event{ cursor:pointer; }

/* ---------- Login / setup pages ---------- */
.auth-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.auth-card{
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:28px 28px 30px; box-shadow:0 10px 30px rgba(28,37,54,.06);
}
.auth-brand{ padding:0 0 18px; margin-bottom:18px; }
.auth-title{ font-size:20px; font-weight:800; }
.auth-sub{ color:var(--muted); font-size:14px; margin-top:6px; line-height:1.5; }
.auth-form{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.auth-submit{ justify-content:center; width:100%; margin-top:4px; }
.auth-error, .auth-note{
  margin-top:16px; padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.5;
}
.auth-error{ background:#fdecec; color:#a92d2d; border:1px solid #f5c9c9; }
.auth-note{ background:#eaf1fd; color:#1f4f99; border:1px solid #cfe0fb; }
.auth-link{ color:var(--blue); font-weight:700; }
body.dark-theme .auth-card{ background:var(--card); border-color:var(--line); }
body.dark-theme .auth-error{ background:#3a1f22; color:#f5b5b5; border-color:#5a2c30; }
body.dark-theme .auth-note{ background:#1b2a42; color:#b9d2f7; border-color:#2a3f60; }

/* ---------- Lead form field errors ---------- */
.lead-field.has-error input, .lead-field.has-error textarea{ border-color:var(--red); }
.lead-field.has-error .field-error{ display:block; margin-top:4px; }