/* ==========================================================================
   MNDZ CRM, house style (from businesses/mndz-automation/artifacts/house-style.css)
   Dark ground, neon glow, single theme, phone first. Plain ASCII only.
   Colours mean things: cyan the work and normal stages, violet stage changes,
   amber next step / overdue, green replied and won, pink lost / zero / broken.
   ========================================================================== */

:root {
  --void:    #05070C;
  --panel:   #0A0F17;
  --panel-2: #0D1420;
  --line:    #1B2637;
  --cyan:   #21E6FF;
  --violet: #9D6BFF;
  --amber:  #FF9A3C;
  --green:  #3BFF9E;
  --pink:   #FF3DA6;
  --text:   #DCE8F5;
  --text-2: #8C9FB8;
  --text-3: #5A6B82;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --c-rgb: 33,230,255; --v-rgb: 157,107,255; --a-rgb: 255,154,60; --g-rgb: 59,255,158; --p-rgb: 255,61,166;
}

* { box-sizing: border-box; }
html { background: var(--void); }
body {
  margin: 0;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(33,230,255,.11), transparent 60%),
    radial-gradient(90% 45% at 95% 40%, rgba(157,107,255,.07), transparent 65%),
    var(--void);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
.mono, .cell-mono { font-family: var(--mono); font-size: .8em; color: var(--text-2); }
.muted { color: var(--text-3); }
p { margin: .3rem 0; }

/* --- masthead --------------------------------------------------------- */
.mast { padding: 1.1rem 1rem .6rem; max-width: 72rem; margin: 0 auto; }
.mast-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.mast-kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; color: var(--text-3); }
.mast-title {
  margin: 0; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; letter-spacing: .05em;
  color: var(--cyan); text-shadow: 0 0 18px rgba(var(--c-rgb), .55);
}
.mast-actions { display: flex; gap: .5rem; padding-top: .35rem; }
.lede { color: var(--text-2); font-size: .92rem; }

/* stats: a run of numbers, always with what they are out of */
.status { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .8rem 0 .2rem; font-family: var(--mono); font-size: .76rem; }
.status div { display: flex; gap: .5rem; }
.status .k { color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.status .v { color: var(--text); }
.status .v.c { color: var(--cyan); text-shadow: 0 0 10px rgba(var(--c-rgb), .5); }
.status .v.g { color: var(--green); text-shadow: 0 0 10px rgba(var(--g-rgb), .5); }
.status .v.p { color: var(--pink); text-shadow: 0 0 10px rgba(var(--p-rgb), .5); }

/* tabs */
.tabs { display: flex; gap: .25rem; margin-top: .7rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-btn {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-3);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .7rem; cursor: pointer; white-space: nowrap;
}
.tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); text-shadow: 0 0 10px rgba(var(--c-rgb), .5); }
.tab-count {
  display: inline-block; min-width: 1.2rem; padding: 0 .3rem; margin-left: .2rem; border-radius: 999px; text-align: center;
  background: rgba(var(--a-rgb), .18); color: var(--amber); border: 1px solid rgba(var(--a-rgb), .5); font-size: .68rem;
}

