/* DigiDent CRM — HubSpot-inspired UI
   Palette: orange #ff7a59 (primary CTA), teal #00a4bd (links/accents),
   navy text #33475b, sidebar #2e3e50, app bg #f5f8fa, borders #cbd6e2. */
* { box-sizing: border-box; }
[hidden]{display:none !important;}   /* honour the attribute over display:grid/flex rules */
:root{
  --orange:#ff7a59; --orange-d:#e8643f; --teal:#00a4bd; --teal-d:#00829a;
  --navy:#33475b; --muted:#7c98b6; --line:#cbd6e2; --line-l:#dfe7ef;
  --bg:#f5f8fa; --sidebar:#2e3e50; --sidebar-h:#3d5066; --green:#00bda5;
}
html,body{margin:0;height:100%;}
body{font-family:'Lexend Deca',-apple-system,system-ui,'Segoe UI',sans-serif;
  color:var(--navy);background:var(--bg);font-size:14px;line-height:1.45;}
a{color:var(--teal);text-decoration:none;} a:hover{text-decoration:underline;}
h1{font-size:20px;margin:0;} h2{font-size:16px;} h3{font-size:13px;}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{width:220px;background:var(--sidebar);color:#cdd6e0;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:20;}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:16px 18px;font-weight:700;color:#fff;
  font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar .brand .logo{width:26px;height:26px;border-radius:6px;background:var(--orange);
  display:grid;place-items:center;font-size:15px;}
.sidebar nav{flex:1;overflow-y:auto;padding:8px 8px;}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;
  color:#cdd6e0;font-size:13.5px;margin:1px 0;}
.sidebar nav a:hover{background:var(--sidebar-h);color:#fff;text-decoration:none;}
.sidebar nav a.active{background:var(--sidebar-h);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--orange);}
.sidebar nav .section{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#7e93a8;padding:14px 12px 4px;}
.sidebar nav a .ic{width:20px;text-align:center;}
.sidebar .foot{padding:10px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar .userchip{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:12.5px;color:#aebccb;}
.sidebar .userchip .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:12px;}
.sidebar .foot a{color:#aebccb;display:block;padding:6px 10px;font-size:12.5px;}

/* ---------- Top bar ---------- */
.main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-width:0;}
/* Thin top bar — same navy as the left sidebar */
.topbar{height:56px;background:var(--sidebar);border-bottom:1px solid rgba(0,0,0,.18);display:flex;
  align-items:center;gap:14px;padding:0 18px 0 22px;position:sticky;top:0;z-index:15;}
.search{position:relative;flex:1;max-width:520px;}
.search input{width:100%;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:0 12px 0 34px;
  font-size:13.5px;color:#eef3f8;background:rgba(255,255,255,.08) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23aebccb' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;}
.search input::placeholder{color:#9db0c4;}
.search input:focus{outline:none;border-color:var(--teal);background-color:rgba(255,255,255,.14);}

/* ---------- Top-right cluster: bell + user menu ---------- */
.topcluster{display:flex;align-items:center;gap:10px;}
.iconbtn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid transparent;
  background:rgba(255,255,255,.08);color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;
  line-height:1;transition:background .12s;}
.iconbtn:hover{background:rgba(255,255,255,.18);}
.iconbtn .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--sidebar);}
.bell-wrap,.usermenu-wrap{position:relative;}

.notif-panel{position:absolute;top:46px;right:0;width:380px;max-width:88vw;background:#fff;color:var(--navy);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(45,62,80,.28);overflow:hidden;z-index:40;}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-l);
  font-weight:700;font-size:14px;}
.np-readall{border:none;background:none;color:var(--teal);font-size:12.5px;font-weight:600;cursor:pointer;}
.np-readall:hover{text-decoration:underline;}
.np-list{max-height:430px;overflow-y:auto;}
.np-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13px;}
.np-foot{display:block;text-align:center;padding:11px;border-top:1px solid var(--line-l);
  font-size:13px;font-weight:600;color:var(--teal);}
.np-foot:hover{background:var(--bg);text-decoration:none;}

/* notification item (shared by dropdown + history page) */
.nitem{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line-l);cursor:pointer;
  position:relative;text-decoration:none;color:var(--navy);}
