:root{
  --bg: #0b0d12;
  --panel: rgba(255,255,255,0.04);
  --panel-border: rgba(255,255,255,0.08);
  --accent: #d4af37;
  --accent-2: #8fb8ff;
  --text: #e9ecf1;
  --muted: #9aa3b2;
  --danger: #e5555a;
  --success: #4cc38a;
  --radius: 14px;
}
select option{
  background: #12141a;
  color: #e9ecf1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 800px at 10% -10%, #16192280, transparent),
              radial-gradient(1000px 700px at 100% 0%, #101720cc, transparent),
              var(--bg);
  color:var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height:100vh;
}

/* ---------- LOGIN ---------- */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{
  width:360px; padding:36px 32px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--panel-border);
  backdrop-filter: blur(16px); text-align:center;
}
.login-logo{font-weight:700; letter-spacing:2px; font-size:20px}
.login-logo span{color:var(--accent); display:block; font-size:12px; letter-spacing:4px; margin-top:2px}
.login-sub{color:var(--muted); font-size:13px; margin:6px 0 24px}
.login-error{background:rgba(229,85,90,.15); border:1px solid var(--danger); color:#ffb3b5; padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:16px}
.login-form{display:flex; flex-direction:column; gap:10px; text-align:left}
.login-form label{font-size:12px; color:var(--muted); margin-top:6px}
.login-form input{
  background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:14px;
}
.login-form button{
  margin-top:16px; padding:11px; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#b8912c); color:#1a1a1a; font-weight:600;
}

/* ---------- LAYOUT ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; border-bottom:1px solid var(--panel-border);
  background:rgba(10,12,16,.7); backdrop-filter: blur(12px);
  position:sticky; top:0; z-index:20; flex-wrap:wrap; gap:10px;
}
.brand{font-weight:700; letter-spacing:1px}
.brand span{color:var(--accent)}
.brand small{color:var(--muted); font-weight:400; margin-left:8px}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab-btn{
  background:transparent; border:1px solid transparent; color:var(--muted);
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{background:var(--panel); border-color:var(--panel-border); color:var(--accent)}
.userbox{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.logout-link{color:var(--accent-2); text-decoration:none}

main{padding:24px; max-width:1400px; margin:0 auto}
h1{font-size:20px; margin:0 0 16px}
h3{margin:0 0 8px}
.muted{color:var(--muted); font-size:13px}

.tab-panel{display:none}
.tab-panel.active{display:block}

.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}

/* ---------- STAT GRID ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.stat-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:18px; text-align:center;
}
.stat-card .num{font-size:28px; font-weight:700; color:var(--accent)}
.stat-card .lbl{font-size:12px; color:var(--muted); margin-top:4px}

/* ---------- BUTTONS ---------- */
.btn{
  background:rgba(255,255,255,.06); border:1px solid var(--panel-border); color:var(--text);
  padding:9px 16px; border-radius:8px; cursor:pointer; font-size:13px;
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#b8912c); color:#1a1a1a; border:none; font-weight:600}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px; font-size:12px}
.btn.danger{border-color:var(--danger); color:#ffb3b5}

/* ---------- FILTER BAR ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.filter-bar input, .filter-bar select{
  background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text);
  padding:8px 10px; border-radius:8px; font-size:13px;
}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--panel-border); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--panel-border); white-space:nowrap}
thead th{background:rgba(255,255,255,.04); color:var(--muted); font-weight:600}
thead{display:table-header-group}
tbody{display:table-row-group}
tbody tr:hover{background:rgba(255,255,255,.03)}
.badge{padding:3px 9px; border-radius:20px; font-size:11px; display:inline-block}
.badge.new{background:rgba(154,163,178,.2); color:#c3c9d3}
.badge.cold_sent{background:rgba(143,184,255,.18); color:var(--accent-2)}
.badge.followup{background:rgba(212,175,55,.18); color:var(--accent)}
.badge.responded{background:rgba(76,195,138,.18); color:var(--success)}
.badge.handed{background:rgba(76,195,138,.3); color:var(--success)}
.badge.completed{background:rgba(76,195,138,.3); color:var(--success)}
.badge.pending{background:rgba(154,163,178,.2); color:#c3c9d3}
.badge.in_progress{background:rgba(143,184,255,.18); color:var(--accent-2)}
.badge.not_completed{background:rgba(229,85,90,.18); color:#ffb3b5}
.link-btn{background:none; border:none; color:var(--accent-2); cursor:pointer; font-size:12px; padding:2px 6px}

/* ---------- SEND EMAIL ---------- */
.send-grid{display:grid; grid-template-columns:340px 1fr; gap:20px}
.send-left input{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:8px;
}
.send-results{max-height:220px; overflow-y:auto; border:1px solid var(--panel-border); border-radius:10px}
.send-result-item{padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--panel-border); font-size:13px}
.send-result-item:hover{background:rgba(255,255,255,.05)}
.send-result-item small{display:block; color:var(--muted)}
.send-job-info{margin-top:18px; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:16px}
.send-buttons{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0}
.response-box{margin-top:14px; border-top:1px solid var(--panel-border); padding-top:12px; display:flex; flex-direction:column; gap:8px; font-size:13px}
.email-preview{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:20px; min-height:300px}
.email-preview .subject{font-weight:600; margin-bottom:10px; color:var(--accent)}
.email-preview pre{white-space:pre-wrap; font-family:inherit; font-size:13px; line-height:1.6}
.preview-actions{display:flex; gap:8px; margin-top:14px}

/* ---------- TEMPLATES ---------- */
.tpl-card{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:16px; margin-bottom:12px}
.tpl-card .tpl-tag{font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:1px}
.tpl-card pre{white-space:pre-wrap; font-family:inherit; font-size:13px; color:var(--muted); margin-top:8px; max-height:160px; overflow-y:auto}

/* ---------- IMPORT/EXPORT ---------- */
.ie-card{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:20px; margin-bottom:16px}
.ie-card input[type=file]{margin:10px 0; display:block}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:100}
.modal{width:520px; max-width:92vw; max-height:86vh; overflow-y:auto; background:#12141a; border:1px solid var(--panel-border); border-radius:var(--radius)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--panel-border)}
.modal-close{background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer}
.modal-body{padding:20px; display:flex; flex-direction:column; gap:10px}
.modal-body label{font-size:12px; color:var(--muted)}
.modal-body input, .modal-body select, .modal-body textarea{
  background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text);
  padding:9px 11px; border-radius:8px; font-size:13px; width:100%;
}
.modal-body .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modal-footer{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
.job-block{border:1px solid var(--panel-border); border-radius:10px; padding:12px; margin-top:6px}
.job-block-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .topbar{flex-direction:column; align-items:flex-start}
  .tabs{width:100%; overflow-x:auto; flex-wrap:nowrap}
  main{padding:14px}
  .send-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .modal{width:96vw}
  .modal-body .row2{grid-template-columns:1fr}
  .filter-bar input, .filter-bar select{flex:1 1 140px}
}

/* ---------- PRINT (fallback) ----------
   All the Print buttons render a standalone report through
   printDocument() in app.js, which has its own stylesheet. This block
   only matters if someone presses Ctrl+P directly on a page: it strips
   the dark theme so the page is still readable on paper. */
@media print{
  html, body{background:#fff !important}
  body, body *{color:#111 !important; background:transparent !important; box-shadow:none !important; text-shadow:none !important}
  .topbar, .no-print, .toast, .modal-overlay, .filter-bar, .bulk-bar, .subtabs, .bulk-card{display:none !important}
  main{padding:0; max-width:none}
  #tab-clients.active{display:block !important; height:auto !important}
  .table-wrap, .scroll-box{overflow:visible !important; max-height:none !important; height:auto !important; border:0}
  table{width:100%; table-layout:auto}
  th, td{white-space:normal !important; border:1px solid #999 !important; position:static !important; max-width:none !important}
  thead{display:table-header-group}
  tr{break-inside:avoid; page-break-inside:avoid}
  .badge, .pill{border:1px solid #999; background:none}
}

/* ==========================================================
   BULK ACTIONS + REMINDERS + MAILER
   ========================================================== */

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:-80px; transform:translateX(-50%);
  background:#12161f; border:1px solid var(--panel-border); color:var(--text);
  padding:12px 20px; border-radius:10px; font-size:13px; z-index:60;
  box-shadow:0 10px 30px rgba(0,0,0,.5); transition:bottom .25s ease; max-width:80vw;
}
.toast.show{bottom:26px}
.toast.error{border-color:var(--danger); color:#ffb3b5}

/* ---------- tab badge ---------- */
.tab-pill{
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:6px;
  border-radius:20px; background:var(--accent); color:#1a1a1a;
  font-size:11px; font-weight:700; line-height:16px;
}

/* ---------- selection ---------- */
.chk-col{width:34px; text-align:center}
.chk-col input{width:16px; height:16px; cursor:pointer; accent-color:var(--accent)}
tr.row-selected{background:rgba(212,175,55,.09)}
tr.row-overdue td{background:rgba(229,85,90,.07)}
tr.row-today td{background:rgba(212,175,55,.07)}

/* ---------- bulk action bar ---------- */
.bulk-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:12px 16px; margin:0 0 14px;
  background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.35);
  border-radius:var(--radius); position:sticky; top:66px; z-index:15;
  backdrop-filter:blur(12px);
}
.bulk-count{font-size:13px; color:var(--muted)}
.bulk-count b{color:var(--accent); font-size:16px; margin-right:4px}
.bulk-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bulk-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.bulk-bar select{
  background:rgba(255,255,255,.05); border:1px solid var(--panel-border);
  color:var(--text); padding:7px 10px; border-radius:8px; font-size:13px;
}

/* ---------- countdown badges ---------- */
.badge.due-overdue{background:rgba(229,85,90,.2); color:#ffb3b5}
.badge.due-today{background:rgba(212,175,55,.22); color:var(--accent)}
.badge.due-ok{background:rgba(143,184,255,.16); color:var(--accent-2)}
.badge.breakup{background:rgba(154,163,178,.22); color:#c3c9d3}
.badge.paused{background:rgba(154,163,178,.15); color:var(--muted)}
.badge.followup_5{background:rgba(212,175,55,.18); color:var(--accent)}

.small{font-size:12px}
.pill{
  display:inline-block; padding:3px 9px; border-radius:20px;
  background:rgba(143,184,255,.14); color:var(--accent-2); font-size:11px;
}
.link-btn.danger-link{color:#ffb3b5}
.status{margin-top:10px; font-size:13px}
.status .ok{color:var(--success)}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

/* ---------- mailer sub-tabs ---------- */
.subtabs{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px}
.subtab-btn{
  background:rgba(255,255,255,.04); border:1px solid var(--panel-border);
  color:var(--muted); padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px;
}
.subtab-btn:hover{color:var(--text)}
.subtab-btn.active{background:rgba(212,175,55,.14); border-color:rgba(212,175,55,.45); color:var(--accent)}
.sub-panel{display:none}
.sub-panel.active{display:block}

/* ---------- mailer layout ---------- */
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.grid2 .wide{grid-column:1/-1}
.grid2 label, .ie-card label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:5px;
}
.grid2 input, .grid2 select, .ie-card > input[type=text], .ie-card > input[type=number]{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--panel-border);
  color:var(--text); padding:9px 11px; border-radius:8px; font-size:13px; font-family:inherit;
}
.quick-add{position:relative; margin:10px 0 14px}
.quick-add input{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--panel-border);
  color:var(--text); padding:10px 12px; border-radius:8px; font-size:13px;
}
.scroll-box{max-height:420px; overflow:auto; border:1px solid var(--panel-border); border-radius:10px}
.mini-table{width:100%; border-collapse:collapse; font-size:13px}
.mini-table th, .mini-table td{padding:9px 11px; border-bottom:1px solid var(--panel-border); text-align:left; vertical-align:top}
.mini-table th{background:rgba(255,255,255,.04); position:sticky; top:0; font-weight:600; font-size:12px; color:var(--muted)}

/* ---------- placeholders ---------- */
.placeholder{
  display:inline-block; background:rgba(143,184,255,.12); border:1px solid var(--panel-border);
  border-radius:5px; padding:3px 7px; font:12px ui-monospace,Menlo,Consolas,monospace;
  cursor:pointer; margin:2px; color:var(--accent-2);
}
.placeholder:hover{background:rgba(143,184,255,.25)}

/* ---------- rich text editor ---------- */
.rich-toolbar{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-border);
  border-bottom:0; border-radius:8px 8px 0 0;
}
.rich-toolbar button, .rich-toolbar select, .rich-toolbar input[type=color]{
  background:rgba(255,255,255,.06); border:1px solid var(--panel-border); color:var(--text);
  border-radius:6px; padding:5px 8px; cursor:pointer; height:31px; font-size:12px; font-family:inherit;
}
.rich-toolbar button:hover{background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.4)}
.rich-toolbar input[type=color]{padding:2px; width:36px}
.rich-toolbar .tool-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-left:4px}

