:root{
  --navy:#174d77;
  --navy-deep:#0f3b60;
  --navy-soft:#24648f;
  --blue:#2587cf;
  --blue-deep:#176ba9;
  --blue-soft:#eaf4fc;
  --bg:#eef3f8;
  --panel:#ffffff;
  --panel-soft:#f7faff;
  --text:#17263a;
  --muted:#64748b;
  --border:#d4e0ec;
  --border-strong:#b9ccde;
  --danger:#b91c1c;
  --success:#16794a;
  --shadow:0 10px 28px rgba(18,56,91,.09);
  --shadow-soft:0 4px 14px rgba(18,56,91,.06);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
a{color:var(--blue-deep);text-decoration:none}
button,input,select,textarea{font:inherit}
button,.btn{transition:.18s ease}

/* Application shell */
.app-body{min-height:100vh;background:var(--bg)}
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:26px 14px 18px;display:flex;flex-direction:column;min-height:100vh;box-shadow:6px 0 20px rgba(11,40,66,.09)}
.sidebar-brand{padding:4px 10px 26px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:18px}
.sidebar-brand-title{font-size:25px;line-height:1.18;letter-spacing:.4px;font-weight:700;color:#fff}
.sidebar-version{font-size:12px;color:#9fd0f4;margin-top:10px}
.sidebar-nav{display:flex;flex-direction:column;gap:5px}
.sidebar a{display:block;padding:11px 13px;border-radius:8px;color:#eef7ff;font-weight:500;border-left:3px solid transparent}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar a.active{background:linear-gradient(90deg,rgba(47,143,216,.34),rgba(47,143,216,.16));color:#fff;font-weight:700;border-left-color:#62b8f3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sidebar-company{margin-top:auto;padding:18px 10px 2px;color:#9ec2df;font-size:11px;line-height:1.45}
.content-shell{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{min-height:68px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:11px 26px;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(18,56,91,.035)}
.topbar-title{display:flex;flex-direction:column;gap:2px;color:var(--navy)}
.topbar-title strong{font-size:17px}
.topbar-title span{font-size:11px;color:var(--muted)}
.userbox{display:flex;gap:12px;align-items:center}
.userbox .name{display:flex;align-items:center;gap:9px}
.role-chip{display:inline-block;font-size:11px;font-weight:700;color:var(--navy);background:#eaf2f8;border:1px solid #d6e4ef;border-radius:999px;padding:4px 8px}
.topbar-logout{background:#eef2f6!important;color:#334155!important;border:1px solid #d9e2ea!important}
.main{padding:26px;min-width:0;max-width:1800px;width:100%;margin:0 auto}
.page-title{font-size:28px;line-height:1.2;margin:0 0 5px;color:#102f4d;letter-spacing:-.25px}
.page-sub{color:var(--muted);margin:0 0 20px;font-size:14px}

/* Panels and stats */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--shadow-soft);margin-bottom:18px}
.card h2{margin-top:0;color:#132f4a;font-size:21px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:20px;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbfe);border:1px solid var(--border);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue)}
.stat .n{font-size:30px;font-weight:800;color:#153a5e}
.stat .label{color:var(--muted);font-size:13px;margin-top:2px}

/* Queue */
.queue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.queue-btn{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:10px 16px;min-height:52px;border-radius:10px;font-size:15px;font-weight:800;letter-spacing:.05px;box-shadow:0 4px 12px rgba(15,23,42,.10);border:1px solid rgba(255,255,255,.08)}
.queue-btn:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.03)}
.queue-btn.active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.62),0 5px 14px rgba(15,23,42,.14);filter:saturate(1.06)}
.queue-count{min-width:29px;height:29px;line-height:29px;text-align:center;background:rgba(255,255,255,.22);padding:0 8px;border-radius:999px;font-size:14px;font-weight:800}

/* Buttons */
.btn{border:1px solid transparent;border-radius:8px;padding:10px 15px;cursor:pointer;display:inline-block;font-weight:700;letter-spacing:.05px}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 4px 10px rgba(47,143,216,.19)}
.btn.secondary{background:#eef2f6;color:#1f2937;border-color:#d9e2ea}
.btn.danger{background:#b91c1c;color:#fff}
.btn.success{background:#16814f;color:#fff}
.btn.small{padding:7px 10px;font-size:12px}
.btn.wide{width:100%;text-align:center}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:700;color:#24384d}
input,select,textarea{width:100%;margin-top:6px;border:1px solid #c4d2df;border-radius:8px;padding:10px 11px;background:#fff;color:#17263a;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
input:focus,select:focus,textarea:focus{border-color:#5fa8de;box-shadow:0 0 0 3px rgba(47,143,216,.12)}
input[readonly],select:disabled,textarea:disabled{background:#f2f5f8;color:#607080}
textarea{min-height:105px;resize:vertical}
small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.field-label{font-weight:700;color:#24384d}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:11px;background:#fff}
.table{width:100%;border-collapse:collapse;min-width:800px}
.table th,.table td{padding:11px 12px;border-bottom:1px solid #e7edf3;text-align:left;vertical-align:top}
.table th{background:linear-gradient(180deg,#edf5fb,#e7f0f8);white-space:nowrap;color:#173a59;font-size:13px}
.table tr:hover td{background:#f9fcff}

/* Alerts */
.alert{padding:13px 15px;border-radius:9px;margin-bottom:15px;font-weight:600}
.alert.success{background:#e9f8f0;color:#11613b;border:1px solid #b8e6cc}
.alert.error{background:#fdebeb;color:#8f1b1b;border:1px solid #f3c0c0}
.alert.warning{background:#fff7dd;color:#805f00;border:1px solid #f1dfa0}
.notice{padding:12px 14px;background:#edf5fb;border:1px solid #dbe9f4;border-radius:8px;margin-bottom:14px;color:#28597d}

/* Login */
.login-body{min-height:100vh;background:#eef3f8}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,52%) minmax(420px,48%)}
.login-brand-panel{background:linear-gradient(145deg,#1b527c 0%,#123f66 72%,#174b73 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:9vh 5vw 5vh;position:relative;overflow:hidden}
.login-brand-panel:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-180px;top:-130px;box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012)}
.login-brand-title{font-size:40px;line-height:1.12;letter-spacing:.8px;font-weight:700;position:relative;z-index:1}
.login-brand-panel p{font-size:16px;color:#d8eafa;margin-top:24px;position:relative;z-index:1}
.login-brand-footer{font-size:12px;color:#9fc4e1;position:relative;z-index:1}
.login-form-panel{display:grid;place-items:center;background:linear-gradient(180deg,#ffffff,#f7fafe);padding:30px}
.login-card{width:min(500px,92vw);background:#fff;padding:36px 38px;border-radius:18px;border:1px solid var(--border);box-shadow:0 18px 48px rgba(18,56,91,.12)}
.login-kicker{font-size:11px;letter-spacing:1.5px;color:#2e79b3;font-weight:800;margin-bottom:10px}
.login-card h1{margin:0;color:#102f4d;font-size:31px;text-align:left}
.login-card .subtitle{text-align:left;margin:6px 0 24px;color:var(--muted)}
.login-card form{display:grid;gap:16px}
.login-submit{margin-top:4px;padding:12px}
.login-security{margin-top:18px;text-align:center;color:#7890a5;font-size:11px}
.setup-card{width:min(760px,94vw);background:#fff;padding:30px;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.setup-card h1{margin:0;text-align:center;color:#12385b}
.subtitle{text-align:center;color:var(--muted);margin-top:6px}

/* Tabs / pills / toolbar */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.tab{padding:9px 12px;background:#e9eff5;border:1px solid #dde6ee;border-radius:8px;color:#28506f;font-weight:600}
.tab.active{background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#fff;border-color:transparent}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#e9eff5;color:#29445c;font-size:12px;font-weight:700}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.master-actions{align-items:center;flex-wrap:nowrap;white-space:nowrap;min-width:340px}
.master-actions form{margin:0;display:inline-flex;align-items:center}
.master-actions details{margin:0;flex:0 0 auto}
.master-actions details>summary{height:34px;display:inline-flex;align-items:center;cursor:pointer;padding:0 4px;color:#183a59}
.master-actions .btn.small{height:34px;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.master-status-btn{min-width:98px}
.master-delete-btn{min-width:72px}
.move-order-btn{width:38px;min-width:38px;padding-left:0!important;padding-right:0!important;font-size:15px;line-height:1}
.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:15px}
.toolbar label{min-width:180px}
.nowrap{white-space:nowrap}
.modal-lite{background:#f8fbfe;border:1px solid var(--border);padding:13px;border-radius:9px}
.hr{height:1px;background:var(--border);margin:16px 0}

/* Lead cards: balanced 2 rows x 3 columns */
.lead-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.lead-card.lead-card-detailed{display:block;border-color:#bdd2e4;box-shadow:0 4px 14px rgba(18,56,91,.065);position:relative}
.lead-card-title{font-size:15px;margin-bottom:10px;padding:0 96px 8px 0;border-bottom:1px solid #e8eef4;overflow-wrap:anywhere;word-break:break-word;color:#102f4d;letter-spacing:.02px}
.lead-card-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:28px;row-gap:10px;font-size:13.5px;line-height:1.45}
.lead-card-detail-grid>div{min-width:0;overflow-wrap:anywhere;word-break:break-word;padding-right:6px}
.lead-label{font-weight:800;color:#173a59}
.lead-card-footer{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:8px;padding-top:0;border-top:0}
.lead-card-assign{min-width:0;flex:1}
.lead-card-assign form{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lead-card-assign select{margin-top:0}
.lead-open-btn{position:absolute;top:14px;right:16px;z-index:2;box-shadow:0 3px 9px rgba(23,107,169,.16)}
.lead-open-btn{margin-left:auto;min-width:72px;text-align:center;box-shadow:0 3px 8px rgba(31,111,174,.18)}
/* Notes / timeline */
.timeline-item,.note-item{border-left:3px solid #72aeda;padding:10px 13px;margin:10px 0;background:#f7fafe;border-radius:0 8px 8px 0;min-width:0;overflow:hidden}
.timeline-item strong,.note-item strong{color:#173a59}
.meta{font-size:12px;color:var(--muted)}
.note-item .note-text,.note-item .note-workflow{font-size:14px;line-height:1.5;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.note-item .note-text{margin:8px 0}
.note-item .note-workflow{color:#4b6074;margin-top:4px}

/* Time selectors */
.followup-time-group{display:flex;flex-direction:column;gap:6px}
.time-select-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.time-select-row select{width:100%}

/* Responsive */
@media(max-width:1100px){
  .shell{grid-template-columns:215px minmax(0,1fr)}
  .main{padding:20px}
  .lead-card-detail-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{min-height:auto;padding:12px;display:block}
  .sidebar-brand{padding:6px 10px 12px;margin-bottom:8px}
  .sidebar-brand-title{font-size:20px;line-height:1.08}
  .sidebar-version,.sidebar-company{display:none}
  .sidebar-nav{display:flex;flex-direction:row;overflow:auto;gap:5px}
  .sidebar a{white-space:nowrap}
  .topbar{position:static}
  .queue-grid,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}
}

@media(max-width:720px){
  .login-shell{grid-template-columns:1fr}
  .login-brand-panel{display:none}
  .login-form-panel{min-height:100vh}
}
@media(max-width:650px){
  .main{padding:13px}.topbar{padding:10px 13px}.topbar-title span{display:none}.userbox .name strong{display:none}.role-chip{display:none}
  .queue-grid,.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .lead-card-detail-grid{grid-template-columns:1fr}
  .lead-card-footer{align-items:flex-start;flex-direction:column}.lead-open-btn{position:static;margin-left:0;align-self:flex-end}.lead-card-title{padding-right:0}
  .time-select-row{grid-template-columns:1fr 1fr 1fr}
  .login-card{padding:28px 22px}.login-card h1{font-size:27px}
}

/* Import completion modal */
.import-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);display:grid;place-items:center;z-index:1000;padding:20px}
.import-modal{width:min(520px,94vw);background:#fff;border:1px solid #d7e1ea;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28);padding:30px 34px;text-align:center}
.import-modal h2{font-size:27px;margin:0 0 22px;color:#102f4d;letter-spacing:.2px}
.import-summary-lines{display:inline-block;text-align:left;font-size:16px;line-height:1.45;margin:0 auto 18px;color:#21384d}
.import-warning{color:#d17a00;margin:6px 0 18px}
.import-success{color:#16814f;margin:6px 0 18px}
.import-modal .btn{margin-top:10px}

/* Test 5: compact permission checkbox in User Management */
.checkbox-row{display:flex!important;align-items:flex-start;gap:10px;padding-top:25px}
.checkbox-row input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto}
.checkbox-row span{display:flex;flex-direction:column;gap:3px}
.checkbox-row small{color:var(--muted);font-weight:400;line-height:1.35}