/* Harmani Management. Brand from harmanirentals.com: green #115b46, Montserrat headings, Open Sans body.
   Dark is the default; the Theme button switches to light and remembers it. */

:root {
    --hm-green: #115b46;
    --hm-green-dark: #0d4636;
    --hm-green-mid: #1a7a5c;
    --hm-green-bright: #22a876;
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif;
    --sidebar-w: 220px;
}

[data-bs-theme=dark] {
    --bs-body-bg: #0e1412;
    --bs-body-color: #e3e9e6;
    --bs-secondary-color: #9aaba3;
    --bs-tertiary-bg: #16201c;
    --bs-secondary-bg: #1b2722;
    --bs-border-color: #26352f;
    --bs-primary: #22a876;
    --bs-primary-rgb: 34, 168, 118;
    --bs-link-color: #4cc596;
    --bs-link-color-rgb: 76, 197, 150;
    --bs-link-hover-color: #7ad8b2;
    --bs-link-hover-color-rgb: 122, 216, 178;
    --hm-surface: #141c19;
    --hm-surface-2: #19241f;
    --hm-sidebar: #0b100e;
    --hm-accent: #22a876;
    --hm-accent-text: #04140d;
    --bs-table-bg: transparent;
}

[data-bs-theme=light] {
    --bs-body-bg: #f3f6f5;
    --bs-body-color: #222a27;
    --bs-primary: #115b46;
    --bs-primary-rgb: 17, 91, 70;
    --bs-link-color: #115b46;
    --bs-link-color-rgb: 17, 91, 70;
    --bs-link-hover-color: #0d4636;
    --bs-link-hover-color-rgb: 13, 70, 54;
    --hm-surface: #ffffff;
    --hm-surface-2: #f7faf9;
    --hm-sidebar: #ffffff;
    --hm-accent: #115b46;
    --hm-accent-text: #ffffff;
}

body { font-family: var(--font-body); font-size: .92rem; }
h1, h2, h3, h4, h5, h6, .brand-sub, .nav-section, .tile .num { font-family: var(--font-heading); }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons in the brand colour */
.btn-primary {
    --bs-btn-bg: var(--hm-accent); --bs-btn-border-color: var(--hm-accent); --bs-btn-color: var(--hm-accent-text);
    --bs-btn-hover-bg: var(--hm-green-mid); --bs-btn-hover-border-color: var(--hm-green-mid); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--hm-green-dark); --bs-btn-active-border-color: var(--hm-green-dark);
    --bs-btn-disabled-bg: var(--hm-accent); --bs-btn-disabled-border-color: var(--hm-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--hm-accent);
    --bs-btn-hover-bg: var(--hm-accent); --bs-btn-hover-border-color: var(--hm-accent); --bs-btn-hover-color: var(--hm-accent-text);
    --bs-btn-active-bg: var(--hm-green-dark); --bs-btn-active-border-color: var(--hm-green-dark);
}
.form-check-input:checked { background-color: var(--hm-accent); border-color: var(--hm-accent); }
.form-control:focus, .form-select:focus { border-color: var(--hm-green-mid); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* App shell */
body.app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); background: var(--hm-sidebar); border-right: 1px solid var(--bs-border-color);
    display: flex; flex-direction: column;
}
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
}
.sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1rem .75rem; }
.brand-link { display: inline-flex; flex-direction: column; gap: .2rem; }
.brand-link:hover { text-decoration: none; }
.logo { height: 26px; width: auto; }
[data-bs-theme=dark] .logo-light, [data-bs-theme=light] .logo-dark { display: none; }
.brand-sub { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.sidebar-nav { display: flex; flex-direction: column; padding: .25rem .5rem; overflow-y: auto; flex: 1; }
.sidebar-nav .nav-item {
    color: var(--bs-body-color); padding: .45rem .75rem; border-radius: .4rem; margin-bottom: 1px; font-weight: 500;
}
.sidebar-nav .nav-item:hover { background: var(--bs-secondary-bg); text-decoration: none; }
.sidebar-nav .nav-item.active { background: rgba(var(--bs-primary-rgb), .16); color: var(--bs-link-color); font-weight: 600; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); padding: 1rem .75rem .35rem; }
.sidebar-foot { padding: .75rem 1rem; font-size: .75rem; color: var(--bs-secondary-color); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
    background: var(--hm-surface); position: sticky; top: 0; z-index: 1020;
}
.topsearch { flex: 1; max-width: 520px; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.content { padding: 1.25rem; max-width: 1600px; width: 100%; }
.bare-content { max-width: 440px; margin: 8vh auto; padding: 1rem; }

/* Page furniture */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-head .sub { color: var(--bs-secondary-color); font-size: .85rem; width: 100%; margin-top: -.5rem; }
.crumbs { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.crumbs a { color: var(--bs-secondary-color); }

.card { background: var(--hm-surface); border-color: var(--bs-border-color); }
.card-header { background: var(--hm-surface-2); border-color: var(--bs-border-color); font-family: var(--font-heading); font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.card-header .ms-auto { font-family: var(--font-body); font-weight: 400; }
.section { margin-bottom: 1.25rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .75rem; }
.filters .form-control, .filters .form-select { width: auto; min-width: 140px; }
.filters .grow { flex: 1; min-width: 200px; }

.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .87rem; }
.table > :not(caption) > * > * { padding: .45rem .6rem; border-color: var(--bs-border-color); }
.table thead th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .07); }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
tr.dim td { opacity: .6; }