/* The editor body renders the email itself, so it stays light like an inbox. */
.rich-editor{
  min-height:230px; padding:14px; overflow:auto; line-height:1.55;
  background:#ffffff; color:#183044; font-family:Arial,sans-serif; font-size:14px;
  border:1px solid var(--panel-border); border-radius:0 0 8px 8px;
}
.rich-editor:focus{outline:2px solid rgba(212,175,55,.5)}
.rich-editor img{max-width:100%; height:auto}
.rich-editor a{color:#1266a8}
.rich-editor.asset-editor{min-height:120px}

.asset-preview{
  border:1px solid var(--panel-border); border-radius:8px; padding:10px;
  background:rgba(255,255,255,.04); margin-top:10px;
}
.asset-img{max-width:100%; max-height:140px; border:1px solid var(--panel-border); border-radius:6px; display:block}
.asset-img.small-img{max-width:280px; max-height:110px}

.template, .assetrow{
  border:1px solid var(--panel-border); border-radius:10px;
  padding:14px; margin:12px 0; background:rgba(255,255,255,.02);
}
.template strong, .assetrow strong{display:block; margin-bottom:9px; color:var(--accent)}
.template .tpl-subject{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--panel-border);
  color:var(--text); padding:9px 11px; border-radius:8px; font-size:13px; margin-bottom:10px;
  font-family:inherit;
}

