/* ================================================================
   CLIENT AREA PAGE — PAGE-SPECIFIC STYLES
   Location: /home/kitchenbrand/public_html/T-Belle/styles/client_area.css

   Requires global.css first.
   Covers both views: auth (logged-out) and dashboard (logged-in).

   Variable map (old → new):
     --blue / --blue-lt  → var(--secondary) / var(--secondary-light) [global]
     --gold / --gold-lt  → var(--accent) / var(--accent-light)       [global]
     --char              → var(--charcoal)                            [global]
     --snow / --snow-dk  → var(--warm-white) / page token            [global/page]
     --pine/stone/stone-dk → page tokens
     --r-md/lg/xl/2xl    → page tokens (tighter than global)
     --shadow-card/lift  → var(--shadow-card/lift)                   [global]
     --trans             → var(--trans)                              [global]
     DM Sans             → var(--sans) = Jost                        [global]
================================================================ */


/* ================================================================
   PAGE-SPECIFIC TOKENS
================================================================ */
:root {
    --pine:     #1D4032;
    --snow-dk:  #EEE9E1;   /* slightly darker warm-white for borders */
    --stone:    #D6D0C4;
    --stone-dk: #9A9488;

    /* Radius — slightly tighter than global for form-dense UI */
    --r-lg-ca:  14px;
    --r-xl-ca:  20px;
    --r-2xl-ca: 28px;
}

body { font-size: 15px; color: var(--charcoal); }


/* ================================================================
   AUTH VIEW — left brand panel + right form card
================================================================ */
.auth-page { min-height: 100vh; display: flex; }

/* Left brand panel */
.auth-brand {
    width:           420px;
    flex-shrink:     0;
    background:      linear-gradient(168deg, #0d2d47 0%, #1b4f72 55%, #1d4032 100%);
    padding:         60px 48px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
}
.auth-brand::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.auth-brand-inner   { position: relative; z-index: 1; }
.auth-eyebrow       { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.auth-headline      { font-family: var(--serif); font-size: clamp(28px,3vw,40px); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 20px; }
.auth-headline em   { font-style: italic; color: var(--accent-light); }
.auth-sub           { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 40px; line-height: 1.7; }
.auth-features      { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-features li   { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: rgba(255,255,255,.75); }
.auth-feat-icon     { width: 28px; height: 28px; border-radius: 50%; background: rgba(200,146,58,.22); border: 1px solid rgba(200,146,58,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.auth-feat-icon svg { color: var(--accent); }
.auth-stats         { display: flex; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.10); }
.auth-stat-num      { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--white); line-height: 1; }
.auth-stat-num sup  { font-size: 12px; color: var(--accent); }
.auth-stat-lbl      { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 2px; }

/* Right form panel */
.auth-form-panel    { flex: 1; background: var(--warm-white); display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.auth-card          { background: var(--white); border-radius: var(--r-2xl-ca); box-shadow: var(--shadow-lift); width: 100%; max-width: 440px; overflow: hidden; }
.auth-tabs          { display: flex; border-bottom: 1px solid var(--snow-dk); }
.auth-tab           { flex: 1; padding: 16px; font-size: 13px; font-weight: 500; color: var(--stone-dk); text-align: center; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--trans), border-color var(--trans); }
.auth-tab.active    { color: var(--secondary); border-bottom-color: var(--secondary); }
.auth-body          { padding: 32px; }
.auth-panel         { display: none; }
.auth-panel.active  { display: block; }


/* ================================================================
   SHARED FORM ELEMENTS
================================================================ */
.frow             { margin-bottom: 16px; }
.frow-half        { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
label.flbl        { display: block; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 6px; }
.finp {
    width:        100%;
    padding:      11px 14px;
    border:       1px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    13px;
    color:        var(--charcoal);
    background:   var(--white);
    font-family:  var(--sans);
    transition:   border-color var(--trans), box-shadow var(--trans);
}
.finp:focus        { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,77,122,.09); }
.finp.error        { border-color: #c0392b; }
.pw-wrap           { position: relative; }
.pw-wrap .finp     { padding-right: 40px; }
.pw-toggle         { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--stone-dk); padding: 4px; cursor: pointer; border: none; background: none; transition: color var(--trans); }
.pw-toggle:hover   { color: var(--secondary); }
.pw-strength       { height: 3px; border-radius: 3px; margin-top: 5px; background: var(--snow-dk); overflow: hidden; }
.pw-strength-bar   { height: 100%; width: 0%; border-radius: 3px; transition: width .3s, background .3s; }
.fsel-styled {
    width:        100%;
    padding:      11px 30px 11px 14px;
    border:       1px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    13px;
    color:        var(--charcoal);
    background:   var(--white);
    appearance:   none;
    -webkit-appearance: none;
    background-image:    url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9488'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    font-family:  var(--sans);
    transition:   border-color var(--trans);
}
.fsel-styled:focus { outline: none; border-color: var(--secondary); }
.fcheck            { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 12px; color: var(--stone-dk); line-height: 1.5; }
.fcheck input      { margin-top: 3px; accent-color: var(--secondary); width: 14px; height: 14px; flex-shrink: 0; }
.fcheck a          { color: var(--secondary); text-decoration: underline; }

/* Buttons */
.btn-primary {
    width:         100%;
    padding:       14px;
    background:    var(--accent);
    color:         var(--white);
    border:        none;
    border-radius: var(--r-lg-ca);
    font-size:     14px;
    font-weight:   500;
    font-family:   var(--sans);
    cursor:        pointer;
    transition:    background var(--trans), transform var(--trans);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    margin-top:    4px;
}
.btn-primary:hover  { background: var(--accent-dark); transform: translateY(-1px); }
.btn-secondary {
    width:         100%;
    padding:       12px;
    background:    transparent;
    color:         var(--stone-dk);
    border:        1px solid var(--stone);
    border-radius: var(--r-lg-ca);
    font-size:     13px;
    font-family:   var(--sans);
    cursor:        pointer;
    transition:    all var(--trans);
    margin-top:    8px;
}
.btn-secondary:hover { border-color: var(--stone-dk); color: var(--charcoal); }

/* Divider */
.auth-divider        { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--stone-dk); font-size: 11px; }
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--stone); }

