/* =====================================================================
   PRIMA CHAUFFEUR SERVICES — PORTAL LIGHT THEME
   ---------------------------------------------------------------------
   For the agent portal and the partner knowledge centre.

   Load it LAST, just before </head>:
       <link rel="stylesheet" href="prima-light-portal.css">      (agents)
       <link rel="stylesheet" href="css/prima-light-portal.css">  (partners)

   Both portals price their colours off CSS variables, so redefining the
   variables turns each page over at once. The sidebar and topbar then
   get the dark values put BACK as scoped variables, which keeps the
   dark-frame / cream-content shape the public site uses.

   THREE THINGS ARE DELIBERATELY NOT TOUCHED
     --sidebar     260px (a width) in eight files, but #0f0f0f (a colour)
                   in statement.html and owner-statement.html. Redefining
                   it would collapse the layout on the eight. The two that
                   use it as a colour are covered by the .sidebar /
                   .topbar background rules below.
     --font-serif  typefaces
     --font-sans   typefaces
     --radius      a corner radius
   ===================================================================== */

:root,
html body {
  /* grounds */
  --black:#F7F5EF; --bg:#F7F5EF;
  --dark:#FCFAF4;  --dark-2:#FFFFFF; --dark2:#FFFFFF;
  --dark-3:#FFFFFF; --dark3:#FFFFFF;
  --card:#FCFAF4;  --card2:#FFFFFF;
  /* ink */
  --white:#221C13; --text:#221C13;
  --muted:rgba(34,28,19,0.90); --white-muted:rgba(34,28,19,0.90);
  --dim:rgba(34,28,19,0.74);
  /* gold */
  --gold:#6A4F18; --gold-light:#523C13; --gold-lt:#523C13;
  --gold-dim:rgba(107,78,23,0.14); --gold-glow:rgba(107,78,23,0.06);
  /* edges */
  --border:rgba(107,78,23,0.32); --border-dim:rgba(107,78,23,0.18);
  --border2:rgba(107,78,23,0.12);
  /* status */
  --green:#1E6B43; --red:#A8231B; --blue:#1F5C8B; --amber:#8A6510;
  --green-dim:rgba(30,107,67,0.12); --blue-dim:rgba(31,92,139,0.12);
  --green-bg:rgba(30,107,67,0.10);  --amber-bg:rgba(138,101,16,0.12);
  --red-bg:rgba(168,35,27,0.10);
  /* tier badges - metallic reads as nothing on cream */
  --silver:#6B7075; --platinum:#47535F;
}

html, body { background-color:#F7F5EF; color:#221C13 }

/* =====================================================================
   THE DARK FRAME
   The whole dark palette is put back as variables scoped to the sidebar
   and topbar, so every child inside them recolours itself. Chasing
   individual class names does not work - these pages have dozens.
   ===================================================================== */
.sidebar, .topbar, aside.sidebar, nav.sidebar {
  --black:#0A0A0A; --bg:#0A0A0A;
  --dark:#111111; --dark-2:#1A1A1A; --dark2:#1A1A1A;
  --dark-3:#222222; --dark3:#222222;
  --card:#111111; --card2:#0D0D0D;
  --white:#F5F2EC; --text:#F5F2EC;
  --muted:rgba(245,242,236,0.74); --white-muted:rgba(245,242,236,0.74);
  --dim:rgba(245,242,236,0.58);
  --gold:#C9A84C; --gold-light:#E2C97E; --gold-lt:#E2C97E;
  --gold-dim:rgba(201,168,76,0.15); --gold-glow:rgba(201,168,76,0.06);
  --border:rgba(201,168,76,0.18); --border-dim:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.05);
  --green:#4CAF72; --red:#E5736A; --blue:#5B9BD5; --amber:#D4A017;
  --silver:#C0C0C0; --platinum:#E5E4E2;
  background:#0D0D0D !important;
  color:#F5F2EC;
}
.sidebar, .topbar { border-color:rgba(201,168,76,0.18) !important }

/* the ABN line is set to 0.2 alpha inline - barely visible even before */
.sidebar [style*="rgba(245,242,236,0.2)"] { color:rgba(245,242,236,0.5) !important }

