/* =============================================================
   ironcity.css
   Iron City Enterprises — Custom Stylesheet
   Location: /home/hudsondev/public_html/dev.ironcityenterprises.com/css/ironcity.css
   Load order: pico.min.css first, then this file
   ============================================================= */


/* -------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   All colors, fonts, and sizing in one place.
   To retheme the site, change values here only.
   ------------------------------------------------------------- */

:root {
    color-scheme: light;
    --color-primary:        #730005;   /* Dark red — primary brand color */
    --color-primary-dark:   #590004;   /* Darker red — hover states */
    --color-primary-light:  #660000;   /* Slightly lighter red — headings, labels */
    --color-accent:         #cccccc;   /* Light gray — table headers, label cells */
    --color-row-alt:        #cdcde0;   /* Lavender gray — alternating table rows */
    --color-field-bg:       #F2F7FB;   /* Light blue-white — form field backgrounds */
    --color-field-border:   #284279;   /* Dark blue — form field borders */
    --color-field-input-bg: #D7E5F2;   /* Light blue — input field backgrounds */
    --color-shaded-box:     #EBEBEB;   /* Light gray — shaded rounded boxes */
    --color-white:          #ffffff;
    --color-black:          #000000;
    --color-page-bg:        #ffffff;   /* Page background — white */
    --color-nav-bg:         #730005;   /* Nav bar background */
    --color-nav-text:       #ffffff;   /* Nav bar link color */
    --color-nav-hover:      #590004;   /* Nav bar hover background */
    --color-footer-bg:      #730005;   /* Footer background */
    --color-footer-text:    #ffffff;   /* Footer text */

    --font-body:    Verdana, Geneva, Arial, Helvetica, sans-serif;
    --font-size-base:   12px;
    --font-size-small:  11px;
    --font-size-tiny:   10px;

    --radius:       15px;   /* Rounded box border radius */
    --radius-small: 10px;   /* Smaller radius for nav elements */
}


/* -------------------------------------------------------------
   2. PICO CSS OVERRIDES
   Override Pico defaults to match Iron City theme.
   ------------------------------------------------------------- */

:root {
    --pico-font-family:             var(--font-body);
    --pico-font-size:               var(--font-size-base);
    --pico-color:                   var(--color-primary);
    --pico-background-color:        var(--color-page-bg);
    --pico-primary:                 var(--color-primary);
    --pico-primary-hover:           var(--color-primary-dark);
    --pico-primary-focus:           var(--color-primary-dark);
    --pico-border-radius:           var(--radius-small);
    --pico-form-element-background-color: var(--color-field-input-bg);
    --pico-form-element-border-color:     var(--color-field-border);

    /* Suppress Pico dark-mode table colors — always use our own backgrounds */
    --pico-table-border-color:                  #cccccc;
    --pico-table-row-stripped-background-color: transparent;
    --pico-card-background-color:               var(--color-white);
    --pico-card-sectioning-background-color:    var(--color-white);
}

/* Force light scheme even if OS is in dark mode — prevents Pico dark-mode bleed */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
        --pico-background-color:                    var(--color-page-bg);
        --pico-color:                               var(--color-primary);
        --pico-table-row-stripped-background-color: transparent;
        --pico-card-background-color:               var(--color-white);
    }
}


/* -------------------------------------------------------------
   3. BASE / RESET
   ------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    color:              var(--color-primary);
    background-color:   var(--color-page-bg);
    text-align:         left;
}


/* -------------------------------------------------------------
   4. PAGE WRAPPER
   Centers content and constrains max width.
   ------------------------------------------------------------- */

#page-wrap {
    width:      95%;
    max-width:  1200px;
    margin:     0 auto;
    padding:    0;
}


/* -------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------- */

.header {
    display:            block;
    background-color:   var(--color-primary);
    color:              var(--color-nav-text);
    text-align:         left;
    padding:            5px;
    font-size:          var(--font-size-base);
}

.header img {
    display:    block;
    max-width:  100%;
    height:     auto;
}


/* -------------------------------------------------------------
   6. PUBLIC NAVIGATION
   Desktop: horizontal bar with CSS hover dropdown.
   Mobile:  hamburger toggle (#nav-toggle in header) collapses
            all links; Rental Properties accordion via JS.
   ------------------------------------------------------------- */

/* --- Header inner layout (logo + hamburger) --- */
.header-inner {
    display:        flex;
    align-items:    center;
    justify-content: center;   /* center logo on desktop */
}

.header-inner img {
    display:    block;
    max-width:  100%;
    height:     auto;
}

/* Mobile: logo left, hamburger right */
@media (max-width: 768px) {
    .header-inner {
        justify-content: space-between;
    }
    .header-inner img {
        max-width: calc(100% - 60px);
    }
}

/* --- Hamburger button (hidden on desktop) --- */
#nav-toggle {
    display:            none;
    background:         none;
    border:             none;
    color:              var(--color-nav-text);
    font-size:          26px;
    line-height:        1;
    padding:            10px 14px;
    cursor:             pointer;
    flex-shrink:        0;
    min-width:          44px;
    min-height:         44px;
}

/* --- Nav shell --- */
#public-nav {
    background-color:   var(--color-nav-bg);
    margin:             0;
    padding:            0;
    font-size:          var(--font-size-base);
}

/* --- Nav links wrapper (the collapsible region) --- */
#nav-links {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    stretch;
}

#nav-links .nav-link,
#nav-links > .nav-dropdown > .nav-dropdown-head > .nav-link {
    display:            block;
    color:              var(--color-nav-text);
    text-decoration:    none;
    padding:            10px 16px;
    white-space:        nowrap;
    line-height:        1.4;
}

#nav-links .nav-link:hover {
    background-color:   var(--color-nav-hover);
    color:              var(--color-nav-text);
    text-decoration:    none;
}

/* --- Dropdown container (desktop) --- */
.nav-dropdown {
    position:   relative;
    display:    flex;
    align-items: stretch;
}

.nav-dropdown-head {
    display:    flex;
    align-items: stretch;
}

/* Sub-toggle arrow (hidden on desktop) */
.nav-sub-toggle {
    display:    none;
}

/* Dropdown panel — hidden by default, revealed on hover (desktop) */
.nav-dropdown-content {
    display:            none;
    position:           absolute;
    top:                100%;
    left:               0;
    background-color:   var(--color-primary-dark);
    min-width:          210px;
    z-index:            1000;
    box-shadow:         0 4px 12px rgba(0,0,0,0.3);
}

.nav-dropdown-content a {
    display:        block;
    padding:        10px 16px;
    color:          var(--color-nav-text) !important;
    white-space:    nowrap;
    text-decoration: none;
}