/* Alert messages */
.alert          { padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px; }
.alert-error    { background: #fdf2f2; border: 1px solid #f5c6c6; color: #922b21; }
.alert-success  { background: #f0faf4; border: 1px solid #a9dfbf; color: #1e6b3a; }
.alert ul       { margin: 4px 0 0 16px; }


/* ================================================================
   DASHBOARD VIEW — welcome banner + sidebar + content tabs
================================================================ */
.dash-page { min-height: 100vh; background: var(--warm-white); }

/* Welcome banner */
.welcome-banner       { background: linear-gradient(90deg,#0d2d47,#1b4f72); padding: 24px 40px; display: flex; align-items: center; gap: 16px; }
.welcome-banner h1    { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--white); }
.welcome-banner h1 em { font-style: italic; color: var(--accent-light); }
.welcome-banner p     { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.welcome-badge        { background: rgba(200,146,58,.25); color: var(--accent-light); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(200,146,58,.3); }
.back-to-results-btn  { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--white); text-decoration: none; transition: background var(--trans); white-space: nowrap; }
.back-to-results-btn:hover { background: rgba(255,255,255,.22); }

/* Layout */
.dash-layout { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 0; align-items: start; padding: 32px 40px 80px; }

/* Sidebar */
.dash-sidebar        { position: sticky; top: calc(var(--header-h) + 32px); background: var(--white); border-radius: var(--r-xl-ca); border: 1px solid var(--stone); box-shadow: var(--shadow-card); overflow: visible; }
.dash-avatar-wrap    { padding: 24px; background: linear-gradient(135deg,#0d2d47,#1b4f72); text-align: center; border-radius: var(--r-xl-ca) var(--r-xl-ca) 0 0; overflow: hidden; }
.dash-avatar         { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--white); margin: 0 auto 12px; border: 3px solid rgba(255,255,255,.2); }
.dash-name           { font-family: var(--serif); font-size: 16px; font-weight: 300; color: var(--white); }
.dash-email          { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px; word-break: break-all; }
.dash-stats-row      { display: flex; justify-content: center; gap: 24px; margin-top: 14px; }
.ds-stat             { text-align: center; }
.ds-stat-num         { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--white); }
.ds-stat-lbl         { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); }

.dash-nav            { padding: 10px 0; }
.dash-nav-item       { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 13px; color: var(--stone-dk); cursor: pointer; transition: color var(--trans), background var(--trans); border-left: 2px solid transparent; text-decoration: none; }
.dash-nav-item:hover { color: var(--secondary); background: rgba(30,77,122,.04); }
.dash-nav-item.active { color: var(--secondary); font-weight: 500; background: rgba(30,77,122,.06); border-left-color: var(--secondary); }
.dash-nav-item svg   { flex-shrink: 0; }
.dash-nav-sep        { height: 1px; background: var(--snow-dk); margin: 6px 16px; }
.dash-logout-btn     { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 13px; color: var(--stone-dk); cursor: pointer; width: 100%; transition: color var(--trans); border: none; background: none; font-family: var(--sans); text-decoration: none; }
.dash-logout-btn:hover { color: #c0392b; }

/* Main content + tabs */
.dash-main       { margin-left: 24px; }
.dash-tab        { display: none; }
.dash-tab.active { display: block; }

/* Section header */
.sec-hd      { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.sec-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.sec-title   { font-family: var(--serif); font-size: clamp(22px,2.5vw,30px); font-weight: 300; color: var(--charcoal); line-height: 1.1; }
.sec-count   { font-size: 12px; color: var(--stone-dk); padding: 4px 10px; background: var(--warm-white); border: 1px solid var(--stone); border-radius: 999px; }
.sec-link    { font-size: 13px; font-weight: 500; color: var(--secondary); display: inline-flex; align-items: center; gap: 4px; }
.sec-link:hover { text-decoration: underline; }


/* ================================================================
   FAVORITES / PROPERTY CARDS
================================================================ */
.fav-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pcard            { background: var(--white); border-radius: var(--r-xl-ca); border: 1px solid var(--stone); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--trans), box-shadow var(--trans); }
.pcard:hover      { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.cimg             { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #2a3540; flex-shrink: 0; }
.cimg img         { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pcard:hover .cimg img { transform: scale(1.04); }
.cph              { width: 100%; height: 100%; background: linear-gradient(148deg,#0d2d47,#1b4f72); }
.cbadge           { position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--white); }
.cbadge.new       { background: var(--accent); }
.cbadge.reduced   { background: var(--pine); }
.saved-on         { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.8); font-size: 9px; padding: 2px 7px; border-radius: 999px; backdrop-filter: blur(4px); }
.cbody            { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.cprice           { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--secondary); line-height: 1; margin-bottom: 4px; }
.carea            { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 3px; }
.caddr            { font-size: 13px; font-weight: 500; color: var(--charcoal); margin-bottom: 12px; }
.cmeta            { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--warm-white); border-bottom: 1px solid var(--warm-white); margin-bottom: 14px; flex-wrap: wrap; }
.cm               { display: flex; align-items: center; gap: 3px; }
.cm-ic            { color: var(--stone-dk); }
.cm-v             { font-size: 12px; font-weight: 500; color: var(--charcoal); }
.cm-l             { font-size: 10px; color: var(--stone-dk); }
.cact             { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cbtn             { flex: 1; padding: 9px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500; text-align: center; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all var(--trans); text-decoration: none; font-family: var(--sans); }
.cbtn-p           { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.cbtn-p:hover     { background: var(--secondary-light); }
.cbtn-rm          { background: var(--white); color: #c0392b; border-color: var(--stone); }
.cbtn-rm:hover    { border-color: #c0392b; background: #fdf2f2; }
.cbtn-tour        { background: var(--navy); color: var(--white); border-color: var(--navy); }
.cbtn-tour:hover  { background: var(--secondary); border-color: var(--secondary); }

/* ── Sidebar tour CTA ────────────────────────────────────────── */
.sidebar-tour-cta {
    margin: 16px 12px 8px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--secondary) 100%);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}
.sidebar-tour-cta-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    font-family: var(--serif);
    letter-spacing: -0.2px;
}
.sidebar-tour-cta-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    margin-bottom: 12px;
}
.sidebar-tour-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 99px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--trans);
}
.sidebar-tour-cta-btn:hover {
    background: rgba(255,255,255,0.25);
}
/* Icon-only remove button */
.cbtn-icon-rm     { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--stone); border-radius: var(--radius-md); background: var(--white); color: var(--stone-dk); cursor: pointer; transition: all var(--trans); padding: 0; }
.cbtn-icon-rm:hover { border-color: #c0392b; color: #c0392b; background: #fdf2f2; }
.gone-notice      { background: var(--warm-white); border: 1px dashed var(--stone); padding: 12px; border-radius: var(--radius-md); font-size: 12px; color: var(--stone-dk); text-align: center; }

/* Empty state */
.empty-state       { text-align: center; padding: 60px 24px; }
.empty-state svg   { color: var(--stone); margin: 0 auto 16px; }
.empty-state h3    { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--charcoal); margin-bottom: 8px; }
.empty-state p     { font-size: 13px; color: var(--stone-dk); margin-bottom: 20px; }
.empty-state a     { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; background: var(--secondary); color: var(--white); border-radius: var(--r-lg-ca); font-size: 13px; font-weight: 500; transition: background var(--trans); }
.empty-state a:hover { background: var(--secondary-light); }


/* ================================================================
   SAVED SEARCHES LIST
================================================================ */
.search-list          { display: flex; flex-direction: column; gap: 10px; }
.search-item          { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-lg-ca); padding: 16px 18px; display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; transition: box-shadow var(--trans); }
.search-item:hover    { box-shadow: var(--shadow-card); }
.search-item-recent   { background: var(--warm-white); border-style: dashed; }
.search-icon          { width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(30,77,122,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--secondary); }
/* flex:1 1 0 gives a definite computed width of 0+growth — more reliable than min-width:0 alone */
.search-info          { flex: 1 1 0; min-width: 0; overflow: hidden; }
/* name+badge row: name truncates, badge never shrinks */
.search-name-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; min-width: 0; overflow: hidden; }
.search-name          { font-size: 14px; font-weight: 500; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; margin: 0; }
.search-name-badge    { flex-shrink: 0; }
.search-params        { font-size: 11px; color: var(--stone-dk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 2px; }
.search-meta          { font-size: 10px; color: var(--stone-dk); margin: 0; }
.search-actions       { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 8px; }
.notify-toggle        { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--stone-dk); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--stone); background: var(--white); cursor: pointer; font-family: var(--sans); transition: all var(--trans); white-space: nowrap; }
.notify-toggle.on     { border-color: var(--pine); background: rgba(29,64,50,.07); color: var(--pine); }
.notify-toggle:hover  { border-color: var(--secondary); color: var(--secondary); }
.btn-run-search       { padding: 6px 12px; background: var(--secondary); color: var(--white); border-radius: var(--radius-md); font-size: 11px; font-weight: 500; text-decoration: none; font-family: var(--sans); transition: background var(--trans); white-space: nowrap; }
.btn-run-search:hover { background: var(--secondary-light); }
.btn-del-search       { padding: 6px; color: var(--stone-dk); border-radius: var(--radius-md); border: none; background: none; cursor: pointer; transition: color var(--trans), background var(--trans); flex-shrink: 0; }
.btn-del-search:hover { color: #c0392b; background: #fdf2f2; }


/* ================================================================
   ALERTS TAB — frequency options
================================================================ */
.alerts-card          { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-xl-ca); padding: 28px; box-shadow: var(--shadow-card); max-width: 560px; }
.alerts-card h3       { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--charcoal); margin-bottom: 6px; }
.alerts-card .sub     { font-size: 13px; color: var(--stone-dk); margin-bottom: 24px; line-height: 1.6; }
.freq-options         { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 24px; }
.freq-opt             { position: relative; }
.freq-opt input[type=radio] { position: absolute; opacity: 0; width: 0; }
.freq-lbl             { display: flex; flex-direction: column; padding: 14px 16px; border: 2px solid var(--stone); border-radius: var(--r-lg-ca); cursor: pointer; transition: all var(--trans); }
.freq-opt input:checked + .freq-lbl { border-color: var(--secondary); background: rgba(30,77,122,.05); }
.freq-lbl strong      { font-size: 13px; font-weight: 500; color: var(--charcoal); margin-bottom: 2px; }
.freq-lbl span        { font-size: 11px; color: var(--stone-dk); }


