/* =====================================================================
   Tideline - owners look for the baccom back-office.
   Mirrors the public client site (bacc.client.test.regu.co.za): ink top bar,
   white blurred sticky header, salt page-hero with drifting tide lines,
   square corners, ink gradient footer.
   Every rule is scoped under body.tl-owners (set only by
   Views/Shared/_LayoutOwners.cshtml) so staff screens are unaffected.
   ===================================================================== */
:root {
  --navy:#28418C; --ink:#0D1B3E; --gold:#F2C037; --teal:#17A2B8;
  --wave:#7FB2DE; --silver:#B9C2CC; --salt:#F4F8FB; --foam:#E8F0F7;
  --hairline:rgba(13,27,62,.14);
  --tl-display:'Cormorant Garamond', Georgia, serif;
  --tl-script:'Great Vibes', cursive;
  --tl-body:'Jost', 'Segoe UI', sans-serif;
  --tl-ease:cubic-bezier(.22,.61,.36,1);
  --tl-max:1200px;
}

body.tl-owners {
  margin:0; padding:0 !important;
  background:#fff !important;
  color:var(--ink);
  font-family:var(--tl-body); font-weight:300; font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  overflow-x:hidden;
}
.tl-owners *, .tl-owners *::before, .tl-owners *::after { box-sizing:border-box; }
.tl-owners a { color:var(--navy); text-decoration:none; }
.tl-owners a:hover { color:var(--ink); }
.tl-owners :focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }
.tl-owners ::selection { background:var(--wave); color:var(--ink); }
.tl-owners .tlo-wrap { width:100%; max-width:var(--tl-max); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }

/* ---- top bar ------------------------------------------------------ */
.tl-owners .tlo-topbar {
  background:var(--ink); color:rgba(255,255,255,.82);
  font-size:.78rem; letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:61;
}
.tl-owners .tlo-topbar-in { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:36px; padding-top:.3rem; padding-bottom:.3rem; }
.tl-owners .tlo-topbar-tag { font-size:.76rem; letter-spacing:.06em; }
.tl-owners .tlo-topbar-right { display:flex; align-items:center; gap:1.1rem; }
.tl-owners .tlo-social { color:rgba(255,255,255,.82); font-size:.9rem; line-height:1; display:inline-flex; align-items:center; transition:color .25s var(--tl-ease); }
.tl-owners .tlo-social:hover { color:var(--gold); }
.tl-owners .tlo-topbar-link { color:rgba(255,255,255,.82); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:color .25s var(--tl-ease); }
.tl-owners a.tlo-topbar-link:hover { color:var(--gold); }
.tl-owners .tlo-topbar-current { color:var(--gold); }

