/* ============================================================
   OHG palette — built to coexist with TAD's site so the two feel
   like part of the same workflow. The core OHG identity (navy +
   gold) stays. Secondary accents (blue / teal / yellow / purple)
   are pulled from TAD's bootstrap-style palette.
   ============================================================ */
:root{
  /* OHG brand */
  --ohg-navy:        #0f3057;
  --ohg-navy-2:      #1f4e79;
  --ohg-gold:        #c8a35a;
  --ohg-gold-soft:   #f5ecd9;

  /* TAD-aligned accents */
  --tad-blue:        #0d6efd;     /* TAD primary button / link */
  --tad-blue-hover:  #0b5ed7;
  --tad-blue-soft:   #e7f1ff;     /* light tint for chips/pills */
  --tad-teal:        #17a2b8;     /* property type icons, info chips */
  --tad-teal-hover:  #138496;
  --tad-teal-soft:   #d1ecf1;
  --tad-yellow:      #ffc107;     /* value-change / heads-up dot */
  --tad-yellow-soft: #fff3cd;
  --tad-purple:      #5b3870;     /* "A Message For Taxpayers" tone */
  --tad-purple-2:    #246b74;     /* dark-teal banner tone */
  --tad-danger:      #dc3545;
  --tad-success:     #198754;

  /* Neutrals */
  --ink:             #0f172a;
  --ink-2:           #1f2937;
  --muted:           #475569;
  --muted-2:         #64748b;
  --line:            #e5e7eb;
  --line-2:          #d1d5db;
  --bg:              #f9fafb;
  --bg-2:            #f8fafc;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:var(--ink-2);background:var(--bg)}
a{color:var(--tad-blue);text-decoration:none}
a:hover{text-decoration:underline;color:var(--tad-blue-hover)}

/* Layout */
.nav{background:#0f172a;color:#fff;padding:0 18px;display:flex;align-items:center;height:42px;border-bottom:1px solid #1e293b}
.nav h1{font-size:16px;font-weight:600;margin-right:24px;letter-spacing:.2px}
.nav .nav-links{display:flex;gap:2px;flex:1}
.nav .nav-links a{color:#cbd5e1;padding:8px 14px;font-size:15px;border-bottom:2px solid transparent}
.nav .nav-links a.active,.nav .nav-links a:hover{color:#fff;border-bottom-color:#3b82f6;text-decoration:none}
.nav .nav-stats{font-size:13px;color:#94a3b8;display:flex;gap:14px}
.nav .nav-stats b{color:#fff;font-weight:600}

/* Todo badge dot — flashes red on every admin page when there are open todos */
.todo-link{position:relative;display:inline-flex!important;align-items:center;gap:6px}
.todo-dot{display:none;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.8);flex-shrink:0}
.todo-dot.show{display:inline-block;animation:todo-flash 1.05s ease-in-out infinite}
@keyframes todo-flash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
.todo-dot[data-count]::after{content:attr(data-count);position:absolute;background:#ef4444;color:#fff;font-size:9px;font-weight:700;padding:0 4px;min-width:14px;height:14px;line-height:14px;border-radius:7px;top:-3px;right:-10px;text-align:center;display:none}

/* Sub-nav tab strip used inside the form pages */
.form-tabs{background:#fff;border-bottom:1px solid #e5e7eb;padding:0 24px;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.form-tabs a{display:inline-block;padding:11px 16px;font-size:14px;color:#475569;font-weight:500;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .12s}
.form-tabs a:hover{color:#0f3057;text-decoration:none;background:#f8fafc}
.form-tabs a.active{color:#0f3057;border-bottom-color:#c8a35a;font-weight:600;background:#fff}

.layout{display:flex;height:calc(100vh - 42px)}
.sidebar{width:300px;background:#fff;border-right:1px solid #e5e7eb;overflow-y:auto;flex-shrink:0;padding:8px 0}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}

/* Sidebar filters */
.sidebar details{border-bottom:1px solid #e5e7eb}
.sidebar summary{padding:8px 14px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#475569;cursor:pointer;background:#f8fafc;list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar summary::after{content:'▸';color:#94a3b8;font-size:13px;transition:transform .15s}
.sidebar details[open] summary::after{transform:rotate(90deg)}
.sidebar summary:hover{background:#eef2f7}
.sidebar details>*:not(summary){padding:0 14px;margin-bottom:8px}
.sidebar details>label{display:block;padding-top:8px;font-size:13px;color:#475569;margin-bottom:3px;font-weight:500}
.sidebar details>label:first-of-type{padding-top:10px}
.sidebar input[type=text],.sidebar input[type=number],.sidebar select{width:100%;padding:5px 7px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;background:#fff;color:#111827}
.sidebar input:focus,.sidebar select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.sidebar .row{display:flex;gap:4px}
.sidebar .row input{flex:1;min-width:0}
.sidebar .chips{display:flex;flex-wrap:wrap;gap:3px}
.sidebar .chips label{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid #d1d5db;border-radius:11px;padding:1px 8px;font-size:13px;cursor:pointer;user-select:none;padding-top:1px;margin-bottom:0;font-weight:500}
.sidebar .chips label:has(input:checked){background:var(--tad-blue);border-color:var(--tad-blue);color:#fff}
.sidebar .chips input{display:none}
.sidebar #reset-filters{margin:14px;width:calc(100% - 28px);padding:7px;background:var(--tad-blue);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}
.sidebar #reset-filters:hover{background:var(--tad-blue-hover)}

/* Stats bar */
.statsbar{background:#fff;padding:8px 14px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:16px;font-size:14px;color:#475569;flex-shrink:0;flex-wrap:wrap}
.statsbar b{color:#0f172a;font-weight:600;font-size:15px}
.statsbar .pill{background:#eff6ff;color:var(--tad-blue);padding:2px 8px;border-radius:11px;font-size:13px;font-weight:500}
.statsbar .right{margin-left:auto;display:flex;gap:6px}
.statsbar button{background:#fff;border:1px solid #d1d5db;color:#1f2937;padding:5px 10px;border-radius:4px;font-size:13px;cursor:pointer;font-weight:500}
.statsbar button:hover{background:#f3f4f6}
.statsbar button.primary{background:var(--tad-blue);color:#fff;border-color:var(--tad-blue)}
.statsbar button.primary:hover{background:var(--tad-blue-hover)}

/* Map page */
#map{flex:1;min-height:0}
.popup-acct{font-weight:600;color:#0f172a;font-size:15px;padding-bottom:5px;border-bottom:1px solid #e5e7eb;margin-bottom:5px}
.pc-tag{display:inline-block;padding:0 5px;background:#0f172a;color:#fff;border-radius:3px;font-size:10px;margin-left:4px;vertical-align:middle}
.popup-table{font-size:14px;border-collapse:collapse;min-width:280px}
.popup-table th{text-align:left;color:#64748b;font-weight:500;padding:1px 8px 1px 0;vertical-align:top;width:90px}
.popup-table td{padding:1px 0;color:#1f2937}
.popup-streetview{margin-top:8px;width:100%;border:1px solid #e5e7eb;border-radius:4px;overflow:hidden;display:block}
.popup-streetview img{width:100%;display:block}
.popup-links{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.popup-links a{color:var(--tad-blue);font-size:13px;padding:3px 7px;border:1px solid var(--tad-blue);border-radius:3px}
.popup-links a:hover{background:var(--tad-blue);color:#fff;text-decoration:none}
.popup-detail-link{display:inline-block;margin-top:6px;color:#fff;background:#0f172a;padding:5px 10px;border-radius:4px;font-size:13px;font-weight:500}
.popup-detail-link:hover{background:#1e293b;color:#fff;text-decoration:none}

/* Table page */
.table-wrap{flex:1;overflow:auto;background:#fff}
table.props{border-collapse:collapse;width:100%;font-size:14px}
table.props th,table.props td{padding:6px 10px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap}
table.props th{background:#f8fafc;font-weight:600;color:#475569;position:sticky;top:0;cursor:pointer;user-select:none;font-size:13px;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid #e5e7eb;z-index:1}
table.props th:hover{background:#eef2f7}
table.props th.sorted{color:var(--tad-blue)}
table.props th.sorted::after{content:' ↓';opacity:.7}
table.props th.sorted.asc::after{content:' ↑'}
table.props tbody tr:hover{background:#f9fafb}
table.props tbody tr.selected{background:#dbeafe}
table.props td.num{text-align:right}
table.props td a{color:var(--tad-blue);font-weight:500}
.pagination{padding:10px 14px;background:#fff;border-top:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;font-size:14px;color:#475569;flex-shrink:0}
.pagination button{background:#fff;border:1px solid #d1d5db;color:#1f2937;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:14px}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination select{padding:3px 6px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;background:#fff}

/* Detail page */
.detail-wrap{padding:18px 24px;overflow:auto;background:#fff;flex:1}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:18px}
.detail-header h2{font-size:22px;color:#0f172a;font-weight:600}
.detail-header .acct{font-family:ui-monospace,monospace;color:#64748b;font-size:15px;margin-top:3px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.detail-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px;padding:14px}
.detail-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#64748b;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #e5e7eb}
.detail-card .kv{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;font-size:15px}
.detail-card .kv .k{color:#64748b}
.detail-card .kv .v{color:#0f172a;font-weight:500}
.detail-streetview{margin-top:14px;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;background:#f3f4f6}
.detail-streetview img{display:block;width:100%}
.detail-actions{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.detail-actions a{padding:7px 12px;background:#fff;border:1px solid #d1d5db;color:#0f172a;border-radius:4px;font-size:14px;font-weight:500}
.detail-actions a:hover{background:#f3f4f6;text-decoration:none}
.detail-actions a.primary{background:var(--tad-blue);color:#fff;border-color:var(--tad-blue)}
.detail-actions a.primary:hover{background:var(--tad-blue-hover)}
.detail-mini-map{height:240px;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}

/* Loading */
.loading{display:flex;align-items:center;justify-content:center;flex:1;color:#64748b;font-size:15px}
.spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:var(--tad-blue);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Index page */
.index-wrap{padding:30px 40px;max-width:900px;margin:0 auto}
.index-wrap h2{font-size:26px;font-weight:600;color:#0f172a;margin-bottom:6px}
.index-wrap .lead{color:#475569;margin-bottom:24px;font-size:16px}
.index-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.index-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:18px;text-decoration:none}
.index-card h3{font-size:16px;color:#0f172a;font-weight:600;margin-bottom:6px}
.index-card p{font-size:14px;color:#64748b;line-height:1.5}
.index-card:hover{border-color:var(--tad-blue);box-shadow:0 2px 8px rgba(13,110,253,.12)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:14px}
.kpi .label{font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-bottom:4px}
.kpi .value{font-size:22px;font-weight:600;color:#0f172a}

/* ============================================================
   TAD-aligned utility classes — chips, badges, banners, dots.
   Use these wherever you want the OHG site to echo TAD's look.
   ============================================================ */

/* TAD-style notification banner. Use --tad-purple for "messages
   for taxpayers" tone or --tad-purple-2 for the deeper teal tone. */
.tad-banner{display:block;width:100%;text-align:center;padding:10px 14px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;text-decoration:none}
.tad-banner.purple{background:var(--tad-purple)}
.tad-banner.teal{background:var(--tad-purple-2)}
.tad-banner a,.tad-banner a:hover{color:#fff;text-decoration:underline}

/* Soft info chip — use for property-class hints, county tags, etc. */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:11px;font-size:12px;font-weight:600;line-height:1.6}
.chip-blue   {background:var(--tad-blue-soft);   color:var(--tad-blue-hover)}
.chip-teal   {background:var(--tad-teal-soft);   color:#0c5460}
.chip-yellow {background:var(--tad-yellow-soft); color:#7a5c00}
.chip-gold   {background:var(--ohg-gold-soft);   color:#7a6024}
.chip-navy   {background:#eef2f7;                color:var(--ohg-navy)}
.chip-grey   {background:#eef2f7;                color:var(--muted)}

/* TAD-style yellow heads-up dot — appears next to a value to signal
   "this changed" / "needs attention". Ride it next to a number:
   <span class="value-dot" title="Value changed"></span> */
.value-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tad-yellow);vertical-align:1px;margin-left:5px;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.value-dot.up{background:var(--tad-danger)}
.value-dot.down{background:var(--tad-success)}

/* Primary action button — TAD bootstrap-blue solid. */
.btn-tad{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--tad-blue);color:#fff;border:1px solid var(--tad-blue);border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s}
.btn-tad:hover{background:var(--tad-blue-hover);border-color:var(--tad-blue-hover);color:#fff;text-decoration:none}
.btn-tad-outline{background:#fff;color:var(--tad-blue);border-color:var(--tad-blue)}
.btn-tad-outline:hover{background:var(--tad-blue);color:#fff}

/* Light tint section header (like TAD's content card headers) */
.tad-section-head{background:var(--bg-2);border-bottom:1px solid var(--line);padding:10px 14px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}

/* TAD-style account number link — teal underline-on-hover */
.acct-link{color:var(--tad-blue);font-weight:500;text-decoration:none}
.acct-link:hover{text-decoration:underline;color:var(--tad-blue-hover)}

/* ============================================================
   TAD-style admin nav (used by /js/admin-nav.js).
   Cleaner spacing, dropdown groupings, prominent brand mark.
   ============================================================ */
.nav.nav-tad{height:54px;padding:0 24px;background:linear-gradient(180deg,#102b46,#0f3057);display:flex;align-items:center;gap:8px;border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 14px rgba(15,48,87,.1);position:relative;z-index:50}
.nav.nav-tad .nav-brand{display:flex;align-items:center;text-decoration:none;color:#fff;margin-right:22px;padding:4px 0;height:100%}
.nav.nav-tad .nav-brand .ohg-logo-svg{height:48px;width:auto;display:block;transition:transform .15s ease}
.nav.nav-tad .nav-brand:hover .ohg-logo-svg{transform:scale(1.03)}
.nav.nav-tad .nav-links{display:flex;gap:1px;flex:1;align-items:center;height:100%}
.nav.nav-tad .nav-links a,
.nav.nav-tad .nav-links .nav-dd-trigger{
  display:inline-flex;align-items:center;gap:5px;height:54px;padding:0 14px;
  color:rgba(255,255,255,.82);font-size:14px;font-weight:500;
  border:0;background:transparent;cursor:pointer;text-decoration:none;
  border-bottom:3px solid transparent;transition:color .12s,border-color .12s,background .12s;
  white-space:nowrap;
}
.nav.nav-tad .nav-links a:hover,
.nav.nav-tad .nav-links .nav-dd-trigger:hover,
.nav.nav-tad .nav-dd:focus-within .nav-dd-trigger{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.nav.nav-tad .nav-links a.active,
.nav.nav-tad .nav-links .nav-dd-trigger.active{color:#fff;border-bottom-color:var(--tad-teal)}
.nav.nav-tad .nav-dd{position:relative;height:100%}
.nav.nav-tad .nav-dd-menu{
  display:none;position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:0 0 8px 8px;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  padding:6px 0;z-index:100;
}
.nav.nav-tad .nav-dd:hover .nav-dd-menu,
.nav.nav-tad .nav-dd:focus-within .nav-dd-menu{display:block}
.nav.nav-tad .nav-dd-menu a{
  display:block;height:auto;padding:9px 16px;color:var(--ink);font-size:14px;font-weight:500;
  border-bottom:0;background:#fff;text-decoration:none;
}
.nav.nav-tad .nav-dd-menu a:hover{background:var(--tad-teal-soft);color:var(--ink)}
.nav.nav-tad .nav-dd-menu a.active{background:var(--tad-blue-soft);color:var(--tad-blue-hover);font-weight:600}
.nav.nav-tad .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav.nav-tad .nav-public{
  font-size:13px;color:rgba(255,255,255,.85);padding:7px 14px;
  border:1px solid rgba(255,255,255,.25);border-radius:6px;text-decoration:none;
  transition:all .12s;
}
.nav.nav-tad .nav-public:hover{background:#fff;color:var(--ohg-navy);border-color:#fff;text-decoration:none}

/* ============================================================
   Page-density tune-up — gives any admin page more breathing room
   without each page needing edits.
   ============================================================ */
.wrap{padding-top:26px;padding-bottom:60px}
table.tbl td,table.tbl th{padding-top:11px;padding-bottom:11px}
table.clients td,table.clients th{padding-top:12px;padding-bottom:12px}

/* Cleaner card headers across pages */
.card>h3,.card>h2{font-weight:700;letter-spacing:.45px}