/* =========================================================
   Back and Sports Injury Clinic — shared styles
   Brand palette taken from the clinic logo:
     navy   #0c5b9d   light blue #00a8f3   orange #ff6700
   ========================================================= */
:root{
  --navy:#0c5b9d;
  --navy-dark:#094876;
  --navy-darker:#073553;
  --blue:#00a8f3;
  --blue-dark:#0092d4;
  --blue-darker:#0077ac;
  --blue-soft:#e8f6fe;
  --orange:#ff6700;
  --orange-dark:#e05a00;
  --orange-soft:#fff1e6;

  --ok:#4caf50;
  --danger:#d9534f;

  --grey-bg:#f4f4f4;
  --line:#e2e2e2;
  --line-strong:#cccccc;
  --text:#333333;
  --muted:#8a8a8a;
  --faint:#b3b3b3;
  --white:#fff;
  --radius:3px;
  --shadow:0 2px 8px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:var(--font, "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
  font-size:14px;
  color:var(--text);
  background:var(--grey-bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
[hidden]{display:none !important}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
body.login-body{
  background:linear-gradient(140deg,var(--navy-dark) 0%,var(--navy) 42%,var(--blue) 100%);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
body.login-body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.15) 0,transparent 38%),
    radial-gradient(circle at 88% 78%,rgba(255,103,0,.20) 0,transparent 44%);
}
.login-card{
  position:relative;width:100%;max-width:420px;background:var(--white);
  border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.32);
  padding:34px 36px 30px;
  border-top:4px solid var(--orange);
}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.login-logo img{width:290px;max-width:100%;height:auto;display:block}
.login-logo h1{margin:0;font-size:18px;font-weight:600;color:var(--navy)}
.login-logo p{margin:0;font-size:13px;color:var(--muted)}

.field{margin-bottom:16px}
.field label{
  display:block;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:#6f7c88;margin-bottom:6px;
}
.field .control{position:relative;display:flex;align-items:center}
.field input[type=text],
.field input[type=password],
.field input[type=email]{
  width:100%;padding:11px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius);font-size:14px;color:var(--text);background:#fdfdfd;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,168,243,.20);background:#fff;
}
.field.has-error input{border-color:var(--danger)}
.toggle-pw{
  position:absolute;right:6px;background:none;border:0;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--blue);
  padding:6px 8px;text-transform:uppercase;
}
.field-error{display:none;margin-top:5px;font-size:12px;color:var(--danger)}
.field.has-error .field-error{display:block}

.login-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;font-size:13px}
.login-row label{display:flex;align-items:center;gap:7px;color:#5f5f5f;cursor:pointer}
.login-row input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--radius);cursor:pointer;
  font-size:14px;font-weight:600;padding:11px 18px;
  transition:background .15s,opacity .15s;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dark)}
.btn-ghost{background:#fff;border:1px solid var(--line-strong);color:#555}
.btn-ghost:hover{background:#f3f3f3}
.btn-block{width:100%}
.btn-sm{padding:6px 10px;font-size:12px}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.login-alert{
  display:none;background:#fdecea;border:1px solid #f5c6c2;color:#a33b36;
  border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-bottom:16px;
}
.login-alert.show{display:block}

.login-hint{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);text-align:center;line-height:1.7;
}
.login-hint code{
  background:#f1f1f1;border:1px solid #e3e3e3;border-radius:2px;
  padding:1px 5px;font-size:12px;color:#444;
}

/* =========================================================
   APP SHELL
   ========================================================= */
body.app-body{display:flex;flex-direction:column;height:100vh;overflow-y:auto}

/* ---- top bar ---- */
.topbar{
  flex:0 0 auto;background:#fff;height:66px;
  display:flex;align-items:center;gap:14px;padding:0 18px;color:var(--navy);
  border-bottom:3px solid var(--blue);
  box-shadow:0 1px 5px rgba(0,0,0,.08);
  position:relative;z-index:40;
}
.tb-divider{flex:0 0 auto;width:1px;height:32px;background:var(--line);margin:0 2px}
.icon-btn{
  background:none;border:0;color:var(--navy);cursor:pointer;padding:6px;
  border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;line-height:0;
}
.icon-btn:hover{background:var(--blue-soft);color:var(--blue-darker)}
.icon-btn svg{width:26px;height:26px;fill:currentColor}
.icon-btn.small svg{width:22px;height:22px}

.date-icon{position:relative;display:inline-flex}
.date-icon .daynum{
  position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-size:10px;font-weight:700;color:#fff;
}

.location-bar {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.location-select {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: white;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  min-width: 160px;
  font-family: inherit;
}

.location-select:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.location-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 168, 243, 0.2);
}

/* Reports Dashboard */
.reports-filters {
  display: flex;
  gap: 15px;
  padding: 18px 20px;
  background: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 25px;
  border: 1px solid #e0e0e0;
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.filter-group label {
  font-weight: 600;
  min-width: 110px;
  margin: 0;
  color: #333;
  font-size: 13px;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  min-width: 140px;
  background: white;
  cursor: pointer;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
  margin-top: 20px;
}

.stat-box {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: white;
  padding: 18px 15px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 168, 243, 0.3);
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 6px;
  line-height: 1.2;
}

.stat-label {
  font-size: 11px;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.charts-header {
  margin: 35px 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--navy);
}

.charts-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.stat-card {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stat-card h4 {
  margin: 0 0 15px 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card small {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--blue-dark);
  font-weight: 500;
}

.stat-card.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-card.clickable:hover {
  box-shadow: 0 4px 16px rgba(0, 168, 243, 0.25);
  transform: translateY(-3px);
  border-color: var(--blue);
}

.data-table-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 30px;
}

.data-table-section h3 {
  margin-top: 0;
  color: var(--navy);
}

.details-container {
  max-height: 400px;
  overflow-y: auto;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.details-table th {
  background: var(--grey-bg);
  padding: 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--line);
  color: var(--navy);
}

.details-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.details-table tr:hover {
  background: var(--blue-soft);
}

/* Location Management Modal */
.loc-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.location-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}

.location-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 168, 243, 0.2);
}

.loc-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 15px;
}

.loc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--grey-bg);
}

.loc-name {
  font-weight: 500;
  flex: 1;
}