/* ================================================================
   ACCOUNT TAB — profile + password cards
================================================================ */
.account-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.account-card         { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-xl-ca); padding: 24px; box-shadow: var(--shadow-card); }
.account-card h3      { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--charcoal); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--snow-dk); }
.account-card.full    { grid-column: 1 / -1; }


/* ================================================================
   PRICE DELTA BADGE
================================================================ */
.price-delta {
    display:        inline-flex;
    align-items:    center;
    gap:            3px;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .03em;
    padding:        2px 8px;
    border-radius:  999px;
    vertical-align: middle;
    margin-left:    6px;
    font-family:    var(--sans);
}
.delta-down { background: rgba(29,64,50,.10); color: var(--pine); }
.delta-up   { background: rgba(192,57,43,.08); color: #c0392b; }


/* ================================================================
   PROPERTY NOTES
================================================================ */
.fav-notes-wrap  { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--warm-white); }
.fav-notes-lbl   { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 5px; }
.note-status     { font-size: 9px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pine); opacity: .8; transition: opacity .3s; }
.fav-notes-ta    { width: 100%; padding: 8px 10px; border: 1px solid var(--stone); border-radius: var(--radius-md); font-size: 12px; font-family: var(--sans); color: var(--charcoal); background: var(--warm-white); resize: vertical; box-sizing: border-box; transition: border-color var(--trans), box-shadow var(--trans); line-height: 1.5; }
.fav-notes-ta:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(30,77,122,.08); background: var(--white); }
.fav-notes-ta::placeholder { color: var(--stone-dk); opacity: .7; }

