/* HouseBoard V3 — product-wide experience layer
   Preserves existing workflows while improving hierarchy, interaction and role clarity. */
:root{
  --hb-v3-ink:#172033;
  --hb-v3-muted:#66758d;
  --hb-v3-surface:rgba(255,255,255,.92);
  --hb-v3-canvas:#f5f7fb;
  --hb-v3-line:#e2e8f2;
  --hb-v3-blue:#356df3;
  --hb-v3-teal:#12a99a;
  --hb-v3-radius:22px;
  --hb-v3-shadow:0 12px 34px rgba(20,35,70,.075);
  --hb-v3-shadow-hover:0 22px 55px rgba(20,35,70,.13);
}
[data-theme="dark"]{
  --hb-v3-ink:#edf4ff;--hb-v3-muted:#9babc2;--hb-v3-surface:rgba(17,26,44,.94);
  --hb-v3-canvas:#09111f;--hb-v3-line:#26354e;--hb-v3-shadow:0 16px 38px rgba(0,0,0,.33);
  --hb-v3-shadow-hover:0 24px 60px rgba(0,0,0,.48);
}
body{
  background:
    radial-gradient(circle at 5% -5%, color-mix(in srgb,var(--primary) 13%,transparent), transparent 29rem),
    radial-gradient(circle at 95% 5%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 25rem),
    var(--hb-v3-canvas)!important;
  color:var(--hb-v3-ink);
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(100,116,139,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,.028) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 72%)}

/* Navigation becomes a calm command strip instead of a crowded toolbar. */
.hb-navbar{min-height:68px!important;border-bottom:1px solid color-mix(in srgb,var(--hb-v3-line) 82%,transparent)!important;box-shadow:0 8px 28px rgba(15,23,42,.055)!important}
.hb-wordmark{font-size:1.35rem!important}.hb-logo{width:40px!important;height:40px!important;border-radius:13px!important}.hb-logo svg{width:40px!important;height:40px!important}
.brand-chip{background:color-mix(in srgb,var(--card2) 80%,transparent)!important;border:1px solid var(--hb-v3-line)!important;padding:.48rem .72rem!important}
#mainNav .btn{border-radius:999px!important;padding:.48rem .78rem!important}

/* Content rhythm */
body>.container-fluid,body>main,.hb-page-shell{animation:hbV3Enter .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes hbV3Enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-title,h1{font-weight:900!important;letter-spacing:-.052em!important;color:var(--hb-v3-ink)!important;text-wrap:balance}
h2,h3,h4{letter-spacing:-.033em!important}.soft,.text-muted{color:var(--hb-v3-muted)!important}

/* Real product surfaces: lower border noise, stronger grouping. */
.card,.accordion-item,.modal-content,.offcanvas,.list-group-item{
  background:var(--hb-v3-surface)!important;
  border:1px solid color-mix(in srgb,var(--hb-v3-line) 90%,transparent)!important;
  border-radius:var(--hb-v3-radius)!important;
  box-shadow:var(--hb-v3-shadow)!important;
}
.card{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--hb-v3-shadow-hover)!important;border-color:color-mix(in srgb,var(--primary) 18%,var(--hb-v3-line))!important}
.card .card,.card .list-group-item,.card .accordion-item{box-shadow:none!important}
.card-header{background:transparent!important;border-bottom:1px solid var(--hb-v3-line)!important;padding:1rem 1.15rem!important}
.card-body{padding:1.15rem}

/* One clear primary action, calm secondary controls. */
.btn{min-height:42px;border-radius:13px!important;font-weight:760!important;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 94%,#fff 6%),color-mix(in srgb,var(--primary) 76%,#1249c8 24%))!important;box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 22%,transparent)!important}
.btn-success{box-shadow:0 8px 20px rgba(22,163,74,.15)}
.btn-outline-secondary,.btn-outline-primary{background:color-mix(in srgb,var(--card) 82%,transparent)!important}

/* Inputs feel deliberate and easier to scan. */
.form-label{font-size:.78rem;text-transform:none;letter-spacing:.01em;font-weight:800!important;color:var(--hb-v3-muted)!important}
.form-control,.form-select,.input-group-text{min-height:46px!important;border-radius:14px!important;border-color:var(--hb-v3-line)!important;background:color-mix(in srgb,var(--card) 95%,transparent)!important}
.input-group>.form-control:not(:first-child),.input-group>.form-select:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.input-group>.input-group-text:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
textarea.form-control{min-height:112px!important}

/* Status is readable without shouting. */
.badge,.status-pill{padding:.42rem .68rem!important;border-radius:999px!important;font-weight:800!important;letter-spacing:0!important}
.alert{border-radius:18px!important;border-width:1px!important;box-shadow:0 8px 24px rgba(15,23,42,.045)}

/* Tables remain available but become secondary, cleaner and more touch-friendly. */
.table-responsive{border:1px solid var(--hb-v3-line);border-radius:18px!important;background:var(--card);box-shadow:0 8px 24px rgba(15,23,42,.035)}
.table{margin-bottom:0!important}.table thead th,.table>tbody>tr:first-child>th{background:color-mix(in srgb,var(--card2) 88%,transparent);padding:.85rem .8rem!important}
.table td{padding:.82rem .8rem!important}.table tbody tr{transition:background .15s ease}.table tbody tr:hover{background:color-mix(in srgb,var(--softblue) 48%,transparent)}

/* Better empty states wherever the existing UI only has a single muted line. */
.hb-v3-empty{min-height:148px;display:grid;place-items:center;text-align:center;padding:1.5rem;border:1px dashed color-mix(in srgb,var(--hb-v3-line) 82%,var(--primary));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--card2) 72%,transparent),transparent)}
.hb-v3-empty::before{content:"✓";display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--softgreen);color:var(--success);font-size:1.25rem;font-weight:900;margin-bottom:.45rem}