.nav-dropdown-content a:hover {
    background-color:   var(--color-primary);
    color:              var(--color-nav-text) !important;
    text-decoration:    none;
}

/* Show on hover — desktop only */
@media (min-width: 769px) {
    .nav-dropdown:hover .nav-dropdown-content {
        display: block;
    }

    /* Hamburger is desktop-invisible */
    #admin-nav-toggle {
        display: none;
    }
}


/* -------------------------------------------------------------
   7. ADMIN NAVIGATION
   Horizontal nav bar — dynamic items via nav_admin.php.
   ------------------------------------------------------------- */

#admin-nav {
    display:            flex !important;
    flex-wrap:          nowrap;
    justify-content:    flex-start !important;  /* override Pico's space-between */
    align-items:        stretch;
    gap:                0;
    background-color:   var(--color-nav-bg);
    padding:            0;
    margin:             0;
    font-size:          var(--font-size-base);
    position:           relative;
    z-index:            100;
    overflow:           visible;  /* must be visible so dropdown panels aren't clipped */
}

/* Top-level direct links (Dashboard, Transactions, Users, Logout) */
#admin-nav > a {
    display:            flex !important;
    align-items:        center;
    color:              var(--color-nav-text) !important;
    text-decoration:    none !important;
    padding:            10px 16px;
    white-space:        nowrap;
}

#admin-nav > a:hover,
#admin-nav > a.nav-active {
    background-color:   var(--color-nav-hover);
    color:              var(--color-nav-text) !important;
    text-decoration:    none;
}

/* Dropdown wrapper */
.admin-nav-item {
    position:           relative;
    display:            flex;
    align-items:        stretch;
}

/* Dropdown trigger button */
.admin-nav-item > a {
    display:            flex !important;
    align-items:        center;
    color:              var(--color-nav-text) !important;
    text-decoration:    none !important;
    padding:            10px 16px;
    white-space:        nowrap;
    cursor:             pointer;
}

.admin-nav-item > a:hover,
.admin-nav-item > a.nav-active {
    background-color:   var(--color-nav-hover);
    color:              var(--color-nav-text);
    text-decoration:    none;
}

/* Dropdown panel — hidden by default; shown on hover (desktop only) */
#admin-nav .admin-dropdown {
    display:            none !important;
    position:           absolute;
    top:                100%;
    left:               0;
    min-width:          180px;
    background-color:   var(--color-nav-bg);
    z-index:            200;
    box-shadow:         0 4px 8px rgba(0,0,0,0.3);
}

#admin-nav .admin-nav-item:hover .admin-dropdown {
    display:            block !important;
}

/* Dropdown links */
.admin-dropdown a {
    display:            block !important;
    color:              var(--color-nav-text) !important;
    text-decoration:    none !important;
    padding:            9px 16px;
    white-space:        nowrap;
    border-top:         1px solid var(--color-nav-hover);
}

.admin-dropdown a:hover,
.admin-dropdown a.nav-active {
    background-color:   var(--color-nav-hover);
    color:              var(--color-nav-text) !important;
}

/* Divider within dropdown */
.admin-dropdown hr {
    border:             none;
    border-top:         1px solid var(--color-nav-hover);
    margin:             0;
}


/* -------------------------------------------------------------
   8. CONTENT AREA
   ------------------------------------------------------------- */

#content {
    background-color:   var(--color-white);
    padding:            15px;
    text-align:         left;
}


/* -------------------------------------------------------------
   8b. AD UNITS (MF-21)
   ------------------------------------------------------------- */

/* Position A: Top Banner — below nav, above page content */
.ic-ad-top {
    background-color:   #f5f5f5;
    border-bottom:      1px solid #e0e0e0;
    padding:            6px 15px 8px;
    text-align:         center;
}

/* Position C: Mid Page — below two-column layout, above About */
.ic-ad-mid {
    padding:            12px 0 8px;
    text-align:         center;
    border-top:         1px solid #e0e0e0;
    border-bottom:      1px solid #e0e0e0;
    margin-bottom:      12px;
}

/* Fixed-size ad units — mobile: 320x50; desktop: 728x90 */
/* Explicit dimensions override AdSense auto-sizing; prevents tall mobile formats */
.ic-ad-ins-top,
.ic-ad-ins-mid {
    width:  320px;
    height: 50px;
}

@media (min-width: 769px) {
    .ic-ad-ins-top,
    .ic-ad-ins-mid {
        width:  728px;
        height: 90px;
    }
}

/* "Advertisement" label above each unit */
.ic-ad-label {
    display:            block;
    font-size:          10px;
    color:              #999;
    margin-bottom:      4px;
    letter-spacing:     0.5px;
}

/* -------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------- */

.footer {
    display:            block;
    background-color:   var(--color-footer-bg);
    color:              var(--color-footer-text);
    text-align:         center;
    padding:            10px 5px;
    font-size:          var(--font-size-tiny);
}

.footer a {
    color:              var(--color-footer-text);
    text-decoration:    underline;
}

.footer a:hover {
    color:              var(--color-accent);
    text-decoration:    none;
}

.footer p {
    margin:     4px 0;
    color:      var(--color-footer-text);
}


/* -------------------------------------------------------------
   10. TYPOGRAPHY
   ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color:          var(--color-primary-light);
    font-family:    var(--font-body);
}

h2 {
    text-align:     center;
    font-size:      16px;
}

h3 {
    font-size:      14px;
}

h4 {
    font-size:      13px;
}

a {
    color:          var(--color-primary);
    text-decoration: none;
}

a:visited {
    color:          var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    cursor:         pointer;
    color:          var(--color-primary-dark);
}

p {
    font-family:    var(--font-body);
    font-size:      var(--font-size-base);
    color:          var(--color-primary);
    line-height:    1.5;
}


/* -------------------------------------------------------------
   11. TABLES
   Data tables used throughout the management backend.
   ------------------------------------------------------------- */

/* Background reset — overrides Pico dark-mode and old HTML bgcolor attributes.
   Class-based backgrounds (.evenrow, .oddrow, th, etc.) apply on top. */
table,
thead,
tbody,
tfoot,
tr,
td {
    background-color: transparent;
}

table {
    width:              100%;
    border-collapse:    collapse;
    margin:             0;
    padding:            0;
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    font-weight:        normal;
}

th {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    font-weight:        bold;
    color:              var(--color-primary-light);
    background-color:   var(--color-accent);
    vertical-align:     middle;
    padding:            6px 8px;
    text-align:         left;
}

td {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    color:              var(--color-primary);
    vertical-align:     middle;
    padding:            5px 8px;
}