/* ---- header ------------------------------------------------------- */
.tl-owners .tlo-header {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.tl-owners .tlo-header-in { display:flex; align-items:center; justify-content:space-between; gap:2rem; height:96px; }
.tl-owners .tlo-brand { flex:none; display:flex; align-items:center; }
.tl-owners .tlo-brand img { height:76px; width:auto; display:block; }
.tl-owners .tlo-nav { display:flex; align-items:center; gap:2rem; }
.tl-owners .tlo-nav a {
  font-family:var(--tl-body); font-size:.78rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); position:relative; padding:.35rem 0; white-space:nowrap;
}
.tl-owners .tlo-nav a::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--tl-ease);
}
.tl-owners .tlo-nav a:hover::after, .tl-owners .tlo-nav a:focus-visible::after { transform:scaleX(1); }
.tl-owners .tlo-header-right { display:flex; align-items:center; gap:1rem; }
.tl-owners .tlo-header-right form { margin:0; }
.tl-owners .tlo-phones { display:inline-flex; align-items:center; gap:.55rem; color:var(--navy); }
.tl-owners .tlo-phones svg { flex:none; }
.tl-owners .tlo-phones-list { display:flex; flex-direction:column; gap:.1rem; }
.tl-owners .tlo-phones-list a { font-size:.88rem; font-weight:400; letter-spacing:.03em; color:inherit; line-height:1.3; white-space:nowrap; }
.tl-owners .tlo-phones-list a:hover { color:var(--gold); }
.tl-owners .tlo-user { font-size:.82rem; letter-spacing:.03em; color:#39465F; white-space:nowrap; }
.tl-owners .tlo-signout {
  font-family:var(--tl-body); font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--navy); background:transparent; border:1px solid var(--navy); border-radius:0;
  padding:.75rem 1.1rem .7rem; cursor:pointer; transition:background .25s var(--tl-ease), color .25s;
}
.tl-owners .tlo-signout:hover { background:var(--navy); color:#fff; }

/* ---- page hero (= client .page-hero + salt tide strip) ------------ */
.tl-owners .tlo-hero { background:var(--salt); color:var(--ink); padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.8rem,5vw,4rem); }
.tl-owners .tlo-eyebrow {
  font-family:var(--tl-body); font-size:.72rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--navy); display:inline-flex; align-items:center; gap:.9rem;
}
.tl-owners .tlo-eyebrow::before { content:""; width:34px; height:1px; background:var(--gold); flex:none; }
.tl-owners .tlo-hero h1 {
  font-family:var(--tl-display); font-weight:500; font-size:clamp(2.5rem,5.4vw,4.2rem); line-height:1.06;
  margin:1.2rem 0 0; color:var(--ink);
}
.tl-owners .tlo-hero h1 .tlo-script { font-family:var(--tl-script); font-weight:400; color:var(--navy); font-size:1.16em; line-height:.9; padding:0 .08em; }
.tl-owners .tlo-wave-underline { display:block; margin-top:1.1rem; width:88px; height:12px; }
.tl-owners .tlo-hero p { max-width:620px; margin:1.2rem 0 0; color:#39465F; }

/* drifting tide lines (client .tide) */
.tl-owners .tlo-tide { position:relative; height:88px; overflow:hidden; pointer-events:none; flex-shrink:0; }
.tl-owners .tlo-tide svg { position:absolute; left:0; width:200%; height:64px; display:block; }
.tl-owners .tlo-tide .t1 { top:6px; animation:tlo-drift 38s linear infinite; }
.tl-owners .tlo-tide .t2 { top:16px; animation:tlo-drift-back 26s linear infinite; }
.tl-owners .tlo-tide .t3 { top:26px; animation:tlo-drift 50s linear infinite; }
@keyframes tlo-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes tlo-drift-back { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.tl-owners .tlo-tide::before, .tl-owners .tlo-tide::after { content:""; position:absolute; top:0; bottom:0; width:18%; z-index:2; }
.tl-owners .tlo-tide::before { left:0; background:linear-gradient(90deg,var(--tide-fade,#fff),transparent); }
.tl-owners .tlo-tide::after { right:0; background:linear-gradient(-90deg,var(--tide-fade,#fff),transparent); }
.tl-owners .tlo-tide-salt { --tide-fade:var(--salt); background:linear-gradient(180deg,var(--salt) 0%,#fff 100%); }
@media (prefers-reduced-motion:reduce) { .tl-owners .tlo-tide svg { animation:none !important; } }

/* ---- main / card -------------------------------------------------- */
.tl-owners .tlo-main { flex:1 0 auto; width:100%; max-width:var(--tl-max); margin:0 auto; padding:clamp(1rem,3vw,2rem) clamp(1.25rem,4vw,2.5rem) clamp(3rem,6vw,4.5rem); }
.tl-owners .tlo-card {
  background:#fff; border:1px solid var(--hairline); border-radius:0;
  box-shadow:0 22px 50px -34px rgba(13,27,62,.35);
  max-width:520px; margin:0 auto; padding:clamp(1.6rem,4vw,2.8rem); position:relative; z-index:2;
}
.tl-owners .tlo-card.tlo-wide { max-width:100%; }
.tl-owners .tlo-kicker {
  font-size:.72rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--navy);
  margin:0; display:inline-flex; align-items:center; gap:.9rem;
}
.tl-owners .tlo-kicker::before { content:""; width:34px; height:1px; background:var(--gold); flex:none; }
.tl-owners .tlo-card h2, .tl-owners .tlo-card h3 {
  font-family:var(--tl-display); font-weight:500; color:var(--ink); line-height:1.08; margin:.7rem 0 .5rem; padding:0 !important;
}
.tl-owners .tlo-card h2 { font-size:clamp(2rem,3.4vw,2.5rem); }
.tl-owners .tlo-card h3 { font-size:1.8rem; }
.tl-owners .tlo-lede { color:#39465F; font-size:1rem; margin:0 0 1.6rem; }
.tl-owners .tlo-card p { color:#39465F; }

/* ---- forms (also restyles the bootstrap-style markup of the other account views) ---- */
.tl-owners .tlo-card .form-group, .tl-owners .tlo-card .tlo-field { margin:0 0 1.2rem; }
.tl-owners .tlo-card .row { margin:0; }
.tl-owners .tlo-card [class*="col-"], .tl-owners .tlo-card .col { float:none !important; width:100% !important; padding:0 !important; margin:0 !important; min-height:0; }
.tl-owners .tlo-card label, .tl-owners .tlo-card .control-label {
  display:block; width:auto; float:none; text-align:left; padding:0; margin:0 0 .5rem;
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); opacity:.7;
}
.tl-owners .tlo-card input[type=text], .tl-owners .tlo-card input[type=email], .tl-owners .tlo-card input[type=password],
.tl-owners .tlo-card input.form-control {
  display:block; width:100% !important; max-width:100% !important; height:auto; margin:0;
  font-family:var(--tl-body); font-size:1rem; font-weight:300; color:var(--ink); background:#fff;
  border:1px solid var(--hairline) !important; border-radius:0; padding:.9rem 1rem; box-shadow:none;
  transition:border-color .2s, box-shadow .2s;
}
.tl-owners .tlo-card input[type=text]:focus, .tl-owners .tlo-card input[type=email]:focus, .tl-owners .tlo-card input[type=password]:focus {
  outline:0; border-color:var(--navy) !important; box-shadow:0 0 0 3px rgba(40,65,140,.12) !important;
}
.tl-owners .tlo-actions { display:flex; flex-direction:column; gap:.75rem; margin-top:1.7rem; }
/* buttons = client .tl-stay-cta (square, tracked caps); primary is filled navy */
.tl-owners .tlo-card .btn, .tl-owners .tlo-card input[type=submit], .tl-owners .tlo-card input[type=button] {
  display:block; width:100%; height:auto; line-height:1.2; text-align:center; text-transform:uppercase;
  font-family:var(--tl-body); font-size:.74rem; font-weight:500; letter-spacing:.24em;
  padding:1rem 1.3rem .95rem; border-radius:0; border:1px solid var(--navy); box-shadow:none; cursor:pointer;
  background:var(--navy); color:#fff; transition:background .25s var(--tl-ease), color .25s, border-color .25s;
  text-align:center !important; width:100% !important; max-width:100% !important;
}
.tl-owners .tlo-card form + .row, .tl-owners .tlo-card div + .row { margin-top:1.6rem; }
.tl-owners .tlo-card .btn:hover, .tl-owners .tlo-card input[type=submit]:hover { background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:none; }
.tl-owners .tlo-card .btn-outline, .tl-owners .tlo-card input.btn-outline, .tl-owners .tlo-card input[value="Go to Login"] {
  background:transparent; color:var(--navy);
}
.tl-owners .tlo-card .btn-outline:hover, .tl-owners .tlo-card input.btn-outline:hover, .tl-owners .tlo-card input[value="Go to Login"]:hover { background:var(--navy); color:#fff; }
.tl-owners .tlo-card .right, .tl-owners .tlo-card [style*="text-align: right"], .tl-owners .tlo-card [style*="text-align:right"] { float:none !important; text-align:left !important; }

/* validation */
.tl-owners .text-danger, .tl-owners .field-validation-error, .tl-owners .validation-summary-errors {
  color:#a6322b; font-size:.86rem; font-weight:400; letter-spacing:.01em;
}
.tl-owners .validation-summary-errors { border-left:2px solid #a6322b; background:#fbf1f0; padding:.7rem 1rem; margin:0 0 1.2rem; border-radius:0; }
.tl-owners .validation-summary-errors ul { margin:0; padding:0; list-style:none; }
.tl-owners .field-validation-error { display:block; margin-top:.4rem; }
.tl-owners .input-validation-error { border-color:#a6322b !important; }

.tl-owners .tlo-help { font-size:.9rem; color:#39465F; text-align:center; line-height:1.7; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--hairline); }

/* ---- tables (for owner statements / bookings) --------------------- */
.tl-owners .tlo-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); border-radius:0; background:#fff; }
.tl-owners .tlo-table-wrap table { width:100%; min-width:560px; border-collapse:collapse; font-size:.92rem; }
.tl-owners .tlo-table-wrap th { font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-align:left; background:var(--salt); padding:.85rem 1rem; white-space:nowrap; }
.tl-owners .tlo-table-wrap td { padding:.85rem 1rem; border-top:1px solid var(--hairline); }

/* ---- footer (= client .tl-footer) --------------------------------- */
.tl-owners .tlo-footer {
  background:linear-gradient(180deg,transparent 0,var(--ink) 240px);
  color:rgba(255,255,255,.78); font-weight:300; margin-top:auto; flex-shrink:0;
}
.tl-owners .tlo-footer .tlo-tide { --tide-fade:transparent; background:transparent; }
.tl-owners .tlo-footer-tide { height:240px; }
.tl-owners .tlo-footer-main { display:grid; grid-template-columns:1.3fr .7fr .7fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding:clamp(2.5rem,5vw,4rem) 0 3rem; }
.tl-owners .tlo-footer-brand img { height:52px; width:auto; margin-bottom:1.3rem; display:block; }
.tl-owners .tlo-footer-brand p { font-size:.92rem; max-width:320px; line-height:1.7; margin:0; }
.tl-owners .tlo-footer-tag { margin-top:1.2rem !important; font-size:.62rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.tl-owners .tlo-footer-social { display:flex; align-items:center; gap:1.1rem; margin-top:1.3rem; }
.tl-owners .tlo-footer-social .tlo-social { color:rgba(255,255,255,.72); font-size:1.05rem; }
.tl-owners .tlo-footer-social .tlo-social:hover { color:var(--gold); }
.tl-owners .tlo-footer h4 { font-family:var(--tl-body); font-size:.68rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:#fff; margin:0 0 1.2rem; line-height:1.4; }
.tl-owners .tlo-footer ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin:0; padding:0; }
.tl-owners .tlo-footer ul li { list-style:none; }
.tl-owners .tlo-footer ul a { color:rgba(255,255,255,.78); font-size:.94rem; font-weight:300; transition:color .25s; }
.tl-owners .tlo-footer ul a:hover { color:var(--gold); }
.tl-owners .tlo-footer-contact li { font-size:.94rem; line-height:1.6; }
.tl-owners .tlo-footer-contact b { color:#fff; font-weight:400; }
.tl-owners .tlo-footer-bottom {
  border-top:1px solid rgba(255,255,255,.14); padding:1.4rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.5); letter-spacing:.05em;
}
.tl-owners .tlo-footer-bottom a { color:rgba(255,255,255,.6); }
.tl-owners .tlo-footer-bottom a:hover { color:var(--gold); }

/* ---- layout page chrome that must not leak in -------------------- */
.tl-owners #preloader { background:var(--navy); }

/* ---- responsive (same breakpoints as the client header/footer) ---- */
@media (max-width:1280px) {
  .tl-owners .tlo-header-in { gap:1rem; }
  .tl-owners .tlo-brand img { height:64px; }
  .tl-owners .tlo-nav { gap:1.1rem; }
  .tl-owners .tlo-nav a { letter-spacing:.1em; font-size:.74rem; }
  .tl-owners .tlo-phones svg { display:none; }
  .tl-owners .tlo-phones-list a { font-size:.8rem; }
}
@media (max-width:1000px) {
  .tl-owners .tlo-nav, .tl-owners .tlo-phones { display:none; }
  .tl-owners .tlo-header-in { height:78px; }
  .tl-owners .tlo-brand img { height:58px; }
}
@media (max-width:920px) { .tl-owners .tlo-footer-main { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) {
  .tl-owners .tlo-topbar-tag { display:none; }
  .tl-owners .tlo-topbar-in { justify-content:center; }
  .tl-owners .tlo-user { display:none; }
}
@media (max-width:560px) {
  .tl-owners .tlo-footer-main { grid-template-columns:1fr; }
  .tl-owners .tlo-footer-bottom { flex-direction:column; text-align:center; justify-content:center; }
}

/* materialize colour helpers use !important; neutralise them inside owner cards */
.tl-owners .tlo-card .btn.light-blue, .tl-owners .tlo-card .btn.grey { background-color:var(--navy) !important; color:#fff !important; }
.tl-owners .tlo-card .btn.light-blue:hover, .tl-owners .tlo-card .btn.grey:hover { background-color:var(--ink) !important; }
.tl-owners .tlo-card .btn.btn-outline, .tl-owners .tlo-card .btn.grey[value="Go to Login"] { background-color:transparent !important; color:var(--navy) !important; }
.tl-owners .tlo-card .btn.btn-outline:hover, .tl-owners .tlo-card .btn.grey[value="Go to Login"]:hover { background-color:var(--navy) !important; color:#fff !important; }
.tl-owners .tlo-card .mwidth { max-width:100% !important; width:100% !important; }
.tl-owners .tlo-card hgroup { display:block; margin:0; }

/* flex-column body: keep chrome from collapsing; beat materialize input box model + nav element */
.tl-owners .tlo-topbar, .tl-owners .tlo-header, .tl-owners .tlo-hero { flex-shrink:0; }
.tl-owners .tlo-card input[type=text], .tl-owners .tlo-card input[type=email], .tl-owners .tlo-card input[type=password] { box-sizing:border-box !important; }
.tl-owners .tlo-card .waves-input-wrapper { display:block; width:100%; }
.tl-owners .tlo-actions .btn, .tl-owners .tlo-actions input { width:100% !important; max-width:100% !important; align-self:stretch; }
.tl-owners .validation-summary-errors:has(ul:empty), .tl-owners .validation-summary-errors:not(:has(li)) { display:none; }
/* materialize styles bare <nav>/<ul>/<h4>; keep the footer navs plain */
.tl-owners .tlo-footer nav { background:none; box-shadow:none; height:auto; line-height:inherit; width:auto; color:inherit; }
.tl-owners .tlo-footer nav ul a { padding:0; display:inline; font-size:.94rem; background:none; }
.tl-owners .tlo-footer nav ul li { float:none; padding:0; }