dl.facts { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: .3rem 1rem; margin: 0; }
dl.facts dt { font-weight: 600; color: var(--bs-secondary-color); font-size: .82rem; }
dl.facts dd { margin: 0; }
.muted { color: var(--bs-secondary-color); }
.small-note { font-size: .8rem; color: var(--bs-secondary-color); }
.pre { white-space: pre-wrap; }

/* Status chips */
.chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st-occupied { background: rgba(34, 168, 118, .15); color: #2fbf87; border-color: rgba(34, 168, 118, .35); }
.st-vacant { background: rgba(229, 83, 75, .14); color: #ef6b63; border-color: rgba(229, 83, 75, .35); }
.st-notice { background: rgba(240, 160, 50, .15); color: #f0a032; border-color: rgba(240, 160, 50, .35); }
.st-rented { background: rgba(80, 150, 240, .15); color: #6aa8f5; border-color: rgba(80, 150, 240, .35); }
.st-past { background: rgba(150, 160, 155, .14); color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.pr-Emergency { background: #c9302c; color: #fff; }
.pr-High { background: rgba(240, 120, 50, .18); color: #f08a42; border-color: rgba(240, 120, 50, .4); }
.pr-Normal { background: rgba(150, 160, 155, .12); color: var(--bs-body-color); border-color: rgba(150, 160, 155, .3); }
.pr-Low { background: transparent; color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.ms-New { background: rgba(80, 150, 240, .15); color: #6aa8f5; border-color: rgba(80, 150, 240, .35); }
.ms-Scheduled { background: rgba(160, 120, 240, .15); color: #b294f5; border-color: rgba(160, 120, 240, .35); }
.ms-InProgress { background: rgba(240, 160, 50, .15); color: #f0a032; border-color: rgba(240, 160, 50, .35); }
.ms-OnHold { background: rgba(150, 160, 155, .14); color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.ms-Completed { background: rgba(34, 168, 118, .15); color: #2fbf87; border-color: rgba(34, 168, 118, .35); }
.ms-Cancelled { background: transparent; color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); text-decoration: line-through; }
.flag { background: rgba(229, 83, 75, .14); color: #ef6b63; border-color: rgba(229, 83, 75, .35); }
[data-bs-theme=light] .st-occupied, [data-bs-theme=light] .ms-Completed { color: #157a55; }
[data-bs-theme=light] .st-vacant, [data-bs-theme=light] .flag { color: #b8322b; }
[data-bs-theme=light] .st-notice, [data-bs-theme=light] .ms-InProgress { color: #9a5d00; }
[data-bs-theme=light] .st-rented, [data-bs-theme=light] .ms-New { color: #1d5fb8; }
[data-bs-theme=light] .ms-Scheduled { color: #6a3fc1; }
[data-bs-theme=light] .pr-High { color: #a94c0c; }

/* Dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tile { background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .8rem 1rem; color: var(--bs-body-color); display: block; }
a.tile:hover { border-color: var(--hm-accent); text-decoration: none; }
.tile .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.tile .lbl { font-size: .8rem; color: var(--bs-secondary-color); }
.tile.warn .num { color: #f0a032; }
.tile.bad .num { color: #ef6b63; }

/* Tabs on record pages */
.nav-tabs { --bs-nav-tabs-border-color: var(--bs-border-color); margin-bottom: 1rem; }
.nav-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--bs-body-color); background: var(--hm-surface); border-color: var(--bs-border-color) var(--bs-border-color) var(--hm-surface); }

.activity { list-style: none; padding: 0; margin: 0; }
.activity li { padding: .45rem 0; border-bottom: 1px solid var(--bs-border-color); font-size: .85rem; }
.activity li:last-child { border-bottom: 0; }
.activity .when { color: var(--bs-secondary-color); font-size: .75rem; }
.activity details summary { cursor: pointer; color: var(--bs-secondary-color); font-size: .75rem; }

.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.thumbs img { height: 90px; width: auto; border-radius: .35rem; border: 1px solid var(--bs-border-color); object-fit: cover; }

/* Maintenance worker view: big touch targets */
.job-card { background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .9rem 1rem; margin-bottom: .75rem; }
.job-card .where { font-family: var(--font-heading); font-weight: 600; }
.job-card .btn { min-height: 2.5rem; }

.form-section { font-family: var(--font-heading); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: 1.25rem 0 .5rem; }
.required::after { content: " *"; color: #ef6b63; }
.grid-edit input { min-width: 70px; }
.modal-content { background: var(--hm-surface); }

/* Small text buttons (Make main, Delete...) look like the links beside them. */
.btn-link.small-note, .btn-link.p-0 { text-decoration: none; vertical-align: baseline; }

/* Facts with no value are hidden rather than shown blank. */
dl.facts dd:empty, dl.facts dt:has(+ dd:empty) { display: none; }

/* Dates, phones and money never break across lines. */
.nowrap, .table td.num, .table th.num { white-space: nowrap; }
.table td.wrap { white-space: normal; min-width: 14rem; }

.topbar .user-btn { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

.getting-started ol { padding-left: 1.2rem; margin: 0; }
.getting-started li { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- phones and small tablets */
@media (max-width: 767.98px) {
    body { font-size: .95rem; }
    .content { padding: .85rem .75rem 2rem; }
    .topbar { gap: .5rem; padding: .5rem .75rem; }
    .topsearch { max-width: none; }
    .topbar .user-btn { max-width: 7rem; }
    h1 { font-size: 1.25rem; }
    .page-head { gap: .5rem; }
    .page-head .actions { margin-left: 0; width: 100%; }
    .page-head .sub { margin-top: 0; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .9rem; }
    .tile { padding: .45rem .65rem; display: flex; align-items: center; gap: .55rem; }
    .tile .num { font-size: 1.15rem; min-width: 1.8rem; text-align: left !important; }
    .tile .lbl { font-size: .75rem; line-height: 1.15; }
    .hide-sm { display: none !important; }
    dl.facts { grid-template-columns: 8.5rem 1fr; }
    form.filters.collapsible:not(.open) > :not(.grow):not(.filters-toggle) { display: none; }
    form.filters.collapsible .filters-toggle { flex: 0 0 auto; }
    form.filters.collapsible > .grow { flex: 1 1 60%; }
    .filters > * { flex: 1 1 calc(50% - .5rem); }
    .filters .form-control, .filters .form-select { width: 100%; min-width: 0; }
    .filters .grow { flex-basis: 100%; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .45rem .7rem; }
    .card-body { padding: .85rem; }
    .modal-dialog { margin: .5rem; }
    .btn { min-height: 2.25rem; }
    .btn-sm { min-height: 2rem; }
    .form-control, .form-select { font-size: 16px; } /* stops iOS zooming into fields */

    /* Lists become stacked cards: site.js copies each column heading onto its cells. */
    table.stack thead { display: none; }
    table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
    table.stack tr { padding: .6rem .8rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-direction: column; }
    table.stack td.cell-title { order: -1; }
    table.stack > :not(caption) > * > * { border: 0; padding: .12rem 0; }
    table.stack td { position: relative; text-align: left !important; white-space: normal !important; min-width: 0 !important; }
    table.stack td[data-label] { padding-left: 38% !important; min-height: 1.4rem; }
    table.stack td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: .15rem; width: 35%;
        font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    table.stack td.cell-title { padding-left: 0 !important; font-weight: 600; font-size: 1rem; }
    table.stack td.cell-title::before { display: none; }
    table.stack td:empty { display: none; }
    table.stack tr:hover > * { background: transparent; }
}

@media print {
    .sidebar, .topbar, .no-print, .btn { display: none !important; }
    body.app { display: block; }
    .content { padding: 0; }
}

/* Address picker (site.js): suggestions under the street field, and the list's status below it. */
.address-menu {
    position: absolute; z-index: 1060; left: 0; right: 0; top: 100%; margin-top: 2px;
    background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .375rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25); max-height: 20rem; overflow-y: auto;
}
.address-menu button {
    display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit;
    padding: .45rem .75rem; line-height: 1.3;
}
.address-menu button.active, .address-menu button:hover { background: var(--hm-surface-2); }
.address-menu button.active { box-shadow: inset 3px 0 0 var(--hm-accent); }
.address-menu .sub { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.address-menu .credit { font-size: .72rem; color: var(--bs-secondary-color); padding: .3rem .75rem; border-top: 1px solid var(--bs-border-color); }
.address-status { margin-top: .35rem; font-size: .82rem; color: var(--bs-secondary-color); }
.address-status.busy { color: var(--bs-body-color); background: var(--hm-surface-2); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .35rem .6rem; }
.address-status.warn { color: var(--bs-warning-text-emphasis); }
.address-status .spinner-border { width: .8rem; height: .8rem; border-width: .14em; margin-right: .35rem; vertical-align: -.1em; }