/* --- buttons and inputs ------------------------------------------------- */
.btn {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 4px; padding: .5rem .8rem; transition: border-color .12s, box-shadow .12s;
}
.btn:hover { border-color: rgba(var(--c-rgb), .5); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-cyan { border-color: rgba(var(--c-rgb), .55); color: var(--cyan); box-shadow: 0 0 14px -4px rgba(var(--c-rgb), .5); }
.linkbtn { background: none; border: 0; color: var(--text-3); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.xbtn { background: none; border: 0; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; background: var(--void); color: var(--text); border: 1px solid var(--line); border-radius: 4px;
  padding: .55rem .6rem; font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
}
textarea { min-height: 4.2rem; resize: vertical; }
label { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: .5rem 0; }
label input, label select { margin-top: .25rem; }
:focus-visible { outline: 2px solid rgba(var(--c-rgb), .7); outline-offset: 1px; }

/* --- layout ------------------------------------------------------------- */
#main { max-width: 72rem; margin: 0 auto; padding: .8rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.view { display: flex; flex-direction: column; gap: 1rem; }
.foot {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; font-family: var(--mono); font-size: .68rem;
  color: var(--text-3); border-top: 1px solid var(--line); line-height: 1.7;
}

/* banners */
#banners { max-width: 72rem; margin: 0 auto; padding: 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.banner { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 4px; font-size: .88rem; border: 1px solid; }
.banner-amber { border-color: rgba(var(--a-rgb), .55); background: rgba(var(--a-rgb), .08); color: var(--amber); }
.banner-pink { border-color: rgba(var(--p-rgb), .55); background: rgba(var(--p-rgb), .08); color: var(--pink); }
.banner-dismiss { background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }

/* --- glowing panel ---------------------------------------------------- */
.panel {
  border: 1px solid var(--pc, var(--line)); border-radius: 5px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 22px -6px var(--pg, transparent), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}
.tone-cyan  { --pc: rgba(var(--c-rgb), .45); --pg: rgba(var(--c-rgb), .4); --ph: var(--cyan);   --phr: var(--c-rgb); }
.tone-violet{ --pc: rgba(var(--v-rgb), .45); --pg: rgba(var(--v-rgb), .4); --ph: var(--violet); --phr: var(--v-rgb); }
.tone-amber { --pc: rgba(var(--a-rgb), .55); --pg: rgba(var(--a-rgb), .45); --ph: var(--amber); --phr: var(--a-rgb); }
.tone-green { --pc: rgba(var(--g-rgb), .45); --pg: rgba(var(--g-rgb), .35); --ph: var(--green); --phr: var(--g-rgb); }
.tone-pink  { --pc: rgba(var(--p-rgb), .5);  --pg: rgba(var(--p-rgb), .4); --ph: var(--pink);   --phr: var(--p-rgb); }
.panel-head {
  display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; padding: .7rem 1rem;
  border-bottom: 1px solid rgba(var(--phr), .18); background: rgba(var(--phr), .06);
}
.panel-head h3 {
  margin: 0; font-family: var(--mono); font-size: .92rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ph); text-shadow: 0 0 16px rgba(var(--phr), .6);
}
.pn { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: rgba(var(--phr, var(--c-rgb)), .8); }
.panel-head .pt { font-size: .78rem; color: var(--text-3); flex-basis: 100%; }
.panel-body { padding: .5rem 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }

/* today rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "b name meta" "b sub meta"; align-items: center;
  gap: .1rem .7rem; padding: .7rem 1rem; border-bottom: 1px dashed rgba(var(--phr), .14); cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(var(--phr), .05); }
.row .badge { grid-area: b; }
.row-name { grid-area: name; font-weight: 600; }
.row-sub { grid-area: sub; font-size: .82rem; color: var(--text-2); }
.row .meta { grid-area: meta; font-family: var(--mono); font-size: .7rem; text-align: right; }
.meta.g { color: var(--green); } .meta.a { color: var(--amber); } .meta.c { color: var(--cyan); } .meta.p { color: var(--pink); }

/* badges and chips */
.badge {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; padding: .15rem .35rem; border-radius: 3px; border: 1px solid;
}
.badge-outbound { color: var(--cyan); border-color: rgba(var(--c-rgb), .5); }
.badge-inbound { color: var(--green); border-color: rgba(var(--g-rgb), .5); }
.chip {
  display: inline-block; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 3px; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap;
}
.chip.stage-found, .chip.stage-report_made, .chip.stage-emailed { color: var(--cyan); border-color: rgba(var(--c-rgb), .45); }
.chip.stage-replied, .chip.stage-call_booked, .chip.stage-won { color: var(--green); border-color: rgba(var(--g-rgb), .5); }
.chip.stage-lost { color: var(--pink); border-color: rgba(var(--p-rgb), .5); }
.chip.kind-in { color: var(--green); border-color: rgba(var(--g-rgb), .5); }
.chip.kind-out { color: var(--cyan); border-color: rgba(var(--c-rgb), .5); }
.chip.kind-note { color: var(--text-2); }
.chip.kind-stage { color: var(--violet); border-color: rgba(var(--v-rgb), .5); }
.chip.kind-bad { color: var(--pink); border-color: rgba(var(--p-rgb), .6); text-shadow: 0 0 8px rgba(var(--p-rgb), .5); }

/* --- board -------------------------------------------------------------- */
.stage-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .3rem; }
.stage-tab {
  flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text-2);
  font-family: var(--mono); font-size: .7rem; padding: .35rem .7rem; cursor: pointer; white-space: nowrap;
}
.stage-tab b { font-weight: 500; color: var(--text-3); margin-left: .2rem; }
.stage-tab.active { color: var(--cyan); border-color: rgba(var(--c-rgb), .55); box-shadow: 0 0 12px -3px rgba(var(--c-rgb), .5); }
.stage-tab.stage-replied.active, .stage-tab.stage-call_booked.active, .stage-tab.stage-won.active { color: var(--green); border-color: rgba(var(--g-rgb), .55); }
.stage-tab.stage-lost.active { color: var(--pink); border-color: rgba(var(--p-rgb), .55); }
.board { display: flex; flex-direction: column; gap: .8rem; }
.board-column { display: none; }
.board-column.active { display: block; }
.board-column h3 { display: none; }
.board-column-cards { display: flex; flex-direction: column; gap: .5rem; min-height: 3rem; border-radius: 5px; padding: .2rem; }
.board-column-cards.drag-over { outline: 1px dashed rgba(var(--c-rgb), .6); }
.card {
  border: 1px solid var(--line); border-radius: 5px; padding: .6rem .75rem; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 0 16px -8px rgba(var(--c-rgb), .35);
}
.card:hover { border-color: rgba(var(--c-rgb), .45); }
.card-top { display: flex; gap: .5rem; align-items: center; }
.card-name { font-weight: 600; }
.card-next { font-size: .82rem; color: var(--amber); margin-top: .25rem; }
.card-next.muted { color: var(--pink); }
.card-meta { font-family: var(--mono); font-size: .66rem; color: var(--text-3); margin-top: .25rem; }
.empty { font-size: .8rem; padding: .4rem; }