/* Alternating row colors */
.evenrow {
    background-color: var(--color-row-alt);
    color: var(--color-black);
}

.oddrow {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* Override Pico's td color inside alternating rows */
.evenrow td {
    color: var(--color-black);
}

.oddrow td {
    color: var(--color-primary);
}

/* Table row hover */
tbody tr:hover {
    background-color: #f0e8e8;
}

/* Suppress row hover on tables that don't need it (e.g. dashboard layout tables) */
table.no-hover tbody tr:hover,
table.no-hover tr:hover {
    background-color: inherit;
}

/* Report table — used for financial/summary reports */
#report_table th {
    background-color:   #8282B0;
    color:              var(--color-white);
    text-align:         center;
}

#report_table td {
    text-align:         center;
}

#report_table td.td-left {
    text-align:         left;
}

#report_table tr:nth-of-type(odd) {
    background-color:   var(--color-row-alt);
}

#report_table tr:nth-of-type(even) {
    background-color:   var(--color-white);
}

/* Sortable column headers — added during migration */
th.sortable {
    cursor:         pointer;
    user-select:    none;
}

th.sortable:hover {
    background-color: #bbbbbb;
}

th.sort-asc::after  { content: ' ▲'; font-size: 10px; }
th.sort-desc::after { content: ' ▼'; font-size: 10px; }


/* -------------------------------------------------------------
   12. FORMS
   ------------------------------------------------------------- */

.labelcell {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    font-weight:        bold;
    color:              var(--color-primary-light);
    background-color:   var(--color-accent);
    vertical-align:     middle;
    padding:            5px 8px;
}

.fieldcell {
    background-color:   var(--color-field-bg);
    color:              var(--color-primary-light);
    font-family:        var(--font-body);
    font-size:          var(--font-size-small);
    vertical-align:     middle;
    padding:            5px 8px;
}

.fieldcell input,
.fieldcell select,
.fieldcell textarea {
    font-family:        var(--font-body);
    font-size:          var(--font-size-small);
    background-color:   var(--color-field-input-bg);
    color:              #102132;
    border:             1px solid var(--color-field-border);
    padding:            4px 6px;
    width:              100%;
    max-width:          400px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-family:        var(--font-body);
    font-size:          var(--font-size-small);
    background-color:   var(--color-field-input-bg);
    color:              #102132;
    border:             1px solid var(--color-field-border);
    padding:            4px 6px;
}

input[type="submit"],
button {
    font-family:        var(--font-body);
    font-size:          var(--font-size-small);
    font-weight:        bold;
    background-color:   var(--color-primary);
    color:              var(--color-white);
    border:             none;
    padding:            6px 14px;
    cursor:             pointer;
    border-radius:      4px;
}

input[type="submit"]:hover,
button:hover {
    background-color:   var(--color-primary-dark);
}

.button {
    font-family:        var(--font-body);
    font-size:          var(--font-size-small);
    font-weight:        bold;
    background-color:   var(--color-accent);
    color:              var(--color-primary-light);
    border:             1px solid var(--color-primary-light);
    padding:            5px 12px;
    cursor:             pointer;
    border-radius:      4px;
    margin:             3px 0;
}


/* -------------------------------------------------------------
   13. ROUNDED BOXES
   Used extensively in the admin dashboard and detail pages.
   ------------------------------------------------------------- */

.rounded-box {
    background-color:   var(--color-white);
    border:             3px solid var(--color-primary-light);
    border-radius:      var(--radius);
    padding:            15px;
    margin-bottom:      15px;
}

.rounded-box-shaded {
    background-color:   var(--color-shaded-box);
    border:             3px solid var(--color-shaded-box);
    border-radius:      var(--radius);
    padding:            15px;
    margin-bottom:      15px;
}

/* Legacy IDs — kept for backward compatibility during migration.
   New pages use .rounded-box and .rounded-box-shaded classes instead. */
#rounded_box {
    background-color:   var(--color-white);
    border:             3px solid var(--color-primary-light);
    border-radius:      var(--radius);
    padding:            15px;
    margin-bottom:      15px;
}

#shaded_rounded_box {
    background-color:   var(--color-shaded-box);
    border:             3px solid var(--color-shaded-box);
    border-radius:      var(--radius);
    padding:            15px;
    margin-bottom:      15px;
}

.rounded-box h3,
.rounded-box-shaded h3,
#rounded_box h3,
#shaded_rounded_box h3 {
    margin-top:     0;
    font-size:      14px;
    color:          var(--color-primary);
}


/* -------------------------------------------------------------
   14. SECTION AND ROW HEADERS
   ------------------------------------------------------------- */

.row_header,
.section_header {
    font-family:        var(--font-body);
    font-size:          var(--font-size-base);
    font-weight:        bold;
    color:              var(--color-primary-light);
    background-color:   var(--color-accent);
    vertical-align:     middle;
    padding:            5px 8px;
}


/* -------------------------------------------------------------
   15. UTILITY CLASSES
   ------------------------------------------------------------- */

.clear {
    clear: both;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-bold {
    font-weight: bold;
}

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }


/* -------------------------------------------------------------
   16. RESPONSIVE — MOBILE BREAKPOINTS
   ------------------------------------------------------------- */

