/* Brand layer — scoped visual polish on top of Bootstrap + your style.css
   Focus: excellent contrast on dark surfaces used by marketing pages. */

/* Tokens */
:root {
  --brand: #4da3ff;
  --brand-2: #2ee6a6;

  /* High-contrast light text for dark cards/sections */
  --ink-strong: #eef3fa;   /* headings */
  --ink-base:   #d8e2f3;   /* body text */
  --ink-soft:   #b8c7e0;   /* muted/secondary */
  --line-dark:  #20283a;   /* borders on dark */
  --surface-1:  #0f1421;   /* dark card/input surface */
}

/* ------------------ HERO (Home) ------------------ */
.marketing-hero {
  background: linear-gradient(135deg, rgba(77,163,255,.16), rgba(46,230,166,.12));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
}
.marketing-hero .display-5 { letter-spacing: .2px; color: var(--ink-strong); }
.marketing-hero .lead,
.marketing-home .text-secondary-emphasis { color: var(--ink-soft) !important; }
.marketing-hero-img { box-shadow: 0 20px 60px rgba(0,0,0,.25); border-radius: 1rem; }

/* Badges in the hero row */
.badge.text-bg-light {
  background: #f4f6f9 !important;
  color: #2b2f36 !important;
  border: 1px solid rgba(0,0,0,.06);
}

/* ------------------ DARK CARD STYLE ------------------ */
.card-neo {
  background: #121827;               /* slightly lighter than inputs for depth */
  color: var(--ink-base);
  border: 1px solid var(--line-dark);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-radius: 1rem;
}
.card-neo .card-title,
.card-neo h3, .card-neo h4, .card-neo h5 { color: var(--ink-strong); }
.card-neo .card-text,
.card-neo p, .card-neo li { color: var(--ink-base); }
.card-neo a:not(.btn) { color: #90c8ff; }

/* ------------------ PAGE HERO BANNERS (Services/About/Careers/Contact) ------------------ */
.page-hero { border-radius: 1rem; overflow: hidden; }
.page-hero img { object-fit: cover; width: 100%; max-height: 420px; display:block; }
.page-hero .container h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.page-hero .container p  { color: rgba(255,255,255,.86) !important; }

/* ------------------ FORMS ON DARK CARDS (Contact) ------------------ */
.card-neo .form-label { color: var(--ink-strong); }
.card-neo .form-control {
  background-color: var(--surface-1);
  color: var(--ink-base);
  border: 1px solid var(--line-dark);
}
.card-neo .form-control::placeholder { color: var(--ink-soft); opacity: 1; }
.card-neo .form-control:focus {
  background-color: var(--surface-1);
  color: var(--ink-strong);
  border-color: color-mix(in oklab, var(--brand) 70%, white);
  box-shadow: 0 0 0 .25rem rgba(77,163,255,.18);
}
.card-neo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.75); }
.card-neo .btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
}

/* ------------------ LINKS & BUTTONS ------------------ */
.btn-outline-primary { border-width: 2px; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; }