.nitem:hover{background:#f7fafc;text-decoration:none;}
.nitem.unread{background:#f0f9fb;}
.nitem.unread:hover{background:#e8f4f8;}
.nitem .nic{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--bg);display:grid;place-items:center;
  font-size:16px;border:1px solid var(--line-l);}
.nitem .nbody{min-width:0;flex:1;}
.nitem .ntitle{font-weight:600;font-size:13px;line-height:1.3;}
.nitem .nsub{font-size:12px;color:var(--muted);margin-top:2px;}
.nitem .ndot{position:absolute;top:15px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--orange);}
.nitem .nchanges{margin-top:6px;display:flex;flex-direction:column;gap:3px;}
.chg{display:flex;align-items:center;gap:6px;font-size:11.5px;background:#fff;border:1px solid var(--line-l);
  border-radius:6px;padding:3px 7px;}
.chg .cl{color:var(--muted);font-weight:600;}
.chg .co{color:#b23b3b;text-decoration:line-through;opacity:.8;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chg .ar{color:var(--muted);}
.chg .cn{color:var(--green);font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nitem .ntime{font-size:11px;color:var(--muted);margin-top:5px;}
.nbadge-ev{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:1px 6px;border-radius:4px;margin-right:6px;vertical-align:1px;}
.ev-create{background:#e3f7f0;color:#00815f;}
.ev-field_change{background:#e8f0fb;color:#2c5cc5;}
.ev-stage_change{background:#fdeee7;color:#c85a33;}

/* user menu */
.usermenu-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 4px;border-radius:20px;
  border:1px solid transparent;background:rgba(255,255,255,.08);color:#eef3f8;cursor:pointer;font-size:13px;}
.usermenu-btn:hover{background:rgba(255,255,255,.18);}
.usermenu-btn .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:13px;}
.usermenu-btn .nm{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.usermenu-btn .chev{color:#aebccb;font-size:11px;}
.usermenu{position:absolute;top:46px;right:0;width:230px;background:#fff;color:var(--navy);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 44px rgba(45,62,80,.28);overflow:hidden;z-index:40;}
.usermenu .um-id{padding:13px 15px;border-bottom:1px solid var(--line-l);}
.usermenu .um-name{font-weight:700;font-size:13.5px;}
.usermenu .um-mail{font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;}
.usermenu a{display:block;padding:10px 15px;font-size:13px;color:var(--navy);}
.usermenu a:hover{background:var(--bg);text-decoration:none;}
.usermenu .um-logout{border-top:1px solid var(--line-l);color:#d94c53;}
.search .results{position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 24px rgba(45,62,80,.16);overflow:hidden;display:none;}
.search .results a{display:flex;gap:10px;padding:9px 12px;color:var(--navy);border-bottom:1px solid var(--line-l);}
.search .results a:hover{background:var(--bg);text-decoration:none;}
.search .results .o{color:var(--muted);font-size:12px;margin-left:auto;}

/* ---------- Content ---------- */
.content{padding:22px;flex:1;min-width:0;}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.page-head .crumbs{color:var(--muted);font-size:12.5px;}
.page-head h1{display:flex;align-items:center;gap:9px;}
.spacer{flex:1;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:5px;
  border:1px solid var(--teal);background:#fff;color:var(--teal);font-weight:600;font-size:13px;
  cursor:pointer;white-space:nowrap;}
.btn:hover{background:#eaf6f9;text-decoration:none;}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;}
.btn.primary:hover{background:var(--orange-d);}
.btn.ghost{border-color:var(--line);color:var(--navy);}
.btn.ghost:hover{background:var(--bg);}
.btn.sm{height:28px;padding:0 10px;font-size:12px;}
.btn.danger{border-color:#d94c53;color:#d94c53;background:#fff;}
.btn.danger:hover{background:#fdeced;}

/* ---------- Tabs / view switch ---------- */
.viewswitch{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;}
.viewswitch a{padding:7px 14px;color:var(--navy);font-size:13px;border-right:1px solid var(--line);}
.viewswitch a:last-child{border-right:0;}
.viewswitch a.active{background:var(--teal);color:#fff;font-weight:600;}
.viewswitch a:hover{text-decoration:none;}

/* ---------- Cards / panels ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:16px;}
.panel h2{margin:0 0 12px;}

/* ---------- Table ---------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.toolbar .filt{height:32px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font-size:13px;}
table.grid{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;}
table.grid th{background:#f5f8fa;text-align:left;padding:10px 12px;font-size:12px;color:var(--muted);
  font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;}
table.grid th a{color:var(--muted);}
table.grid td{padding:10px 12px;border-bottom:1px solid var(--line-l);font-size:13.5px;vertical-align:middle;}
table.grid tr:hover td{background:#fafcfe;}
table.grid td.title a{font-weight:600;color:var(--teal);}
.empty{padding:48px;text-align:center;color:var(--muted);}

/* ---------- Pills / tags ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600;
  background:#eaf0f6;color:#516f90;}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11.5px;background:#e5f5f8;color:#00829a;margin:2px 2px 0 0;}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;align-items:flex-start;
  scrollbar-width:auto;scrollbar-color:var(--teal) #dfe6ee;scroll-behavior:smooth;cursor:grab;}
.kanban.panning{cursor:grabbing;scroll-behavior:auto;}
/* always-visible, chunky horizontal scrollbar so the board can be dragged left/right */
.kanban::-webkit-scrollbar{height:14px;}
.kanban::-webkit-scrollbar-track{background:#dfe6ee;border-radius:7px;}
.kanban::-webkit-scrollbar-thumb{background:var(--teal);border-radius:7px;border:3px solid #dfe6ee;}
.kanban::-webkit-scrollbar-thumb:hover{background:var(--navy);}
/* the card keeps its own grab cursor; dragging the gap pans the board */
.kanban .kcard{cursor:grab;}
.kcol{min-width:240px;width:240px;background:#eef2f6;border-radius:8px;flex-shrink:0;}
.kcol .khead{padding:10px 12px;border-bottom:2px solid var(--line);position:sticky;top:0;}
.kcol .khead .nm{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;}
.kcol .khead .meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.kbody{padding:8px;min-height:80px;display:flex;flex-direction:column;gap:8px;}
.kbody.drop{background:#e0eefc;outline:2px dashed var(--teal);outline-offset:-4px;border-radius:6px;}
.kcard{background:#fff;border:1px solid var(--line);border-radius:7px;padding:10px 11px;cursor:grab;
  box-shadow:0 1px 2px rgba(45,62,80,.06);}
.kcard:hover{border-color:var(--teal);}
.kcard.dragging{opacity:.5;}
.kcard .nm{font-weight:600;color:var(--navy);font-size:13px;}
.kcard .amt{color:var(--green);font-weight:700;font-size:13px;margin-top:4px;}
.kcard .row{display:flex;align-items:center;justify-content:space-between;margin-top:7px;}
.kcard .av{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:700;}
/* card key-data (properties chosen via show_on_card) */
.kcard .kfields{margin-top:7px;display:flex;flex-direction:column;gap:3px;}
.kcard .kfield{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;line-height:1.35;}
.kcard .kf-l{color:var(--muted);white-space:nowrap;}
.kcard .kf-v{color:var(--navy);font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* associated-record icon chips */
.kcard .kchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
.kcard .kchip{display:inline-flex;align-items:center;gap:2px;background:#f5f8fa;border:1px solid var(--line);
  border-radius:12px;padding:1px 7px;font-size:12px;cursor:default;position:relative;}
.kcard .kchip .ct{font-size:10px;font-weight:700;color:var(--muted);}
/* tooltip anchored to the chip's left edge so it expands rightward and stays
   inside the board (never slides under the left sidebar on the first column) */
.kcard .kchip[data-tip]:hover::after,.kcard .kchip[data-tip]:focus::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:0;
  background:var(--navy);color:#fff;font-size:11px;font-weight:500;line-height:1.3;white-space:normal;
  width:max-content;max-width:210px;padding:5px 8px;border-radius:5px;z-index:30;
  box-shadow:0 2px 8px rgba(45,62,80,.25);}
.kcard .kchip[data-tip]:hover::before,.kcard .kchip[data-tip]:focus::before{
  content:"";position:absolute;bottom:calc(100% + 1px);left:9px;
  border:5px solid transparent;border-top-color:var(--navy);z-index:30;}

/* searchable combobox (wraps a native select) */
.combo{position:relative;display:inline-block;max-width:300px;width:100%;}
.combo .combo-inp{width:100%;box-sizing:border-box;}
.combo-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:6px;margin-top:2px;max-height:240px;overflow:auto;
  box-shadow:0 6px 18px rgba(45,62,80,.16);}
.combo-item{padding:6px 10px;font-size:13px;color:var(--navy);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.combo-item:hover{background:#f0f7ff;}
.combo-item.sel{background:#e5f8f4;}

/* orderable check-rows (table column picker, card-properties panel) */
.colmenu{max-height:min(70vh,560px);overflow:auto;min-width:280px;}
.colmenu .colhead{position:sticky;top:-8px;background:#fff;padding:2px 2px 4px;z-index:2;
  border-bottom:1px solid var(--line-l);margin-bottom:4px;}
.colmenu .colhead .filt{width:100%;box-sizing:border-box;}
.colmenu .colfoot{position:sticky;bottom:-8px;background:#fff;padding:8px 2px 2px;
  border-top:1px solid var(--line-l);margin-top:4px;}
.colrow{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:4px;}
.colrow:hover{background:#f0f7ff;}
.colrow .cl{flex:1;font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.colrow .mv{border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;
  width:20px;height:20px;line-height:1;font-size:11px;color:var(--muted);padding:0;}
.colrow .mv:hover{border-color:var(--teal);color:var(--teal);}

/* inline-editable table cells: appearance unchanged until hover */
td.cell-edit{cursor:text;}
td.cell-edit:hover{background:#f0f7ff;box-shadow:inset 0 0 0 1px var(--teal);border-radius:3px;}
td.cell-edit.editing{background:#fff;box-shadow:inset 0 0 0 1px var(--teal);padding:2px 4px;}
td.cell-edit.editing input,td.cell-edit.editing select,td.cell-edit.editing textarea{width:100%;box-sizing:border-box;font:inherit;padding:2px 4px;}

/* ---------- Record detail 3-pane ---------- */
.detail{display:grid;grid-template-columns:320px 1fr 300px;gap:16px;align-items:start;}
@media(max-width:1100px){.detail{grid-template-columns:1fr;}}
.dt-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.dt-head .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:18px;font-weight:700;}
.propgroup{margin-bottom:8px;}
.propgroup .gh{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:700;margin:14px 0 6px;}
.prop{padding:7px 0;border-bottom:1px solid var(--line-l);}
.prop .lbl{font-size:11.5px;color:var(--muted);margin-bottom:2px;}
.prop .val{font-size:13.5px;min-height:18px;cursor:text;border-radius:4px;padding:2px 4px;margin:-2px -4px;}
.prop .val:hover{background:#f0f5fa;}
.prop .val.ro:hover{background:transparent;cursor:default;}
.prop input,.prop select,.prop textarea{width:100%;border:1px solid var(--teal);border-radius:5px;
  padding:6px 8px;font-size:13.5px;font-family:inherit;}
.timeline{position:relative;}
.tl-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-l);}
.tl-item .dot{width:28px;height:28px;border-radius:50%;background:#eaf0f6;display:grid;place-items:center;
  flex-shrink:0;font-size:13px;}
.tl-item .meta{font-size:12px;color:var(--muted);}
.tl-item .body{font-size:13px;}
.assoc-group{margin-bottom:14px;}
.assoc-group .gh{font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:6px;
  display:flex;justify-content:space-between;}
.assoc-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line-l);
  border-radius:6px;margin-bottom:6px;background:#fafcfe;}
.assoc-item a{font-weight:600;}
.assoc-item form{margin-left:auto;}

/* ---------- Forms ---------- */
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:12.5px;font-weight:600;margin-bottom:4px;}
.form-row .req{color:var(--orange);}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=password],
.form-row input[type=number],.form-row input[type=date],.form-row input[type=datetime-local],
.form-row select,.form-row textarea,.inp{
  width:100%;max-width:480px;border:1px solid var(--line);border-radius:5px;padding:8px 10px;
  font-size:13.5px;font-family:inherit;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--teal);}
.help{font-size:12px;color:var(--muted);margin-top:3px;}
.checkrow{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:13.5px;}

/* ---------- Flash ---------- */
.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13.5px;}
.flash.ok{background:#e5f8f4;color:#00786a;border:1px solid #9fe0d4;}
.flash.error{background:#fdeced;color:#a4262c;border:1px solid #f1b9bc;}

/* ---------- Settings ---------- */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.set-card{display:block;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);}
.set-card:hover{border-color:var(--teal);text-decoration:none;box-shadow:0 4px 12px rgba(45,62,80,.08);}
.set-card .ic{font-size:22px;} .set-card .t{font-weight:700;margin-top:8px;} .set-card .d{color:var(--muted);font-size:12.5px;margin-top:3px;}
.matrix{width:100%;border-collapse:collapse;font-size:13px;}
.matrix th,.matrix td{border:1px solid var(--line-l);padding:7px 9px;text-align:left;}
.matrix th{background:#f5f8fa;font-size:12px;color:var(--muted);}
.matrix select{border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:12.5px;}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(45,62,80,.45);display:none;z-index:50;
  align-items:center;justify-content:center;}
.modal-bg.show{display:flex;}
.modal{background:#fff;border-radius:10px;width:520px;max-width:94vw;max-height:90vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;}
.modal .mb{padding:18px 20px;} .modal .mf{padding:14px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:8px;}
.modal .x{cursor:pointer;color:var(--muted);font-size:20px;border:0;background:0;}
.dropdown{position:relative;display:inline-block;}
.dropdown .menu{position:absolute;right:0;top:38px;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 24px rgba(45,62,80,.16);padding:8px;display:none;z-index:30;min-width:240px;max-height:320px;overflow:auto;}
.dropdown.open .menu{display:block;}
.dropdown .menu label{display:flex;gap:8px;align-items:center;padding:5px 8px;font-size:13px;border-radius:5px;cursor:pointer;}
.dropdown .menu label:hover{background:var(--bg);}

/* ---------- Deal stage progress bar (HubSpot-style chevrons) ---------- */
.stageflow{display:flex;flex-wrap:wrap;margin-bottom:6px;}
.stageflow-item{position:relative;border:0;cursor:pointer;flex:1 1 0;min-width:64px;
  padding:9px 8px 9px 18px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:#516f90;background:#e6ecf2;margin-right:-8px;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);}
.stageflow-item:first-child{padding-left:12px;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);}
.stageflow-item:last-child{margin-right:0;}
.stageflow-item.done{background:#cbeef2;color:#00758a;}
.stageflow-item.current{background:var(--sc,var(--teal));color:#fff;}
.stageflow-item:hover{filter:brightness(.95);}

/* ---------- Engagement composer (notes / activities) ---------- */
.composer{border:1px solid var(--line);border-radius:8px;margin-bottom:14px;background:#fbfdfe;}
.composer-tabs{display:flex;border-bottom:1px solid var(--line);}
.composer-tabs .ctab{background:none;border:0;color:#516f90;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;}
.composer-tabs .ctab.active{color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal);}
.cform{padding:10px 12px;}
.cform textarea,.cform input,.cform select{width:100%;border:1px solid var(--line);border-radius:5px;padding:6px 8px;font-size:13px;font-family:inherit;margin-bottom:6px;}
.cform .crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cform .crow > *{margin-bottom:6px;}
.cform .cmini{font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center;}
.cform .cmini input{width:auto;margin:0;}

/* ---------- Notifications history page ---------- */
.notif-page{max-width:760px;}
.notif-page .nitem{border:1px solid var(--line-l);border-radius:10px;margin-bottom:9px;padding:14px;background:#fff;}
.notif-page .nitem:hover{border-color:var(--teal);box-shadow:0 3px 10px rgba(45,62,80,.06);}
.notif-page .nitem.unread{border-left:3px solid var(--orange);}
.notif-empty{text-align:center;padding:70px 20px;color:var(--muted);}
.notif-empty .big{font-size:44px;margin-bottom:10px;}

/* ---------- Notification settings grid ---------- */
.ntf-note{background:#eef7fb;border:1px solid #cfe6f0;border-radius:8px;padding:11px 14px;font-size:13px;
  color:var(--navy);margin-bottom:16px;}
.ntf-note.warn{background:#fff6ea;border-color:#f2dcb8;}
.ntf-obj{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden;background:#fff;}
.ntf-obj > .oh{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--bg);
  border-bottom:1px solid var(--line-l);font-weight:700;font-size:14px;}
.ntf-tbl{width:100%;border-collapse:collapse;}
.ntf-tbl th,.ntf-tbl td{padding:9px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--line-l);}
.ntf-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;}
.ntf-tbl tr:last-child td{border-bottom:none;}
.ntf-tbl td.ev{font-weight:600;}
.ntf-tbl .ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--navy);}
.ntf-tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);}
.ntf-tbl select{height:30px;border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:12.5px;background:#fff;}
.ntf-tbl td.off{opacity:.45;}
.inherit{font-size:10.5px;color:var(--teal);font-weight:600;margin-left:6px;}
.ntf-actions{display:flex;gap:10px;align-items:center;position:sticky;bottom:0;background:var(--bg);padding:12px 0;}
.perm-btn{margin-bottom:16px;}

/* ---------- Kanban saved views + toolbar + filters ---------- */
.viewtabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:10px;}
.vtab{display:inline-block;padding:8px 14px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;font-weight:500;}
.vtab:hover{color:var(--navy);text-decoration:none;}
.vtab.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700;}
.vtab-wrap{display:inline-flex;align-items:center;}
.vtab-wrap.active{background:#eef9fb;border-radius:6px 6px 0 0;}
.vtab .shared{font-size:9.5px;background:var(--line-l);color:var(--muted);padding:1px 5px;border-radius:8px;vertical-align:1px;}
.vtab-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 6px;line-height:1;}
.vtab-x:hover{color:#d94c53;}

.ktoolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative;}
.ksearch{height:34px;width:280px;max-width:46vw;border:1px solid var(--line);border-radius:6px;padding:0 12px 0 32px;
  font-size:13.5px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%237c98b6' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 9px center;}
.ksearch:focus{outline:none;border-color:var(--teal);}
.kmatch{font-size:12px;color:var(--muted);}

.kfilter-pop{position:absolute;top:44px;left:296px;z-index:30;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 40px rgba(45,62,80,.22);padding:14px;width:520px;max-width:92vw;}
.kf-head{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:8px;}
.kf-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.kf-row select,.kf-row input{height:32px;border:1px solid var(--line);border-radius:6px;font-size:13px;padding:0 8px;background:#fff;}
.kf-row .kf-prop{flex:1.2;min-width:0;} .kf-row .kf-op{flex:1;min-width:0;} .kf-row .kf-val{flex:1;min-width:0;}
.kf-row .kf-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:16px;}
.kf-row .kf-del:hover{color:#d94c53;}
.kf-actions{display:flex;gap:8px;margin-top:10px;}