/* Housing Market Ads — V1 skin.
   Loaded AFTER css/styles.css. Overrides only; touches no markup, no ids,
   no handlers. Remove the <link> to revert completely. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root{
  --v1-brand:#0a94a8; --v1-brand-d:#087d8e; --v1-brand-l:#e3f4f7;
  --v1-ground:#f4f7f8; --v1-panel:#ffffff; --v1-panel-2:#eef3f5;
  --v1-ink:#0f1c21; --v1-ink-2:#47606a; --v1-ink-3:#7d949e;
  --v1-rule:#dde6ea; --v1-rule-2:#eaf0f2;
  --v1-ok:#15803d; --v1-ok-bg:#ecfdf3;
  --v1-warn:#b54708; --v1-warn-bg:#fffaeb;
  --v1-bad:#b42318; --v1-bad-bg:#fef3f2; --v1-bad-line:#f04438;
  --v1-rail:#0e2b33; --v1-rail-ink:#a9c6cf; --v1-rail-active:#12414d;
  --v1-shadow:0 1px 2px rgba(15,28,33,.06), 0 1px 3px rgba(15,28,33,.04);
  /* The auth back-link keeps its OWN brand shade rather than using
     --v1-brand, because --v1-brand flips to a light cyan in dark mode and
     white letters on it would fail contrast. Mike, 2026-09-07: solid
     colour, white letters, no hover effect. */
  --v1-backlink:#0a94a8;
  /* Selected sidebar item. Its own token rather than --v1-brand, because the
     brand flips to a light cyan in dark mode and white letters on that measure
     2.22:1 -- the one element on the dashboard that failed WCAG AA.
     Light mode is NOT --v1-brand either. White on #0a94a8 is 3.61:1, which
     clears the 3:1 that large text and non-text UI parts need -- which is why
     an automated pass called it clean -- but this label is 14px/600, so it is
     ordinary text and the threshold is 4.5:1. #087d8e is 4.84:1. It is the
     existing --v1-brand-d rather than a new shade, and it is written out
     because --v1-brand-d is itself re-pointed in dark mode.
     Darker is not automatically better: the chip must also stay 3:1 clear of
     the rail behind it, and the light rail (#0e2b33) is lighter than the dark
     one, so that ceiling binds sooner here. #087d8e sits at 3.07:1 against it;
     the dark theme's #0e6d7d would be only 2.48:1 and fail. The usable band on
     this hue is roughly #087c8c to #097f90 -- stay inside it.
     test/nav-contrast.test.mjs measures both themes. */
  --v1-rail-sel:#087d8e; --v1-rail-sel-ink:#ffffff;
}
body.dark-mode{
  --v1-backlink:#0e7c8c;
  /* A deeper teal so the white label clears AA: 6.00:1, against 2.22:1 for
     white on --v1-brand (#35bed3). Still reads as the brand colour, and still
     separates from the rail behind it at 3.16:1, above the 3:1 that a
     non-text UI element needs. */
  --v1-rail-sel:#0e6d7d; --v1-rail-sel-ink:#ffffff;
  --v1-brand:#35bed3; --v1-brand-d:#4fd0e3; --v1-brand-l:#0e3841;
  --v1-ground:#0b1417; --v1-panel:#121e23; --v1-panel-2:#182830;
  --v1-ink:#e6f0f3; --v1-ink-2:#9db3bc; --v1-ink-3:#6f8892;
  --v1-rule:#223640; --v1-rule-2:#1a2c34;
  --v1-ok:#4ade80; --v1-ok-bg:#0d2a1a;
  --v1-warn:#fec84b; --v1-warn-bg:#2a1f0d;
  --v1-bad:#fda29b; --v1-bad-bg:#2a1512; --v1-bad-line:#f97066;
  --v1-rail:#081217; --v1-rail-ink:#8fa9b2; --v1-rail-active:#12333d;
  --v1-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
}