/* Add / Edit Note toggle button */
.btn-add-note {
    display:         flex;
    align-items:     center;
    gap:             6px;
    width:           100%;
    padding:         10px 14px;
    background:      #FBF3E2;
    color:           #8B6835;
    border:          1px solid #E8D9B5;
    border-radius:   var(--radius-md, 8px);
    font-family:     var(--sans);
    font-size:       12px;
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s;
    text-align:      left;
}
.btn-add-note:hover {
    background:      #F5E8C8;
    border-color:    var(--accent, #C8923A);
    color:           #7A5A20;
}
.btn-add-note svg {
    opacity: 0.6;
    flex-shrink: 0;
}
.fav-notes-ta       { margin-top: 8px; }


/* ================================================================
   SHOWING REQUEST BUTTON
================================================================ */
.btn-request-showing { flex: 1; padding: 9px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500; text-align: center; border: 1px solid var(--stone); background: var(--white); color: var(--charcoal); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all var(--trans); font-family: var(--sans); white-space: nowrap; }
.btn-request-showing:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(30,77,122,.04); }


/* ================================================================
   MORTGAGE CALCULATOR
================================================================ */
.mort-wrap           { margin-top: 0; }

/* ── Mortgage toggle button active state ── */
.btn-mort-toggle.active { background: rgba(30,77,122,.13); border-color: rgba(30,77,122,.28); }
.btn-mort-toggle     { width: 100%; padding: 7px 10px; background: rgba(30,77,122,.05); border: 1px solid rgba(30,77,122,.14); border-radius: var(--radius-md); font-size: 11px; font-weight: 500; color: var(--secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--sans); transition: all var(--trans); }
.btn-mort-toggle:hover { background: rgba(30,77,122,.10); }
.mort-calc           { margin-top: 10px; background: var(--warm-white); border: 1px solid var(--snow-dk); border-radius: var(--r-lg-ca); padding: 14px; }
.mort-row            { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.mort-row label      { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--stone-dk); flex-shrink: 0; width: 90px; }
.mort-inp            { flex: 1; padding: 6px 8px; border: 1px solid var(--stone); border-radius: var(--radius-md); font-size: 12px; font-family: var(--sans); color: var(--charcoal); background: var(--white); width: 100%; box-sizing: border-box; transition: border-color var(--trans); }
.mort-inp:focus      { outline: none; border-color: var(--secondary); }
.mort-dp-wrap        { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--stone-dk); }
.mort-dp-pct         { width: 52px; flex: none; text-align: right; }
.mort-dp-amt         { font-size: 11px; color: var(--stone-dk); white-space: nowrap; }
.mort-result         { display: flex; flex-direction: column; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stone); text-align: center; }
.mort-est-label      { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 2px; }
.mort-est-amt        { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--secondary); line-height: 1.1; }
.mort-est-note       { font-size: 9px; color: var(--stone-dk); margin-top: 4px; line-height: 1.4; max-width: 200px; }