/* ------------------ OPTIONAL: ensure readable text in marketing containers ------------------ */
.marketing-home h1, .marketing-home h2, .marketing-home h3 { color: var(--ink-strong); }
.marketing-home p, .marketing-home li { color: var(--ink-base); }
.marketing-home a:not(.btn) { color: #90c8ff; }

/* ---------- NAVBAR HOVER CONTRAST ---------- */
.navbar .nav-link { color: #1f2937 !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #0b1324 !important;
  background-color: rgba(77,163,255,.14) !important;
  border-radius: .5rem;
}

/* Dropdown menu contrast */
.navbar .dropdown-menu { border: 1px solid rgba(0,0,0,.08); }
.navbar .dropdown-item { color: #1f2937 !important; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #0b1324 !important;
  background-color: rgba(77,163,255,.14) !important;
}

/* ---------- GENERIC LIGHT PANEL CONTRAST ----------
   Any .bg-light block gets true dark text for readability on the dark site. */
.bg-light { color: #111827 !important; }
.bg-light h1, .bg-light h2, .bg-light h3,
.bg-light h4, .bg-light h5, .bg-light strong { color: #0b1324 !important; }

/* ---------- PAGE-HERO TEXT LIFT ----------
   Stronger readability over photos, esp. Contact page subtitle. */
.page-hero .container h1 {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.page-hero .container p {
  color: rgba(255,255,255,.98) !important;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ---------- OPTIONAL: if you have a 'Request Our Service' panel using .bg-light,
   this ensures inputs and labels remain readable on dark pages. */
.bg-light .form-label { color: #111827 !important; }
.bg-light .form-control { color: #0b1324; }

.navbar form.d-inline { margin: 0; }
.navbar .btn.btn-primary { padding: .375rem .75rem; }

/* ---------- Employee Dashboard polish ---------- */

/* Metric card (dark, readable) */
.metric-card {
  background: linear-gradient(135deg, rgba(77,163,255,.18), rgba(46,230,166,.12));
  border: 1px solid var(--line-dark);
  border-radius: 1rem;
  color: var(--ink-base);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.metric-card .card-title { color: var(--ink-strong); }
.metric-card .metric-value { font-size: 2.25rem; font-weight: 800; color: #ffffff; }

/* Card header on dark cards */
.card-neo-header {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-strong);
  font-weight: 600;
}

/* List group inside dark cards */
.card-neo .list-group-item {
  background: transparent;
  color: var(--ink-base);
  border-color: var(--line-dark);
}
.card-neo .list-group-item + .list-group-item { border-top-color: var(--line-dark); }

/* Tables in dark cards */
.table-neo thead th {
  background: #141b2b;
  color: var(--ink-strong);
  border-color: var(--line-dark);
}
.table-neo tbody tr { border-color: var(--line-dark); }
.table.table-striped.table-neo > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: #0f1421;
  color: var(--ink-base);
}
.table-neo tbody tr:hover { background: #182035; }
.table-neo td, .table-neo th { color: var(--ink-base); }

/* Muted text inside dark cards shouldn't be too faint */
.card-neo .text-muted { color: #aeb9cf !important; }

/* Help text contrast inside dark forms */
.card-neo .form-text { color: var(--ink-soft); }

/* Hours Log: ensure form bits are readable on dark cards */
.card-neo label { color: var(--ink-strong); }
.card-neo .form-text { color: var(--ink-soft); }

/* Inputs/selects/textareas inside dark cards (works with {{ form.as_p }} or manual fields) */
.card-neo input,
.card-neo textarea,
.card-neo select {
  background-color: var(--surface-1);
  color: var(--ink-base);
  border: 1px solid var(--line-dark);
  border-radius: .5rem;
  padding: .6rem .75rem;
  width: 100%;
}
.card-neo input::placeholder,
.card-neo textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.card-neo input:focus,
.card-neo textarea:focus,
.card-neo select:focus {
  background-color: var(--surface-1);
  color: var(--ink-strong);
  border-color: color-mix(in oklab, var(--brand) 70%, white);
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(77,163,255,.18);
}

/* Date/Time pickers on dark background */
.card-neo input[type="date"]::-webkit-calendar-picker-indicator,
.card-neo input[type="time"]::-webkit-calendar-picker-indicator,
.card-neo input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}
.card-neo input[type="date"],
.card-neo input[type="time"],
.card-neo input[type="datetime-local"] {
  color-scheme: dark; /* improves native picker contrast on supported browsers */
}

/* Validation colors on dark */
.card-neo .invalid-feedback { color: #ffb3b3; }
.card-neo .is-invalid,
.card-neo .was-validated .form-control:invalid { border-color: #ff7a7a; }

/* Dark-table readability */
.table-neo thead th {
  background: #141b2b;
  color: var(--ink-strong);
  border-color: var(--line-dark);
}
.table-neo tbody tr { border-color: var(--line-dark); }
.table-neo tbody tr:hover { background: #182035; }
.table-neo td, .table-neo th { color: var(--ink-base); }

/* Form selects on dark */
.card-neo .form-select {
  background-color: var(--surface-1);
  color: var(--ink-base);
  border: 1px solid var(--line-dark);
  border-radius: .5rem;
}
.card-neo .form-select:focus {
  background-color: var(--surface-1);
  color: var(--ink-strong);
  border-color: color-mix(in oklab, var(--brand) 70%, white);
  box-shadow: 0 0 0 .25rem rgba(77,163,255,.18);
}


/* ===== Employee Dashboard: Recent Hour Logs table (high-contrast dark theme) ===== */
.card-neo .table-neo {
  background: transparent;
  border-color: var(--line-dark);
}

.card-neo .table-neo thead th {
  background: #141b2b;                 /* darker header band */
  color: var(--ink-strong);
  border-color: var(--line-dark);
  font-weight: 600;
}

.card-neo .table-neo td,
.card-neo .table-neo th {
  color: var(--ink-base);               /* readable body text */
  border-color: var(--line-dark);
  padding: .75rem 1rem;                 /* breathe a bit more */
}

/* Explicit striping for dark mode (don’t rely on Bootstrap’s light stripes) */
.card-neo .table-neo tbody tr {
  background-color: #0f1421;            /* even rows */
}
.card-neo .table-neo.table-striped tbody tr:nth-of-type(odd) {
  background-color: #121a2c;            /* odd rows */
}

/* Hover state that clearly lifts the row */
.card-neo .table-neo tbody tr:hover {
  background-color: #1a2440;
}

/* Make “Edit” outline button visible on dark */
.card-neo .table-neo .btn-outline-warning {
  color: #ffd873;
  border-color: #ffd873;
}
.card-neo .table-neo .btn-outline-warning:hover,
.card-neo .table-neo .btn-outline-warning:focus {
  background-color: #ffd873;
  color: #0b1324;
  border-color: #ffd873;
}

/* Muted text in dark cards shouldn’t be too faint */
.card-neo .text-muted { color: #aeb9cf !important; }
/* ===== Strong dark-table override (cell-level, beats Bootstrap) ===== */
.card-neo .table-neo {
  --neo-table-bg: #0e1526;      /* even rows */
  --neo-table-bg-alt: #111b33;  /* odd rows */
  --neo-table-hover: #182440;   /* hover */
  --neo-table-head: #131c33;    /* header band */
  --neo-table-text: #e6eefc;    /* body text */
  --neo-table-border: #26314a;  /* grid lines */
}

/* Header */
.card-neo .table-neo thead th {
  background-color: var(--neo-table-head) !important;
  color: #f6f9ff !important;
  border-color: var(--neo-table-border) !important;
  font-weight: 600;
}

/* Default cells (even rows) */
.card-neo .table-neo > :not(caption) > * > * {
  background-color: var(--neo-table-bg) !important;
  color: var(--neo-table-text) !important;
  border-color: var(--neo-table-border) !important;
}

/* Striped odd rows (Bootstrap paints stripes on cells, not rows) */
.card-neo .table-neo.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--neo-table-bg-alt) !important;
  color: var(--neo-table-text) !important;
}

/* Hover (apply to each cell for reliable coverage) */
.card-neo .table-neo tbody tr:hover > * {
  background-color: var(--neo-table-hover) !important;
  color: var(--neo-table-text) !important;
}

/* Links inside table cells */
.card-neo .table-neo a {
  color: #cfe3ff !important;
  text-decoration: none;
}
.card-neo .table-neo a:hover,
.card-neo .table-neo a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Keep the Edit outline button visible on dark */
.card-neo .table-neo .btn-outline-warning {
  color: #ffd873;
  border-color: #ffd873;
}
.card-neo .table-neo .btn-outline-warning:hover,
.card-neo .table-neo .btn-outline-warning:focus {
  background-color: #ffd873;
  color: #0b1324;
  border-color: #ffd873;
}
/* ===== My Logs table: strong dark style (cell-level) ===== */
.card-neo .table-neo {
  --neo-table-bg: #0e1526;
  --neo-table-bg-alt: #111b33;
  --neo-table-hover: #182440;
  --neo-table-head: #131c33;
  --neo-table-text: #e6eefc;
  --neo-table-border: #26314a;
}

.card-neo .table-neo thead th {
  background-color: var(--neo-table-head) !important;
  color: #f6f9ff !important;
  border-color: var(--neo-table-border) !important;
  font-weight: 600;
}

.card-neo .table-neo > :not(caption) > * > * {
  background-color: var(--neo-table-bg) !important;
  color: var(--neo-table-text) !important;
  border-color: var(--neo-table-border) !important;
}

.card-neo .table-neo.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--neo-table-bg-alt) !important;
  color: var(--neo-table-text) !important;
}

.card-neo .table-neo tbody tr:hover > * {
  background-color: var(--neo-table-hover) !important;
  color: var(--neo-table-text) !important;
}

/* Buttons inside tables (visibility on dark) */
.card-neo .table-neo .btn-outline-warning {
  color: #ffd873;
  border-color: #ffd873;
}
.card-neo .table-neo .btn-outline-warning:hover,
.card-neo .table-neo .btn-outline-warning:focus {
  background-color: #ffd873;
  color: #0b1324;
  border-color: #ffd873;
}
.card-neo .table-neo .btn-outline-danger {
  color: #ff9aa2;
  border-color: #ff9aa2;
}
.card-neo .table-neo .btn-outline-danger:hover,
.card-neo .table-neo .btn-outline-danger:focus {
  background-color: #ff9aa2;
  color: #0b1324;
  border-color: #ff9aa2;
}

/* Optional: dark pagination look if your partial uses .pagination */
.card-neo .pagination .page-link {
  background-color: #0e1526;
  color: var(--neo-table-text);
  border-color: var(--neo-table-border);
}
.card-neo .pagination .page-link:hover {
  background-color: #182440;
  color: #ffffff;
}
.card-neo .pagination .active .page-link {
  background-color: #2a3a66;
  border-color: #2a3a66;
  color: #fff;
}