/* ---------- foundation ---------- */
body, .wrapper{
  background:var(--v1-ground) !important; color:var(--v1-ink) !important;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.content-wrapper{background:var(--v1-ground) !important;}
h1,h2,h3,h4,h5{letter-spacing:-.02em; font-weight:700; color:var(--v1-ink);}
h1{font-size:26px} h2{font-size:21px} h3{font-size:18px}
a{color:var(--v1-brand)} a:hover{color:var(--v1-brand-d)}
code,kbd,pre,.text-monospace{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---------- header ---------- */
.main-header.navbar{
  background:var(--v1-panel) !important; border-bottom:1px solid var(--v1-rule) !important;
  box-shadow:none !important;
}
.main-header .nav-link{color:var(--v1-ink-2) !important}
.main-header .nav-link:hover{color:var(--v1-brand) !important}
#navbar-page-title{font-weight:700; font-size:16px; color:var(--v1-ink); letter-spacing:-.01em}

/* The account label is the customer's email. At full length it is 400px+,
   and AdminLTE's navbar never wraps, so the right-hand group used to push the
   page to 841px on a 375px phone and 1091px at 1024 -- Account and Logout were
   reachable only by scrolling sideways. The icon shows only when the label
   does not; the full text stays in the link's title and aria-label
   (js/Navigator.js). 1200px and up is untouched. */
.main-header .hma-user-icon{display:none}
@media (max-width:1199.98px){
  .main-header .hma-user-toggle{display:flex; align-items:center}
  .main-header .hma-user-label{
    display:inline-block; max-width:200px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}
/* Navbar at phone width: icons only. The page title is the one thing that
   gives way, with an ellipsis, so the controls never leave the screen. */
@media (max-width:767.98px){
  .main-header .hma-user-label,
  .main-header .hma-lang-name,
  .main-header .hma-nav-fullscreen{display:none}
  .main-header .hma-user-icon{display:inline-block; font-size:1.15rem}
  .main-header.navbar{flex-wrap:nowrap}
  .main-header .navbar-nav{min-width:0}
  .main-header .navbar-nav:first-child{flex:1 1 auto}
  .main-header .navbar-nav:first-child > .nav-item:last-child{min-width:0}
  .main-header .navbar-nav .nav-link{padding-left:.6rem; padding-right:.6rem}
  #navbar-page-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* ---------- sidebar ---------- */
.main-sidebar{background:var(--v1-rail) !important; box-shadow:none !important}
.main-sidebar .brand-link{
  background:var(--v1-rail) !important; border-bottom:1px solid rgba(255,255,255,.07) !important;
  padding:14px 16px !important;
}
.nav-sidebar .nav-link{
  color:var(--v1-rail-ink) !important; border-radius:7px; margin:1px 8px; padding:9px 12px;
  font-weight:600; font-size:14px; transition:background .12s, color .12s;
}
.nav-sidebar .nav-link:hover{background:var(--v1-rail-active) !important; color:#fff !important}
.nav-sidebar .nav-link.active{
  background:var(--v1-rail-sel) !important; color:var(--v1-rail-sel-ink) !important;
  box-shadow:none !important;
}
.nav-sidebar .nav-icon{opacity:.85}

/* ---------- cards ---------- */
.card{
  background:var(--v1-panel) !important; border:1px solid var(--v1-rule) !important;
  border-radius:11px !important; box-shadow:var(--v1-shadow) !important;
}
.card-header{
  background:transparent !important; border-bottom:1px solid var(--v1-rule-2) !important;
  padding:15px 18px !important;
}
.card-title{font-weight:700 !important; font-size:15px !important; letter-spacing:-.01em}
.card-body{padding:18px !important}
.card.card-outline{border-top-width:1px !important}
.card-primary:not(.card-outline) .card-header{background:var(--v1-brand) !important}
.shadow{box-shadow:var(--v1-shadow) !important}
.bg-white{background:var(--v1-panel) !important; color:var(--v1-ink) !important}

/* ---------- buttons ---------- */
.btn{
  border-radius:8px !important; font-weight:600 !important; font-size:14px;
  padding:9px 16px; letter-spacing:-.005em; transition:filter .12s, background .12s;
}
.btn-primary{
  background:var(--v1-brand) !important; border-color:var(--v1-brand) !important; color:#fff !important;
}
.btn-primary:hover,.btn-primary:focus{filter:brightness(1.08); box-shadow:none !important}
.btn-outline-primary{
  color:var(--v1-brand) !important; border-color:var(--v1-brand) !important; background:transparent !important;
}
.btn-outline-primary:hover{background:var(--v1-brand) !important; color:#fff !important}
.btn-secondary{background:var(--v1-panel-2) !important; border-color:var(--v1-rule) !important; color:var(--v1-ink) !important}
.btn-success{background:var(--v1-ok) !important; border-color:var(--v1-ok) !important}
.btn-danger{background:var(--v1-bad-line) !important; border-color:var(--v1-bad-line) !important}
.btn:focus{box-shadow:0 0 0 3px var(--v1-brand-l) !important}

/* ---------- forms ---------- */
.form-control,.custom-select,.form-control-border{
  background:var(--v1-panel) !important; border:1px solid var(--v1-rule) !important;
  border-radius:8px !important; color:var(--v1-ink) !important; font-size:14px;
  padding:9px 11px; height:auto;
}
.form-control:focus{
  border-color:var(--v1-brand) !important; box-shadow:0 0 0 3px var(--v1-brand-l) !important;
}
.form-control::placeholder{color:var(--v1-ink-3) !important}
label{font-weight:600; font-size:13px; color:var(--v1-ink-2); margin-bottom:5px}
.form-control-plaintext{color:var(--v1-ink) !important}
.input-group-text{
  background:var(--v1-panel-2) !important; border-color:var(--v1-rule) !important;
  color:var(--v1-ink-2) !important; border-radius:8px;
}
.invalid-feedback{color:var(--v1-bad) !important; font-size:12.5px; font-weight:500}
.is-invalid{border-color:var(--v1-bad-line) !important}

/* ---------- tables ---------- */
.table{color:var(--v1-ink) !important; font-size:14px}
.table thead th{
  border-bottom:1px solid var(--v1-rule) !important; border-top:none !important;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--v1-ink-3) !important; padding:11px 12px;
}
.table td{border-top:1px solid var(--v1-rule-2) !important; padding:12px; vertical-align:middle}
.table-hover tbody tr:hover{background:var(--v1-panel-2) !important; color:var(--v1-ink) !important}

/* ---------- badges, alerts, modals ---------- */
.badge{border-radius:20px; font-weight:600; font-size:11px; padding:4px 10px; letter-spacing:.02em}
.badge-success{background:var(--v1-ok-bg) !important; color:var(--v1-ok) !important}
.badge-warning{background:var(--v1-warn-bg) !important; color:var(--v1-warn) !important}
.badge-danger{background:var(--v1-bad-bg) !important; color:var(--v1-bad) !important}
.alert{border-radius:10px; border-width:1px; font-size:14px; padding:13px 16px}
.alert-danger{background:var(--v1-bad-bg) !important; border-color:var(--v1-bad-line) !important; color:var(--v1-bad) !important}
.alert-success{background:var(--v1-ok-bg) !important; border-color:var(--v1-ok) !important; color:var(--v1-ok) !important}
.alert-warning{background:var(--v1-warn-bg) !important; border-color:var(--v1-warn) !important; color:var(--v1-warn) !important}
.modal-content{
  background:var(--v1-panel) !important; border:1px solid var(--v1-rule) !important;
  border-radius:13px !important; box-shadow:0 20px 50px rgba(15,28,33,.18) !important;
}
.modal-header,.modal-footer{border-color:var(--v1-rule-2) !important}

/* ---------- breadcrumbs, tabs, misc ---------- */
.breadcrumb{background:transparent !important; padding:0; font-size:13px}
.breadcrumb-item a{color:var(--v1-ink-2)}
.breadcrumb-item.active{color:var(--v1-ink-3)}
.nav-tabs{border-bottom:1px solid var(--v1-rule) !important}
.nav-tabs .nav-link{
  border:none !important; color:var(--v1-ink-2) !important; font-weight:600;
  border-bottom:2px solid transparent !important; border-radius:0 !important;
}
.nav-tabs .nav-link.active{
  color:var(--v1-brand) !important; background:transparent !important;
  border-bottom-color:var(--v1-brand) !important;
}
.content-header{padding:16px 0 6px !important}
.content-header h1{font-size:23px !important}
.info-icon{color:var(--v1-ink-3)}
.text-muted{color:var(--v1-ink-3) !important}
.bg-cyan{background:var(--v1-brand-l) !important; color:var(--v1-ink) !important}
hr{border-color:var(--v1-rule-2)}
.preloader{background:var(--v1-ground) !important}

/* numbers line up */
h2.m-0,.num,[id$="_counter"]{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ---------- legibility guard ----------
   Forcing .card to a light panel can strand text that was white because the
   card used to sit on artwork. Any card WITHOUT an explicit bg- utility gets
   readable ink; cards that opt into a colour keep their own treatment. */
.card:not([class*="bg-"]):not(.bg-primary):not(.bg-dark) .card-body,
.card:not([class*="bg-"]):not(.bg-primary):not(.bg-dark) .card-body p,
.card:not([class*="bg-"]):not(.bg-primary):not(.bg-dark) .card-body li,
.card:not([class*="bg-"]):not(.bg-primary):not(.bg-dark) .card-body span:not(.badge){
  color:var(--v1-ink) !important;
}
.card:not([class*="bg-"]) .card-body .text-muted{color:var(--v1-ink-3) !important}

/* ---------- V1 billing panels (dashboard) ---------- */
.v1-alert{
  display:grid; grid-template-columns:auto 1fr auto; gap:0 14px; align-items:center;
  background:var(--v1-bad-bg); border:1px solid var(--v1-bad-line); border-radius:10px;
  padding:15px 17px; margin:0 0 16px;
}
.v1-alert-icon{width:22px; height:22px; color:var(--v1-bad-line); grid-row:1/span 2}
.v1-alert-title{font-weight:700; font-size:14.5px; color:var(--v1-bad); letter-spacing:-.01em}
.v1-alert-detail{font-size:13.5px; color:var(--v1-bad); opacity:.85; margin-top:2px}
.v1-alert .btn{grid-row:1/span 2; white-space:nowrap}
@media(max-width:640px){
  .v1-alert{grid-template-columns:auto 1fr}
  .v1-alert .btn{grid-row:auto; grid-column:1/-1; margin-top:10px}
}
.v1-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--v1-rule); border:1px solid var(--v1-rule); border-radius:10px;
  overflow:hidden; margin:0 0 14px;
}
.v1-tile{background:var(--v1-panel); padding:16px 18px}
.v1-tile .k{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--v1-ink-3); margin:0 0 4px;
}
.v1-tile .v{
  font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--v1-ink);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  line-height:1.15; margin:0;
}
.v1-tile .s{font-size:12.5px; color:var(--v1-ink-2); margin-top:3px}
.v1-bad-text{color:var(--v1-bad) !important}
.v1-warn-text{color:var(--v1-warn) !important}

/* ---------- V1 dashboard layout ---------- */
.v1-page{padding:18px 20px 40px}
.v1-page .container-fluid{max-width:1500px}
.v1-pagehead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:0 0 18px;
}
.v1-h1{font-size:24px; font-weight:800; letter-spacing:-.025em; margin:0; color:var(--v1-ink)}
.v1-sub{font-size:14px; color:var(--v1-ink-2); margin:3px 0 0}
.v1-pagehead-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.v1-range{
  background:var(--v1-panel) !important; border:1px solid var(--v1-rule) !important;
  border-radius:8px; padding:9px 13px; cursor:pointer; font-size:14px;
  color:var(--v1-ink); white-space:nowrap; font-weight:500;
}
.v1-range:hover{border-color:var(--v1-brand) !important}
/* A long localized range (Thai at 320px is 313px of text) may wrap rather than
   widen the page. */
@media (max-width:575.98px){ .v1-range{white-space:normal; max-width:100%} }

/* metric tiles: one object, equal cells, hairline dividers */
.v1-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px;
  background:var(--v1-rule); border:1px solid var(--v1-rule); border-radius:11px;
  overflow:hidden; margin:0 0 16px; box-shadow:var(--v1-shadow);
}
.v1-tile{background:var(--v1-panel); padding:15px 17px}
.v1-tile .k{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--v1-ink-3); margin:0 0 5px;
}
.v1-tile .v{
  font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--v1-ink);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  line-height:1.1; margin:0;
}
.v1-tile .s{font-size:12px; color:var(--v1-ink-3); margin-top:4px; line-height:1.4}
.v1-tile.v1-lead .v{color:var(--v1-brand)}

