:root {
  --ink: #172c43; --ink2: #42566d; --ink3: #6d7d8f;
  --sand: #f3f5f8; --sand2: #eaf0f5; --border: #dce3eb;
  --amber: #96733e; --amberl: #f7f0e3; --red: #b44646; --redl: #fbeeee;
  --green: #2e775a; --greenl: #edf7f1; --blue: #3d648e; --bluel: #edf3fa;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--sand); font: 14px/1.55 'DM Sans', sans-serif; }
h1,h2,h3,h4,p { margin: 0; }
button,input,select,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { vertical-align: middle; flex-shrink: 0; }
img { max-width: 100%; }
button:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid #ab8852; outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 300; background: white; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
#sidebar { width: 208px; position: fixed; inset: 0 auto 0 0; background: var(--ink); display: flex; flex-direction: column; z-index: 50; transition: transform .2s; overflow-y: auto; }
#sidebar .brand { background: white; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.brand-logo { width: 145px; height: 44px; object-fit: contain; }
.workspace-label { color: #a9bacb; font-size: 8px; font-weight: 600; letter-spacing: 1.3px; padding: 17px 22px 9px; }
#sidebar nav { padding: 0 10px; display: grid; gap: 3px; flex-shrink: 0; }
#sidebar nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; color: #c0cddd; font-size: 12px; line-height: 18px; font-weight: 500; padding: 9px 12px; border-radius: 5px; transition: background .15s,color .15s; }
#sidebar nav a svg { width: 16px; height: 16px; stroke-width: 1.65; }
#sidebar nav a:hover { background: #ffffff0b; color: #fff; }
#sidebar nav a.active { background: #c4a16b18; color: #f3dfbc; font-weight: 600; box-shadow: inset 2px 0 #c4a16b; }
#sidebar nav a.active:after { content: ''; width: 5px; height: 5px; border-top: 1px solid #d5b582; border-right: 1px solid #d5b582; transform: rotate(45deg); margin-left: auto; }
#sidebar nav a.active svg { color: #d5b582; }
.sidebar-secondary { margin: 12px 10px 16px; padding-top: 10px; border-top: 1px solid #ffffff15; }
.resident-link { padding: 9px 12px; min-height: 38px; display: flex; align-items: center; gap: 10px; border-radius: 5px; color: #a9bacb; font-size: 11px; }
.resident-link svg { width: 16px; height: 16px; }
.resident-link>span:last-child { margin-left: auto; font-size: 13px; }
.resident-link:hover { color: #fff; background: #ffffff0b; }
.user-box { margin-left: auto; display: grid; grid-template-columns: 34px minmax(0,1fr) 30px; gap: 0 11px; align-items: center; max-width: 340px; min-width: 0; }
.user-avatar { grid-row: span 2; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; background: var(--amberl); color: var(--amber); }
.user-name { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { grid-column: 2; font-size: 10px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-link { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; height: 34px; color: var(--ink3); border-radius: 5px; }
.logout-link:hover { color: var(--ink); background: var(--sand); }
.badge-leave { color: var(--red); font-size: 9px; margin-left: 4px; }
#main { margin-left: 208px; min-height: 100vh; min-width: 0; display: flex; flex-direction: column; }
#topbar { height: 60px; flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; gap: 16px; }
.topbar-context { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--ink3); }
.topbar-context>span:first-child { font-size: 10px; letter-spacing: 1.2px; font-weight: 700; }
.topbar-context strong { font-weight: 500; color: var(--ink2); }
.topbar-slash { color: #bfc9d5; }
#content { padding: 30px 32px; flex: 1; width: 100%; max-width: 1800px; margin: 0 auto; outline: none; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 29px; }
.eyebrow { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: var(--amber); margin-bottom: 8px; }
.page-heading h1 { font-size: 30px; font-weight: 600; letter-spacing: -.8px; line-height: 1.3; }
#ham { display: none; border: 1px solid var(--border); background: white; border-radius: 6px; padding: 8px; }
#overlay { display: none; position: fixed; inset: 0; background: #12223780; z-index: 49; }
.portal-footer { display: flex; justify-content: space-between; gap: 15px; font-size: 10px; color: var(--ink3); border-top: 1px solid var(--border); margin: 0 32px; padding: 21px 0; }
.card,.tbl-container { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 23px; box-shadow: 0 4px 16px #172c4303; min-width: 0; }
.btn-p,.btn-s,.btn-danger,.btn-view,.btn-filter,.btn-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 10px 17px; font-size: 12px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background .15s; }
.btn-p,.btn-filter { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-p:hover,.btn-filter:hover { background: #2b465f; }
.btn-s,.btn-reset,.btn-view { background: white; color: var(--ink2); }
.btn-s:hover,.btn-reset:hover,.btn-view:hover { background: var(--sand); border-color: #b6c3d0; }
.btn-danger { background: var(--redl); color: var(--red); border-color: #f2d6d6; }
.btn-danger:hover { background: #f5dada; }
.btn-view-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink2); }
.btn-view-icon:hover { background: var(--sand2); border-color: #a5b6c7; }
.inp,.filter-input { width: 100%; padding: 11px 12px; background: white; border: 1px solid #d3dce6; border-radius: 6px; font-size: 13px; color: var(--ink); min-width: 0; }
.inp:focus,.filter-input:focus { border-color: #ab8852; outline: none; box-shadow: 0 0 0 3px #ab88521a; }
input::placeholder,textarea::placeholder { color: #8a98a8; }
input[type=checkbox],input[type=radio] { accent-color: var(--ink); }
select.inp { padding-right: 25px; }
textarea.inp { line-height: 1.7; }
.badge,.badge-status { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 5px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.badge-open,.badge-visited,.pri-medium,.status-open,.status-visited { color: var(--blue); background: var(--bluel); }
.badge-materialrequested,.badge-inprogress,.badge-progress,.pri-high,.status-inprogress,.status-materialrequested { background: var(--amberl); color: var(--amber); }
.badge-resolved,.badge-materialapproved,.pri-low,.status-resolved,.status-materialapproved { color: var(--green); background: var(--greenl); }
.badge-onhold,.badge-hold,.badge-closed,.status-closed,.status-onhold { color: var(--ink3); background: var(--sand2); }
.pri-urgent { background: var(--redl); color: var(--red); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: #f7f9fb; padding: 13px 16px; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; color: var(--ink3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 15px 16px; border-bottom: 1px solid #eaf0f5; font-size: 12px; color: var(--ink2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fafbfd; }
.tbl .building-link { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl .building-link:hover { text-decoration: underline; }
.tbl-container { padding: 0; overflow: hidden; }
.tbl-scroll { overflow-x: auto; }
.tbl-scroll .tbl th:last-child,.tbl-scroll .tbl td:last-child { position: sticky; right: 0; background: white; box-shadow: -5px 0 8px #172c4304; }
.tbl-scroll .tbl th:last-child { background: #f7f9fb; }
.contact-cell,.building-cell { display: flex; flex-direction: column; gap: 3px; }
.contact-email,.unit-num { font-size: 11px; color: var(--ink3); }
.contact-phone,.building-name { font-size: 12px; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--sand); font-size: 11px; border-radius: 5px; white-space: nowrap; }
.metrics-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--ink3); margin: -8px 0 21px; }
.metrics-bar span { font-weight: 600; color: var(--ink); }
.metrics-bar .metrics-divider { margin: 0 10px; color: #bac5d0; }
.admin-filter-bar { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px; margin-bottom: 22px; background: white; border: 1px solid var(--border); border-radius: 10px; align-items: flex-end; }
.filter-group { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 7px; }
.filter-group.search { flex: 2; min-width: 190px; }
.filter-group label { font-size: 10px; font-weight: 600; color: var(--ink2); }
.filter-input { height: 40px; font-size: 12px; padding: 0 10px; }
.filter-actions { display: flex; gap: 8px; }
.btn-filter,.btn-reset { height: 40px; }
.overview-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; border-radius: 10px; background: var(--ink); color: white; margin-bottom: 24px; position: relative; overflow: hidden; }
.overview-banner .eyebrow { color: #d5b988; font-size: 8px; }
.overview-banner h2 { font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.overview-banner p:not(.eyebrow) { font-size: 11px; color: #bfcede; margin-top: 7px; }
.banner-action { display: inline-flex; gap: 14px; align-items: center; border: 1px solid #ffffff35; color: #fff; font-size: 11px; border-radius: 6px; padding: 12px 16px; flex-shrink: 0; }
.banner-action:hover { background: #ffffff10; }
.dash-grid { display: grid; gap: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.stat-card { padding: 20px 21px; }
.stat-label { display: flex; justify-content: space-between; align-items: center; color: var(--ink3); font-size: 11px; font-weight: 500; gap: 8px; }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; }
.stat-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }
.stat-value { display: block; font-size: 33px; letter-spacing: -1px; line-height: 1.2; margin: 5px 0 7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-context { font-size: 10px; color: var(--ink3); }
.dash-col-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.widget-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 23px; }
.widget-title svg { width: 17px; height: 17px; stroke-width: 1.5; }
.bld-list { list-style: none; padding: 0; margin: 0; }
.bld-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.bld-list li:last-child { border: 0; }
.bld-name { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.bld-count { background: var(--sand); padding: 3px 8px; font-size: 11px; border-radius: 5px; }
.request-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 22px; align-items: start; }
.request-layout>div { min-width: 0; overflow-wrap: anywhere; }
.request-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.building-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; }
.building-grid img { margin: 0 auto; display: block; }
.customer-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; align-items: start; }
.customer-field { margin-bottom: 15px; }
.customer-field label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--ink2); }
.customer-muted { color: var(--ink3); font-size: 12px; line-height: 1.7; }
.customer-editor h2 { font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.flash-success,.flash-error,.flash-info,.customer-error { padding: 13px 17px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 21px; font-size: 12px; }
.flash-success { color: var(--green); background: var(--greenl); }
.flash-error,.customer-error { color: var(--red); background: var(--redl); }
.flash-info { color: var(--blue); background: var(--bluel); }
[id$="-modal"]>div { box-shadow: 0 20px 80px #172c4340; border: 1px solid var(--border); }
@media(min-width:1500px) { .stat-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media(max-width:1150px) {
  #content { padding: 26px 24px; } #topbar { padding: 0 24px; }
  .heading-action { display: none; } .overview-banner { align-items: flex-start; flex-direction: column; gap: 17px; }
  .dash-col-3 { grid-template-columns: repeat(2,minmax(0,1fr)); } .dash-col-3>.card:last-child { grid-column: span 2; }
  .customer-layout { grid-template-columns: minmax(0,1fr); } .customer-editor { max-width: none; }
  .request-layout { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:768px) {
  #sidebar { transform: translateX(-100%); width: 235px; } #sidebar.open { transform: translateX(0); }
  #sidebar nav a,.resident-link { min-height: 44px; }
  #main { margin-left: 0; } #ham { display: inline-flex; } #overlay.show { display: block; }
  #topbar { padding: 0 20px; } #ham { order: -1; flex-shrink: 0; }
  #content { padding: 25px 20px; } .page-heading { margin-bottom: 24px; } .page-heading h1 { font-size: 27px; }
  .portal-footer { margin: 0 20px; } .building-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
}
@media(max-width:480px) {
  #content { padding: 23px 16px; } #topbar { padding: 0 16px; } .topbar-context { display: none; }
  .user-box { gap: 0 8px; max-width: calc(100% - 54px); } .card { padding: 19px; }
  .overview-banner { padding: 23px; } .overview-banner h2 { font-size: 20px; } .overview-banner p { line-height: 1.8; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; } .stat-card { padding: 15px; }
  .stat-icon { width: 25px; height: 25px; } .stat-label { font-size: 10px; } .stat-value { font-size: 29px; margin-top: 10px; }
  .stat-context { font-size: 9px; } .dash-col-3 { grid-template-columns: minmax(0,1fr); } .dash-col-3>.card:last-child { grid-column: auto; }
  .admin-filter-bar { padding: 17px; gap: 13px; } .filter-group { min-width: 110px; } .filter-group.search { min-width: 100%; }
  .request-fields { grid-template-columns: minmax(0,1fr); } .request-fields>div { padding-left: 0!important; }
  .tbl-container>div:last-child { flex-wrap: wrap; } .building-grid { grid-template-columns: minmax(0,1fr); }
  .inp,.filter-input { font-size: 16px; } .customer-layout .card>form { min-width: 0; }
  .portal-footer { font-size: 9px; margin: 0 16px; }
}
@media(prefers-reduced-motion:reduce) { * { transition: none!important; } }