/* ================================================================
   MY SHOWINGS TAB
================================================================ */
.showing-list        { display: flex; flex-direction: column; gap: 12px; }
.showing-card        { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-lg-ca); padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px; box-shadow: var(--shadow-card); transition: box-shadow var(--trans); }
.showing-card:hover  { box-shadow: var(--shadow-lift); }
.showing-status      { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; margin-top: 2px; }
.status-pending      { background: rgba(200,146,58,.12); color: #7d4e10; }
.status-confirmed    { background: rgba(29,64,50,.10);   color: var(--pine); }
.status-cancelled    { background: rgba(192,57,43,.08);  color: #c0392b; }
.status-completed    { background: var(--snow-dk);        color: var(--stone-dk); }
.showing-body        { flex: 1; min-width: 0; }
.showing-addr        { font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 2px; }
.showing-addr strong { display: block; }
.showing-city        { font-size: 11px; color: var(--stone-dk); margin-bottom: 6px; }
.showing-times       { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--charcoal); margin-bottom: 6px; }
.showing-note        { font-size: 11px; color: var(--stone-dk); font-style: italic; border-top: 1px solid var(--warm-white); padding-top: 6px; margin-top: 4px; }


/* ================================================================
   OPEN HOUSES TAB
================================================================ */

/* ── Filter bar ──────────────────────────────────────────────── */
.oh-filter {
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
    padding:        14px 18px;
    background:     var(--white);
    border:         1px solid var(--stone);
    border-radius:  var(--r-lg-ca);
    margin-bottom:  20px;
    box-shadow:     var(--shadow-card);
}
.oh-filter-group  { display: flex; align-items: center; gap: 8px; }
.oh-filter-lbl    { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); white-space: nowrap; }
.oh-filter-sel {
    padding:        6px 26px 6px 10px;
    border:         1px solid var(--stone);
    border-radius:  var(--radius-md);
    font-size:      12px;
    font-family:    var(--sans);
    color:          var(--charcoal);
    background:     var(--white) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9488'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance:     none;
    -webkit-appearance: none;
    cursor:         pointer;
    transition:     border-color var(--trans);
}
.oh-filter-sel:focus { outline: none; border-color: var(--secondary); }
.oh-filter-clear {
    display:        none;
    align-items:    center;
    gap:            5px;
    padding:        6px 12px;
    background:     transparent;
    border:         1px solid var(--stone);
    border-radius:  999px;
    font-size:      11px;
    font-family:    var(--sans);
    color:          var(--stone-dk);
    cursor:         pointer;
    transition:     all var(--trans);
}
.oh-filter-clear:hover  { border-color: #c0392b; color: #c0392b; background: #fdf2f2; }
.oh-filter-count        { font-size: 11px; color: var(--stone-dk); margin-left: auto; }

/* ── Card CTAs ───────────────────────────────────────────────── */
.oh-card-actions {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            8px;
    margin-top:     auto;
    padding-top:    10px;
    border-top:     1px solid var(--snow-dk);
}



/* ================================================================
   SHOWING MODAL — open state
================================================================ */
#showing-modal.open  { display: flex !important; }


/* ================================================================
   RESPONSIVE
================================================================ */

/* ================================================================
   OPEN HOUSES — Grid card layout
   Photo on top, content below. Day headers span full grid width.
================================================================ */
.oh-list {
    display:                grid;
    grid-template-columns:  repeat(auto-fill, minmax(260px, 1fr));
    gap:                    20px;
    align-items:            start;
}
.oh-day-header {
    grid-column:            1 / -1;   /* spans full grid width */
    font-size:              10px;
    font-weight:            600;
    letter-spacing:         .12em;
    text-transform:         uppercase;
    color:                  var(--stone-dk);
    padding:                20px 0 8px;
    border-bottom:          2px solid var(--secondary);
    margin-bottom:          4px;
}
.oh-day-header:first-child { padding-top: 4px; }

.oh-card {
    background:             var(--white);
    border:                 1px solid var(--stone);
    border-radius:          var(--r-lg-ca);
    overflow:               hidden;
    display:                flex;
    flex-direction:         column;   /* photo on top */
    box-shadow:             var(--shadow-card);
    transition:             box-shadow var(--trans), transform var(--trans);
}
.oh-card:hover {
    box-shadow:             var(--shadow-lift);
    transform:              translateY(-2px);
}

/* ── Photo — tall, full card width ─────────────────────────── */
.oh-photo {
    width:                  100%;
    height:                 180px;
    flex-shrink:            0;
    background:             linear-gradient(160deg, #0d2d47 0%, #1b4f72 100%)
                            center / cover no-repeat;
}
.oh-photo-placeholder {
    display:                flex;
    align-items:            center;
    justify-content:        center;
    color:                  rgba(255,255,255,.25);
}

/* ── Card body ──────────────────────────────────────────────── */
.oh-body {
    padding:                14px 16px 16px;
    flex:                   1;
    display:                flex;
    flex-direction:         column;
    gap:                    4px;
}
.oh-time {
    display:                flex;
    align-items:            center;
    gap:                    7px;
    font-size:              11px;
    font-weight:            700;
    color:                  var(--secondary);
    letter-spacing:         .02em;
}
.oh-type-badge {
    font-size:              9px;
    font-weight:            600;
    letter-spacing:         .08em;
    text-transform:         uppercase;
    background:             rgba(30,77,122,.08);
    color:                  var(--secondary);
    padding:                2px 7px;
    border-radius:          999px;
}
.oh-addr {
    font-size:              14px;
    font-weight:            600;
    color:                  var(--charcoal);
    line-height:            1.3;
    margin-top:             2px;
}
.oh-city {
    font-size:              11px;
    color:                  var(--stone-dk);
}
.oh-meta {
    display:                flex;
    flex-wrap:              wrap;
    gap:                    4px 12px;
    font-size:              12px;
    color:                  var(--charcoal);
    margin-top:             6px;
    padding-top:            8px;
    border-top:             1px solid var(--warm-white);
}
.oh-price {
    font-weight:            700;
    color:                  var(--secondary);
    font-family:            var(--serif);
    font-size:              15px;
    width:                  100%;   /* price gets its own line */
    margin-bottom:          2px;
}
.oh-meta span + span::before {
    content:                '·';
    margin-right:           12px;
    color:                  var(--stone);
}
.oh-remarks {
    font-size:              11px;
    color:                  var(--stone-dk);
    line-height:            1.5;
    margin-top:             4px;
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
}
.oh-view-link {
    display:                inline-flex;
    align-items:            center;
    gap:                    4px;
    margin-top:             auto;
    padding-top:            10px;
    font-size:              11px;
    font-weight:            600;
    color:                  var(--secondary);
    text-decoration:        none;
    letter-spacing:         .03em;
}
.oh-view-link:hover { text-decoration: underline; }

@media (max-width: 960px) {
    .fav-grid           { grid-template-columns: 1fr 1fr; }
    .account-grid       { grid-template-columns: 1fr; }
    .freq-options       { grid-template-columns: 1fr 1fr; }
}


/* ── Showings empty state ───────────────────────────────────── */
.showings-empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        60px 24px;
    gap:            12px;
}
.showings-empty-icon {
    width:          72px; height: 72px;
    background:     var(--snow);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          var(--stone-dk);
    margin-bottom:  8px;
}
.showings-empty-state h3 {
    font-family:    var(--serif);
    font-size:      22px;
    font-weight:    400;
    color:          var(--charcoal);
}
.showings-empty-state p {
    font-size:      13px;
    color:          var(--stone-dk);
    max-width:      320px;
    line-height:    1.6;
}
.showings-empty-link {
    font-size:      13px;
    color:          var(--secondary);
    text-decoration:none;
    font-weight:    500;
    margin-top:     4px;
}
.showings-empty-link:hover { text-decoration: underline; }

/* ── Showing card status pills ──────────────────────────────── */
.showing-status-pill {
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:        4px 10px;
    border-radius:  999px;
    flex-shrink:    0;
    align-self:     flex-start;
}
.status-pending   { background: rgba(200,146,58,.12); color: #7d4e10; }
.status-confirmed { background: rgba(29,64,50,.10);   color: var(--pine); }
.status-cancelled { background: rgba(192,57,43,.08);  color: #c0392b; }
.status-completed { background: var(--snow-dk);        color: var(--stone-dk); }

/* ── Showing card ───────────────────────────────────────────── */
.showing-card {
    background:     var(--white);
    border:         1px solid var(--stone);
    border-radius:  var(--r-lg-ca);
    padding:        16px 18px;
    display:        flex;
    align-items:    flex-start;
    gap:            14px;
    box-shadow:     var(--shadow-card);
    margin-bottom:  10px;
}
.showing-body        { flex: 1; min-width: 0; }
.showing-addr        { font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 2px; }
.showing-city        { font-size: 11px; color: var(--stone-dk); margin-bottom: 6px; }
.showing-times       { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-bottom: 6px; }
.showing-client-note { font-size: 11px; color: var(--stone-dk); font-style: italic; }

/* ── Open houses ────────────────────────────────────────────── */


/* ── Showing modal open state ───────────────────────────────── */
#showing-modal.open  { display: flex !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
}

@media (max-width: 900px) {
    .oh-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .oh-list { grid-template-columns: 1fr; }
    .oh-photo { height: 200px; }
}

@media (max-width: 760px) {
    .auth-brand         { display: none; }
    .dash-layout        { grid-template-columns: 1fr; padding: 20px; }
    .dash-sidebar       { position: static; margin-bottom: 20px; }
    .dash-main          { margin-left: 0; }
    .fav-grid           { grid-template-columns: 1fr; }
    .dash-avatar-wrap   { padding: 20px; }
    .cact               { flex-wrap: wrap; }
    .btn-request-showing { flex: 1 1 100%; order: -1; }
    .mort-row label     { width: 80px; }
}

@media (max-width: 640px) {
    .welcome-banner     { padding: 18px 20px; }
    .frow-half          { grid-template-columns: 1fr; }
}

/* ================================================================
   MARKET STATS TAB
================================================================ */
.mkt-stats-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.mkt-stat-card     { background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-lg-ca); padding: 22px 20px; }
.mkt-stat-num      { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--secondary); margin: 0 0 4px; line-height: 1; }
.mkt-stat-unit     { font-size: 14px; color: var(--stone-dk); }
.mkt-stat-lbl      { font-size: 13px; font-weight: 600; color: var(--charcoal); margin: 0 0 2px; }
.mkt-stat-sub      { font-size: 11px; color: var(--stone-dk); margin: 0; }