/* ---------- generated results ---------- */
.result{
  border:1px solid var(--panel-border); border-radius:12px;
  background:rgba(255,255,255,.02); margin:16px 0; overflow:hidden;
}
.result-done{border-color:rgba(76,195,138,.5)}
.result-head{
  background:rgba(255,255,255,.04); padding:12px 15px;
  border-bottom:1px solid var(--panel-border); font-size:13px; display:grid; gap:3px;
}
.result-body{border-radius:0; min-height:180px}
.copybar{
  padding:11px 15px; border-top:1px solid var(--panel-border);
  display:flex; justify-content:flex-end; gap:8px; align-items:center; flex-wrap:wrap;
}
.copied{color:var(--success); font-weight:600; font-size:12px; margin-right:auto}

@media (max-width:820px){
  .grid2{grid-template-columns:1fr}
  .bulk-bar{position:static}
}

.stat-card.good .num{color:var(--success)}
.stat-card.warn .num{color:var(--accent)}
.stat-card.bad .num{color:#ffb3b5}
.stat-card.bad{border-color:rgba(229,85,90,.4)}


/* ==========================================================
   CLIENTS & JOBS — scrollbars that are always on screen
   ----------------------------------------------------------
   The list gets its own scroll box that fills the window, so the
   horizontal scrollbar sits at the bottom of the screen instead of
   at the bottom of a 500-row table. The header row and the first
   columns (tick / S.No / Company) plus the Actions column stay
   pinned while you scroll, so you never lose track of which row
   you are on.
   ========================================================== */
:root{ --topbar-h:64px; --main-pad:24px; --cell-bg:#0f1218; --head-bg:#181b23; }

/* Thick, visible scrollbars on every scroll area */
.table-wrap, .scroll-box, .bulk-grid-wrap{ scrollbar-gutter:stable; }
@supports selector(::-webkit-scrollbar){
  .table-wrap::-webkit-scrollbar, .scroll-box::-webkit-scrollbar, .bulk-grid-wrap::-webkit-scrollbar{ width:14px; height:14px; }
  .table-wrap::-webkit-scrollbar-track, .scroll-box::-webkit-scrollbar-track, .bulk-grid-wrap::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
  .table-wrap::-webkit-scrollbar-thumb, .scroll-box::-webkit-scrollbar-thumb, .bulk-grid-wrap::-webkit-scrollbar-thumb{
    background:rgba(212,175,55,.55); border-radius:10px; border:3px solid transparent; background-clip:padding-box;
  }
  .table-wrap::-webkit-scrollbar-thumb:hover, .scroll-box::-webkit-scrollbar-thumb:hover, .bulk-grid-wrap::-webkit-scrollbar-thumb:hover{
    background:rgba(212,175,55,.9); border:3px solid transparent; background-clip:padding-box;
  }
  .table-wrap::-webkit-scrollbar-corner, .scroll-box::-webkit-scrollbar-corner, .bulk-grid-wrap::-webkit-scrollbar-corner{ background:transparent; }
}
@supports not selector(::-webkit-scrollbar){
  .table-wrap, .scroll-box, .bulk-grid-wrap{ scrollbar-width:auto; scrollbar-color:rgba(212,175,55,.6) rgba(255,255,255,.06); }
}

/* The list table */
#tab-clients .table-wrap{ background:var(--cell-bg); overflow:auto; }
#jobsTable{ border-collapse:separate; border-spacing:0; min-width:1180px; }
#jobsTable thead th{ position:sticky; top:0; z-index:4; background:var(--head-bg); }
#jobsTable td{ background-color:var(--cell-bg); }
#jobsTable tbody tr:hover td{ background-image:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.035)); }
#jobsTable tbody tr.row-selected{ background:none; }
#jobsTable tbody tr.row-selected td{ background-image:linear-gradient(rgba(212,175,55,.10),rgba(212,175,55,.10)); }
#jobsTable td[colspan]{ position:static; text-align:center; padding:30px; }

@media (min-width:901px){
  /* Fill the window: header + filters + bulk bar on top, the table takes the rest. */
  #tab-clients.active{
    display:flex; flex-direction:column;
    height:calc(100vh - var(--topbar-h) - (var(--main-pad) * 2) - 2px);
    min-height:420px;
  }
  #tab-clients.active > *{ flex:0 0 auto; }
  #tab-clients.active > .table-wrap{ flex:1 1 auto; min-height:240px; }
  #tab-clients .bulk-bar{ position:static; }

  /* Pinned columns: tick box, S.No, Company | Actions on the right */
  #jobsTable th:nth-child(1), #jobsTable td:nth-child(1){ position:sticky; left:0;     width:42px;  min-width:42px;  max-width:42px;  z-index:3; }
  #jobsTable th:nth-child(2), #jobsTable td:nth-child(2){ position:sticky; left:42px;  width:92px;  min-width:92px;  max-width:92px;  z-index:3; }
  #jobsTable th:nth-child(3), #jobsTable td:nth-child(3){ position:sticky; left:134px; min-width:190px; max-width:250px; overflow:hidden; text-overflow:ellipsis; z-index:3; box-shadow:1px 0 0 var(--panel-border), 8px 0 12px -8px rgba(0,0,0,.7); }
  #jobsTable th:last-child, #jobsTable td:last-child{ position:sticky; right:0; z-index:3; box-shadow:-1px 0 0 var(--panel-border), -8px 0 12px -8px rgba(0,0,0,.7); }
  #jobsTable thead th:nth-child(-n+3), #jobsTable thead th:last-child{ z-index:6; background:var(--head-bg); }
  #jobsTable td[colspan]{ position:static; box-shadow:none; max-width:none; }
}
@media (max-width:900px){
  #tab-clients .table-wrap{ max-height:72vh; }
}

/* ==========================================================
   BULK CONTACT ENTRY (Import / Export tab)
   ========================================================== */
.bulk-card{ padding:22px; }
.bulk-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.bulk-top h3{ margin:0 0 4px; font-size:17px; }
.bulk-top .muted{ margin:0; max-width:640px; line-height:1.5; }
.bulk-keys{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0 12px; font-size:12px; color:var(--muted); }
.bulk-keys span{ display:inline-flex; align-items:center; gap:6px; }
kbd{
  display:inline-block; padding:2px 7px; border-radius:5px; font:600 11px ui-monospace,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.08); border:1px solid var(--panel-border); border-bottom-width:2px; color:var(--text);
}