@media (max-width: 768px) {

    #page-wrap {
        width: 100%;
        padding: 0 8px;
    }

    /* --- Admin nav: hamburger pattern on mobile --- */

    /* Hamburger button — visible only on mobile */
    #admin-nav-toggle {
        display:            flex;
        align-items:        center;
        gap:                6px;
        background-color:   var(--color-nav-bg);
        color:              var(--color-nav-text);
        border:             none;
        padding:            10px 16px;
        font-size:          1rem;
        cursor:             pointer;
        width:              100%;
        text-align:         left;
    }

    /* Nav hidden by default on mobile; hamburger reveals it */
    #admin-nav {
        display:        none !important;
        flex-direction: column;
        align-items:    flex-start;
    }

    #admin-nav.nav-open {
        display:        flex !important;
    }

    #admin-nav > a,
    .admin-nav-item,
    .admin-nav-item > a {
        width:          100%;
        padding:        12px 16px;
        border-bottom:  1px solid var(--color-primary-dark);
        box-sizing:     border-box;
    }

    /* Dropdowns hidden by default; shown when parent has .nav-item-open */
    #admin-nav .admin-dropdown {
        display:        none !important;
        position:       static;
        box-shadow:     none;
        width:          100%;
    }

    .admin-nav-item.nav-item-open .admin-dropdown {
        display:        block !important;
    }

    #admin-nav .admin-dropdown a {
        padding-left:   32px;
    }

    /* --- Public nav: hamburger mode --- */

    /* Show the hamburger button */
    #nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Collapse #nav-links by default; JS adds .nav-open to expand */
    #nav-links {
        display:            none;
        flex-direction:     column;
        width:              100%;
        border-top:         1px solid var(--color-primary-dark);
    }

    #nav-links.nav-open {
        display: flex;
    }

    /* Full-width links with generous touch targets */
    #nav-links .nav-link {
        width:          100%;
        padding:        14px 20px;
        border-bottom:  1px solid var(--color-primary-dark);
        font-size:      15px;
        white-space:    normal;
    }

    /* Rental Properties row: link + arrow button side-by-side */
    .nav-dropdown {
        flex-direction: column;
        width:          100%;
    }

    .nav-dropdown-head {
        display:        flex;
        align-items:    stretch;
        width:          100%;
        border-bottom:  1px solid var(--color-primary-dark);
    }

    .nav-dropdown-head .nav-link {
        flex:           1;
        border-bottom:  none;
        padding:        14px 20px;
    }

    /* Show the sub-menu arrow button */
    .nav-sub-toggle {
        display:            flex;
        align-items:        center;
        justify-content:    center;
        min-width:          48px;
        background:         none;
        border:             none;
        border-left:        1px solid var(--color-primary-dark);
        color:              var(--color-nav-text);
        font-size:          14px;
        cursor:             pointer;
        padding:            0 14px;
    }

    .nav-sub-toggle:hover {
        background-color: var(--color-nav-hover);
    }

    /* Sub-menu hidden by default; JS adds .sub-open */
    .nav-dropdown-content {
        display:        none;
        position:       static;
        box-shadow:     none;
        background-color: var(--color-primary-dark);
        width:          100%;
        min-width:      0;
    }

    .nav-dropdown-content.sub-open {
        display: block;
    }

    .nav-dropdown-content a {
        padding:        12px 20px 12px 36px; /* indent sub-items */
        border-bottom:  1px solid rgba(255,255,255,0.08);
        font-size:      14px;
    }

    /* Tables scroll horizontally on small screens */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 500px;
    }

    /* Stack form label/field pairs */
    .labelcell,
    .fieldcell {
        display:    block;
        width:      100%;
    }

    .fieldcell input,
    .fieldcell select,
    .fieldcell textarea {
        max-width: 100%;
    }

}

@media (max-width: 480px) {

    body {
        font-size: 13px;
    }

    h2 {
        font-size: 15px;
    }

    .header img {
        width:  100%;
        height: auto;
    }

}
/* -------------------------------------------------------------
   17. PICO OVERRIDE FIXES
   ------------------------------------------------------------- */

/* Alternating row shading — text stays dark red throughout */
table tbody tr.evenrow,
table tbody tr.evenrow td {
    background-color: #e8e6f0 !important;
}

table tbody tr.oddrow,
table tbody tr.oddrow td {
    background-color: var(--color-white) !important;
}


/* =============================================================
   18. PUBLIC PROPERTY PAGES
   Styles for view/properties.php, view/prop_detail.php,
   view/gallery.php, view/gallery_available.php
   ============================================================= */

/* ---- Status badges ---- */
.prop-vacant {
    color:          #1a7a1a;
}

.prop-occupied {
    color:          var(--color-primary);
}

/* ---- "No results" and count messages ---- */
.prop-none,
.prop-count {
    font-size:      var(--font-size-base);
    margin:         10px 0 14px;
}


/* ---- Filter bar (properties.php) ---- */
/* Each filter lives in its own .prop-filter-row. The bar stacks them vertically. */

.prop-filter-bar {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0 0 16px;
    padding:        10px 0;
    border-bottom:  2px solid var(--color-accent);
}

/* One horizontal row: label on the left, control(s) on the right */
.prop-filter-row {
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
}

/* Fixed-width label aligns all controls into a column */
.prop-filter-label {
    font-size:      var(--font-size-small);
    font-weight:    bold;
    color:          var(--color-primary);
    min-width:      90px;
    flex-shrink:    0;
}

.prop-company-tabs {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
    flex:       1 1 auto;
}

.prop-filter-tab {
    display:            inline-block;
    padding:            5px 12px;
    background-color:   var(--color-accent);
    color:              var(--color-primary);
    border:             1px solid #bbb;
    border-radius:      4px;
    font-size:          var(--font-size-small);
    font-weight:        bold;
    text-decoration:    none;
    white-space:        nowrap;
}

.prop-filter-tab:hover {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    text-decoration:    none;
}

.prop-filter-tab.active {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    border-color:       var(--color-primary-dark);
}

/* ---- Availability + Bedroom pill toggles ---- */

.prop-avail-toggle,
.prop-bed-toggle {
    display:    flex;
    gap:        2px;
    flex-shrink: 0;
}

.prop-toggle-btn {
    display:            inline-block;
    padding:            5px 12px;
    font-size:          var(--font-size-small);
    font-weight:        bold;
    text-decoration:    none;
    color:              var(--color-primary);
    background-color:   var(--color-white);
    border:             1px solid var(--color-primary);
}

.prop-toggle-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.prop-toggle-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.prop-toggle-btn:hover {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    text-decoration:    none;
}

.prop-toggle-btn.active {
    background-color:   var(--color-primary);
    color:              var(--color-white);
}


/* ---- Sortable column header links ---- */
/* :visited must be listed explicitly — a:visited (0,1,1) beats .sort-link (0,1,0)
   and would make clicked sort links invisible on the dark header. */
.sort-link,
.sort-link:visited {
    color:          var(--color-white);
    text-decoration: none;
    font-weight:    bold;
}

.sort-link:hover,
.sort-link:focus {
    text-decoration: underline;
    color:          var(--color-white);
}

/* ---- Rent range dual-handle slider ---- */

.prop-rent-form {
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
}

/* Wraps the value display and the track together */
.prop-rent-slider-wrap {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    width:          220px;
}

/* Live min/max labels above the track */
.prop-rent-values {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      var(--font-size-small);
    font-weight:    bold;
    color:          var(--color-primary);
}

.prop-rent-sep {
    font-size:      var(--font-size-small);
    color:          var(--color-primary);
}

/* The track area — both range inputs sit on top */
.prop-rent-track {
    position:       relative;
    height:         20px;
}

/* Gray background track line */
.prop-rent-track::before {
    content:        '';
    position:       absolute;
    top:            50%;
    left:           0;
    right:          0;
    height:         4px;
    background:     #ddd;
    border-radius:  2px;
    transform:      translateY(-50%);
}