/* ── Filter bar ───────────────────────────────────────────── */
.mkt-filter-bar    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mkt-filter-btn    { padding: 6px 16px; font-size: 12px; font-weight: 500; font-family: var(--sans); border: 1px solid var(--stone); border-radius: 999px; background: var(--white); color: var(--stone-dk); cursor: pointer; transition: all var(--trans); }
.mkt-filter-btn:hover  { border-color: var(--secondary); color: var(--secondary); }
.mkt-filter-btn.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); }

.mkt-cta-strip     { background: var(--warm-white); border: 1px solid var(--stone); border-radius: var(--r-lg-ca); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mkt-cta-copy      { margin: 0; font-size: 13px; color: var(--charcoal); }
.btn-primary-sm    { padding: 8px 18px; background: var(--secondary); color: var(--white); border-radius: var(--radius-md); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--trans); }
.btn-primary-sm:hover { background: var(--secondary-light); }
.mkt-updated       { margin: 0; font-size: 10px; color: var(--stone-dk); text-align: right; }

@media (max-width: 900px) {
    .mkt-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mkt-stats-grid { grid-template-columns: 1fr; }
    .mkt-cta-strip  { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   NOTE HISTORY
================================================================ */
.note-history       { margin-top: 12px; border-top: 1px dashed var(--stone); padding-top: 10px; }
.note-history-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin: 0 0 8px; }
.note-history-item  { padding: 8px 10px; background: var(--warm-white); border-radius: var(--radius-md); margin-bottom: 6px; }
.note-history-date  { font-size: 10px; color: var(--stone-dk); display: block; margin-bottom: 3px; }
.note-history-text  { margin: 0; font-size: 12px; color: var(--charcoal); line-height: 1.5; font-style: italic; }