/* Progressive disclosure for infrequent controls. */
details.hb-v3-rare{border:1px solid var(--hb-v3-line);border-radius:18px;background:var(--card);overflow:hidden}
details.hb-v3-rare>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.05rem;cursor:pointer;font-weight:850}
details.hb-v3-rare>summary::-webkit-details-marker{display:none}details.hb-v3-rare>summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--softblue);color:var(--primary);font-size:1.1rem}details.hb-v3-rare[open]>summary::after{content:"−"}details.hb-v3-rare>div{padding:0 1.05rem 1.05rem}

/* Role-aware dashboard tone without changing permissions or data. */
body[data-hb-role="member"] .quick-card{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--softblue) 25%,var(--card)))!important}
body[data-hb-role="owner"] .quick-card{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--softgreen) 28%,var(--card)))!important}
body[data-hb-role="admin"] .quick-card,body[data-hb-role="house_admin"] .quick-card{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--softamber) 20%,var(--card)))!important}
.quick-card{position:relative;overflow:hidden}.quick-card::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-55px;top:-55px;background:color-mix(in srgb,var(--primary) 7%,transparent);pointer-events:none}

/* Login from the first touchpoint: premium but still trustworthy. */
body[data-hb-endpoint="login"]{background:radial-gradient(circle at 14% 10%,rgba(53,109,243,.18),transparent 33rem),radial-gradient(circle at 88% 85%,rgba(18,169,154,.13),transparent 29rem),var(--hb-v3-canvas)!important}
body[data-hb-endpoint="login"] .hb-login-shell{min-height:calc(100vh - 110px)}
body[data-hb-endpoint="login"] .hb-login-card{box-shadow:0 30px 90px rgba(22,40,80,.17)!important;border-color:rgba(255,255,255,.65)!important;backdrop-filter:blur(16px)}
body[data-hb-endpoint="login"] .hb-login-feature{background:rgba(30,41,59,.88)!important;backdrop-filter:blur(12px);transition:.18s ease}
body[data-hb-endpoint="login"] .hb-login-feature:hover{transform:translateY(-3px);background:#26364f!important}

/* Members: archived residents remain valuable records, but visually distinct. */
.member-row.hb-v3-former{opacity:.72}.member-row.hb-v3-former td{background:color-mix(in srgb,var(--card2) 75%,transparent)!important}.member-row.hb-v3-former td:first-child{box-shadow:inset 4px 0 0 #94a3b8}.hb-v3-former-label{display:inline-flex;align-items:center;gap:.35rem;margin:.35rem 0 0;padding:.28rem .55rem;border-radius:999px;background:#eef2f7;color:#64748b;font-size:.72rem;font-weight:850}
[data-theme="dark"] .hb-v3-former-label{background:#243149;color:#b4c0d3}

/* Planner and roster screens: establish an obvious starting point. */
body[data-hb-endpoint="rosters"] .page-title,body[data-hb-endpoint="cleaning"] .page-title{font-size:clamp(2rem,4vw,3.25rem)!important}
body[data-hb-endpoint="rosters"] .card:first-of-type{border-color:color-mix(in srgb,var(--primary) 22%,var(--hb-v3-line))!important}

/* Calendar remains information-rich, but event chips are scannable. */
body[data-hb-endpoint="house_calendar"] .calendar-event,body[data-hb-endpoint="house_calendar"] [class*="event"]{border-radius:10px}
body[data-hb-endpoint="house_calendar"] .card{overflow:hidden}

/* Mobile = an app, not a squeezed desktop page. */
@media(max-width:767.98px){
  body{font-size:14px!important;padding-bottom:74px}
  .container-fluid.py-4,.container.py-4{padding:.85rem!important}
  .card{border-radius:19px!important}.card-body,.card.p-4{padding:1rem!important}
  .page-title,h1{font-size:clamp(1.7rem,8vw,2.25rem)!important}
  .row.g-4,.row.g-3{--bs-gutter-y:.85rem}
  .btn{min-height:44px}
  .table-responsive{margin-inline:0!important;border-radius:16px!important}
  .modal-dialog{margin:.6rem}.modal-content{border-radius:24px!important}
  .hb-login-card{box-shadow:0 16px 45px rgba(15,23,42,.13)!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}