@media (min-width: 900px) {
  .stage-tabs { display: none; }
  .board { flex-direction: row; align-items: flex-start; overflow-x: auto; }
  .board-column { display: block; flex: 1 0 11rem; min-width: 11rem; }
  .board-column-cards { min-height: 14rem; }
  .board-column h3 {
    display: flex; justify-content: space-between; margin: 0 0 .5rem; font-family: var(--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 0 .2rem;
  }
  .board-column.stage-replied h3, .board-column.stage-call_booked h3, .board-column.stage-won h3 { color: var(--green); }
  .board-column.stage-lost h3 { color: var(--pink); }
}

/* --- list --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 5px; }
.list-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 40rem; }
.list-table th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.list-table td { padding: .55rem .7rem; border-bottom: 1px solid rgba(27,38,55,.7); vertical-align: middle; }
.list-table tr[data-slug] { cursor: pointer; }
.list-table tr[data-slug]:hover td { background: rgba(var(--c-rgb), .04); }

/* --- inbox -------------------------------------------------------------- */
.mail { border-bottom: 1px dashed rgba(var(--a-rgb), .18); padding: .6rem 0 .9rem; }
.mail:last-child { border-bottom: 0; }
.mail-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.mail-from { font-weight: 600; }
.mail-ts { margin-left: auto; }
.mail-subject { margin-top: .3rem; color: var(--text); }
.mail-err { margin-top: .3rem; color: var(--pink); font-size: .72rem; }
.mail-body, .tl-body {
  margin: .4rem 0 0; white-space: pre-wrap; word-wrap: break-word; font: inherit; font-size: .84rem; color: var(--text-2);
  max-height: 14rem; overflow: auto; padding: .5rem .6rem; border-left: 2px solid var(--line); background: rgba(0,0,0,.25);
}
.mail-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.mail-actions select { flex: 1 1 12rem; width: auto; }

/* --- business page (drawer) ------------------------------------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(5,7,12,.7); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; z-index: 21; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-left: 1px solid var(--line);
  padding: 1rem 1rem 3rem; padding-top: calc(1rem + env(safe-area-inset-top));
  box-shadow: -10px 0 40px rgba(0,0,0,.6);
}
@media (min-width: 720px) { .drawer { max-width: 32rem; } }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.drawer-header h2 { margin: .1rem 0 0; font-size: 1.25rem; }
.dsec { padding: .8rem 0; border-bottom: 1px dashed rgba(var(--c-rgb), .14); }
.dsec:last-child { border-bottom: 0; }
.dsec h4 { margin: 0 0 .3rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; gap: .6rem; }
.dsec-amber h4 { color: var(--amber); }
.hard { font-family: var(--mono); font-size: .8rem; color: var(--amber); text-shadow: 0 0 12px rgba(var(--a-rgb), .35); margin: 0 0 .4rem; }
.quick-picks { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.quick-picks input[type="date"] { width: auto; flex: 1 1 9rem; padding: .35rem .5rem; font-size: 14px; }
.add-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.add-row .btn { align-self: flex-start; }

/* timeline */
.tl-item { padding: .6rem 0 .6rem .8rem; border-left: 2px solid var(--line); margin: .3rem 0; }
.tl-item.kind-in { border-left-color: var(--green); box-shadow: -6px 0 14px -10px rgba(var(--g-rgb), .8); }
.tl-item.kind-out { border-left-color: var(--cyan); }
.tl-item.kind-stage { border-left-color: var(--violet); }
.tl-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.tl-title { margin-top: .25rem; font-weight: 600; font-size: .92rem; }
.tl-item.kind-stage .tl-title { color: var(--violet); font-family: var(--mono); font-size: .8rem; font-weight: 500; }
.tl-from { font-size: .72rem; }

/* --- modal ------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(5,7,12,.7); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .modal-overlay { align-items: center; } }
.modal {
  width: 100%; max-width: 30rem; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(var(--c-rgb), .35); border-radius: 8px 8px 0 0; padding: 1rem 1rem 2rem;
  box-shadow: 0 0 30px -6px rgba(var(--c-rgb), .4);
}
@media (min-width: 720px) { .modal { border-radius: 8px; } }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* --- login --------------------------------------------------------------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card {
  width: 100%; max-width: 22rem; padding: 1.5rem; border-radius: 6px; border: 1px solid rgba(var(--c-rgb), .4);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 0 30px -6px rgba(var(--c-rgb), .45);
  display: flex; flex-direction: column; gap: .6rem;
}
.login-card form { display: flex; flex-direction: column; gap: .6rem; }
.login-error { color: var(--pink); font-family: var(--mono); font-size: .8rem; }

/* list on a phone: each row becomes a small card */
@media (max-width: 719px) {
  .list-table { min-width: 0; }
  .list-table thead { display: none; }
  .list-table tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; padding: .6rem .7rem; border-bottom: 1px solid rgba(27,38,55,.9); }
  .list-table td { display: block; padding: 0; border: 0; }
  .list-table td:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  .list-table td:nth-child(3), .list-table td:nth-child(4), .list-table td:nth-child(5) { grid-column: 1 / -1; font-size: .8rem; color: var(--text-2); }
  .list-table td:nth-child(4):empty { display: none; }
  .list-table td:nth-child(5) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 720px) {
  .list-table td:last-child { max-width: 26rem; }
  .list-table td { white-space: normal; }
}