/* Colored fill between the two thumbs — JS sets left/width */
.prop-rent-fill {
    position:       absolute;
    top:            50%;
    height:         4px;
    background:     var(--color-primary);
    border-radius:  2px;
    transform:      translateY(-50%);
    pointer-events: none;
}

/* Both range inputs share the same position; thumbs are the only interactive area */
.prop-rent-range {
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    margin:             0;
    padding:            0;
    background:         transparent;
    appearance:         none;
    -webkit-appearance: none;
    pointer-events:     none;   /* track click-through; only thumbs are clickable */
}

/* Webkit thumb (Chrome, Safari, Edge) */
.prop-rent-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events:     all;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         var(--color-primary);
    border:             2px solid var(--color-white);
    box-shadow:         0 1px 3px rgba(0,0,0,0.3);
    cursor:             pointer;
    position:           relative;
    z-index:            2;
}

/* Hide Webkit's default track — our ::before handles it */
.prop-rent-range::-webkit-slider-runnable-track {
    background:     transparent;
    height:         4px;
}

/* Firefox thumb */
.prop-rent-range::-moz-range-thumb {
    pointer-events: all;
    width:          14px;
    height:         14px;
    border-radius:  50%;
    background:     var(--color-primary);
    border:         2px solid var(--color-white);
    box-shadow:     0 1px 3px rgba(0,0,0,0.3);
    cursor:         pointer;
}

/* Hide Firefox's default track */
.prop-rent-range::-moz-range-track {
    background:     transparent;
}

/* Apply button */
.prop-rent-btn {
    padding:            5px 12px;
    font-size:          var(--font-size-small);
    font-weight:        bold;
    background-color:   var(--color-primary);
    color:              var(--color-white);
    border:             1px solid var(--color-primary-dark);
    border-radius:      4px;
    cursor:             pointer;
    line-height:        1.4;
    flex-shrink:        0;
}

.prop-rent-btn:hover {
    background-color:   var(--color-primary-dark);
}

/* Clear link — only visible when a rent filter is active */
.prop-rent-clear,
.prop-rent-clear:visited {
    font-size:      var(--font-size-small);
    color:          var(--color-primary);
    text-decoration: underline;
    flex-shrink:    0;
}

.prop-rent-clear:hover {
    color: var(--color-primary-dark);
}

/* ---- Property table column header sub-label ---- */
.col-sublabel {
    display:        block;
    font-size:      8px;
    font-weight:    normal;
    letter-spacing: 0.01em;
    opacity:        0.85;
    margin-top:     2px;
    white-space:    nowrap;
}

/* ---- Google Maps address link (public table) ---- */
.addr-map-link {
    color:          var(--color-primary);
    text-decoration: none;
}

.addr-map-link:hover {
    text-decoration: underline;
    color:          var(--color-primary-dark);
}

/* ---- Property details link (unbold) ---- */
.prop-details-link {
    font-weight:    normal;
    color:          var(--color-primary);
    text-decoration: none;
}

.prop-details-link:hover {
    text-decoration: underline;
}

/* ---- Public property table ---- */

#prop_public_table {
    width:          100%;
    border-collapse: collapse;
    margin-top:     4px;
}

#prop_public_table th {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    padding:            8px 10px;
    font-size:          var(--font-size-base);
    text-align:         left;
}

#prop_public_table th.text-center {
    text-align: center;
}

#prop_public_table td {
    padding:    8px 10px;
    font-size:  var(--font-size-base);
    border-bottom: 1px solid #ddd;
}

/* ---- Property detail page ---- */

.prop-detail-title-row {
    position:   relative;
    text-align: center;
}

.prop-detail-title-row h2 {
    margin:     0;
}

.prop-back-link {
    position:   absolute;
    right:      0;
    top:        50%;
    transform:  translateY(-50%);
    white-space: nowrap;
}

.prop-detail-wrap {
    max-width:  1100px;
    margin:     0 auto;
}

/* Subheading: "123 Main St is currently Available" */
.prop-detail-heading {
    margin:     0 0 12px;
    font-size:  15px;
}

/* TOP two-column row: gallery left, map+CTA right */
.prop-detail-top {
    display:                grid;
    grid-template-columns:  1fr 1fr;
    gap:                    24px;
    align-items:            stretch;   /* both columns same height */
    margin-top:             16px;
    margin-bottom:          20px;
}

/* LEFT column: main photo + thumbnail strip */
.prop-detail-gallery {
    min-width: 0;   /* prevent grid blowout */
}

.prop-detail-main-photo {
    width:          100%;
    aspect-ratio:   4 / 3;
    overflow:       hidden;
    border:         1px solid var(--color-accent);
    border-radius:  4px;
    background:     #f5f5f5;
    margin-bottom:  8px;
}

.prop-detail-main-photo img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity 0.15s ease;
}

/* Thumbnail strip — scrolls horizontally if many photos */
.prop-detail-thumbs {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    margin-top: 4px;
}

.prop-thumb {
    width:          72px;
    height:         54px;
    object-fit:     cover;
    border:         2px solid transparent;
    border-radius:  3px;
    cursor:         pointer;
    opacity:        0.7;
    transition:     opacity 0.15s ease, border-color 0.15s ease;
}

.prop-thumb:hover {
    opacity:        1;
    border-color:   var(--color-accent);
}

.prop-thumb.active {
    opacity:        1;
    border-color:   var(--color-primary);
}

/* No-photo placeholder */
.prop-no-photos {
    color:      #888;
    font-style: italic;
    font-size:  var(--font-size-small);
}

/* RIGHT column: flex column so map fills available space, CTA sits below */
.prop-detail-right {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    min-width:      0;
}

/* Map stretches to fill whatever height remains after the CTA */
.prop-detail-map {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     200px;
}

.prop-detail-map iframe {
    flex:           1;
    width:          100%;
    border:         0;
    border-radius:  4px;
    display:        block;
}

/* Apply CTA inside detail page — remove the index.php margin overrides */
.prop-detail-cta {
    margin: 0;
    flex-shrink: 0;   /* never compress; map shrinks instead */
}

.prop-narrative {
    background-color:   var(--color-shaded-box);
    border-left:        4px solid var(--color-primary);
    padding:            10px 14px;
    margin-bottom:      14px;
    font-size:          var(--font-size-base);
    line-height:        1.6;
}

/* Full-width detail table below the gallery/map row.
   Two-column field layout: th | td | th | td per row. */
.prop-detail-table {
    width:          100%;
    border-collapse: collapse;
    margin-top:     4px;
}

.prop-detail-table th {
    width:              160px;
    text-align:         left;
    background-color:   var(--color-accent);
    color:              var(--color-primary-light);
    padding:            8px 10px;
    font-size:          var(--font-size-base);
    white-space:        nowrap;
}

