:root{--cream:#F7F1E8;--beige:#D8C3A5;--sage:#A8B5A2;--brown:#4B3A2F;--gold:#C8A96A;--white:#FFFDF8;--soft:#6F5747;--sageDark:#7F8D75;--border:rgba(75,58,47,.15);--shadow:0 22px 60px rgba(75,58,47,.13)}.portal-bg{background:radial-gradient(circle at top left,rgba(168,181,162,.28),transparent 35%),var(--cream)}.login-wrap{min-height:100vh;display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;padding:clamp(24px,5vw,80px);align-items:center}.login-box,.panel{background:rgba(255,253,248,.82);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow)}.login-box{padding:clamp(28px,5vw,52px)}.login-box h1{font-size:clamp(44px,7vw,76px)}.login-box form{display:grid;gap:14px;margin:22px 0}.demo-note,.help,.warn{display:grid;gap:4px;padding:16px;border:1px solid rgba(200,169,106,.42);background:rgba(200,169,106,.12);border-radius:16px;color:var(--soft);margin:18px 0}.demo-note b{color:var(--brown)}.small-note{font-size:13px;color:#7D6A58}.login-art{min-height:620px;border-radius:34px;background:radial-gradient(circle at 70% 18%,rgba(200,169,106,.25),transparent 34%),linear-gradient(145deg,rgba(75,58,47,.92),rgba(127,141,117,.82));display:grid;place-items:end;padding:34px;box-shadow:var(--shadow)}.login-art div{background:rgba(255,253,248,.86);border-radius:24px;padding:30px;max-width:430px}.app{min-height:100vh;display:grid;grid-template-columns:292px minmax(0,1fr)}aside{position:sticky;top:0;height:100vh;padding:28px;background:linear-gradient(180deg,#4B3A2F,#2E211A);color:var(--cream);overflow:auto}aside .brand strong,aside .brand em{color:var(--cream)}aside .brand img{background:var(--cream);border-radius:50%}aside nav{display:grid;gap:8px;margin:28px 0}aside nav a{padding:12px 14px;border-radius:13px;color:rgba(247,241,232,.82);font-weight:800}aside nav a:hover,aside nav a.active{background:rgba(168,181,162,.3);color:var(--cream)}.side-note{margin-top:34px;padding:18px;background:rgba(255,253,248,.1);border:1px solid rgba(255,253,248,.12);border-radius:18px}.side-note p{color:rgba(247,241,232,.78)}main{padding:clamp(22px,4vw,46px)}.portal-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.portal-head h1{font-size:clamp(38px,5.5vw,76px);margin-bottom:10px}.portal-head p{color:var(--soft)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.metrics article{padding:22px;background:rgba(255,253,248,.76);border:1px solid var(--border);border-radius:20px;box-shadow:0 15px 30px rgba(75,58,47,.07)}.metrics span,.metrics small{color:#7E6B58;font-size:12px}.metrics strong{display:block;font-family:Georgia,serif;font-size:31px;font-weight:500}.panel{padding:26px;margin-bottom:20px}.grid-form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.full{grid-column:1/-1}.row{display:flex;gap:12px;flex-wrap:wrap}.between{justify-content:space-between;align-items:flex-start}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px;border-bottom:1px solid rgba(75,58,47,.09);font-size:14px}th{color:#7E6B58;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.cards.four{grid-template-columns:repeat(4,1fr)}.cards article{background:rgba(247,241,232,.55);border:1px solid rgba(75,58,47,.11);border-radius:18px;padding:20px}.cards strong{display:block;font-family:Georgia,serif;font-size:30px;font-weight:500;margin:8px 0}.tabs{display:flex;gap:10px;overflow:auto;margin:0 0 20px;padding-bottom:8px}.tab{border:1px solid rgba(75,58,47,.18);border-radius:999px;padding:10px 14px;background:rgba(255,253,248,.68);color:var(--brown);font-weight:800;white-space:nowrap;cursor:pointer}.tab.active{background:var(--sageDark);color:var(--white);border-color:var(--sageDark)}.tabpane{display:none}.tabpane.active{display:block}.break-item{display:grid;gap:6px;margin-bottom:12px}.break-item div{display:flex;justify-content:space-between;gap:10px}.bar{height:9px;background:rgba(168,181,162,.28);border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:var(--sageDark);border-radius:999px}@media print{aside,.tabs,.portal-head .row,.primary-btn,.secondary-btn{display:none!important}.app{display:block}main{padding:0}.panel,.metrics article{box-shadow:none;break-inside:avoid}.tabpane{display:block!important}}@media(max-width:1100px){.login-wrap{grid-template-columns:1fr}.app{grid-template-columns:1fr}aside{position:static;height:auto}.metrics,.cards,.cards.four{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.metrics,.cards,.cards.four,.grid-form{grid-template-columns:1fr}.portal-head,.row{flex-direction:column;align-items:stretch}.login-art{min-height:360px}aside nav{grid-template-columns:1fr 1fr}}


/* V2 status colors + calendar + task folder */
.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;border:1px solid transparent}.status-paid,.row-paid{background:rgba(168,181,162,.22)}.status-paid{color:#4F684B;border-color:rgba(168,181,162,.42)}.status-overdue,.row-overdue{background:rgba(184,92,79,.12)}.status-overdue{color:#9A4B40;border-color:rgba(184,92,79,.28)}.status-unpaid,.row-unpaid,.status-open,.row-open{background:rgba(200,169,106,.16)}.status-unpaid,.status-open{color:#80643A;border-color:rgba(200,169,106,.32)}.status-done{color:#4F684B;background:rgba(168,181,162,.22);border-color:rgba(168,181,162,.42)}.status-admin{color:#6F5747;background:rgba(216,195,165,.28);border-color:rgba(216,195,165,.45)}tr.row-overdue td:first-child{border-left:5px solid rgba(184,92,79,.45)}tr.row-paid td:first-child{border-left:5px solid rgba(168,181,162,.7)}.calendar-shell{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(280px,1.1fr);gap:18px;align-items:start;margin-top:18px}.mini-calendar{background:rgba(247,241,232,.62);border:1px solid rgba(75,58,47,.1);border-radius:20px;padding:18px}.calendar-month-title{font-family:Georgia,serif;font-size:24px;margin-bottom:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-day-name{text-align:center;font-size:11px;font-weight:900;color:#7D6A58;text-transform:uppercase}.calendar-day{min-height:46px;border-radius:12px;background:rgba(255,253,248,.72);border:1px solid rgba(75,58,47,.08);padding:6px;font-size:12px;position:relative}.calendar-day.muted{opacity:.35}.calendar-day.has-event:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);position:absolute;right:7px;bottom:7px}.calendar-list,.task-list{display:grid;gap:10px}.calendar-item,.task-item{padding:14px;border-radius:16px;background:rgba(255,253,248,.76);border:1px solid rgba(75,58,47,.1)}.calendar-item header,.task-item header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}.calendar-item strong,.task-item strong{font-family:Georgia,serif;font-size:18px}.calendar-item p,.task-item p{margin:4px 0 0;color:var(--soft)}.item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.tiny-btn{border:1px solid rgba(75,58,47,.18);background:rgba(247,241,232,.7);color:var(--brown);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900;cursor:pointer}.tiny-btn.danger{color:#9A4B40;border-color:rgba(184,92,79,.3);background:rgba(184,92,79,.08)}.task-board{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.task-board section{border-radius:20px;background:rgba(247,241,232,.48);border:1px solid rgba(75,58,47,.09);padding:18px}@media(max-width:900px){.calendar-shell,.task-board{grid-template-columns:1fr}}


/* V3 email list + simpler color-coded calendar */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 18px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}
.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.calendar-legend i,
.calendar-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.dot-red, .calendar-dot.red { background: #B85C4F; }
.dot-green, .calendar-dot.green { background: #7F8D75; }
.dot-gold, .calendar-dot.gold { background: var(--gold); }
.dot-sage, .calendar-dot.sage { background: var(--sage); }
.dot-beige, .calendar-dot.beige { background: var(--beige); }

.calendar-item.cal-red,
.calendar-day.cal-red {
  background: rgba(184, 92, 79, 0.12);
  border-color: rgba(184, 92, 79, 0.24);
}
.calendar-item.cal-green,
.calendar-day.cal-green {
  background: rgba(168, 181, 162, 0.22);
  border-color: rgba(168, 181, 162, 0.38);
}
.calendar-item.cal-gold,
.calendar-day.cal-gold {
  background: rgba(200, 169, 106, 0.18);
  border-color: rgba(200, 169, 106, 0.32);
}
.calendar-item.cal-sage,
.calendar-day.cal-sage {
  background: rgba(168, 181, 162, 0.16);
  border-color: rgba(168, 181, 162, 0.28);
}
.calendar-item.cal-beige,
.calendar-day.cal-beige {
  background: rgba(216, 195, 165, 0.24);
  border-color: rgba(216, 195, 165, 0.38);
}
.calendar-day.has-event:after { display: none; }
.calendar-day .calendar-dot {
  position: absolute;
  right: 7px;
  bottom: 7px;
}

.status-closed-holiday,
.status-overdue-payment {
  color: #9A4B40;
  background: rgba(184, 92, 79, 0.12);
  border-color: rgba(184, 92, 79, 0.28);
}
.status-report-sent {
  color: #7A5E25;
  background: rgba(200, 169, 106, 0.18);
  border-color: rgba(200, 169, 106, 0.35);
}
.status-missing-papers,
.status-report-due {
  color: #596752;
  background: rgba(168, 181, 162, 0.18);
  border-color: rgba(168, 181, 162, 0.34);
}

.email-tools {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.email-tools > div,
.email-contact {
  background: rgba(247, 241, 232, 0.55);
  border: 1px solid rgba(75, 58, 47, 0.11);
  border-radius: 18px;
  padding: 18px;
}
.email-contact-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}
.email-contact {
  display: grid;
  gap: 6px;
}
.email-contact header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.email-contact label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.email-contact input[type="checkbox"] {
  width: auto;
}
.email-contact p {
  margin: 0;
  color: var(--soft);
}
@media(max-width:900px){.email-tools{grid-template-columns:1fr}}


/* V4 full client management system */
.v4-card-grid,
.payment-list,
.announcement-list,
.notes-list,
.resource-list,
.approval-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.v4-card,
.payment-card,
.announcement-card,
.note-card,
.resource-card,
.approval-card,
.status-client-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(75, 58, 47, 0.11);
  background: rgba(255, 253, 248, 0.72);
}

.v4-card header,
.payment-card header,
.announcement-card header,
.note-card header,
.resource-card header,
.approval-card header,
.status-client-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.v4-card strong,
.payment-card strong,
.announcement-card strong,
.note-card strong,
.resource-card strong,
.approval-card strong,
.status-client-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(247, 241, 232, 0.55);
  border: 1px solid rgba(75, 58, 47, 0.09);
}