/* =====================================================================
   GOLD BUTTONS
   These set black text on the gold token. Black worked on the original
   bright gold; on the deeper gold it does not, so they get cream text.
   ===================================================================== */
.btn-gold, .portal-nav .btn-book, .ctrl-btn.btn-gold,
.btn-primary, button.primary, .btn.gold, .btn-back {
  background:#6A4F18 !important; color:#FBF8F1 !important; border-color:#6A4F18 !important;
}
.btn-gold:hover, .portal-nav .btn-book:hover, .ctrl-btn.btn-gold:hover,
.btn-primary:hover, button.primary:hover, .btn.gold:hover, .btn-back:hover {
  background:#523C13 !important; color:#FBF8F1 !important;
}
/* the same pattern written inline */
[style*="background:var(--gold);color:#000"],
[style*="background: var(--gold); color: #000"] { color:#FBF8F1 !important }
/* ...but gold buttons inside the dark frame keep black text on bright gold */
.sidebar .btn-gold, .topbar .btn-gold,
.sidebar .btn-primary, .topbar .btn-primary {
  background:#C9A84C !important; color:#0A0A0A !important; border-color:#C9A84C !important;
}

/* =====================================================================
   Page furniture on the cream ground
   ===================================================================== */
.card, .panel, .stat, .stat-card, .tile, .box, .widget, .summary {
  background:#FCFAF4; border:1px solid rgba(107,78,23,0.26);
  box-shadow:0 3px 12px rgba(90,70,35,0.10);
}
table { color:#221C13 }
th { color:#221C13; border-bottom-color:rgba(107,78,23,0.30) }
td { border-color:rgba(107,78,23,0.16) }
tbody tr:nth-child(even) td { background:rgba(107,78,23,0.04) }
tbody tr:hover td { background:rgba(107,78,23,0.08) }

input, select, textarea { background:#FFFFFF; color:#221C13; border-color:rgba(107,78,23,0.30) }
input::placeholder, textarea::placeholder { color:rgba(34,28,19,0.62); opacity:1 }
label { color:#5A420F }

/* greys written straight into the pages */
.success-sub, .error-sub { color:rgba(34,28,19,0.86) }
.error-msg { color:#A8231B }
[style*="color:#aaa"], [style*="color: #aaa"] { color:rgba(34,28,19,0.86) !important }
[style*="color:#888"], [style*="color: #888"] { color:rgba(34,28,19,0.82) !important }
[style*="color:#444"], [style*="color: #444"] { color:rgba(34,28,19,0.90) !important }
[style*="color:#F5F2EC"], [style*="color: #F5F2EC"] { color:#221C13 !important }
[style*="color:#C9A84C"], [style*="color: #C9A84C"] { color:#6A4F18 !important }
[style*="color:#E2C97E"], [style*="color: #E2C97E"] { color:#523C13 !important }
.sidebar [style*="color:#F5F2EC"], .topbar [style*="color:#F5F2EC"] { color:#F5F2EC !important }
.sidebar [style*="color:#C9A84C"], .topbar [style*="color:#C9A84C"] { color:#C9A84C !important }
.sidebar [style*="color:#E2C97E"], .topbar [style*="color:#E2C97E"] { color:#E2C97E !important }

/* =====================================================================
   Two stragglers found by rendering the pages
   ===================================================================== */

/* statement.html / owner-statement.html: the Print and Excel buttons
   hard-code a #1a1a1a background, so they stayed dark while their text
   turned to dark ink. */
.btn-print, .btn-excel, .btn-pdf {
  background:#FCFAF4 !important;
  color:rgba(34,28,19,0.90) !important;
  border:1px solid rgba(107,78,23,0.30) !important;
}
.btn-print:hover, .btn-excel:hover, .btn-pdf:hover {
  border-color:#6A4F18 !important; color:#523C13 !important;
}

/* the Sign Out button sits in the dark sidebar at 0.7 alpha red, which
   only reaches 3:1 - lifted to a brighter red for the dark ground */
.sidebar .logout-btn, .topbar .logout-btn { color:#F0938A !important }
.sidebar .logout-btn:hover, .topbar .logout-btn:hover {
  color:#FFB4AC !important; border-color:#F0938A !important;
}

/* apply.html is the public application form - no sidebar, and it hard-codes
   two light-on-black colours that the variable flip cannot reach */
.field-hint, .opt, .field label .opt { color:rgba(34,28,19,0.78) }
.footer { color:rgba(34,28,19,0.84); border-top-color:rgba(107,78,23,0.22) }
.sidebar .footer, .topbar .footer { color:rgba(245,242,236,0.7) }

/* the "Registered agent? Sign in" line sits in the dark sidebar at 0.28
   alpha - only 2.3:1 even before the theme change */
.sidebar p, .topbar p { color:rgba(245,242,236,0.72) }


/* =====================================================================
   Light-on-black colours written into style= attributes
   A stylesheet cannot beat an inline style, so each one is matched on
   its attribute text. The block after puts the dark frame back.
   ===================================================================== */
[style*="color:rgba(245,242,236,0.2)"], [style*="color: rgba(245, 242, 236, 0.2)"] { color:rgba(34,28,19,0.70) !important }
[style*="color:rgba(245,242,236,0.25)"], [style*="color: rgba(245, 242, 236, 0.25)"] { color:rgba(34,28,19,0.72) !important }
[style*="color:rgba(245,242,236,0.28)"], [style*="color: rgba(245, 242, 236, 0.28)"] { color:rgba(34,28,19,0.74) !important }
[style*="color:rgba(245,242,236,0.3)"], [style*="color: rgba(245, 242, 236, 0.3)"] { color:rgba(34,28,19,0.74) !important }
[style*="color:rgba(245,242,236,0.35)"], [style*="color: rgba(245, 242, 236, 0.35)"] { color:rgba(34,28,19,0.76) !important }
[style*="color:rgba(245,242,236,0.4)"], [style*="color: rgba(245, 242, 236, 0.4)"] { color:rgba(34,28,19,0.78) !important }
[style*="color:rgba(245,242,236,0.5)"], [style*="color: rgba(245, 242, 236, 0.5)"] { color:rgba(34,28,19,0.80) !important }
[style*="color:rgba(245,242,236,0.6)"], [style*="color: rgba(245, 242, 236, 0.6)"] { color:rgba(34,28,19,0.84) !important }
[style*="color:rgba(245,242,236,0.65)"], [style*="color: rgba(245, 242, 236, 0.65)"] { color:rgba(34,28,19,0.86) !important }
[style*="color:rgba(245,242,236,0.7)"], [style*="color: rgba(245, 242, 236, 0.7)"] { color:rgba(34,28,19,0.88) !important }
[style*="color:rgba(245,242,236,0.8)"], [style*="color: rgba(245, 242, 236, 0.8)"] { color:rgba(34,28,19,0.92) !important }
[style*="color:rgba(245,242,236,0.85)"], [style*="color: rgba(245, 242, 236, 0.85)"] { color:rgba(34,28,19,0.92) !important }
[style*="color:rgba(245,242,236,0.86)"], [style*="color: rgba(245, 242, 236, 0.86)"] { color:rgba(34,28,19,0.92) !important }
[style*="color:rgba(245,242,236,0.88)"], [style*="color: rgba(245, 242, 236, 0.88)"] { color:rgba(34,28,19,0.94) !important }
[style*="color:rgba(245,242,236,0.9)"], [style*="color: rgba(245, 242, 236, 0.9)"] { color:rgba(34,28,19,0.94) !important }
[style*="color:rgba(245,242,236,0.92)"], [style*="color: rgba(245, 242, 236, 0.92)"] { color:rgba(34,28,19,0.94) !important }

/* ...the dark frame keeps its light text */
.sidebar [style*="color:rgba(245,242,236,0.2)"], .topbar [style*="color:rgba(245,242,236,0.2)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.25)"], .topbar [style*="color:rgba(245,242,236,0.25)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.28)"], .topbar [style*="color:rgba(245,242,236,0.28)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.3)"], .topbar [style*="color:rgba(245,242,236,0.3)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.35)"], .topbar [style*="color:rgba(245,242,236,0.35)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.4)"], .topbar [style*="color:rgba(245,242,236,0.4)"] { color:rgba(245,242,236,0.60) !important }
.sidebar [style*="color:rgba(245,242,236,0.5)"], .topbar [style*="color:rgba(245,242,236,0.5)"] { color:rgba(245,242,236,0.5) !important }
.sidebar [style*="color:rgba(245,242,236,0.6)"], .topbar [style*="color:rgba(245,242,236,0.6)"] { color:rgba(245,242,236,0.6) !important }
.sidebar [style*="color:rgba(245,242,236,0.65)"], .topbar [style*="color:rgba(245,242,236,0.65)"] { color:rgba(245,242,236,0.65) !important }
.sidebar [style*="color:rgba(245,242,236,0.7)"], .topbar [style*="color:rgba(245,242,236,0.7)"] { color:rgba(245,242,236,0.7) !important }
.sidebar [style*="color:rgba(245,242,236,0.8)"], .topbar [style*="color:rgba(245,242,236,0.8)"] { color:rgba(245,242,236,0.8) !important }
.sidebar [style*="color:rgba(245,242,236,0.85)"], .topbar [style*="color:rgba(245,242,236,0.85)"] { color:rgba(245,242,236,0.85) !important }
.sidebar [style*="color:rgba(245,242,236,0.86)"], .topbar [style*="color:rgba(245,242,236,0.86)"] { color:rgba(245,242,236,0.86) !important }
.sidebar [style*="color:rgba(245,242,236,0.88)"], .topbar [style*="color:rgba(245,242,236,0.88)"] { color:rgba(245,242,236,0.88) !important }
.sidebar [style*="color:rgba(245,242,236,0.9)"], .topbar [style*="color:rgba(245,242,236,0.9)"] { color:rgba(245,242,236,0.9) !important }
.sidebar [style*="color:rgba(245,242,236,0.92)"], .topbar [style*="color:rgba(245,242,236,0.92)"] { color:rgba(245,242,236,0.92) !important }

/* the floating Translate widget is a dark button that sits over the page,
   so it keeps the bright gold rather than the deep gold */
#prima-translate button {
  background:#1A1A1A !important; color:#C9A84C !important;
  border-color:rgba(201,168,76,0.4) !important;
}
#prima-translate button:hover { background:rgba(201,168,76,0.14) !important; color:#E2C97E !important }


/* =====================================================================
   Text that is hard-coded light-on-black inside the portal pages
   ---------------------------------------------------------------------
   Found by scanning every rule in both portals for a text colour from
   the old palette. The biggest one is `td` - it is what made the
   booking rows almost invisible on the cream table.

   The language dropdown (#prima-dd) and the Translate button are NOT
   here: they are genuinely dark panels floating over the page, so
   their light text is correct.
   ===================================================================== */

/* tables - booking lists, statements, price tables */
td, .ptable td, table td { color:rgba(34,28,19,0.90) }
th, .ptable th, table th { color:#221C13 }

/* body copy, lists and callouts */
.card p, .info-list li, .plist li, .svc-list li,
.note-callout p, .portal-callout p, .callout,
.tier-feats li.lead-in { color:rgba(34,28,19,0.90) }
.spec-val, .office .spec-val { color:rgba(34,28,19,0.92) }
.tier-billing { color:rgba(34,28,19,0.80) }
.sum-sub, .error-note { color:rgba(34,28,19,0.84) }
.divider { border-color:rgba(107,78,23,0.20); color:rgba(34,28,19,0.70) }
.footer a { color:#6A4F18 }
.footer a:hover { color:#523C13 }
.price-includes-item strong { color:#221C13 }

/* Google Places suggestions */
.pac-container { background:#FCFAF4 !important; border-color:rgba(107,78,23,0.30) !important }
.pac-item { background:#FCFAF4 !important; color:rgba(34,28,19,0.86) !important;
            border-top-color:rgba(107,78,23,0.12) !important }
.pac-item:hover, .pac-item-selected { background:rgba(107,78,23,0.10) !important }
.pac-item-query, .pac-matched { color:#221C13 !important }

/* form placeholders across the portals */
.field input::placeholder, .field textarea::placeholder,
.search-input::placeholder, .login-box input::placeholder {
  color:rgba(34,28,19,0.62) !important; opacity:1;
}

/* ...and the dark frame keeps its own */
.sidebar td, .topbar td, .sidebar th, .topbar th { color:rgba(245,242,236,0.85) }

/* =====================================================================
   DIRECT CONTACT STRIP  —  WhatsApp + booking email
   ---------------------------------------------------------------------
   Same component as the public booking page (.pc-contact in
   prima-light.css), repeated here so the agent pages can use it
   without loading the public stylesheet.

   Green is #0F7C63, not WhatsApp brand #25D366 — the brand green only
   reaches 2:1 against white, this one reaches 5.9:1.
   ===================================================================== */
.pc-contact-wrap{ padding:2rem 2rem 0 }
/* inside the portal page grid the strip spans the full content width */
.pc-contact-wrap > .pc-contact{ max-width:none }
.pc-contact{
  max-width:880px; margin:0 auto; padding:1.4rem 1.6rem;
  background:#FCFAF4; border:1px solid rgba(107,78,23,0.34);
  border-left:4px solid #6A4F18;
  box-shadow:0 3px 12px rgba(90,70,35,0.10);
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
}
.pc-contact-copy{ flex:1 1 240px; min-width:0 }
.pc-contact-copy .h{
  font-family:'Cormorant Garamond',serif; font-size:1.45rem;
  color:#221C13; line-height:1.15; margin:0 0 .25rem; font-weight:400;
}
.pc-contact-copy .s{
  font-size:.74rem; color:rgba(34,28,19,0.84); letter-spacing:.02em;
  margin:0; font-weight:500; line-height:1.5;
}
.pc-contact-btns{ display:flex; gap:.75rem; flex-wrap:wrap; flex:0 0 auto }
.pc-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:13px 20px; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent;
  transition:background .2s, color .2s;
}
.pc-btn svg{ width:17px; height:17px; fill:currentColor; flex:0 0 auto }
.pc-btn-wa{ background:#0F7C63; color:#FFFFFF }
.pc-btn-wa:hover{ background:#0B6350; color:#FFFFFF }
.pc-btn-em{ background:#6A4F18; color:#FBF8F1 }
.pc-btn-em:hover{ background:#523C13; color:#FBF8F1 }

/* the login page column is only 420px wide — stack it there */
.pc-contact-narrow{
  flex-direction:column; align-items:stretch; text-align:center;
  max-width:420px; width:100%; margin:1.6rem auto 0;
}
/* in a column flex row the copy's flex-basis becomes a HEIGHT - pin it */
.pc-contact-narrow .pc-contact-copy{ flex:0 0 auto }
.pc-contact-narrow .pc-contact-btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.pc-contact-narrow .pc-btn{ justify-content:center; padding:13px 10px; font-size:.66rem; letter-spacing:.08em }

@media (max-width:760px){
  .pc-contact-wrap{ padding:1.2rem 1.2rem 0 }
  .pc-contact{ flex-direction:column; align-items:stretch; text-align:center; padding:1.2rem 1.1rem }
  .pc-contact-copy{ flex:0 0 auto }
  .pc-contact-btns{ flex-direction:column }
  .pc-btn{ justify-content:center; padding:14px 18px }
  .pc-contact-narrow .pc-contact-btns{ grid-template-columns:1fr }
}


/* =====================================================================
   READING TEXT SIZE  (same idea as the public stylesheet)
   Sentence-case small print is raised so it can actually be read;
   tracked uppercase labels are left small on purpose.
   ===================================================================== */
.vc-detail                { font-size:0.84rem; line-height:1.5 }
.vc-locked-msg            { font-size:0.8rem }
.price-hint               { font-size:0.95rem; line-height:1.6 }
.price-note               { font-size:0.86rem; line-height:1.7 }
.price-includes-item      { font-size:0.84rem; line-height:1.6 }
.pay-note                 { font-size:0.8rem }
.section-sub              { font-size:0.92rem; line-height:1.7 }
.mini p                   { font-size:0.85rem; line-height:1.65 }
.sb-company               { font-size:0.78rem }
.spec-val                 { font-size:0.86rem }
.sum-sub, .error-note     { font-size:0.82rem }
.empty p                  { font-size:0.9rem }
.tier-billing             { font-size:0.82rem }
.pc-contact-copy .s       { font-size:0.84rem }