.prop-detail-table td {
    padding:        8px 10px;
    font-size:      var(--font-size-base);
    border-bottom:  1px solid #eee;
    width:          30%;   /* two td's = ~60% total; two th's = ~40% */
}


/* ---- Photo card gallery ---- */

.prop-card-grid {
    display:                grid;
    grid-template-columns:  repeat(3, 1fr);
    gap:                    24px;
    margin:                 16px 0;
}

.prop-card {
    text-align:     center;
    border:         1px solid var(--color-accent);
    border-radius:  6px;
    padding:        12px;
    background:     var(--color-white);
    transition:     box-shadow 0.15s ease, border-color 0.15s ease;
}

.prop-card:hover {
    box-shadow:     0 4px 12px rgba(0,0,0,0.12);
    border-color:   var(--color-primary);
}

.prop-card h3 {
    font-size:      var(--font-size-base);
    margin:         0 0 8px;
    text-align:     center;
    min-height:     2.4em;    /* prevents layout shift when address lengths differ */
}

/* Photo container — fixed 4:3 aspect ratio, clips over/undersized images */
.prop-card-photo {
    display:        block;
    width:          100%;
    aspect-ratio:   4 / 3;
    overflow:       hidden;
    border:         1px solid #ddd;
    border-radius:  4px;
    margin-bottom:  8px;
}

.prop-card-photo img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    transition:     transform 0.2s ease;
}

.prop-card:hover .prop-card-photo img {
    transform:      scale(1.03);
}

/* "Photo Coming Soon" placeholder — shown when no photo exists in the pics table */
.prop-card-no-photo {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    background-color:   var(--color-accent);
    text-decoration:    none;
}

.prop-card-no-photo span {
    color:          var(--color-primary);
    font-size:      var(--font-size-small);
    font-weight:    bold;
    font-style:     italic;
    text-align:     center;
    padding:        8px;
}

.prop-card p {
    font-size:  var(--font-size-small);
    margin:     6px 0 0;
    line-height: 1.6;
}


/* ---- Pagination (gallery) ---- */

.prop-pagination {
    display:        flex;
    justify-content: center;
    align-items:    center;
    gap:            12px;
    margin:         20px 0;
    font-size:      var(--font-size-base);
}

.prop-pagination a {
    font-weight:    bold;
}

.prop-pagination span {
    color:  #555;
}


/* ---- Responsive: public pages ---- */

@media (max-width: 768px) {

    .prop-filter-bar {
        gap: 8px;
    }

    .prop-filter-label {
        min-width: 70px;
    }

    .prop-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Detail top row: stack gallery above map+CTA on mobile */
    .prop-detail-top {
        grid-template-columns: 1fr;
    }

    /* Map gets a fixed height when stacked (can't use flex: 1 with no parent height) */
    .prop-detail-map {
        min-height: 260px;
    }

    .prop-detail-table th {
        width: 120px;
        white-space: normal;
    }

}

@media (max-width: 480px) {

    .prop-card-grid {
        grid-template-columns: 1fr;
    }

    /* On very small screens: each th/td pair stacks as a block */
    .prop-detail-table tr {
        display: block;
        margin-bottom: 4px;
    }

    .prop-detail-table th,
    .prop-detail-table td {
        display:    block;
        width:      100%;
        box-sizing: border-box;
    }

    .prop-detail-table th {
        border-bottom: none;
        padding-bottom: 2px;
    }

}


/* =============================================================
   19. HOMEPAGE — index.php
   Mobile-first layout: hero tagline, CTA bar, property tables,
   about section, contact grid.
   ============================================================= */

/* ---- Hero tagline strip ---- */
.home-tagline {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    text-align:         center;
    padding:            14px 16px;
    font-size:          14px;
    font-style:         italic;
    letter-spacing:     0.02em;
    margin:             0 0 20px;
}

/* ---- CTA action bar (QW-07: 2 cards; QW-06/01 label updates in index.php) ---- */
.home-cta-bar {
    display:                grid;
    grid-template-columns:  repeat(2, 1fr);
    gap:                    12px;
    margin:                 0 0 28px;
}

.home-cta-card,
a.home-cta-card,
a.home-cta-card:visited,
a.home-cta-card:link {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    gap:                6px;
    padding:            18px 10px;
    background-color:   var(--color-primary);
    color:              var(--color-white) !important;  /* override Pico link color */
    text-decoration:    none !important;
    border-radius:      8px;
    text-align:         center;
    font-weight:        bold;
    font-size:          13px;
    line-height:        1.3;
    transition:         background-color 0.15s ease, transform 0.1s ease;
    min-height:         80px;
}

a.home-cta-card:hover,
a.home-cta-card:active {
    background-color:   var(--color-primary-dark);
    color:              var(--color-white) !important;
    text-decoration:    none !important;
    transform:          translateY(-2px);
}

.home-cta-icon {
    font-size:  22px;
    line-height: 1;
}

/* ---- Section headings ---- */
.home-section-title {
    font-size:          15px;
    font-weight:        bold;
    color:              var(--color-white);
    background-color:   var(--color-primary);
    padding:            8px 14px;
    margin:             0 0 10px;
    border-radius:      4px 4px 0 0;
}

/* ---- Property section wrapper ---- */
.home-prop-section {
    margin-bottom:  24px;
    border:         1px solid var(--color-accent);
    border-radius:  4px;
    overflow:       hidden;
}