/* chart card */
.v1-card{
  background:var(--v1-panel); border:1px solid var(--v1-rule); border-radius:11px;
  box-shadow:var(--v1-shadow); overflow:hidden;
}
.v1-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--v1-rule-2); flex-wrap:wrap;
}
.v1-card-title{font-size:15px; font-weight:700; margin:0; letter-spacing:-.01em; color:var(--v1-ink)}
.v1-legend{display:flex; gap:16px; font-size:12.5px; color:var(--v1-ink-2)}
.v1-legend span{display:inline-flex; align-items:center; gap:6px}
.v1-dot{width:9px; height:9px; border-radius:2px; display:inline-block}
.v1-dot-imp{background:rgba(54,162,235,1)}
.v1-dot-clk{background:rgba(255,99,132,1)}
.v1-card-body{padding:16px 18px 20px; height:46vh; min-height:320px}
.v1-card-body canvas{max-height:100%}

/* the old inline-styled metric blocks are gone; neutralise their utilities
   in case any other view still uses them */
.v1-page .bg-cyan, .v1-page .bg-red{background:var(--v1-panel) !important; color:var(--v1-ink) !important}

/* ---------- coloured metric tiles (Impressions / Clicks) ----------
   Kept from the original design at Mike's request: pale cyan for
   impressions, solid red for clicks. Everything inside the red tile takes
   white so nothing is left stranded on the darker ground. */