.checklist-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 800;
}

.checklist-grid input[type="checkbox"] {
  width: auto;
}

.checklist-items {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--brown-soft, #6F5747);
}

.checklist-item.done::before {
  content: "✓";
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(168, 181, 162, 0.25);
  color: #4F684B;
  font-weight: 900;
}

.checklist-item.missing::before {
  content: "•";
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(184, 92, 79, 0.11);
  color: #9A4B40;
  font-weight: 900;
}

.status-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.status-board section {
  border-radius: 18px;
  border: 1px solid rgba(75, 58, 47, 0.09);
  background: rgba(247, 241, 232, 0.45);
  padding: 14px;
}

.status-board h3 {
  font-size: 21px;
}

.status-column {
  display: grid;
  gap: 10px;
}

.status-select {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 10px;
}

.status-needs-documents,
.status-waiting-on-payment,
.announcement-holiday-closure,
.announcement-payment-reminder,
.payment-overdue {
  background: rgba(184, 92, 79, 0.11);
  border-color: rgba(184, 92, 79, 0.24);
}

.status-completed,
.status-report-sent,
.payment-paid,
.announcement-report-sent {
  background: rgba(168, 181, 162, 0.20);
  border-color: rgba(168, 181, 162, 0.35);
}

.status-ready-for-review,
.announcement-general {
  background: rgba(200, 169, 106, 0.15);
  border-color: rgba(200, 169, 106, 0.28);
}

.status-in-progress,
.announcement-missing-documents {
  background: rgba(216, 195, 165, 0.22);
  border-color: rgba(216, 195, 165, 0.36);
}

.announcement-bar {
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(75, 58, 47, 0.11);
}

.small-note,
.card-note {
  color: var(--brown-soft, #6F5747);
  font-size: 13px;
}

.resource-card pre {
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--brown-soft, #6F5747);
}

@media (max-width: 950px) {
  .checklist-grid,
  .status-board {
    grid-template-columns: 1fr;
  }
}