.home-prop-section .table-wrap {
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: Pico already sets width:100% on tables — nothing extra needed */

/* Mobile: The global @media(max-width:768px) rule sets table{min-width:500px}.
   Override it here and switch to a flex-column layout so iOS Safari handles
   column widths correctly and there is zero gap between thead and tbody. */
@media (max-width: 640px) {
    .home-prop-section .table-wrap {
        overflow-x: visible;
    }

    /* flex-direction:column on the table makes thead and tbody adjacent
       flex items with no gap — eliminates the hairline between them */
    .home-prop-section table {
        display:        flex;
        flex-direction: column;
        min-width:      0;      /* override global table{min-width:500px} */
        width:          100%;
    }

    .home-prop-section table thead,
    .home-prop-section table tbody {
        display:        flex;
        flex-direction: column;
        margin:         0;
        padding:        0;
    }

    /* No border between header and data rows — alternating colors provide separation */

    /* All rows: flex layout for three-column distribution */
    .home-prop-section table thead tr,
    .home-prop-section table tbody tr {
        display:     flex;
        align-items: center;
        gap:         8px;
        padding:     8px 10px;
    }

    /* Header row: unified gray background; clear individual th boxes */
    .home-prop-section table thead tr {
        background-color: var(--color-accent);
        padding:          6px 10px;
    }
    .home-prop-section table thead th {
        background-color: transparent;
        padding:          0;
    }

    /* Strip any Pico-supplied td/th borders in flex context */
    .home-prop-section table td,
    .home-prop-section table th {
        border: none;
    }

    /* Column 1 (address): grows to fill remaining width, wraps text */
    .home-prop-section table thead th:nth-child(1),
    .home-prop-section table tbody td:nth-child(1) {
        flex:          1 1 auto;
        min-width:     0;
        overflow-wrap: break-word;
    }

    /* Columns 2 & 3 (beds/baths, details): pin to content width */
    .home-prop-section table thead th:nth-child(2),
    .home-prop-section table thead th:nth-child(3),
    .home-prop-section table tbody td:nth-child(2),
    .home-prop-section table tbody td:nth-child(3) {
        flex:        0 0 auto;
        white-space: nowrap;
        text-align:  center;
    }
}

/* Force Pico's td border color to our light gray on all browsers (Chrome renders
   it dark/black without this override) */
.home-prop-section table td,
.home-prop-section table th {
    border-color: var(--color-accent);
}

/* ---- "No vacancies" message ---- */
.home-no-vacancy {
    padding:        16px 14px;
    font-size:      13px;
    color:          #555;
    font-style:     italic;
    line-height:    1.6;
    border-top:     1px solid var(--color-accent);
}

/* ---- Apply CTA banner ---- */
.home-apply-banner {
    background-color:   var(--color-primary);
    color:              var(--color-white);
    text-align:         center;
    padding:            22px 16px;
    border-radius:      8px;
    margin:             24px 0;
}

.home-apply-banner h3 {
    color:          var(--color-white);
    font-size:      18px;
    margin:         0 0 6px;
}

.home-apply-banner p {
    color:          rgba(255,255,255,0.85);
    font-size:      12px;
    margin:         0 0 14px;
}

.home-apply-btn {
    display:            inline-block;
    background-color:   var(--color-white);
    color:              var(--color-primary);
    font-weight:        bold;
    font-size:          14px;
    padding:            10px 28px;
    border-radius:      4px;
    text-decoration:    none;
    transition:         background-color 0.15s ease;
}

.home-apply-btn:hover {
    background-color:   var(--color-accent);
    color:              var(--color-primary);
    text-decoration:    none;
}

/* ---- About section ---- */
.home-about {
    background-color:   var(--color-shaded-box);
    border-left:        4px solid var(--color-primary);
    border-radius:      4px;
    padding:            16px 18px;
    margin:             24px 0;
    font-size:          12px;
    line-height:        1.8;
    color:              #333;
}

.home-about h3 {
    font-size:      14px;
    margin:         0 0 10px;
    color:          var(--color-primary);
}

/* ---- Contact grid ---- */
.home-contact-section {
    margin:         24px 0 8px;
}

.home-contact-section h3 {
    font-size:      14px;
    color:          var(--color-primary);
    border-bottom:  2px solid var(--color-primary);
    padding-bottom: 6px;
    margin-bottom:  14px;
}

.home-contact-grid {
    display:                grid;
    grid-template-columns:  repeat(3, 1fr);
    gap:                    12px;
}

.home-contact-card {
    background-color:   var(--color-white);
    border:             1px solid var(--color-accent);
    border-radius:      6px;
    padding:            14px 12px;
    text-align:         center;
    font-size:          12px;
    line-height:        1.7;
}

.home-contact-card strong {
    display:        block;
    color:          var(--color-primary);
    font-size:      13px;
    margin-bottom:  4px;
}

.home-contact-card a,
.home-contact-card span {
    display:        block;
    color:          var(--color-primary);
    text-decoration: none;
    font-size:      11px;
    font-weight:    normal;
    line-height:    1.6;
}

.home-contact-card a:hover {
    text-decoration: underline;
}

/* ---- QW-05: Two-column home layout (properties left, Apply right) ---- */
.home-two-col-layout {
    display:                grid;
    grid-template-columns:  1fr 1fr;
    gap:                    20px;
    align-items:            start;
    margin-bottom:          4px;
}

/* iOS Safari fix: grid items default to min-width:auto, which lets a child
   with min-width (e.g. the property table) blow out the grid cell.
   Setting min-width:0 allows the cell to shrink correctly. */
.home-two-col-props,
.home-two-col-aside {
    min-width: 0;
}

.home-two-col-aside .home-apply-banner {
    margin:     0;
    position:   sticky;
    top:        20px;
}

@media (max-width: 768px) {
    .home-two-col-layout {
        grid-template-columns: 1fr;
    }
    .home-two-col-aside .home-apply-banner {
        position: static;  /* un-sticky when stacked */
    }
}

/* ---- Responsive homepage grid adjustments ---- */
@media (max-width: 640px) {

    .home-cta-bar {
        grid-template-columns: 1fr;
        gap:                   8px;
    }

    .home-cta-card {
        flex-direction: row;
        justify-content: flex-start;
        padding:        14px 16px;
        min-height:     56px;
        gap:            12px;
        font-size:      14px;
    }

    .home-cta-icon {
        font-size: 20px;
    }

    .home-contact-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {
    .home-tagline {
        font-size: 13px;
    }
}

/* ============================================================
   Utility: coloured rounded boxes
   Use alongside .rounded-box for the standard red-bordered box.
   ============================================================ */

/* Success — light green */
.rounded-box-success {
    background-color: #f0fff4;
    border:           1px solid #6abf69;
    border-radius:    10px;
    padding:          20px 22px;
    margin-bottom:    20px;
    text-align:       center;
}
.rounded-box-success h2,
.rounded-box-success h3 {
    color: #2e7d32;
    margin-bottom: 8px;
}
.rounded-box-success p {
    color: #444;
}

/* Info — light blue */
.rounded-box-info {
    background-color: #f0f4ff;
    border:           1px solid #a0b0e0;
    border-radius:    10px;
    padding:          18px 20px;
    margin-bottom:    20px;
}
.rounded-box-info h2,
.rounded-box-info h3 {
    color:          #1a3a7c;
    margin-bottom:  10px;
}
.rounded-box-info ol,
.rounded-box-info ul {
    margin-left:  18px;
    color:        #333;
}
.rounded-box-info li {
    margin-bottom: 6px;
    line-height:   1.5;
}

/* Large icon/emoji centred above heading inside a box */
.box-icon {
    font-size:     3em;
    line-height:   1;
    margin-bottom: 10px;
}

/* ============================================================
   Form styles — rental application and any future site forms.
   Scoped to .app-wrap so rules only activate on form pages
   and are not affected by pico.min.css on public pages.
   ============================================================ */

.app-wrap {
    max-width:     620px;
    margin:        0 auto 30px;
    background:    #fff;
    padding:       0 18px 40px;
}

/* Sub-header */
.app-wrap .app-header {
    border-bottom:  3px solid var(--color-primary);
    padding-bottom: 12px;
    margin-bottom:  20px;
}
.app-wrap .app-header h1 {
    font-size: 1.4em;
    color:     var(--color-primary);
    margin:    0;
}
.app-wrap .app-header p {
    font-size: 0.9em;
    color:     #555;
    margin:    4px 0 0;
}

/* Section banner headings */
.app-wrap h2.section-head {
    font-size:      0.9em !important;
    font-weight:    bold !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          #fff !important;
    background:     var(--color-primary) !important;
    padding:        7px 10px !important;
    margin:         28px -18px 16px !important;
    border:         none !important;
}

/* Field rows */
.app-wrap .field-row {
    margin-bottom: 14px;
}
.app-wrap .field-row label {
    display:       block;
    font-size:     0.85em;
    font-weight:   600;
    color:         #222;
    margin-bottom: 4px;
}
.app-wrap .field-row label .opt {
    font-weight: normal;
    color:       #666;
}
.app-wrap .field-row input[type=text],
.app-wrap .field-row input[type=tel],
.app-wrap .field-row input[type=email],
.app-wrap .field-row input[type=date],
.app-wrap .field-row input[type=password],
.app-wrap .field-row input[type=number],
.app-wrap .field-row select,
.app-wrap .field-row textarea {
    display:    block;
    width:      100%;
    padding:    10px 12px;
    font-size:  15px;
    border:     1px solid #bbb;
    border-radius: 5px;
    background: #fafafa;
    color:      #222;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 0;
    box-shadow: none;
}
.app-wrap .field-row select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right:       32px;
}
.app-wrap .field-row input:focus,
.app-wrap .field-row select:focus,
.app-wrap .field-row textarea:focus {
    outline:    none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(115,0,5,0.12);
}
.app-wrap .field-row textarea  { resize: vertical; }
.app-wrap .field-row .field-note {
    font-size: 0.8em;
    color:     #555;
    margin:    4px 0 0;
}

/* Multi-column grid layouts */
.app-wrap .row-2    { display: grid; grid-template-columns: 1fr 1fr;       gap: 10px; }
.app-wrap .row-3    { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: 10px; }
.app-wrap .row-csz  { display: grid; grid-template-columns: 2fr 70px 90px; gap: 10px; }
.app-wrap .row-name { display: grid; grid-template-columns: 2fr 1fr 2fr;   gap: 10px; }

/* Checkbox rows */
.app-wrap .check-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 14px;
    cursor:        pointer;
    font-size:     0.95em;
    color:         #222;
}
.app-wrap .check-row input[type=checkbox] {
    width:              22px;
    height:             22px;
    cursor:             pointer;
    flex-shrink:        0;
    margin:             0;
    appearance:         none;
    -webkit-appearance: none;
    background-color:   transparent;
    border:             1.5px solid #999;
    border-radius:      50%;
    position:           relative;
    transition:         background-color 0.15s, border-color 0.15s;
}
.app-wrap .check-row input[type=checkbox]:checked {
    background-color:   var(--color-primary);
    border-color:       var(--color-primary);
}
.app-wrap .check-row input[type=checkbox]:checked::after {
    content:     '';
    position:    absolute;
    left:        6px;
    top:         2px;
    width:       7px;
    height:      12px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg);
}
.app-wrap .check-row input[type=checkbox]:focus {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Required field note */
.app-wrap .required-note {
    font-size:   0.82em;
    color:       #555;
    margin:      0 0 6px;
}

/* Error box */
.app-wrap .error-box {
    background:    #fff0f0;
    border:        1px solid #cc0000;
    border-radius: 6px;
    padding:       14px 16px;
    margin-bottom: 20px;
}
.app-wrap .error-box p  { font-weight: bold; color: #cc0000; margin-bottom: 6px; }
.app-wrap .error-box ul { margin: 0 0 0 18px; color: #aa0000; }
.app-wrap .error-box li { margin-bottom: 3px; }

/* Tenant portal info box */
.app-wrap .portal-box {
    background:    #f0f4ff;
    border:        1px solid #a0b0e0;
    border-radius: 6px;
    padding:       16px;
    margin:        28px 0 20px;
}
.app-wrap .portal-box h3 {
    font-size:     1em;
    color:         #1a3a7c;
    margin-bottom: 8px;
}
.app-wrap .portal-box .disclosure {
    font-size:     0.85em;
    color:         #334;
    margin-bottom: 14px;
    line-height:   1.55;
}
.app-wrap .portal-box .fine-print {
    font-size:  0.8em;
    color:      #556;
    margin-top: 10px;
}

/* Misc reference hint */
.app-wrap .ref-hint {
    font-size:     0.88em;
    color:         #555;
    margin-bottom: 14px;
}

/* Submit button */
.app-wrap .submit-btn {
    display:       block;
    width:         100%;
    padding:       16px;
    font-size:     1.05em;
    font-weight:   bold;
    background:    var(--color-primary);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    margin-top:    24px;
    cursor:        pointer;
    -webkit-appearance: none;
}
.app-wrap .submit-btn:hover  { background: #8b1a1a; }
.app-wrap .submit-btn:active { background: #5a0004; }

/* Responsive — collapse grids on small phones */
@media (max-width: 420px) {
    .app-wrap .row-2    { grid-template-columns: 1fr; }
    .app-wrap .row-3    { grid-template-columns: 1fr; }
    .app-wrap .row-csz  { grid-template-columns: 1fr; }
    .app-wrap .row-name { grid-template-columns: 1fr; }
}


/* =============================================================
   20. ADMIN DASHBOARD
   admin_dashboard.php — QW-22, QW-30, QW-33
   ============================================================= */

/* QW-22: Form labels in dashboard search bars always black */
.rounded-box label,
.rounded-box strong {
    color: #000 !important;
}

/* QW-30: Tenant/applications section list item text always black */
.rounded-box ul li {
    color: #000;
}

/* QW-33: Vacancy / occupancy section text always black */
.rounded-box details summary {
    color: #000;
}

.rounded-box table td,
.rounded-box table th {
    color: #000;
}

/* =============================================================
   21. ADMIN PAGES — GENERAL
   Applies across all admin pages inside #onecontainer.
   ============================================================= */

/* QW-42: Search form labels always black (Chrome renders them gray without this) */
#onecontainer form label {
    color: #000;
}