.bulk-grid-wrap{
  max-height:min(60vh,560px); overflow:auto; background:var(--cell-bg);
  border:1px solid var(--panel-border); border-radius:10px;
}
table.bulk-grid{ border-collapse:separate; border-spacing:0; width:100%; min-width:1040px; table-layout:fixed; font-size:13px; }
.bulk-grid th{
  position:sticky; top:0; z-index:3; background:var(--head-bg); color:var(--muted);
  text-align:left; padding:10px 10px; font-size:12px; font-weight:600; white-space:nowrap;
  border-bottom:1px solid var(--panel-border); border-right:1px solid var(--panel-border);
}
.bulk-grid th .req{ color:var(--accent); }
.bulk-grid td{
  padding:0; border-bottom:1px solid var(--panel-border); border-right:1px solid var(--panel-border);
  background:var(--cell-bg); position:relative; white-space:normal;
}
.bulk-grid td.rn, .bulk-grid th.rn{
  position:sticky; left:0; z-index:2; width:46px; text-align:center; color:var(--muted);
  font-size:11px; background:var(--head-bg); user-select:none;
}
.bulk-grid th.rn{ z-index:5; }
.bulk-grid td.res{ padding:0 10px; font-size:12px; line-height:1.3; vertical-align:middle; }
.bulk-grid td.del{ text-align:center; }
.bulk-grid input{
  display:block; width:100%; background:transparent; border:0; outline:0; color:var(--text);
  padding:10px 10px; font:inherit; font-size:13px; border-radius:0;
}
.bulk-grid input::placeholder{ color:rgba(154,163,178,.45); }
.bulk-grid td:focus-within{ outline:2px solid var(--accent); outline-offset:-2px; background:rgba(212,175,55,.07); z-index:1; }
.bulk-grid td.bad{ background:rgba(229,85,90,.14); }
.bulk-grid td.warn input{ text-decoration:underline dotted rgba(212,175,55,.8); text-underline-offset:3px; }
.bulk-grid tr.is-dup td{ background:rgba(229,85,90,.08); }
.bulk-grid tr.is-dup td.rn{ background:var(--head-bg); }
.bulk-grid .res.err{ color:#ffb3b5; }
.bulk-grid .res.ok{ color:var(--success); }
.bulk-grid .del button{
  background:none; border:0; color:var(--muted); font-size:17px; cursor:pointer; padding:6px 10px; line-height:1; border-radius:6px;
}
.bulk-grid .del button:hover{ color:#ffb3b5; background:rgba(229,85,90,.14); }

.bulk-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.bulk-summary{ font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
.bulk-summary b{ color:var(--text); }
.bulk-summary .ok b{ color:var(--success); }
.bulk-summary .err b{ color:#ffb3b5; }
.bulk-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bulk-actions .btn.primary[disabled]{ opacity:.45; cursor:not-allowed; }
.bulk-banner{
  margin-top:12px; padding:11px 14px; border-radius:10px; font-size:13px; display:none;
  background:rgba(76,195,138,.10); border:1px solid rgba(76,195,138,.4); color:#bff0d6;
}
.bulk-banner.show{ display:block; }
.bulk-banner.warn{ background:rgba(212,175,55,.10); border-color:rgba(212,175,55,.45); color:#f0dc9b; }
.bulk-banner.err{ background:rgba(229,85,90,.10); border-color:rgba(229,85,90,.45); color:#ffb3b5; }
.bulk-grid-wrap{ scroll-padding-top:44px; scroll-padding-left:46px; }

.bulk-opt{ display:inline-flex !important; align-items:center; gap:7px; margin:0 !important; cursor:pointer; color:var(--muted); font-size:12px !important; }
.bulk-opt input{ accent-color:var(--accent); width:15px; height:15px; margin:0; }

/* ---------- MONTH ACTIVITY CALENDAR ---------- */
.activity-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:4px 0 18px}
.cal-day-head{font-weight:700;text-align:center;padding:8px 4px;color:var(--muted);font-size:12px}
.cal-day{min-height:150px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.025);padding:8px;overflow:hidden}
.cal-day.off{opacity:.42;background:rgba(255,255,255,.012)}
.cal-day.today{outline:2px solid var(--accent)}
.cal-day.empty{border:0;background:transparent}
.cal-date{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:7px}
.cal-off{font-size:10px;text-transform:uppercase;color:var(--muted)}
.cal-select{font-size:11px}
.cal-section{margin-top:7px}
.cal-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:5px 0 3px}
.cal-contact{display:flex;gap:5px;align-items:flex-start;font-size:11px;line-height:1.25;padding:3px 0}
.cal-contact input{margin-top:1px}
.cal-empty{font-size:11px;color:var(--muted);padding-top:10px}
@media(max-width:900px){.activity-month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cal-day-head{display:none}}

/* Outreach scheduling state */
.badge.scheduled-check{display:inline-block}
.badge.to-schedule{display:inline-block}