.v1-tile.v1-imp{background:#e3f2f7}
.v1-tile.v1-imp .k{color:#3d6b7a}
.v1-tile.v1-imp .v{color:#0b3d4d}
.v1-tile.v1-imp .s{color:#5b7f8b}

.v1-tile.v1-clk{background:#e63946}
.v1-tile.v1-clk .k{color:#ffe3e6}
.v1-tile.v1-clk .v{color:#ffffff}
.v1-tile.v1-clk .s{color:#ffd2d7}

body.dark-mode .v1-tile.v1-imp{background:#123642}
body.dark-mode .v1-tile.v1-imp .k{color:#8fb6c4}
body.dark-mode .v1-tile.v1-imp .v{color:#dff1f7}
body.dark-mode .v1-tile.v1-imp .s{color:#8fb6c4}
body.dark-mode .v1-tile.v1-clk{background:#b32633}

/* ---------- sizing fixes from the live page ----------
   A nine-figure balance overflowed a 158px track and was clipped mid-number.
   Wider tracks, a slightly smaller figure, and values that shrink rather than
   truncate when the number is long. */
.v1-tiles{grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.v1-tile .v{
  font-size:23px; overflow-wrap:anywhere; word-break:break-word;
  max-width:100%; white-space:normal;
}
/* long currency figures step down instead of being cut off */
.v1-tile .v:not(:empty){font-size:clamp(17px,2.1vw,23px)}
@media(min-width:1400px){.v1-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* Chart.js renders its own legend; one is enough */
.v1-card-head{justify-content:flex-start}
.v1-card-body{padding:12px 16px 18px}

/* ---------- campaigns page: range selector ---------- */
.v1-camp-range-wrap{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 14px;
}
.v1-camp-range-label{
  font-size:12.5px; font-weight:600; color:var(--v1-ink-2); margin:0;
}
/* The campaigns selector IS the dashboard selector. It already carries
   `.v1-range`, and this id rule used to restate every one of those properties at
   a smaller size — 8px/12px padding and 13.5px type against the dashboard's
   9px/13px and 14px — so the two controls were visibly different objects doing
   the same job. Everything that `.v1-range` already provides is deleted here
   rather than duplicated, which is also what stops them drifting apart again:
   there is now one place to change the appearance of a range selector.
   `user-select` is the only genuine addition — the trigger is a div, so a
   double-click would otherwise select its text instead of opening the picker. */
#campaignsRange{user-select:none}
.daterangepicker td.active, .daterangepicker td.active:hover{background-color:var(--v1-brand) !important}
.daterangepicker .ranges li.active{background-color:var(--v1-brand) !important}


/* ---------- campaigns page: range docked beside the table search ---------- */
/* DataTables owns this column and its own bootstrap4 stylesheet already styles
   the filter with `div.dataTables_wrapper div.dataTables_filter` — two classes
   and two elements. Anything here that has to WIN against that must be at least
   as specific, which is why these selectors are qualified all the way up rather
   than written as the shorter `.v1-table-controls .dataTables_filter`: that
   reads fine and silently loses the cascade, which is the failure mode that
   leaves a rule in the file doing nothing at all. */
div.dataTables_wrapper div.v1-table-controls{
  display:flex; align-items:center; justify-content:flex-end;
  gap:16px; flex-wrap:wrap;
}
div.dataTables_wrapper div.v1-table-controls div.v1-camp-range-wrap{margin:0}
/* The base DataTables stylesheet floats the filter right; the bootstrap4
   integration positions it with text-align instead. Clearing the float covers
   the first case, because a floated child is pulled out of the flex flow and
   would ignore the layout entirely. */
div.dataTables_wrapper div.v1-table-controls div.dataTables_filter{
  float:none; text-align:right;
}
div.dataTables_wrapper div.v1-table-controls div.dataTables_filter label{margin-bottom:0}
@media (max-width:575px){
  /* Narrow screens stack the two controls. Keep them aligned with the table's
     left edge rather than trailing off the right. */
  div.dataTables_wrapper div.v1-table-controls{justify-content:flex-start}
  div.dataTables_wrapper div.v1-table-controls div.dataTables_filter{text-align:left}
}


/* The "Impressions & clicks for" label was removed at Mike's request
   (2026-09-06). The wrapper now holds only the trigger, so its 10px gap would
   render as dead space to the left of the control inside the flex row. Zeroing
   it here rather than deleting the wrapper keeps the JS that moves
   `.v1-camp-range-wrap` into the table controls working unchanged. */
.v1-camp-range-wrap{gap:0}


/* -- Auth pages: the "< HousingMarketAds.com" back link ---------------------
   Was `btn-outline-primary text-white`. Bootstrap's outline variant swaps
   background and text on hover, so the button emptied out to a transparent
   box with coloured text as soon as the pointer touched it -- and on the way
   through, `text-white` kept the letters white against the page, making them
   briefly unreadable.
   Mike, 2026-09-07: solid colour with white letters. So every state is pinned
   to the same fill, including :hover, :focus and :active. The focus ring is
   kept -- removing the hover effect is a look decision, losing the keyboard
   focus indicator would be an accessibility regression. */
.hma-back-link,
.hma-back-link:link,
.hma-back-link:visited,
.hma-back-link:hover,
.hma-back-link:focus,
.hma-back-link:active{
  background-color:var(--v1-backlink) !important;
  border:1px solid var(--v1-backlink) !important;
  color:#fff !important;
  box-shadow:none !important;
  opacity:1 !important;
  text-decoration:none;
}
.hma-back-link:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}


/* -- Auth pages: light/dark ------------------------------------------------
   login.html, register.html and password_forgot.html had no theme switch at
   all -- the toggle lived only in index.html's header, so the three pages a
   customer sees BEFORE signing in were permanently light. Someone using the
   dashboard in dark got a full-brightness page every time their session
   expired.

   Decision, 2026-09-07: the unauthenticated pages get the switch, rather than
   the dashboard losing it. The theme is stored per browser under 'hma.theme',
   so the choice now survives sign-out and sign-in instead of being forgotten
   at the door.

   The pages carry no header to hang a control on, so the toggle is its own
   fixed button. It sits above .login_page (z-index 1030, AdminLTE's fixed-
   header layer) and stays clear of the card on small screens. */
.hma-theme-toggle{
  position:fixed; top:14px; right:14px; z-index:1030;
  width:38px; height:38px; padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer;
  background-color:var(--v1-panel); border:1px solid var(--v1-rule);
  color:var(--v1-ink-2); box-shadow:var(--v1-shadow);
  transition:color .12s, background-color .12s, border-color .12s;
}
.hma-theme-toggle:hover{ color:var(--v1-brand); border-color:var(--v1-brand); }
.hma-theme-toggle:focus-visible{ outline:2px solid var(--v1-brand); outline-offset:2px; }
.hma-theme-toggle .hma-theme-icon{ font-size:15px; }

/* .login-box paints a hardcoded #fff in styles.css. Every token-driven rule
   inside it goes dark on its own, so without this override the form would be
   dark text tokens on a white panel -- the exact half-themed state the
   light/dark rule in CLAUDE.md exists to prevent. */
body.dark-mode .login-box{
  background:var(--v1-panel) !important;
  box-shadow:0 0 5px rgba(0,0,0,.6) !important;
}
body.dark-mode .login-box .card,
body.dark-mode .login-box .card .login-card-body{ background:none !important; }
body.dark-mode .login-box-msg,
body.dark-mode .login-box label{ color:var(--v1-ink) !important; }
/* .left_side is a photograph with white text and a text-shadow; it reads the
   same in both themes and is deliberately left alone. */

/* ---------- Payment problem panel (js/billing/payment_problem.js) ----------
   Shown where a card or payment failed: Billing Profile and the ad wizard's
   payment step. Tokens only, so light and dark both follow body.dark-mode;
   logical properties, so Arabic mirrors it. The same block is in
   adWizard/css/hma-wizard-v1.css, because the wizard is its own document. */
.hma-payprob-host[hidden]{display:none !important}
.hma-payprob{
  /* Local tokens: the action colours are a shade deeper than --v1-brand so
     white and link text clear WCAG AA (4.5:1) in both themes. */
  --hma-payprob-cta:#087d8e; --hma-payprob-link:#087d8e;
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:0 14px;
  background:var(--v1-panel); color:var(--v1-ink);
  border:1px solid var(--v1-rule); border-inline-start:4px solid var(--v1-bad-line);
  border-radius:10px; box-shadow:var(--v1-shadow);
  padding:16px 44px 16px 16px; padding-inline:16px 44px; margin:0 0 16px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif; text-align:start;
  animation:hma-payprob-in .18s ease-out;
}
body.dark-mode .hma-payprob{--hma-payprob-cta:#0e6d7d; --hma-payprob-link:#35bed3}
@keyframes hma-payprob-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .hma-payprob{animation:none} }
.hma-payprob-icon{
  width:38px; height:38px; padding:8px; border-radius:50%;
  background:var(--v1-bad-bg); color:var(--v1-bad); box-sizing:border-box;
}
.hma-payprob-body{min-width:0}
.hma-payprob-title{
  margin:6px 0 6px; font-size:16px; line-height:1.3; font-weight:700;
  letter-spacing:-.01em; color:var(--v1-ink);
}
.hma-payprob-title:focus{outline:none}
.hma-payprob-title:focus-visible{outline:2px solid var(--v1-brand); outline-offset:2px; border-radius:4px}
.hma-payprob-reason{margin:0 0 2px; font-size:14px; line-height:1.5; color:var(--v1-ink)}
.hma-payprob-hint{margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--v1-ink-2)}
.hma-payprob-card{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 14px;
  padding:4px 10px 4px 8px; padding-inline:8px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; line-height:1.4;
}
.hma-payprob-card.is-saved{background:var(--v1-ok-bg); color:var(--v1-ok)}
.hma-payprob-card.is-unsaved{background:var(--v1-panel-2); color:var(--v1-ink-2)}
.hma-payprob-card-icon{width:14px; height:14px; flex:none}
/* The skin colours every p and span in a .card-body with --v1-ink,
   !important, at specificity (0,6,1). :not(#hma-payprob-x) lifts these
   above it without touching that rule. */
.hma-payprob:not(#hma-payprob-x) .hma-payprob-title,
.hma-payprob:not(#hma-payprob-x) .hma-payprob-reason{color:var(--v1-ink) !important}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-hint{color:var(--v1-ink-2) !important}
.hma-payprob:not(#hma-payprob-x) .is-saved,
.hma-payprob:not(#hma-payprob-x) .is-saved span{color:var(--v1-ok) !important}
.hma-payprob:not(#hma-payprob-x) .is-unsaved,
.hma-payprob:not(#hma-payprob-x) .is-unsaved span{color:var(--v1-ink-2) !important}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-ref,
.hma-payprob:not(#hma-payprob-x) .hma-payprob-ref span{color:var(--v1-ink-2) !important}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-retry{
  background:var(--hma-payprob-cta) !important; border-color:var(--hma-payprob-cta) !important;
}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-retry,
.hma-payprob:not(#hma-payprob-x) .hma-payprob-retry span{color:#fff !important}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-other,
.hma-payprob:not(#hma-payprob-x) .hma-payprob-other span{color:var(--v1-ink) !important}
.hma-payprob:not(#hma-payprob-x) .hma-payprob-support,
.hma-payprob:not(#hma-payprob-x) .hma-payprob-support span{color:var(--hma-payprob-link) !important}
.hma-payprob-actions .btn:focus-visible{outline:2px solid var(--v1-brand) !important; outline-offset:2px}
.hma-payprob-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.hma-payprob-actions .btn{min-height:38px; font-weight:600; white-space:nowrap}
.hma-payprob-actions .btn-outline-secondary{
  color:var(--v1-ink) !important; border-color:var(--v1-rule) !important; background:transparent !important;
}
.hma-payprob-actions .btn-outline-secondary:hover{background:var(--v1-panel-2) !important}
.hma-payprob-actions .btn-link{padding-inline:6px; text-decoration:underline; text-underline-offset:3px}
.hma-payprob-ref{margin:12px 0 0; font-size:12px}
.hma-payprob-ref code{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px;
  color:var(--v1-ink-2); background:var(--v1-panel-2); border-radius:4px;
  padding:1px 6px; user-select:all; -webkit-user-select:all;
}
.hma-payprob-close{
  position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:var(--v1-ink-2); cursor:pointer;
}
.hma-payprob-close:hover{background:var(--v1-panel-2); color:var(--v1-ink)}
.hma-payprob-close:focus-visible{outline:2px solid var(--v1-brand); outline-offset:1px}
.hma-payprob-close-icon{width:18px; height:18px}
@media (max-width:575.98px){
  .hma-payprob{grid-template-columns:1fr; padding:14px 14px 16px}
  .hma-payprob-icon{width:34px; height:34px; padding:7px}
  .hma-payprob-actions{flex-direction:column; align-items:stretch}
  .hma-payprob-actions .btn{width:100%; white-space:normal}
}

/* Reviewer console: banners of a campaign built in the CRM
   (views/reviewer_campaign/reviewer_banners.js). Same shape as the ad
   wizard's .hma-crm-banner*, which lives in adWizard/css. */
.hma-review-banners-section{margin:8px 0 20px}
.hma-review-banners-note{margin:0 0 12px}
.hma-review-banners-note .badge{font-size:13px; font-weight:600; white-space:normal; text-align:start}
.hma-review-banners-error{
  margin:0; padding:10px 12px; border-radius:8px;
  color:var(--v1-warn); background:var(--v1-warn-bg); font-size:14px;
}
.hma-review-banners{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px;
}
.hma-review-banner{
  display:flex; flex-direction:column; gap:6px; max-width:100%;
  padding:10px; border:1px solid var(--v1-rule); border-radius:10px;
  background:var(--v1-panel-2);
}
.hma-review-banner-frame{
  display:block; max-width:100%; height:auto;
  border-radius:4px; background:#ffffff; box-shadow:var(--v1-shadow);
}
.hma-review-banner-size{
  align-self:flex-start;
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px; color:var(--v1-ink-2);
  text-decoration:underline; text-underline-offset:3px;
}
.hma-review-banner-size:hover{color:var(--v1-ink)}
.hma-review-banner-size:focus-visible{outline:2px solid var(--v1-brand); outline-offset:2px}