.loc-badge {
  display: inline-block;
  background: var(--blue);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.searchbox{position:relative;width:360px;max-width:30vw}
.searchbox input{
  width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 42px 0 14px;font-size:14px;color:#444;background:#fff;
}
.searchbox input::placeholder{color:#9a9a9a}
.searchbox input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.searchbox .search-go{
  position:absolute;right:0;top:0;height:40px;width:40px;background:none;border:0;
  cursor:pointer;color:var(--blue);display:flex;align-items:center;justify-content:center;
}
.searchbox .search-go svg{width:20px;height:20px;fill:currentColor}
.search-results{
  display:none;position:absolute;top:44px;left:0;right:0;margin:0;padding:0;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  color:var(--text);max-height:280px;overflow-y:auto;
}
.search-results.show{display:block}
.search-results li{
  list-style:none;padding:9px 14px;cursor:pointer;font-size:13px;
  border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;gap:10px;
}
.search-results li:last-child{border-bottom:0}
.search-results li:hover,.search-results li.active{background:var(--blue-soft)}
.search-results li.active{box-shadow:inset 3px 0 0 var(--blue);color:var(--navy)}
.search-results li span{color:var(--muted);font-size:12px}
.search-results .empty{color:var(--muted);cursor:default}
.search-results .empty:hover{background:#fff}

.dropdown{position:relative}
.create-btn{
  height:40px;padding:0 20px;border:1px solid var(--orange);background:var(--orange);
  color:#fff;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
}
.create-btn:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.caret{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;display:inline-block;
}

.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:200px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:6px 0;z-index:60;color:var(--text);
}
.dropdown-menu.right{left:auto;right:0}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 16px;font-size:13.5px;color:var(--text);cursor:pointer;
}
.dropdown-menu button:hover{background:var(--blue-soft);color:var(--navy)}
.dropdown-menu .sep{height:1px;background:var(--line);margin:6px 0}

/* ---- Create mega menu ---- */
.create-btn .caret{transition:transform .16s}
.dropdown.open .create-btn{background:var(--orange-dark);border-color:var(--orange-dark)}
.dropdown.open .create-btn .caret{transform:rotate(180deg)}

.create-menu{
  min-width:840px;max-width:calc(100vw - 36px);padding:0;
  border:1px solid #e0e0e0;border-radius:2px;overflow:hidden;
  max-height:calc(100vh - 76px);overflow-y:auto;
}
.dropdown.open .create-menu{display:grid;grid-template-columns:repeat(3,1fr)}

.create-menu .ci{
  display:flex;align-items:flex-start;gap:14px;width:auto;
  padding:17px 14px 17px 18px;background:#fff;color:inherit;
  border:0;border-right:1px solid #ededed;border-bottom:1px solid #ededed;
  text-align:left;cursor:pointer;
}
.create-menu .ci:nth-child(3n){border-right:0}
.create-menu .ci:nth-child(n+10){border-bottom:0}
/* rows 2 and 4 sit on a tint, like the reference */
.create-menu .ci:nth-child(n+4):nth-child(-n+6),
.create-menu .ci:nth-child(n+10):nth-child(-n+12){background:#f7f7f7}
.create-menu .ci:hover{background:var(--orange-soft)}

.create-menu .ic{flex:0 0 auto;color:var(--orange);line-height:0;margin-top:3px}
.create-menu .ic svg{width:30px;height:30px}
.create-menu .tx{flex:1 1 auto;min-width:0}
.create-menu .tt{display:block;font-size:17px;color:#4a4a4a;margin-bottom:3px}
.create-menu .ci:hover .tt{color:var(--navy)}
.create-menu .sb{display:block;font-size:13px;color:#9a9a9a;line-height:1.4}
.create-menu .ch{flex:0 0 auto;align-self:center;color:#c2c2c2;line-height:0}
.create-menu .ch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.create-menu .ci:hover .ch{color:var(--orange)}

@media (max-width:1000px){
  .create-menu{min-width:0;width:calc(100vw - 36px)}
  .dropdown.open .create-menu{grid-template-columns:repeat(2,1fr)}
  .create-menu .ci:nth-child(3n){border-right:1px solid #ededed}
  .create-menu .ci:nth-child(2n){border-right:0}
  .create-menu .ci:nth-child(n+10){border-bottom:1px solid #ededed}
  .create-menu .ci:nth-child(n+11){border-bottom:0}
  .create-menu .ci:nth-child(n+4):nth-child(-n+6),
  .create-menu .ci:nth-child(n+10):nth-child(-n+12){background:#fff}
  .create-menu .ci:hover{background:var(--orange-soft)}
}
@media (max-width:640px){
  .dropdown.open .create-menu{grid-template-columns:1fr}
  .create-menu .ci{border-right:0 !important}
}

.topbar-logo{flex:0 0 auto;display:flex;align-items:center;line-height:0}
.topbar-logo img{height:46px;width:auto;display:block}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* the clock, on every page */
.tb-clock{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  padding:4px 12px;border-radius:8px;background:var(--blue-soft);color:var(--navy);
}
.tb-clock strong{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.tb-clock span{font-size:11.5px;color:#5a6570;white-space:nowrap}
.user-chip{
  display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--navy);
  font-size:15px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:var(--radius);
}
.user-chip:hover{background:var(--blue-soft)}
.badge{
  background:var(--orange);color:#fff;font-size:11px;font-weight:700;
  border-radius:2px;padding:1px 5px;line-height:16px;
}

/* ---- page header ---- */
.page-head{
  flex:0 0 auto;background:var(--grey-bg);display:flex;align-items:center;
  justify-content:space-between;padding:14px 20px;gap:16px;
}
.page-head h2{margin:0;font-size:26px;font-weight:400;color:var(--navy)}
.client-pill{display:flex}
.client-pill .main{
  background:var(--orange);color:#fff;border:0;cursor:pointer;
  min-width:340px;height:44px;font-size:16px;border-radius:var(--radius) 0 0 var(--radius);
}
.client-pill .arrow{
  background:var(--orange);color:#fff;border:0;cursor:pointer;width:52px;height:44px;
  border-left:1px solid rgba(255,255,255,.45);border-radius:0 var(--radius) var(--radius) 0;
  display:flex;align-items:center;justify-content:center;
}
.client-pill .main:hover,.client-pill .arrow:hover{background:var(--orange-dark)}

/* ---- toolbar ---- */
.toolbar{
  flex:0 0 auto;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:22px;padding:10px 20px;
}
.link-btn{background:none;border:0;color:#5b5b5b;font-size:14px;cursor:pointer;padding:6px 2px}
.link-btn:hover{color:var(--blue);text-decoration:underline}

.switch-wrap{display:flex;align-items:center;gap:9px;font-size:14px;color:#5b5b5b}
.switch{
  position:relative;width:46px;height:24px;border-radius:12px;background:#d5d5d5;
  border:0;cursor:pointer;padding:0;transition:background .18s;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#8f8f8f;transition:transform .18s,background .18s;
}
.switch[aria-checked="true"]{background:#bfe4f7}
.switch[aria-checked="true"]::after{transform:translateX(22px);background:var(--blue)}

.range-nav{display:flex;align-items:center;gap:18px;margin:0 auto}
.range-nav .nav-arrow{background:none;border:0;cursor:pointer;color:var(--blue);padding:2px 6px;line-height:0}
.range-nav .nav-arrow svg{width:26px;height:26px;fill:currentColor}
.range-nav .nav-arrow:hover{color:var(--blue-darker)}
/* a fixed width: the arrows must not shuffle as the dates get longer or shorter */
#rangeLabel{font-size:19px;font-weight:600;color:var(--navy);width:360px;text-align:center;
  white-space:nowrap}

.view-switch{display:flex;border-radius:var(--radius);overflow:hidden}
.view-switch button{border:0;cursor:pointer;background:#e6e6e6;color:#5b5b5b;padding:9px 34px;font-size:14px}
.view-switch button + button{border-left:1px solid #d8d8d8}
.view-switch button:hover{background:#dcdcdc}
.view-switch button.active{background:var(--navy);color:#fff}

/* ---- calendar grid ---- */
.cal-wrap{flex:1 1 auto;display:flex;min-height:0;background:#fff}
.side-rail{
  flex:0 0 30px;background:var(--grey-bg);border-right:1px solid var(--line);
  display:flex;justify-content:center;padding-top:12px;
}
.side-rail button{background:none;border:0;cursor:pointer;color:#9a9a9a;font-size:18px;line-height:1}
.side-rail button:hover{color:var(--blue)}

.cal-main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0}

.cal-head{flex:0 0 auto;display:flex;background:var(--grey-bg);border-bottom:1px solid var(--line-strong)}
.cal-head .gutter{flex:0 0 62px}
.cal-head .dcol{
  flex:1 1 0;min-width:0;text-align:center;padding:8px 4px 10px;border-left:1px solid var(--line);
}
.cal-head .dcol .dname{font-size:14px;color:#4a4a4a}
.cal-head .dcol .staff{font-size:15px;font-weight:600;color:var(--navy);margin-top:8px}
.cal-head .dcol.today .dname{color:var(--blue);font-weight:600}

.cal-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative}
.cal-grid{display:flex;position:relative}
.time-gutter{flex:0 0 62px;position:relative}
.time-gutter .tlabel{position:absolute;right:8px;transform:translateY(-50%);font-size:12px;color:#8a8a8a}
.daycols{flex:1 1 auto;display:flex;position:relative;min-width:0}
.daycol{flex:1 1 0;min-width:0;position:relative;border-left:1px solid var(--line);background:#fff}
.daycol.weekend{background:#fafafa}
.daycol.today{background:#f6fbfe}
.hourline{position:absolute;left:0;right:0;border-top:1px solid #ececec}
.halfline{position:absolute;left:0;right:0;border-top:1px dotted #f2f2f2}
.slot{position:absolute;left:0;right:0;cursor:pointer}
.slot:hover{background:rgba(0,168,243,.10)}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--orange);z-index:5;pointer-events:none}
.nowline::before{
  content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--orange);
}

.appt{
  position:absolute;left:4px;right:6px;border-radius:2px;padding:5px 7px;
  font-size:12.5px;line-height:1.35;overflow:hidden;cursor:pointer;z-index:6;
  background:#e8f6fe;border:1px solid var(--blue);border-left:4px solid var(--blue);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.appt:hover{box-shadow:0 2px 6px rgba(0,0,0,.18)}
.appt.is-dragging{
  opacity:.88 !important;
  z-index:99 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.26) !important;
  transform:scale(1.02);
  transition:transform .1s ease,box-shadow .1s ease;
}
.appt .t{font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .s{color:#5a5a5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* background + border are set inline from the status colour; only the
   struck-through cancelled title needs a rule of its own */
.appt.cancelled .t{color:#7a7a7a;text-decoration:line-through}
.appt .grip{
  position:absolute;left:50%;bottom:1px;transform:translateX(-50%);width:22px;height:8px;
  border-top:2px solid #9a9a9a;cursor:ns-resize;
}

/* ---- month view ---- */
.month-view{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:auto;background:#fff}
.mv-head{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  background:var(--grey-bg);border-bottom:1px solid var(--line-strong);
}
.mv-head div{padding:10px 8px;text-align:center;font-size:14px;color:#4a4a4a;border-left:1px solid var(--line)}
.mv-head div:first-child{border-left:0}
.mv-grid{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mv-cell{
  display:flex;flex-direction:column;gap:3px;min-width:0;padding:4px 5px 6px;cursor:pointer;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
}
.mv-cell:nth-child(7n+1){border-left:0}
.mv-cell:hover{background:rgba(0,168,243,.06)}
.mv-cell.weekend{background:#fafafa}
.mv-cell.today{background:#f6fbfe}
.mv-cell.other{background:#f7f7f7}
.mv-cell.other .mv-num{color:var(--faint)}
.mv-num{
  align-self:flex-end;min-width:26px;height:26px;padding:0 6px;border:0;border-radius:13px;
  background:none;font-family:inherit;font-size:13px;color:#4a4a4a;cursor:pointer;
}
.mv-num:hover{background:var(--blue-soft);color:var(--navy)}
.mv-cell.today .mv-num{background:var(--blue);color:#fff;font-weight:700}
.mv-appt{
  display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--blue);border-radius:2px;
  padding:3px 6px;font-family:inherit;font-size:12px;color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mv-appt b{color:var(--navy)}
.mv-appt:hover{box-shadow:0 1px 4px rgba(0,0,0,.18)}
.mv-appt.cancelled{text-decoration:line-through;color:#7a7a7a}
.mv-appt .cmt-flag{padding:0 5px}
.mv-more{
  align-self:flex-start;border:0;background:none;padding:1px 4px;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--blue);cursor:pointer;
}
.mv-more:hover{text-decoration:underline}
@media (max-width:760px){
  .mv-appt{font-size:11px;padding:2px 4px}
  .mv-appt b{display:none}
}

/* ---- list view ---- */
.list-view{padding:0;overflow:auto;flex:1 1 auto;background:#fff}
.list-view table{width:100%;border-collapse:collapse;font-size:14px}
.list-view th{
  text-align:left;background:var(--grey-bg);color:var(--navy);font-weight:600;
  padding:11px 16px;border-bottom:1px solid var(--line-strong);position:sticky;top:0;
}
.list-view td{padding:12px 16px;border-bottom:1px solid var(--line)}
.list-view tr:hover td{background:var(--blue-soft);cursor:pointer}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:9px}
.list-empty{padding:60px 20px;text-align:center;color:var(--muted)}

/* ---- slide-out nav ---- */
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.nav-backdrop.open{opacity:1;pointer-events:auto}
.sidenav{
  position:fixed;top:0;left:0;bottom:0;width:280px;max-width:86vw;background:#fff;color:var(--text);
  z-index:90;transform:translateX(-100%);transition:transform .22s ease,width .22s ease;
  display:flex;flex-direction:column;box-shadow:2px 0 14px rgba(0,0,0,.18);overflow:hidden;
}
.sidenav.open{transform:none}
.sidenav .head{
  flex:0 0 auto;height:118px;padding:14px 18px;background:#fff;
  border-bottom:3px solid var(--blue);display:flex;align-items:center;
}
.sidenav .head img{width:100%;height:auto;display:block}

/* signed-in person: initial in a circle beside name and role */
.sidenav .who{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;margin:14px 12px 6px;padding:10px 12px;
  background:linear-gradient(135deg,var(--blue-soft),#f3f9fd);border-radius:10px;
}
.sidenav .nv-avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
  box-shadow:0 2px 6px rgba(12,91,157,.3);text-transform:uppercase;
}
.sidenav .who-tx{min-width:0;white-space:nowrap;overflow:hidden}
.sidenav .who strong{display:block;font-size:15px;color:var(--navy);overflow:hidden;text-overflow:ellipsis}
.sidenav .who small{display:block;color:var(--muted);font-size:12px;margin-top:1px}

.sidenav nav{padding:6px 12px 10px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto}
.sidenav nav button{
  display:flex;align-items:center;gap:14px;
  width:100%;background:none;border:0;border-radius:9px;margin:2px 0;
  color:#4d5b6b;text-align:left;padding:10px 12px;white-space:nowrap;
  font-size:15px;cursor:pointer;position:relative;
  transition:background .15s,color .15s;
}
.sidenav nav .nv-ic{flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  background:#f2f5f8;transition:background .15s,color .15s}
.sidenav nav .nv-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sidenav nav .nv-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.sidenav nav button:hover{background:var(--blue-soft);color:var(--navy)}
.sidenav nav button:hover .nv-ic{background:#fff;color:var(--blue-darker)}
.sidenav nav button.active{background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.sidenav nav button.active .nv-ic{background:var(--orange);color:#fff;
  box-shadow:0 3px 8px rgba(255,103,0,.35)}
.sidenav nav .nv-chev{flex:0 0 auto;color:#c9ced4;line-height:0}
.sidenav nav .nv-chev svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sidenav nav button:hover .nv-chev,.sidenav nav button.active .nv-chev{color:var(--orange)}

.sidenav .foot{flex:0 0 auto;margin-top:auto;padding:12px;border-top:1px solid #edf0f2}
.sidenav .foot .btn{display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:9px;white-space:nowrap}
.sidenav .foot svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sidenav .foot .btn:hover{color:var(--danger);border-color:var(--danger)}

/* on a wide screen the nav stays docked on the left; the menu button folds it
   down to a rail of icons and back */
@media screen and (min-width:1024px){
  body.app-body{padding-left:280px;transition:padding-left .22s ease}
  .sidenav{transform:none;box-shadow:1px 0 0 var(--line),4px 0 16px rgba(0,0,0,.04)}
  .nav-backdrop{display:none}
  .topbar-logo,.tb-divider{display:none}

  body.nav-mini.app-body{padding-left:76px}
  body.nav-mini .sidenav{width:76px}
  body.nav-mini .sidenav .head{padding:14px 16px;justify-content:center}
  body.nav-mini .sidenav .head img{width:44px;height:44px;object-fit:cover;object-position:left center}
  body.nav-mini .sidenav .who{margin:14px 12px 6px;padding:8px 0;justify-content:center;background:none}
  body.nav-mini .sidenav .who-tx,
  body.nav-mini .sidenav nav .nv-label,
  body.nav-mini .sidenav nav .nv-chev,
  body.nav-mini .sidenav .foot span{display:none}
  body.nav-mini .sidenav nav{padding:6px 10px 10px}
  body.nav-mini .sidenav nav button{justify-content:center;padding:6px 0}
  body.nav-mini .sidenav nav .nv-count{
    position:absolute;top:0;right:4px;margin:0;min-width:17px;height:17px;
    line-height:17px;padding:0 4px;font-size:10px;border:2px solid #fff;box-sizing:content-box}
  body.nav-mini .sidenav .foot{padding:12px 10px}
  body.nav-mini .sidenav .foot .btn{padding-left:0;padding-right:0}
}

/* =========================================================
   APPOINTMENT MODAL
   ========================================================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:56px 16px 32px;overflow-y:auto;
}
.modal-backdrop.hidden{display:none}

.appt-modal{
  width:100%;max-width:1000px;background:#fff;border-radius:2px;
  box-shadow:0 14px 46px rgba(0,0,0,.32);
}
.appt-modal .tools{
  display:flex;align-items:center;justify-content:flex-end;gap:26px;padding:18px 26px 0;
}
.appt-modal .tools button{
  background:none;border:0;cursor:pointer;color:#5a5a5a;line-height:0;padding:2px;
}
.appt-modal .tools button:hover{color:var(--blue)}
.appt-modal .tools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.appt-modal .tools .close{color:#111}
.appt-modal .tools .close:hover{color:var(--danger)}
.appt-modal .tools .close svg{width:25px;height:25px;stroke-width:2.6}

.appt-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;padding:6px 32px 30px}

.fld{margin-bottom:20px}
.fld > label,.fld-label{
  display:block;font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;
}
.fld .value{font-size:19px;color:var(--text);line-height:1.3}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.appt-modal select,
.appt-modal input[type=text],
.appt-modal input[type=date],
.appt-modal input[type=time]{
  width:100%;height:42px;border:1px solid var(--line-strong);border-radius:2px;
  padding:0 34px 0 12px;font-size:15px;font-family:inherit;color:#6b6b6b;background:#fff;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}
.appt-modal input[type=text],
.appt-modal input[type=date]{background-image:none;padding-right:12px}
.appt-modal select:focus,
.appt-modal input:focus,
.appt-modal textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.appt-modal select:disabled{background-color:#f7f7f7;color:#9a9a9a}

/* the client picker on a new booking */
.client-pick{position:relative}
.client-pick input[type=text]{
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}
.client-pick .client-results{top:calc(100% + 4px);z-index:30;border:1px solid var(--line)}

.status-wrap{position:relative}
.status-wrap select{padding-left:32px}
.status-wrap .dot{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;pointer-events:none;
}

.repeat-hint{
  margin:-10px 0 20px;font-size:13px;color:var(--navy);line-height:1.5;
  background:var(--blue-soft);border-left:3px solid var(--blue);padding:9px 12px;border-radius:0 2px 2px 0;
}

.rc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.rc-head .fld-label{margin:0}
.rc-head a{font-size:14px}
.comm-line{color:var(--faint);font-size:15px;margin:0 0 6px}
.comm-line.muted-off{color:#6b6b6b}
.appt-modal textarea{
  width:100%;min-height:118px;border:1px solid var(--line-strong);border-radius:2px;
  padding:10px 12px;font-size:15px;font-family:inherit;color:#555;resize:vertical;
}

.appt-foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  padding-top:28px;gap:16px;
}
.btn-save{
  background:var(--blue);color:#fff;border:0;border-radius:2px;cursor:pointer;
  min-width:220px;padding:15px 30px;font-size:15px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;
}
.btn-save:hover{background:var(--blue-dark)}
.btn-trash{background:none;border:0;cursor:pointer;color:#555;line-height:0;padding:6px}
.btn-trash:hover{color:var(--danger)}
.btn-trash svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- copy / cut / paste mode ---- */
.paste-bar{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;z-index:115;
  background:var(--navy);color:#fff;border-radius:24px;padding:10px 12px 10px 18px;
  box-shadow:0 6px 22px rgba(0,0,0,.3);font-size:14px;
  max-width:calc(100vw - 32px);box-sizing:border-box;
}
.paste-bar.hidden{display:none}
.paste-bar .pb-icon{line-height:0;color:var(--orange);display:flex;align-items:center;flex-shrink:0}
.paste-bar .pb-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paste-bar #pasteText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paste-bar button{
  background:var(--orange);border:0;color:#fff;border-radius:16px;
  padding:7px 18px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;
}
.paste-bar button:hover{background:var(--orange-dark)}

/* while a copy / cut is on the pasteboard every free slot is a drop target */
body.pasting .slot{cursor:copy}
body.pasting .slot:hover{background:rgba(255,103,0,.16);box-shadow:inset 0 0 0 1px var(--orange)}
body.pasting .mv-cell:hover{background:rgba(255,103,0,.12);box-shadow:inset 0 0 0 1px var(--orange)}
.appt.is-copy{border-style:dashed;opacity:.9}
.appt.is-cut{border-style:dashed;opacity:.45;filter:grayscale(60%)}
.mv-appt.is-cut{opacity:.45;border-style:dashed}

@media (max-width:760px){
  .paste-bar{bottom:16px;padding:8px 10px 8px 14px;font-size:12.5px;gap:10px;width:calc(100% - 24px)}
  .paste-bar button{padding:6px 14px;font-size:12px}
}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  background:var(--navy-darker);color:#fff;padding:11px 20px;border-radius:20px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:120;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- responsive ---- */
@media (max-width:1240px){
  .searchbox{width:230px}
  .topbar-logo img{height:38px}
  .client-pill .main{min-width:200px}
  #rangeLabel{font-size:16px;width:300px}
  .view-switch button{padding:9px 18px}
}
@media (max-width:1020px){
  .topbar-logo,.tb-divider{display:none}
}
@media (max-width:860px){
  .appt-cols{grid-template-columns:1fr;gap:0;padding:6px 20px 24px}
  .btn-save{min-width:150px}
}
@media (max-width:760px){
  .toolbar{flex-wrap:wrap;gap:12px}
  .range-nav{order:3;width:100%;margin:0;justify-content:center}
  .searchbox{display:none}
  .page-head{flex-direction:column;align-items:stretch}
  .client-pill .main{min-width:0;flex:1}
}

/* =========================================================
   NOTES PAGE
   ========================================================= */
.note-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;font-size:26px;font-weight:400;color:var(--navy);
}
.note-head .sep{color:var(--line-strong)}
.note-head .for{color:#6b7783;font-size:20px}
.note-head .for strong{color:var(--navy);font-weight:600;font-size:24px}
.swap-btn{
  background:none;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--blue);cursor:pointer;padding:5px;line-height:0;margin-left:2px;
}
.swap-btn:hover{background:var(--blue-soft);border-color:var(--blue)}
.swap-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- tabs ---- */
.note-tabs,
.form-tabs{
  flex:0 0 auto;display:flex;gap:0;padding:0 24px;
  background:#f8fafc;border-bottom:1px solid #e2e8f0;
}
.note-tabs button,
.form-tabs button{
  background:none;border:0;cursor:pointer;
  padding:13px 24px;font-size:14px;font-weight:500;color:#64748b;font-family:inherit;
  position:relative;transition:all .2s ease;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.note-tabs button:hover,
.form-tabs button:hover{
  color:#1e293b;background:#f1f5f9;
}
.note-tabs button.active,
.form-tabs button.active{
  background:transparent;border-bottom-color:var(--blue);color:var(--navy);font-weight:600;
}
.tab-count{
  display:inline-block;min-width:22px;padding:2px 7px;margin-left:8px;
  background:#e0e7ff;color:#3730a3;border-radius:12px;
  font-size:11px;font-weight:700;text-align:center;
}
.tab-count:empty{display:none}
.note-tabs button.active .tab-count,
.form-tabs button.active .tab-count{
  background:var(--orange);color:#fff;
}

/* ---- scrolling body ---- */
.note-wrap,
.form-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;background:#f8fafb;padding:32px 24px 40px;
}

/* ---- the field block above the editor ---- */
.note-form{
  max-width:950px;margin:0 auto 28px;
  background:#fff;border:1px solid #e0e6ed;border-radius:8px;
  padding:28px 32px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.nf-row{
  display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;
  margin-bottom:20px;
}
.nf-row:last-child{margin-bottom:0}
.nf-row > label{
  font-size:14px;font-weight:600;color:#334155;letter-spacing:.3px;text-transform:uppercase;
}
.nf-control{
  display:flex;align-items:center;gap:14px;position:relative;min-width:0;
  flex-wrap:wrap;
}

.note-form select,
.note-form input[type=text]{
  height:42px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:0 14px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;transition:all .2s ease;
}
.note-form input[type=text]{
  width:100%;max-width:500px;
}
.note-form select{
  flex:0 0 auto;width:280px;padding-right:36px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.note-form select:hover,
.note-form input[type=text]:hover{
  border-color:#cbd5e1;background:#fafbfc;
}
.note-form select:focus,
.note-form input:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}
.label-input{width:100%}

.linked-box{display:flex;width:100%;max-width:420px}
.linked-box input{
  flex:1 1 auto;min-width:0;border-radius:var(--radius) 0 0 var(--radius);
  background:#f7f7f7;color:#555;cursor:default;
}
.linked-box button{
  flex:0 0 auto;width:42px;height:38px;cursor:pointer;line-height:0;
  border:1px solid var(--line-strong);border-left:0;border-radius:0 var(--radius) var(--radius) 0;
  background:#fff;color:var(--blue);
}
.linked-box button:hover{background:var(--blue-soft)}
.linked-box button svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.link-menu{
  position:absolute;top:42px;left:0;z-index:50;min-width:340px;max-height:280px;overflow-y:auto;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);
}
.link-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid #f0f0f0;padding:10px 14px;font-size:13.5px;
  color:var(--text);cursor:pointer;font-family:inherit;
}
.link-menu button:last-child{border-bottom:0}
.link-menu button:hover{background:var(--blue-soft);color:var(--navy)}
.link-menu .unlink{color:var(--danger)}
.link-menu .unlink:hover{background:#fdecea;color:var(--danger)}

.check{display:flex;align-items:center;gap:8px;font-size:14px;color:#5a6570;cursor:pointer}
.check input{accent-color:var(--blue);width:15px;height:15px;margin:0}

/* ---- rich text editor ---- */
.editor-shell{
  max-width:950px;margin:0 auto;border:1.5px solid #e0e6ed;border-radius:8px;
  background:#fff;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.editor-shell.full{
  position:fixed;inset:12px;z-index:110;max-width:none;
  box-shadow:0 20px 60px rgba(0,0,0,.3);border-radius:12px;
}

.editor-toolbar{
  flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:12px 14px;background:#f9fafb;border-bottom:1px solid #e5e7eb;
}
.tb-btn{
  min-width:36px;height:36px;padding:0 8px;
  background:#fff;border:1px solid #d1d5db;border-radius:5px;
  color:#4b5563;cursor:pointer;font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:all .15s ease;
}
.tb-btn:hover{background:#f3f4f6;border-color:#9ca3af;color:#1f2937}
.tb-btn.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 4px rgba(12,91,157,.2)}
.tb-btn svg{width:18px;height:18px}
.tb-bold{font-weight:800}
.tb-italic{font-style:italic;font-family:Georgia,serif}
.tb-underline{text-decoration:underline}
.tb-strike{text-decoration:line-through}
.tb-mark{background:#fff3c4;font-weight:700}
.tb-mark:hover{background:#ffe89a}
.tb-var{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--orange)}
.tb-sep{width:1px;height:24px;background:var(--line-strong);margin:0 5px}

.editor-body{
  flex:1 1 auto;min-height:380px;padding:24px 28px;overflow-y:auto;
  font-size:15px;line-height:1.7;color:#1e293b;outline:none;
  background:#fafbfc;
}
.editor-body:focus{background:#fff;box-shadow:inset 0 0 0 2px rgba(0,168,243,.15)}
.editor-body h2{font-size:22px;color:var(--navy);margin:1.2em 0 .5em;font-weight:700}
.editor-body h3{font-size:18px;color:var(--navy);margin:1em 0 .4em;font-weight:600}
.editor-body p{margin:0 0 .85em;color:#334155}
.editor-body ul,.editor-body ol{margin:0 0 .9em;padding-left:28px;color:#334155}
.editor-body li{margin-bottom:.4em;color:#334155}
.editor-body hr{border:0;border-top:1px solid #e2e8f0;margin:1.4em 0;opacity:.6}
.editor-body img{max-width:100%;height:auto;border-radius:6px;margin:.8em 0}
.editor-body a{color:var(--blue);text-decoration:underline;font-weight:500}
.note-table{border-collapse:collapse;width:100%;margin:.8em 0;border-radius:6px;overflow:hidden}
.note-table th,.note-table td{border:1px solid #e2e8f0;padding:10px 12px;text-align:left}
.note-table th{background:var(--blue-soft);color:var(--navy);font-weight:600}
.note-table td{color:#334155}

.editor-status{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;background:#f3f4f6;border-top:1px solid #e5e7eb;
  font-size:12px;color:#6b7280;
}

.tb-popup{
  position:fixed;z-index:130;min-width:170px;padding:5px 0;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.tb-popup button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;padding:8px 14px;font-size:14px;
  color:var(--text);cursor:pointer;font-family:inherit;
}
.tb-popup button:hover{background:var(--blue-soft);color:var(--navy)}
.tb-popup .sw{
  width:14px;height:14px;border-radius:3px;border:1px solid var(--line-strong);display:inline-block;
}

/* ---- existing notes ---- */
.existing-list{max-width:900px;display:flex;flex-direction:column;gap:14px}
.note-card{
  border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius);
  padding:14px 16px;background:#fff;
}
.note-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.09)}
.note-card header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.note-card h4{margin:0;font-size:16px;color:var(--navy);flex:1 1 auto}
.nc-key{
  background:var(--blue-soft);color:var(--navy);border-radius:11px;
  padding:2px 11px;font-size:12px;font-weight:600;
}
.nc-private{
  background:var(--orange-soft);color:var(--orange-dark);border-radius:11px;
  padding:2px 11px;font-size:12px;font-weight:600;
}
.note-card time{color:var(--muted);font-size:12.5px}
.nc-linked{margin:0 0 6px;font-size:13px;color:var(--blue-darker)}
.nc-excerpt{margin:0 0 12px;font-size:14px;color:#5a5a5a;line-height:1.55}
.note-card footer{display:flex;align-items:center;gap:10px}
.nc-author{flex:1 1 auto;font-size:12.5px;color:var(--muted)}
.nc-open,.nc-del{
  border:1px solid var(--line-strong);background:#fff;border-radius:var(--radius);
  padding:6px 15px;font-size:13px;cursor:pointer;font-family:inherit;
}
.nc-open{color:var(--navy)}
.nc-open:hover{background:var(--blue-soft);border-color:var(--blue)}
.nc-del{color:var(--danger)}
.nc-del:hover{background:#fdecea;border-color:#e6b3b1}

/* ---- Form & Assessment Styles ---- */
.form-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;background:#f8fafb;padding:32px 24px 40px;
}

.form-builder{
  max-width:950px;margin:0 auto 28px;
  background:#fff;border:1px solid #e0e6ed;border-radius:8px;
  padding:28px 32px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.fb-row{
  display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;
  margin-bottom:20px;
}
.fb-row:last-child{margin-bottom:0}
.fb-row > label{
  font-size:14px;font-weight:600;color:#334155;letter-spacing:.3px;text-transform:uppercase;
}
.fb-control{
  display:flex;align-items:center;gap:14px;position:relative;min-width:0;
  flex-wrap:wrap;
}

.form-builder select,
.form-builder input[type=text]{
  height:42px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:0 14px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;transition:all .2s ease;
}
.form-builder input[type=text]{
  width:100%;max-width:500px;
}
.form-builder select{
  flex:0 0 auto;width:280px;padding-right:36px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.form-builder select:hover,
.form-builder input[type=text]:hover{
  border-color:#cbd5e1;background:#fafbfc;
}
.form-builder select:focus,
.form-builder input:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}
.form-title-input{width:100%;}

.check{
  display:flex;align-items:center;gap:8px;font-size:14px;color:#5a6570;cursor:pointer;
  margin-left:8px;padding:8px 12px;border-radius:6px;transition:all .15s ease;
}
.check:hover{background:#f1f5f9}
.check input{accent-color:var(--blue);width:16px;height:16px;margin:0;cursor:pointer}

/* ---- existing forms ---- */
.form-card{
  border:1.5px solid #e0e6ed;border-left:4px solid var(--blue);border-radius:8px;
  padding:18px 20px;background:#fff;transition:all .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.form-card:hover{
  border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,168,243,.08);
  transform:translateY(-1px);
}
.form-card header{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.form-card h4{
  margin:0;font-size:16px;font-weight:600;color:#1e293b;flex:1 1 auto;
}
.fc-type{
  background:#dbeafe;color:var(--navy);border-radius:6px;
  padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.fc-confidential{
  background:#fed7aa;color:#9a3412;border-radius:6px;
  padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.form-card time{
  color:#6b7280;font-size:12px;font-weight:500;
}
.fc-excerpt{
  margin:0 0 14px;font-size:14px;color:#475569;line-height:1.6;
}
.form-card footer{
  display:flex;align-items:center;gap:10px;border-top:1px solid #f1f5f9;padding-top:12px;
}
.fc-author{
  flex:1 1 auto;font-size:12px;color:#6b7280;font-weight:500;
}
.fc-open,.fc-del{
  border:1px solid #d1d5db;background:#fff;border-radius:5px;
  padding:6px 14px;font-size:12px;cursor:pointer;font-family:inherit;
  font-weight:500;transition:all .15s ease;
}
.fc-open{color:var(--navy)}
.fc-open:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}
.fc-del{color:#dc2626}
.fc-del:hover{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* ---- Task & Reminder Styles ---- */
.task-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;background:#f8fafb;padding:40px 24px 50px;
}

.task-form{
  max-width:650px;margin:0 auto;
  background:#fff;border:1px solid #e0e6ed;border-radius:8px;
  padding:40px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.tf-row{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:28px;
}
.tf-row:last-child{margin-bottom:0}
.tf-row > label{
  font-size:13px;font-weight:700;color:#1e293b;letter-spacing:.5px;text-transform:uppercase;
  display:block;
}
.tf-control{
  display:flex;flex-direction:column;gap:0;
}

.task-input,
.task-select{
  height:44px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:0 16px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;transition:all .2s ease;
  width:100%;
}
.task-input::placeholder{color:#9ca3af;font-weight:400}
.task-input:hover,
.task-select:hover{
  border-color:#cbd5e1;background:#fafbfc;
}
.task-input:focus,
.task-select:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}

.task-select{
  padding-right:40px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  cursor:pointer;
}

.task-textarea{
  min-height:110px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:14px 16px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;resize:vertical;transition:all .2s ease;
  line-height:1.6;
  width:100%;
}
.task-textarea::placeholder{color:#9ca3af;font-weight:400}
.task-textarea:hover{
  border-color:#cbd5e1;background:#fafbfc;
}
.task-textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}

.check{
  display:flex;align-items:center;gap:10px;font-size:14px;color:#475569;cursor:pointer;
  padding:10px 12px;border-radius:6px;transition:all .15s ease;
  margin-top:4px;
}
.check:hover{background:#f1f5f9}
.check input{accent-color:var(--blue);width:18px;height:18px;margin:0;cursor:pointer;flex-shrink:0}

/* ---- Attachment & File Upload Styles ---- */
.attachment-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;background:#f8fafb;padding:40px 24px 50px;
}

.attach-section{
  max-width:700px;margin:0 auto 36px;
  background:#fff;border:1px solid #e0e6ed;border-radius:8px;
  padding:40px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.attach-section:last-child{margin-bottom:0}

.attach-header{margin-bottom:32px}
.attach-header h3{
  margin:0 0 14px;font-size:18px;font-weight:700;color:#1e293b;
}
.attach-header p{
  margin:0 0 16px;font-size:14px;color:#475569;line-height:1.6;
}

.attach-warning{
  background:#fef3c7;border:1px solid #fcd34d;border-radius:6px;
  padding:14px 16px;font-size:13px;color:#92400e;line-height:1.6;
  margin-top:16px;
}
.attach-warning strong{font-weight:600}

.attach-content{text-align:center}

.upload-icon{
  width:180px;height:140px;margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;
}
.upload-icon svg{
  width:100%;height:100%;
}

.btn-upload{
  background:#0284c7;color:#fff;font-weight:600;font-size:14px;
  padding:14px 32px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;display:inline-block;
  letter-spacing:.3px;
}
.btn-upload:hover{
  background:#0369a1;box-shadow:0 4px 12px rgba(2,132,199,.3);
  transform:translateY(-1px);
}
.btn-upload:active{transform:scale(.98)}

.attach-help{
  margin-top:20px;font-size:13px;
}
.attach-help a{
  color:var(--blue);font-weight:500;text-decoration:none;
  transition:all .2s ease;
}
.attach-help a:hover{text-decoration:underline;color:#0369a1}

.external-link-form{
  display:grid;grid-template-columns:1fr auto;gap:12px;
  max-width:500px;margin:0 auto;
}

.ext-input{
  height:44px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:0 16px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;transition:all .2s ease;
}
.ext-input::placeholder{color:#9ca3af}
.ext-input:hover{border-color:#cbd5e1;background:#fafbfc}
.ext-input:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}

.btn-link{
  background:var(--blue);color:#fff;font-weight:600;font-size:13px;
  padding:11px 22px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;
}
.btn-link:hover{
  background:#0369a1;box-shadow:0 2px 8px rgba(0,168,243,.2);
}
.btn-link:active{transform:scale(.98)}

.btn-success{
  background:#22c55e;color:#fff;font-weight:600;font-size:14px;
  padding:11px 28px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;
}
.btn-success:hover{
  background:#16a34a;box-shadow:0 2px 8px rgba(34,197,94,.2);
}
.btn-success:active{transform:scale(.98)}

.btn-secondary{
  background:#6b7280;color:#fff;font-weight:600;font-size:14px;
  padding:11px 22px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;
}
.btn-secondary:hover{
  background:#4b5563;box-shadow:0 2px 8px rgba(107,114,128,.2);
}
.btn-secondary:active{transform:scale(.98)}

/* ---- bottom action bar ---- */
.action-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:18px 24px;background:#f9fafb;border-top:1px solid #e5e7eb;
}
.action-bar .ab-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ab-icon{color:var(--navy)}
.ab-icon svg{width:22px;height:22px;fill:none}
.btn-primary{
  background:var(--orange);color:#fff;font-weight:600;font-size:14px;
  padding:11px 28px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;
}
.btn-primary:hover{background:var(--orange-dark);box-shadow:0 2px 8px rgba(255,103,0,.2)}
.btn-primary:active{transform:scale(.98)}
.btn-cancel{
  background:#ef4444;color:#fff;font-weight:600;font-size:14px;
  padding:11px 28px;border:0;border-radius:6px;cursor:pointer;
  transition:all .2s ease;
}
.btn-cancel:hover{background:#dc2626;box-shadow:0 2px 8px rgba(239,68,68,.2)}
.btn-cancel:active{transform:scale(.98)}

/* ---- Message & Email Styles ---- */
.msg-tabs{
  flex:0 0 auto;display:flex;gap:0;padding:0 24px;
  background:#f8fafc;border-bottom:1px solid #e2e8f0;
}
.msg-tabs button{
  background:none;border:0;cursor:pointer;
  padding:13px 24px;font-size:14px;font-weight:500;color:#64748b;font-family:inherit;
  position:relative;transition:all .2s ease;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.msg-tabs button:hover{color:#1e293b;background:#f1f5f9}
.msg-tabs button.active{
  background:transparent;border-bottom-color:var(--blue);color:var(--navy);font-weight:600;
}

.msg-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;background:#f8fafb;padding:32px 24px 40px;
}

.msg-pane{display:none}
.msg-pane.active{display:block}

.msg-form{
  max-width:650px;margin:0 auto;
  background:#fff;border:1px solid #e0e6ed;border-radius:8px;
  padding:32px;box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.mf-row{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:24px;
}
.mf-row:last-child{margin-bottom:0}
.mf-row > label{
  font-size:13px;font-weight:700;color:#1e293b;letter-spacing:.5px;text-transform:uppercase;
}

.msg-input,.msg-select,.msg-textarea{
  height:44px;border:1.5px solid #e0e6ed;border-radius:6px;
  padding:0 16px;font-size:14px;font-family:inherit;color:#1e293b;
  background:#fff;transition:all .2s ease;width:100%;
}
.msg-textarea{height:auto;min-height:100px;padding:12px 16px;resize:vertical}
.msg-input::placeholder,.msg-textarea::placeholder{color:#9ca3af}
.msg-input:hover,.msg-select:hover,.msg-textarea:hover{border-color:#cbd5e1;background:#fafbfc}
.msg-input:focus,.msg-select:focus,.msg-textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,168,243,.12), inset 0 1px 2px rgba(0,0,0,.05);
}

.msg-select{
  padding-right:40px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;cursor:pointer;
}

.et-box{max-width:1200px;margin:0 auto}
.et-filter .cl-search input{padding:0 12px}
.et-filter select{min-width:160px}
#etBody{background:#fff;border:1px solid var(--line);border-radius:6px}
.et-table{min-width:1000px}
.et-table td{vertical-align:top}
.et-date{white-space:nowrap}
.et-acts{white-space:nowrap;width:170px}
.et-acts .btn{padding:5px 12px;font-size:12.5px;margin-left:6px}
.ob-kind.email{background:#e8f5e9;color:#2e7d32}

@media (max-width:820px){
  .nf-row{flex-direction:column;align-items:stretch;gap:6px}
  .nf-row > label{flex:none}
  .nf-control{flex-wrap:wrap}
  .note-form select{width:100%}
  .note-head{font-size:21px}
  .note-head .for strong{font-size:20px}
  .action-bar{flex-wrap:wrap}
}

/* =========================================================
   CLIENT SUMMARY
   ========================================================= */
.cs-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff}

/* ---- tab strip ---- */
.cs-tabs{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:2px;
  padding:10px 24px 0;border-bottom:1px solid var(--line-strong);background:#fff;
}
.cs-tabs button{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid transparent;border-bottom:0;cursor:pointer;
  padding:9px 15px;font-size:14.5px;font-family:inherit;color:var(--blue);
  border-radius:var(--radius) var(--radius) 0 0;position:relative;top:1px;white-space:nowrap;
}
.cs-tabs button svg{width:17px;height:17px;flex:0 0 auto}
.cs-tabs button:hover{background:var(--blue-soft)}
.cs-tabs button.active{
  background:#fff;border-color:var(--line-strong);color:var(--text);font-weight:600;
}
.cs-tabs button.active svg{color:var(--navy)}

/* ---- pane ---- */
.cs-pane{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 24px 30px}

.cs-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.cs-bar .cs-new{margin-left:auto;padding:9px 18px}
.cs-bar .cs-bar-right{margin-left:auto;display:flex;gap:10px}

/* grid / list segmented control */
.seg{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong)}
.seg button{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:0;cursor:pointer;font-family:inherit;
  padding:9px 18px;font-size:14px;color:#5b5b5b;
}
.seg button + button{border-left:1px solid var(--line-strong)}
.seg button svg{width:16px;height:16px}
.seg button:hover{background:var(--blue-soft)}
.seg button.on{background:var(--blue);color:#fff}

.cs-filter{display:flex;align-items:center;gap:12px;font-size:14px;color:#5a6570}
.cs-filter select{
  height:38px;min-width:230px;padding:0 34px 0 12px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-size:14px;font-family:inherit;color:var(--text);background:#fff;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:17px;
}
.cs-filter select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}

/* ---- tables ---- */
.cs-table-wrap{overflow-x:auto}
.cs-table{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
.cs-table th{
  text-align:left;padding:10px 14px;font-weight:700;color:var(--navy);
  border-bottom:2px solid var(--line-strong);white-space:nowrap;
}
.cs-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.cs-table tbody tr:nth-child(even){background:#fafafa}
.cs-table tbody tr:hover{background:var(--blue-soft)}
.cs-table a{color:var(--blue)}
.cs-table a:hover{text-decoration:underline}

.cs-row-act{width:48px;text-align:right}
.cs-row-act button{
  background:none;border:0;cursor:pointer;color:#b5b5b5;padding:4px;line-height:0;
  border-radius:var(--radius);
}
.cs-row-act button:hover{color:var(--danger);background:#fdecea}
.cs-row-act svg{width:18px;height:18px}

/* draft / final pill, clickable in the grid */
.nc-status{
  display:inline-block;border:0;border-radius:11px;padding:3px 12px;
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
}
.nc-status.draft{background:#efefef;color:#6b6b6b}
.nc-status.final{background:#e7f6e8;color:#2e7d32}
button.nc-status:hover{box-shadow:0 0 0 2px rgba(0,168,243,.35)}
span.nc-status{cursor:default}

/* ---- summary cards ---- */
.cs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;max-width:1100px}
.cs-card{border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:var(--radius);padding:18px 20px}
.cs-card h3{margin:0 0 14px;font-size:16px;color:var(--navy)}
.cs-card dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0}
.cs-card dt{color:#7a838c;font-size:13.5px}
.cs-card dd{margin:0;color:var(--text);font-size:14px;text-align:right;word-break:break-word}

/* ---- empty state ---- */
.cs-empty{padding:60px 20px;text-align:center;color:var(--muted)}
.cs-empty strong{display:block;font-size:16px;color:#5a6570;margin-bottom:6px;font-weight:600}
.cs-empty p{margin:0;font-size:14px}

@media (max-width:900px){
  .cs-tabs{padding:8px 12px 0}
  .cs-tabs button{padding:8px 11px;font-size:13.5px}
  .cs-pane{padding:16px 12px 26px}
  .cs-bar .cs-new{margin-left:0}
  .cs-filter select{min-width:0;width:100%}
}

/* ---- Client tab: two columns of panels ---- */
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.cs-col{display:flex;flex-direction:column;gap:22px;min-width:0}

.panel{border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;overflow:hidden}
.panel > header{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-bottom:1px solid var(--line);background:#fff;
}
.panel > header h3{margin:0;flex:1 1 auto;font-size:17px;font-weight:400;color:#4a4a4a}
.p-ico{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius);
  background:var(--blue-soft);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.p-ico svg{width:19px;height:19px}
.edit-btn{
  flex:0 0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:#5b5b5b;cursor:pointer;font-family:inherit;font-size:12px;padding:5px 11px;
}
.edit-btn:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}
.p-body{padding:14px 16px;font-size:14px;color:var(--text);line-height:1.6}

/* ---- the record table inside a panel ---- */
.rec-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.rec-table th{
  width:150px;text-align:left;vertical-align:top;font-weight:400;color:#5a6570;
  padding:10px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  background:#fafafa;word-break:break-word;
}
.rec-table td{
  padding:10px 14px;border-bottom:1px solid var(--line);
  color:var(--text);line-height:1.55;word-break:break-word;
}
.rec-table tr:last-child th,.rec-table tr:last-child td{border-bottom:0}
.rec-table tr:nth-child(even) td{background:#fafafa}
.rec-table a{color:var(--blue)}
.rec-table a:hover{text-decoration:underline}
.rec-none{color:var(--muted)}
.mini-btn{
  margin-top:8px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:#5b5b5b;cursor:pointer;font-family:inherit;font-size:12.5px;padding:5px 12px;
}
.mini-btn:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:var(--blue-soft);color:var(--navy);border-radius:12px;
  padding:4px 12px;font-size:13px;font-weight:600;
}

/* ---- latest activity ---- */
.activity{list-style:none;margin:0;padding:0}
.activity li{
  display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:11px 16px 11px 30px;border-bottom:1px solid var(--line);
  font-size:13.5px;position:relative;
}
.activity li:last-child{border-bottom:0}
.activity li::before{
  content:"";position:absolute;left:14px;top:16px;width:8px;height:8px;border-radius:50%;
}
.activity li.act-note::before{background:var(--blue)}
.activity li.act-appt::before{background:var(--orange)}
.act-when{color:var(--muted);white-space:nowrap}
.act-text{color:var(--text)}
.act-by{color:var(--muted);white-space:nowrap}

/* ---- edit details modal ---- */
.edit-modal{
  width:100%;max-width:560px;background:#fff;border-radius:3px;
  box-shadow:0 14px 46px rgba(0,0,0,.32);display:flex;flex-direction:column;max-height:100%;
}
.edit-modal > header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--navy);color:#fff;border-radius:3px 3px 0 0;
}
.edit-modal > header h3{margin:0;font-size:17px;font-weight:600}
.edit-modal > header button{
  background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;
}
.edit-modal .body{padding:18px;overflow-y:auto}
.edit-modal > footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 18px;border-top:1px solid var(--line);
}

.ef-row{margin-bottom:14px}
.ef-row label{display:block;font-size:13px;font-weight:600;color:#5a6570;margin-bottom:6px}
.ef-row input,
.ef-row select,
.ef-row textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.ef-row textarea{min-height:70px;resize:vertical}
.ef-row input:focus,
.ef-row select:focus,
.ef-row textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.ef-row small{display:block;margin-top:5px;font-size:12px;color:var(--muted)}

/* ---- settings: company details ---- */
.co-logo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 22px;
  padding:16px;border:1px solid var(--line);border-radius:8px;background:#fafcfe;max-width:900px}
.co-logo-box{flex:0 0 auto;width:260px;height:110px;background:#fff;border:1px dashed var(--line-strong);
  border-radius:6px;display:flex;align-items:center;justify-content:center;padding:10px}
.co-logo-box img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.co-logo-tx{flex:1 1 240px;min-width:0}
.co-logo-tx strong{display:block;color:var(--navy);font-size:15px;margin-bottom:4px}
.co-logo-tx small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.co-logo-tx .co-pending{color:var(--orange-dark);font-weight:600;margin-top:4px}
.co-logo-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.co-logo-btns label.btn{cursor:pointer}
.co-theme{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 16px}
.co-colour{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fafcfe;cursor:pointer}
.co-colour input[type="color"]{flex:0 0 auto;width:46px;height:46px;padding:0;border:1px solid var(--line-strong);
  border-radius:8px;background:#fff;cursor:pointer}
.co-colour input[type="color"]::-webkit-color-swatch-wrapper{padding:3px}
.co-colour input[type="color"]::-webkit-color-swatch{border:0;border-radius:5px}
.co-colour span{min-width:0}
.co-colour strong{display:block;font-size:13.5px;color:var(--text)}
.co-colour small{display:block;font-size:11.5px;color:var(--muted);line-height:1.4}
.co-colour code{display:inline-block;margin-top:3px;font-size:11px;color:#5a6570;text-transform:uppercase}
.co-theme-reset{display:flex;align-items:flex-end}

/* ---- the All notes page ---- */
.notes-find{
  height:40px;border:1px solid var(--line-strong);border-radius:6px;padding:0 12px;
  font-family:inherit;font-size:14px;
}
.notes-find:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18)}
.an-filter{align-items:center}
.an-filter .an-search{flex:1 1 300px;max-width:420px;margin:0}
.an-filter select{height:40px;border:1px solid var(--line-strong);border-radius:6px;padding:0 10px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--text)}
.an-table{min-width:1100px}
.an-table .an-excerpt{max-width:340px;color:#5a6570;font-size:13px}
.an-private{background:#fff4e0;color:#a15c00}

/* ---- the month picker under the date heading ---- */
.mini-cal{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;
  width:288px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(12,32,56,.18);
}
.mini-cal::before{
  content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}
.mini-cal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mini-cal header strong{font-size:14.5px;color:var(--navy)}
.mini-cal .mc-title{display:flex;gap:4px}
.mini-cal .mc-title select{
  border:1px solid transparent;border-radius:6px;padding:3px 4px;background:#fff;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;
}
.mini-cal .mc-title select:hover,.mini-cal .mc-title select:focus{
  border-color:var(--line);background:var(--blue-soft);outline:none;
}
.mini-cal .mc-step{
  border:0;background:var(--blue-soft);color:var(--navy);border-radius:8px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.mini-cal .mc-step:hover{background:var(--blue);color:#fff}
.mini-cal .mc-step svg{width:16px;height:16px}
.mini-cal .mc-names{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.mini-cal .mc-names span{text-align:center;font-size:11px;font-weight:600;color:var(--muted)}
.mini-cal .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mc-day{
  position:relative;border:0;background:none;border-radius:8px;padding:0;height:34px;
  font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;
}
.mc-day:hover{background:var(--blue-soft);color:var(--navy)}
.mc-day.other{color:var(--faint)}
.mc-day.shown{background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.mc-day.today{box-shadow:inset 0 0 0 2px var(--blue);font-weight:700;color:var(--navy)}
.mc-day.today.shown{background:var(--orange-soft)}
.mc-day i{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
.mc-day.full i{background:var(--orange);box-shadow:-7px 0 0 var(--orange),7px 0 0 var(--orange)}
.mini-cal footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
}
.mini-cal .mc-key{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.mini-cal .mc-key i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block}
.mini-cal .mc-today{
  border:0;background:var(--navy);color:#fff;border-radius:7px;padding:5px 14px;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.mini-cal .mc-today:hover{background:var(--navy-dark)}
#rangeLabel.on{background:var(--blue-soft)}

/* ---- the client list's page buttons ---- */
.cl-pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pg-buttons{display:flex;align-items:center;gap:4px;margin:0 auto}
.cl-pager button{border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:6px;padding:5px 10px;font-size:13px;font-family:inherit;cursor:pointer;min-width:34px}
.cl-pager button:hover:not(:disabled){background:var(--blue-soft);border-color:var(--blue)}
.cl-pager button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.cl-pager button:disabled{color:var(--faint);cursor:default}
.pg-gap{padding:0 2px;color:var(--faint)}
.pg-size select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;
  font-family:inherit;font-size:13px;color:var(--text);background:#fff}

/* ---- note templates window ---- */
.tpl-list{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.tpl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tpl-row:last-child{border-bottom:0}
.tpl-row:nth-child(even){background:#fafbfd}
.tpl-name{flex:1 1 auto;font-size:14px;font-weight:600;color:var(--navy);min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.tpl-sub{flex:0 0 auto;font-size:12px;color:var(--muted)}
.tpl-acts{flex:0 0 auto;display:flex;gap:6px}
.tpl-acts .btn{padding:5px 10px;font-size:13px}

/* ---- consent form page ---- */
.cons-form{max-width:820px}
.cons-hint{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.cons-file{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;background:#fafcfe}
.cons-file.missing{border-color:#e6b3b1;background:#fdf3f2}
.cons-ic{flex:0 0 auto;width:42px;height:42px;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--navy)}
.cons-ic svg{width:22px;height:22px}
.cons-file-tx{flex:1 1 auto;min-width:0}
.cons-file-tx strong{display:block;font-size:14px;color:var(--navy);overflow:hidden;text-overflow:ellipsis}
.cons-file-tx small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cons-body{min-height:220px;font-size:14px;line-height:1.6}
.cons-preview{width:100%;height:520px;border:1px solid var(--line);border-radius:8px;background:#f7f9fb}
@media (max-width:700px){
  .cons-file{flex-wrap:wrap}
  .cons-preview{height:380px}
}

@media (max-width:1080px){
  .cs-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rec-table th{width:110px;font-size:13px}
  .activity li{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* =========================================================
   DOCUMENTS
   ========================================================= */
.gallery-tabs{
  display:flex;gap:2px;padding:0 24px;
  border-bottom:1px solid var(--line-strong);background:#fff;
}
.gallery-tabs button{
  background:none;border:1px solid transparent;border-bottom:0;cursor:pointer;
  padding:11px 20px;font-size:14.5px;font-family:inherit;color:var(--blue);
  border-radius:var(--radius) var(--radius) 0 0;position:relative;top:1px;
}
.gallery-tabs button:hover{background:var(--blue-soft)}
.gallery-tabs button.active{
  background:#fff;border-color:var(--line-strong);color:var(--text);font-weight:600;
}

.gal-table{width:100%;border-collapse:collapse;font-size:14px}
.gal-table th{
  text-align:left;padding:12px 16px;font-weight:700;color:var(--navy);
  border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
.gal-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.gal-table tbody tr:nth-child(odd){background:#fafafa}
.gal-table tbody tr:hover{background:var(--blue-soft);cursor:pointer}
.gal-table a{color:var(--blue)}
.gal-table a:hover{text-decoration:underline}

/* ---- the name row above the editor ---- */
.doc-form{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 24px 6px;
}
.doc-form > label{font-size:14px;color:#5a6570}
.doc-form input[type=text]{
  width:100%;max-width:420px;height:40px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 12px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.doc-form input[type=text]:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}

/* ---- the sheet of paper ---- */
.doc-page{
  background:#fff;padding:26px 30px 40px;
}
.doc-letterhead{margin-bottom:26px}
.doc-letterhead img{height:64px;width:auto;display:block}

/* ---- export buttons in the action bar ---- */
.ab-export{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;font-size:13px;font-weight:700;letter-spacing:.4px;
}
.ab-export svg{width:16px;height:16px}
.ab-export:hover{border-color:var(--blue);color:var(--navy)}

@media (max-width:760px){
  .gallery-tabs{padding:0 12px}
  .doc-form{padding:14px 12px 4px}
  .doc-page{padding:18px 16px 30px}
}

/* only the letter itself reaches the printer / the PDF */
@media print{
  .gallery-tabs,.doc-form,.gal-table{display:none !important}
  .doc-page{padding:0}
  .doc-letterhead img{height:56px}
}

/* =========================================================
   INVOICING
   ========================================================= */
.inv-tabs{padding-top:10px}
.inv-tabs button{padding:9px 14px}

/* ---- filter row ---- */
.inv-filter{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;
  font-size:14px;color:#5a6570;
}
.inv-filter input[type=date],
.inv-filter select,
.inv-filter .inv-search{
  height:38px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 12px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.inv-filter .inv-search{min-width:210px}
.inv-filter input:focus,.inv-filter select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.inv-filter .btn{padding:9px 20px}
.inv-filter .check{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}

.inv-income{margin:0 0 14px;text-align:right;font-size:14px;color:#5a6570}
.inv-income strong{color:var(--navy);font-size:15px}

.inv-table{min-width:1180px}

/* ---- paid / unpaid pill ---- */
.pay-pill{
  display:inline-block;border-radius:11px;padding:3px 11px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pay-pill.not-paid{background:#fdecec;color:#c62828}
.pay-pill.part-paid{background:#fff3e0;color:#ef6c00}
.pay-pill.paid{background:#e7f6e8;color:#2e7d32}
.pay-pill.written-off{background:#efefef;color:#6b6b6b}

/* ---- create invoice ---- */
.inv-section{padding:22px 24px 6px}
.inv-section h3{margin:0 0 14px;font-size:20px;font-weight:400;color:var(--navy)}
.inv-section .btn{margin-top:14px}

.pick-table th.tick,.pick-table td.tick{width:46px;text-align:center}
.pick-table input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.pick-table select{
  height:38px;min-width:150px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 10px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.cost-input{
  width:100px;height:36px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 10px;font-size:14px;font-family:inherit;color:var(--text);text-align:right;
}
.cost-input:focus,.pick-table select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.rec-none.pad{padding:18px 4px}

.inv-summary{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.inv-fields{flex:1 1 320px;max-width:440px}
.inv-fields .ef-row{margin-bottom:14px}

.inv-totals{
  flex:0 0 auto;min-width:260px;margin:0;
  display:grid;grid-template-columns:1fr auto;gap:8px 24px;
  border:1px solid var(--line-strong);border-top:3px solid var(--blue);
  border-radius:var(--radius);padding:16px 20px;
}
.inv-totals dt{color:#5a6570;font-size:14px}
.inv-totals dd{margin:0;text-align:right;font-size:14px;color:var(--text)}
.inv-totals .grand{font-weight:700;color:var(--navy);font-size:16px}

/* ---- the invoice itself ---- */
.edit-modal.wide{max-width:760px}
.inv-doc{padding:4px 2px}
.inv-head{display:flex;justify-content:space-between;gap:24px;font-size:13.5px;line-height:1.6;margin-bottom:18px}
.inv-bill{font-size:13.5px;line-height:1.7;margin:0 0 16px}
.inv-doc .inv-totals{margin-top:18px;margin-left:auto;max-width:320px}
.inv-comment{margin-top:16px;font-size:13.5px;color:#5a6570;font-style:italic}

/* ---- the invoice document ---- */
.ivx{--ivx-ink:#1f2d3d;--ivx-soft:#6b7785;--ivx-rule:#e3e8ee;--ivx-tint:#f5f8fb;
  color:var(--ivx-ink);font-size:13px;line-height:1.5;position:relative;padding:22px 26px 18px;
  background:#fff;border-top:6px solid var(--navy)}
.ivx::before{content:"";position:absolute;top:-6px;right:0;width:32%;height:6px;background:var(--orange)}
.ivx h4{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--orange-dark)}

.ivx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:18px;border-bottom:1px solid var(--ivx-rule)}
.ivx-brand img{height:90px;width:auto;max-width:300px;object-fit:contain;display:block;margin-bottom:10px}
.ivx-brand p{margin:0;font-size:12px;line-height:1.6;color:var(--ivx-ink);max-width:340px}
.ivx-brand p strong{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}
.ivx-brand p span{color:var(--ivx-soft)}
.ivx-title{text-align:right;flex:0 0 auto}
.ivx-title h1{margin:0;font-size:34px;line-height:1;font-weight:300;letter-spacing:6px;color:var(--navy)}
.ivx-status{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:12px;font-size:10.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;background:#fdecea;color:#b3261e}
.ivx-status.paid{background:#e7f5ec;color:#1e7a3c}
.ivx-status.part-paid{background:#fff4e0;color:#a15c00}
.ivx-status.written-off{background:#eef0f2;color:#5a6570}

.ivx-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.ivx-card{background:var(--ivx-tint);border:1px solid var(--ivx-rule);border-radius:6px;padding:12px 14px}
.ivx-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
.ivx-card dt{color:var(--ivx-soft);font-size:11.5px;white-space:nowrap}
.ivx-card dd{margin:0;font-size:12.5px;color:var(--ivx-ink);font-weight:400}

.ivx-items{width:100%;border-collapse:collapse;margin:4px 0 0}
.ivx-items th{background:var(--navy);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;text-align:left;padding:9px 10px}
.ivx-items td{padding:10px;border-bottom:1px solid var(--ivx-rule);vertical-align:top;font-size:12.5px}
.ivx-items tbody tr:nth-child(even) td{background:#fafbfd}
.ivx-items .n{width:34px;color:var(--ivx-soft);text-align:center}
.ivx-items th.n{color:#fff}
.ivx-items .amt{text-align:right;white-space:nowrap;font-weight:600}
.ivx-items .what small{display:block;color:var(--ivx-soft);font-size:11px;margin-top:1px}
.ivx-items .none{text-align:center;color:var(--ivx-soft);padding:18px}

.ivx-sum{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:16px}
.ivx-notes{flex:1 1 auto;max-width:340px}
.ivx-notes p{margin:0;color:var(--ivx-soft);font-size:12px}
.ivx-totals{flex:0 0 270px;margin:0;display:grid;grid-template-columns:1fr auto}
.ivx-totals dt,.ivx-totals dd{margin:0;padding:6px 12px;font-size:12.5px}
.ivx-totals dt{color:var(--ivx-soft)}
.ivx-totals dd{text-align:right;font-weight:600}
.ivx-totals .tot{border-top:1px solid var(--ivx-rule);color:var(--ivx-ink);font-weight:700;font-size:13.5px}
.ivx-totals .due{background:var(--navy);color:#fff;font-weight:700;font-size:14.5px;padding:10px 12px;margin-top:4px}

.ivx-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--ivx-rule)}
.ivx-pay{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ivx-thanks{margin:14px 0 0;text-align:center;font-size:11.5px;color:var(--ivx-soft)}

@media (max-width:640px){
  .ivx{padding:16px 14px}
  .ivx-head,.ivx-sum{flex-direction:column}
  .ivx-title{text-align:left}
  .ivx-parties,.ivx-pay{grid-template-columns:1fr}
  .ivx-totals{flex-basis:auto;width:100%}
}
@media print{
  .ivx,.ivx *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ivx{padding:0 0 0;border-top-width:6px}
  .ivx-head{padding-top:14px}
  .ivx-items tr,.ivx-sum,.ivx-foot,.ivx-pay,.ivx-card,.ivx-thanks{break-inside:avoid}
  .ivx-foot{margin-top:18px}
  body.printing-invoice .inv-sub,
  body.printing-invoice .inv-sub + .cs-table{display:none !important}
}
.inv-sub{margin:22px 0 8px;font-size:15px;color:var(--navy)}

.btn-ok{background:#2e9e4f;color:#fff}
.btn-danger{background:#fff;border:1px solid #e6b3b1;color:var(--danger)}
.btn-danger:hover{background:#fdecea}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-ok:hover{background:#278542}

@media (max-width:900px){
  .inv-section{padding:16px 12px 4px}
  .inv-summary{gap:20px}
  .inv-totals{min-width:0;width:100%}
}

/* date boxes show DD/MM/YYYY whatever the computer's region (see shell.js) */
html.uk-dates input[type="date"]{position:relative}
html.uk-dates input[type="date"]::-webkit-datetime-edit{opacity:0}
/* typing into it: the box shows its own boxes again */
html.uk-dates input[type="date"].uk-typing::-webkit-datetime-edit{opacity:1}
html.uk-dates input[type="date"].uk-typing::before{content:none}
html.uk-dates input[type="date"]::before{
  content:attr(data-uk);position:absolute;left:0;top:50%;transform:translateY(-50%);
  padding-left:inherit;pointer-events:none;white-space:nowrap;
}
html.uk-dates input[type="date"].uk-empty::before{color:var(--faint)}

/* only the invoice reaches the printer */
@media print{
  /* the app shell is a full-height flex column on screen; that height alone
     would spill onto a second, empty sheet, so on paper it is plain content */
  html{height:auto}
  body.printing-invoice{
    display:block;height:auto;min-height:0;overflow:visible;padding:0;margin:0;
  }
  /* nothing but the invoice reaches the paper: the shell, the lists, the
     other dialogs and anything a page adds are all left behind */
  body.printing-invoice > *:not(#invModal){display:none !important}

  body.printing-invoice .modal-backdrop{
    position:static;background:none;padding:14mm 12mm;overflow:visible;display:block;
  }
  /* the modal is a flex box that fills the screen; on paper it is just content */
  body.printing-invoice .modal-backdrop,
  body.printing-invoice .edit-modal,
  body.printing-invoice .edit-modal .body{
    display:block;height:auto;max-height:none;overflow:visible;
  }
  body.printing-invoice .edit-modal{max-width:none;box-shadow:none;border-radius:0}
  body.printing-invoice .edit-modal .body{padding:0}
  body.printing-invoice .edit-modal > header,
  body.printing-invoice .edit-modal > footer{display:none !important}
  body.printing-invoice .cs-wrap,
  body.printing-invoice .note-wrap{display:none !important}
  .inv-filter,.inv-tabs,.inv-income{display:none !important}
}

/* ---- insurance companies ---- */
.ins-lead{margin:0 0 18px;font-size:14px;color:#5a6570;max-width:900px;line-height:1.6}
.ins-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.ins-table{min-width:1040px}
.ins-table .num{text-align:right}
.ins-sub{margin:4px 0 12px;font-size:15px;color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:7px}
.ins-hint{margin:-6px 0 14px;font-size:13px;color:var(--muted)}

/* the rates a client will be billed at, shown on their record */
.rate-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.rate-chip{
  background:var(--blue-soft);color:var(--navy);border-radius:11px;
  padding:3px 10px;font-size:12px;
}
.rate-chip b{font-weight:700}

/* where an invoice line's price came from */
.cost-cell{white-space:nowrap}
.rate-src{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.rate-src.edited{color:var(--orange);font-weight:700}

/* ---- click-to-edit on the client record ---- */
.head-add{margin-left:auto;margin-right:14px;padding:10px 18px}

td.editable{cursor:pointer;position:relative;padding-right:34px}
td.editable:hover{background:var(--blue-soft)}
.ed-pen{
  position:absolute;right:10px;top:11px;line-height:0;color:var(--blue);
  opacity:0;transition:opacity .12s;
}
.ed-pen svg{width:15px;height:15px}
td.editable:hover .ed-pen{opacity:1}
td.editing{background:#fff;padding:8px 10px}
.ed-value{display:block}

.inline-edit{display:flex;align-items:flex-start;gap:7px}
.inline-edit input,
.inline-edit select,
.inline-edit textarea{
  flex:1 1 auto;min-width:0;border:1px solid var(--blue);border-radius:var(--radius);
  padding:7px 9px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.inline-edit textarea{min-height:62px;resize:vertical}
.inline-edit input:focus,
.inline-edit select:focus,
.inline-edit textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(0,168,243,.18)}
.inline-edit button{
  flex:0 0 auto;width:32px;height:34px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:#fff;cursor:pointer;line-height:0;
  display:flex;align-items:center;justify-content:center;
}
.inline-edit button svg{width:16px;height:16px}
.inline-edit .ie-ok{color:#2e9e4f}
.inline-edit .ie-ok:hover{background:#eaf7ee;border-color:#2e9e4f}
.inline-edit .ie-no{color:var(--danger)}
.inline-edit .ie-no:hover{background:#fdecea;border-color:var(--danger)}

/* the new-client form lays out in two columns */
#newBody .grid2 .span2{grid-column:1 / -1}
#newBody select,
#newBody input,
#newBody textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
#newBody input:focus,#newBody select:focus,#newBody textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}

@media (max-width:760px){
  .head-add{margin-right:0}
}

/* ---- clients list ---- */
.cl-filter{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;
  font-size:14px;color:#5a6570;
}
.cl-search{position:relative;flex:1 1 340px;max-width:420px}
.cl-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);pointer-events:none;
}
.cl-search input{
  width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 34px 0 36px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.cl-search input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.cl-search button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;background:#eee;color:#666;
  font-size:17px;line-height:1;cursor:pointer;
}
.cl-search button:hover{background:var(--orange);color:#fff}

.cl-filter select{
  height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 12px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.cl-filter select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18);
}
.cl-filter .btn{padding:10px 16px}

.cl-table{min-width:1080px}
.cl-table .num{text-align:right}
.cl-name a{font-weight:600}
.cl-actions{width:82px;text-align:right}
.cl-edit{padding:6px 15px;font-size:13px}
.cl-edit:hover{border-color:var(--blue);color:var(--navy)}
.cl-count{font-size:14px;color:#5a6570}

/* sortable column headers */
.cs-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.cs-table th.sortable:hover{color:var(--blue)}
.cs-table th.sortable .arrow{margin-left:6px;font-size:10px;color:var(--orange)}
.cs-table th.sortable.on{color:var(--blue)}

.head-back{margin-left:18px;padding:8px 14px;font-weight:400}
.head-back:hover{text-decoration:none;border-color:var(--blue);color:var(--navy)}

@media (max-width:760px){
  .cl-search{flex:1 1 100%;max-width:none}
  .head-back{margin-left:0}
}

/* ---- required fields ---- */
.req-star{color:var(--orange);font-weight:700;margin-left:3px}
.req-missing{
  display:inline-block;background:#fff1e6;color:#c2560a;border-radius:10px;
  padding:2px 9px;font-size:11.5px;font-weight:700;
}
.req-banner{
  background:#fff6ee;border:1px solid #ffd6b0;border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:11px 14px;margin:0 0 18px;font-size:13.5px;color:#8a4b12;line-height:1.6;
}
.req-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:var(--orange);color:#fff;
  font-size:11px;font-weight:700;cursor:help;vertical-align:middle;
}
.req-flag.soft{background:#c9a227}
.cs-table tr.row-warn td{background:#fffaf4}
.cs-table tr.row-warn:hover td{background:#fff2e3}

/* shape hints under a field: advice, not a blocker */
.fmt{display:block;margin-top:5px;font-size:12px;color:var(--muted);min-height:1px}
.fmt.warn{color:#a8620a}

/* =========================================================
   ACTIVITY: reminders, DNA, completed
   ========================================================= */
#bellBtn{position:relative}
.bell-badge{background:var(--danger)}
.nv-count{
  margin-left:auto;margin-right:8px;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700;line-height:20px;text-align:center;
}

.rem-list{display:flex;flex-direction:column;gap:12px}
.rem-card{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line-strong);border-left:4px solid var(--blue);
  border-radius:var(--radius);padding:14px 16px;background:#fff;
}
.rem-card.dc{border-left-color:var(--navy)}
.rem-card.followup{border-left-color:var(--orange)}
.rem-card.payment{border-left-color:var(--danger)}
.rem-main{flex:1 1 320px;min-width:0}
.rem-main > header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.rem-main h4{margin:0 0 5px;font-size:15px;color:var(--text)}
.rem-main p{margin:0;font-size:13px;color:#5a6570;line-height:1.55}
.rem-main time{font-size:12px;color:var(--muted)}
.rem-kind{
  border-radius:10px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap;
  background:var(--blue-soft);color:var(--navy);
}
.rem-kind.followup{background:var(--orange-soft);color:#b35309}
.rem-kind.payment{background:#fdecec;color:#c62828}

.od-chip{border-radius:10px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.od-chip.due{background:#eef4f8;color:#5a6570}
.od-chip.soon{background:#fff3e0;color:#ef6c00}
.od-chip.late{background:#fdecea;color:#c62828}
.od-chip.bad{background:#c62828;color:#fff}

.rem-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rem-acts .btn{padding:8px 15px;font-size:13px}
.rem-reopen{padding:6px 14px;font-size:12.5px}

.dna-strip{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  border:1px solid #f3c6c3;border-left:4px solid var(--danger);
  border-radius:0 var(--radius) var(--radius) 0;
  background:#fdf3f2;padding:12px 16px;margin-bottom:16px;
}
.dna-total{font-size:15px;font-weight:700;color:#a8322d}
.dna-repeat{font-size:13px;color:#8a4b12}

.rem-settings .ef-row input[type=number],
.rem-settings .ef-row select{
  width:100%;max-width:220px;height:40px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 11px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.rem-settings .ef-row small{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.5}

/* =========================================================
   SETTINGS: backups and email
   ========================================================= */
.bk-warn{margin-top:20px}
.bk-acts{white-space:nowrap;text-align:right}
.bk-acts .btn{padding:6px 13px;font-size:12.5px;margin-left:6px}
.bk-del{color:var(--danger)}
.bk-del:hover{background:#fdecea;border-color:#e6b3b1}
.bk-tag{
  border-radius:9px;padding:1px 8px;background:var(--blue-soft);color:var(--navy);
  font-size:10.5px;font-weight:700;
}
.cs-table tr.bk-latest td{background:#f6fbfe}

.set-steps{margin:0 0 14px;padding-left:22px;font-size:13.5px;color:#5a6570;line-height:1.9}
.set-steps code{
  background:#f1f1f1;border:1px solid #e3e3e3;border-radius:2px;
  padding:1px 6px;font-size:12.5px;color:#444;
}
.ml-status{font-size:13px;color:var(--muted);margin-left:8px}
.ml-status.good{color:#2e7d32;font-weight:600}
.ml-status.bad{color:var(--danger)}

/* ---- where a client is in their care ---- */
.care-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line-strong);border-left:4px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:11px 15px;margin-bottom:18px;font-size:13.5px;color:#5a6570;
}
.care-bar span{flex:1 1 260px}
.care-bar .btn{padding:7px 16px;font-size:13px}
.care-bar.discharged{border-left-color:#9e9e9e;background:#fafafa}

/* ---- who may open what ---- */
.perm-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px 18px;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.perm-grid .check{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.perm-grid input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.perm-all{grid-column:1 / -1;font-weight:700;color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:10px}

/* ---- a booking that carries a comment ---- */
.appt.has-comment{box-shadow:inset 0 0 0 1px var(--danger),0 1px 2px rgba(0,0,0,.06)}
.cmt-dot{
  position:absolute;top:3px;right:5px;
  width:15px;height:15px;border-radius:50%;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;line-height:15px;text-align:center;
}
.cmt-flag{
  display:inline-block;border-radius:9px;padding:2px 9px;
  background:#fdecea;color:var(--danger);
  font-size:11px;font-weight:700;cursor:help;
}
.ref-cell{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- choosing which notes to download ---- */
.dl-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:16px;background:#fafafa;
}
.dl-all{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}
.dl-all input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.dl-count{font-size:13px;color:var(--muted)}
.dl-actions{margin-left:auto;display:flex;gap:9px}
.nc-pick{display:flex;align-items:center;margin-right:4px}
.nc-pick input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.note-card.picked{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}

/* the bundle only exists while it is being printed */
.print-sheet{display:none}

/* ---- outbox ---- */
#outboxBtn{position:relative}
.ob-badge{
  position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
}
.ob-settings{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px}
.ob-settings .ef-row{margin-bottom:12px}
.ob-settings input[type=email]{
  width:100%;max-width:340px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}
.ob-toggles{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:#5a6570}
.ob-toggles .check{display:flex;align-items:center;gap:7px;cursor:pointer}
.ob-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}

.ob-list{display:flex;flex-direction:column;gap:14px}
.ob-item{border:1px solid var(--line-strong);border-left:4px solid var(--blue);border-radius:var(--radius);padding:13px 15px}
.ob-item.sent{border-left-color:#bdbdbd;opacity:.72}
.ob-item > header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ob-item > header strong{flex:1 1 200px;font-size:14px;color:var(--text);min-width:0}
.ob-item > header time{font-size:12px;color:var(--muted);white-space:nowrap}
.ob-kind{
  border-radius:10px;padding:2px 10px;font-size:11px;font-weight:700;
  background:var(--blue-soft);color:var(--navy);white-space:nowrap;
}
.ob-kind.cancellation{background:#e7f8fb;color:#00707f}
.ob-kind.dna{background:#fdecec;color:#c62828}
.ob-to{margin:0 0 8px;font-size:12.5px;color:#5a6570;word-break:break-word}
.ob-body{
  margin:0 0 10px;padding:10px 12px;background:#fafafa;border-radius:var(--radius);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:12.5px;color:#4a4a4a;
  line-height:1.55;white-space:pre-wrap;max-height:190px;overflow:auto;
}
.ob-item > footer{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ob-item > footer .btn{padding:7px 16px;font-size:13px}
.ob-del{margin-left:auto;color:var(--danger)}
.ob-del:hover{background:#fdecea;border-color:#e6b3b1}
.ob-sent{font-size:12.5px;color:#5a6570}

/* ---- the booking reference at the top of the appointment popup ---- */
.appt-ref{
  display:inline-block;margin-bottom:16px;padding:5px 14px;border-radius:14px;
  background:var(--navy);color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;
}
.appt-ref.unsaved{background:#eceff1;color:#6b7780}

/* ---- comments: the one box nobody should scroll past ---- */
.comments-fld > label{color:var(--danger)}
.comments-fld > label::after{
  content:"read me";
  margin-left:8px;padding:1px 7px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;vertical-align:2px;
}
.appt-modal .comments-fld textarea{
  border:2px solid var(--danger);
  background:#fff6f5;
  color:#5c2b28;
  min-height:132px;
}
.appt-modal .comments-fld textarea::placeholder{color:#c49a96}
.appt-modal .comments-fld textarea:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(217,83,79,.22);
}
/* once something is written the box stops shouting and starts warning */
.appt-modal .comments-fld textarea.has-text{
  background:#fdecea;
  box-shadow:inset 4px 0 0 var(--danger);
}

/* the note body is all that should reach the printer */
@media print{
  .topbar,.page-head,.note-tabs,.gallery-tabs,.action-bar,.sidenav,.nav-backdrop,
  .note-form,.doc-form,.editor-toolbar,.editor-status,.toast{display:none !important}
  body.app-body{height:auto;overflow:visible}
  .note-wrap{overflow:visible;padding:0}
  .editor-shell{border:0;max-width:none}
  .editor-body{min-height:0;padding:0}

  /* a multi-note download replaces the page for the length of the print */
  body.printing-bundle .note-wrap,
  body.printing-bundle .modal-backdrop{display:none !important}
  body.printing-bundle .print-sheet{display:block !important;padding:0}
  body.printing-bundle .print-sheet h1{font-size:22pt;color:var(--navy);margin:0 0 4pt}
  body.printing-bundle .print-sheet h2{font-size:15pt;color:var(--navy);margin:18pt 0 4pt}
  body.printing-bundle .print-sheet hr{border:0;border-top:1px solid #ccc;margin:20pt 0 0}
  body.printing-bundle .print-sheet p{margin:0 0 8pt}
}

/* =========================================================
   ACTIVITY PAGE - DATE/TIME AND LOCATION BAR
   ========================================================= */
.activity-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: white;
  margin-bottom: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.datetime-display {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 500;
}

.datetime-display #currentDate {
  font-size: 14px;
  opacity: 0.95;
}

.datetime-display #currentTime {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

.location-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-selector label {
  font-weight: 500;
  margin: 0;
}

.location-selector select {
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius);
  background: white;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  min-width: 180px;
}

.location-selector .btn {
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.location-selector .btn-ghost {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.location-selector .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* =========================================================
   STATISTICS CHARTS
   ========================================================= */
.stats-container {
  margin-bottom: 30px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-card h4 {
  margin: 0 0 15px 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card canvas {
  width: 100%;
  height: 250px;
  max-width: 100%;
}

/* =========================================================
   LOCATION MODAL
   ========================================================= */
.loc-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 15px;
}

.loc-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--grey-bg);
}

.loc-item input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
}

.loc-item .btn {
  padding: 6px 10px;
  font-size: 12px;
}

/* =========================================================
   REPORTS CONTAINER
   ========================================================= */
.reports-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* =========================================================
   EXPENSE FORM
   ========================================================= */
.expense-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 0;
}

.expense-intro {
  background: #f5f5f5;
  border-left: 4px solid var(--blue);
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #666;
}

.expense-form {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}

.exp-section {
  margin-bottom: 28px;
}

.exp-section:last-child {
  margin-bottom: 0;
}

.exp-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.exp-row label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.exp-control {
  display: flex;
  position: relative;
  align-items: center;
}

.exp-input,
.exp-select {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: all 0.2s ease;
}

.exp-input:focus,
.exp-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 243, 0.1);
}

.exp-input[readonly] {
  background: #f8f8f8;
  color: #999;
  cursor: not-allowed;
}

.exp-input:hover:not([readonly]),
.exp-select:hover {
  border-color: #ccc;
}

.currency {
  position: absolute;
  left: 14px;
  font-weight: 600;
  color: #666;
  pointer-events: none;
}

.price-input {
  padding-left: 32px !important;
}

.exp-info {
  background: #f0f7ff;
  border-left: 3px solid var(--blue);
  padding: 12px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #555;
  font-style: italic;
}

.exp-info p {
  margin: 0;
}

/* =========================================================
   DISCHARGE SUMMARY
   ========================================================= */
.dc-wrap{flex:1 1 auto;background:#fff;padding:24px 40px 30px}
.dc-lead{margin:0 0 22px;font-size:20px;font-weight:700;color:var(--text)}
.dc-closed{
  max-width:1240px;margin:0 0 18px;padding:11px 15px;
  border-left:4px solid #9e9e9e;background:#fafafa;font-size:14px;color:#5a6570;
}
.dc-list{display:flex;flex-direction:column;gap:22px;max-width:1240px}
.dc-box{
  background:var(--grey-bg);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:22px 24px;
}
.dc-box p{margin:0;font-size:14px;color:var(--text)}
.dc-box p + p{margin-top:14px}
.dc-box b{font-size:32px;font-weight:400;line-height:1;margin-right:4px;vertical-align:-3px}
.dc-box a{color:var(--blue)}
.dc-discharge{
  background:var(--blue);color:#fff;border:0;border-radius:var(--radius);
  padding:14px 50px;font-size:17px;font-family:inherit;letter-spacing:.3px;cursor:pointer;
}
.dc-discharge:hover{background:var(--blue-dark)}
.dc-discharge:disabled{background:#b0bec5;cursor:default}

@media (max-width:760px){
  .dc-wrap{padding:16px 12px 24px}
  .dc-discharge{width:100%;padding:14px 20px}
}

/* =========================================================
   RESPONSIVE - ACTIVITY BAR
   ========================================================= */
@media (max-width: 768px) {
  .activity-bar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .location-selector {
    width: 100%;
    flex-wrap: wrap;
  }

  .location-selector select {
    flex: 1;
    min-width: 200px;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ACTIVITY: All activity tab
   ========================================================= */
.lg-views{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.lg-views button{
  background:#fff;border:0;cursor:pointer;font-family:inherit;font-size:14px;color:#5b5b5b;padding:8px 18px;
}
.lg-views button + button{border-left:1px solid var(--line-strong)}
.lg-views button:hover{background:var(--blue-soft)}
.lg-views button.on{background:var(--navy);color:#fff}

.lg-filter .cl-search input{padding:0 12px}
.lg-filter > span{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.lg-filter > span[hidden]{display:none}
.lg-filter input[type=date]{
  height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 10px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;
}

/* one card per person: who has been doing what */
.lg-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:4px 0 22px}
.lg-person{
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--line-strong);border-left:4px solid var(--blue);
  border-radius:var(--radius);padding:11px 13px;
}
.lg-person:hover:not(:disabled){background:var(--blue-soft)}
.lg-person:disabled{cursor:default;border-left-color:#bdbdbd}
.lg-person.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--blue-soft)}
.lg-pt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-pt b{font-size:14.5px;color:var(--text)}
.lg-pt small{font-size:12px;color:var(--muted)}

.lg-av{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.3px;
}
.lg-av.sm{width:30px;height:30px;font-size:11px}

/* the timeline */
.lg-day{
  margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--navy);
}
.lg-list{list-style:none;margin:0;padding:0}
.lg-row{
  display:grid;grid-template-columns:46px 30px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:10px 6px;border-bottom:1px solid #f0f0f0;
}
.lg-row:hover{background:#fafcfe}
.lg-row time{font-size:13px;color:var(--muted);padding-top:6px;font-variant-numeric:tabular-nums}
.lg-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lg-line b{font-size:14px;color:var(--text)}
.lg-main p{margin:3px 0 0;font-size:13.5px;color:#4a4a4a;line-height:1.5;word-break:break-word}
.lg-role{font-size:12px;color:var(--muted)}
.lg-ip{font-size:11.5px;color:var(--faint);padding-top:6px;font-variant-numeric:tabular-nums}
.lg-hist{
  display:inline-block;border-radius:9px;padding:1px 8px;background:#efefef;color:#6b6b6b;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.lg-cat{border-radius:10px;padding:2px 9px;font-size:11px;font-weight:700;background:var(--blue-soft);color:var(--navy)}
.lg-cat.signin{background:#eceff1;color:#455a64}
.lg-cat.appointment{background:#e8f5e9;color:#2e7d32}
.lg-cat.message{background:#e7f8fb;color:#00707f}
.lg-cat.invoice,.lg-cat.payment,.lg-cat.expense{background:var(--orange-soft);color:#b35309}
.lg-cat.note,.lg-cat.document{background:#ede7f6;color:#5e35b1}
.lg-cat.staff,.lg-cat.settings,.lg-cat.backup{background:#fdecea;color:#c62828}
.lg-more{text-align:center;padding:18px 0 4px}

/* the message trail */
.lg-trail{min-width:1080px}
.lg-trail .lg-to{max-width:220px;word-break:break-word;font-size:13px}
.lg-trail .btn{padding:6px 13px;font-size:12.5px}
.lg-body-row td{background:#fafafa}
.lg-body-row .ob-body{max-height:260px;margin:0}
.lg-err{margin:8px 0 0;font-size:12.5px;color:var(--danger)}

@media (max-width:760px){
  .lg-row{grid-template-columns:42px minmax(0,1fr)}
  .lg-row .lg-av,.lg-row .lg-ip{display:none}
}

/* ---- Activity > Discharged ---- */
.lg-filter > .dc-dates{display:inline-flex;align-items:center;gap:10px}
.lg-filter > .dc-dates[hidden]{display:none}
.dc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:4px 0 18px}
.dc-stats div{
  border:1px solid var(--line-strong);border-top:3px solid var(--navy);border-radius:var(--radius);
  padding:12px 16px;background:#fff;
}
.dc-stats b{display:block;font-size:24px;font-weight:600;color:var(--navy);line-height:1.2}
.dc-stats span{font-size:12.5px;color:var(--muted)}
.dc-table{min-width:1180px}
.dc-table .num{text-align:right}
.dc-table .btn{padding:6px 13px;font-size:12.5px}

/* ---- Staff: role select with its + button, and the roles popup ---- */
.role-pick{display:flex;gap:8px;align-items:stretch}
.role-pick select{flex:1 1 auto;min-width:0}
.role-plus{
  flex:0 0 auto;width:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.role-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.role-plus:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}
.role-plus:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,168,243,.25)}

.edit-modal.role-modal{max-width:440px;margin-top:40px}
.role-add{display:flex;gap:8px;margin-bottom:14px}
.role-add input{
  flex:1 1 auto;min-width:0;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:0 11px;font-size:14px;font-family:inherit;color:var(--text);
}
.role-add input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,243,.18)}
.role-add .btn{padding:0 20px}
.role-list{list-style:none;margin:0 0 10px;padding:0;border:1px solid var(--line);border-radius:var(--radius);
  max-height:320px;overflow-y:auto}
.role-list li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line)}
.role-list li:last-child{border-bottom:0}
.role-list li:hover{background:#fafafa}
.role-name{flex:1 1 auto;font-size:14px;color:var(--text)}
.role-used{font-size:11.5px;color:var(--muted);background:#f1f1f1;border-radius:10px;padding:2px 8px;cursor:help}
.role-list button{
  flex:0 0 auto;width:32px;height:32px;border:0;border-radius:var(--radius);background:none;
  color:#b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.role-list button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.role-list button:hover:not(:disabled){color:var(--danger);background:#fdecea}
.role-list button:disabled{opacity:.35;cursor:not-allowed}
.ob-kind.recall{background:#fff3e0;color:#b35309}

/* ---- Tasks list ---- */
.tl-wrap{padding:24px 24px 40px}
.tl-filter{max-width:1200px;margin:0 auto 16px}
.tl-filter select{min-width:170px}
.tl-filter .cl-search input{padding:0 12px}
.tl-wrap #tlBody{max-width:1200px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:6px}
.tl-wrap .cs-empty{background:#fff}
.tl-table{min-width:900px}
.tl-table td{vertical-align:top}
.tl-table .tick{width:44px;text-align:center}
.tl-table .tick input{width:18px;height:18px;accent-color:var(--ok);cursor:pointer;margin-top:3px}
.tl-when{white-space:nowrap;width:130px}
.tl-when .od-chip,.tl-when .pay-pill{display:inline-block;margin-top:5px}
.tl-what strong{font-size:14px;color:var(--text)}
.tl-what p{margin:4px 0 0;font-size:13px;color:#5a6570;white-space:pre-wrap;max-width:460px}
.tl-what small{display:block;margin-top:4px}
.tl-done .tl-what strong{text-decoration:line-through;color:var(--muted)}
.tl-done td{background:#fbfbfb}
.tl-acts{width:120px;white-space:nowrap}
.tl-acts .btn{padding:5px 12px;font-size:12.5px;vertical-align:middle}
.tl-acts button[data-del]{vertical-align:middle}
@keyframes tlFlash{from{background:#fff3c4}to{background:transparent}}
.tl-new td{animation:tlFlash 2.4s ease-out}
.tab-count.tl-overdue{background:var(--danger);color:#fff}
.lg-cat.task{background:#e8f5e9;color:#2e7d32}

/* =========================================================
   PHONES AND SMALL TABLETS
   Kept last so it wins over the page styles above.
   ========================================================= */
@media (max-width:760px){
  /* ---- top bar: tools on the first row, location + search on the second ---- */
  .topbar{
    height:auto;flex-wrap:wrap;row-gap:8px;column-gap:6px;padding:8px 10px;
  }
  #menuBtn{order:10}
  #todayIcon{order:20}
  #createDd{order:30}
  .topbar-right{order:40;gap:2px;margin-left:auto}
  .topbar::after{content:"";order:45;flex-basis:100%;height:0}
  .location-bar{order:50;margin:0;flex:0 1 auto;min-width:0}
  .location-select{min-width:0;max-width:150px;padding:8px 6px;font-size:13px}
  .searchbox{display:block;order:60;flex:1 1 0;min-width:0;width:auto;max-width:none}
  .searchbox input{height:38px}
  .search-results{position:fixed;left:10px;right:10px;top:auto;margin-top:4px;z-index:70}
  .create-btn{height:38px;padding:0 12px;gap:6px}
  .user-chip{font-size:14px;padding:6px 4px;max-width:96px}
  .user-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .icon-btn{padding:5px}
  .icon-btn svg{width:24px;height:24px}

  /* the Create menu fills the width under the bar */
  .create-menu{position:fixed;left:8px !important;right:8px;width:auto;top:auto;max-height:70vh}

  /* ---- page heading ---- */
  .page-head{padding:12px 12px}
  .page-head h2,.note-head{font-size:21px}
  .client-pill .main{height:40px;font-size:15px}

  /* ---- bottom action bars wrap instead of spilling ---- */
  .action-bar{flex-wrap:wrap;gap:10px;padding:12px}
  .action-bar .ab-right{margin-left:0;width:100%;justify-content:flex-end;flex-wrap:wrap}
  .action-bar .btn{padding:10px 14px}

  /* ---- tabs scroll sideways rather than stacking into a pile ---- */
  .note-tabs,.form-tabs,.msg-tabs,.gallery-tabs{overflow-x:auto;padding:0 8px;-webkit-overflow-scrolling:touch}
  .note-tabs button,.form-tabs button,.msg-tabs button,.gallery-tabs button{white-space:nowrap;padding:12px 14px;flex:0 0 auto}

  /* ---- filter rows: one control per line, full width ---- */
  .cl-filter,.inv-filter,.cs-filter,.lg-filter,.tl-filter,.et-filter{align-items:stretch}
  .cl-filter select,.inv-filter select,.cs-filter select,.lg-filter select,.tl-filter select,
  .et-filter select,.cl-search,.inv-filter .inv-search{flex:1 1 100%;min-width:0;max-width:none;width:100%}

  /* ---- roomy forms get less padding ---- */
  .task-wrap,.msg-wrap,.expense-wrap{padding:16px 10px 24px}
  .task-form,.msg-form,.expense-form{padding:20px 16px}
  .cs-pane,.dc-wrap,.tl-wrap{padding-left:10px;padding-right:10px}
  .inv-section{padding:14px 10px 4px}
  .grid2{grid-template-columns:1fr}
  .edit-modal{max-width:100%}
  .modal-backdrop{padding:12px 8px}
}

@media (max-width:640px){
  /* ---- every table becomes a stack of cards: "Column: value" per line ---- */
  .cs-table-wrap{overflow:visible}
  table.cs-table,table.gal-table,.list-view table{min-width:0 !important;width:100%;border:0;font-size:14px}
  table.cs-table thead,table.gal-table thead,.list-view table thead{display:none}
  table.cs-table tbody,table.gal-table tbody,.list-view table tbody{display:block}
  table.cs-table tr,table.gal-table tr,.list-view table tr{
    display:block;margin:0 0 12px;padding:4px 12px;background:#fff !important;
    border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  table.cs-table tr.row-warn{border-left:4px solid var(--orange)}
  table.cs-table tr.tl-done{opacity:.8}
  table.cs-table td,table.gal-table td,.list-view table td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    width:auto !important;padding:8px 0 !important;border:0;border-bottom:1px solid #f0f0f0;
    text-align:right;background:transparent !important;white-space:normal;word-break:break-word;
  }
  table.cs-table td:last-child,table.gal-table td:last-child,.list-view table td:last-child{border-bottom:0}
  table.cs-table td::before,table.gal-table td::before,.list-view table td::before{
    content:attr(data-label);flex:0 0 38%;text-align:left;font-weight:600;color:var(--navy);font-size:13px;
  }
  /* cells with no heading (tick boxes, buttons, expanded email text) use the whole line */
  table.cs-table td[data-label=""]::before,table.gal-table td[data-label=""]::before,
  .list-view table td[data-label=""]::before{display:none}
  table.cs-table td[data-label=""]{justify-content:flex-start;text-align:left}
  table.cs-table td.cs-row-act,table.cs-table td.tl-acts,table.cs-table td.et-acts{justify-content:flex-end;gap:8px}
  table.cs-table td.tick{justify-content:flex-start}
  table.cs-table td > p,table.cs-table td > small{text-align:right}
  table.cs-table td.tl-what{flex-direction:column;align-items:flex-end}
  table.cs-table td.tl-what::before{align-self:flex-start}
  .lg-body-row td{display:block !important;text-align:left !important}
  .lg-body-row .ob-body{max-height:none}
  /* invoice prices and status pickers stay usable */
  .pick-table select{min-width:0;max-width:60%}
  .cost-input{width:110px}
  .cost-cell{flex-wrap:wrap}
}
@media (max-width:640px){
  /* a task's title, notes and "done by" sit together to the right of the label */
  table.cs-table td.tl-what{display:grid;grid-template-columns:38% 1fr;column-gap:12px;align-items:start}
  table.cs-table td.tl-what::before{grid-column:1;grid-row:1 / span 3}
  table.cs-table td.tl-what > *{grid-column:2;text-align:right;margin:0}
  table.cs-table td.tl-what p{margin-top:3px}
}

/* tick boxes inside form rows keep their own size (the rows stretch text inputs to full width) */
.ef-row input[type=checkbox],.ef-row input[type=radio]{width:auto;flex:0 0 auto;padding:0}
.ob-toggles{display:flex;flex-wrap:wrap;gap:10px 22px}
.ob-toggles .check{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:#5a6570;font-weight:400;margin:0}
.ef-row .check{display:inline-flex;align-items:center;gap:8px;font-weight:400}

/* ---- diary: the date heading opens a date picker ---- */
.range-pick{position:relative;display:inline-flex;flex:0 0 auto}
#rangeLabel{
  background:none;border:0;border-radius:6px;cursor:pointer;font-family:inherit;padding:4px 10px;
}
#rangeLabel:hover{background:var(--blue-soft)}
#rangeLabel::after{
  content:"";display:inline-block;margin-left:8px;vertical-align:3px;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;
}
#jumpDate{position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}