/* =============================================================================
   AND Solutions — App Theme  (static/css/app-theme.css)
   Override layer on Bootstrap 5.3 — brand-aligned, Tabler-inspired.
   No backend logic, no template structure, no URLs changed.
   ============================================================================= */

/* ── 1. Brand tokens ─────────────────────────────────────────────────────── */
:root {
  --and-black:       #000000;
  --and-blue:        #1659E4;
  --and-blue-hover:  #1249c9;
  --and-white:       #FFFFFF;
  --and-platinum:    #EDECEB;
  --and-turquoise:   #39BEBB;
  --and-sky:         #74CEFF;
  --and-green:       #14C964;
  --and-navy:        #050F35;
  --and-indigo:      #0E3D6A;
  --and-coral:       #F52F57;
  --and-orange-red:  #E95A3A;
  --and-radius:      10px;
  --and-radius-sm:   6px;
  --and-shadow:      0 1px 3px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .07);
  --and-shadow-sm:   0 1px 3px rgba(0, 0, 0, .08);

  /* Bootstrap token overrides — cascade through BS components */
  --bs-primary:              #1659E4;
  --bs-primary-rgb:          22, 89, 228;
  --bs-success:              #14C964;
  --bs-success-rgb:          20, 201, 100;
  --bs-danger:               #F52F57;
  --bs-danger-rgb:           245, 47, 87;
  --bs-info:                 #39BEBB;
  --bs-info-rgb:             57, 190, 187;
  --bs-warning-rgb:          234, 179, 8;
  --bs-link-color:           #1659E4;
  --bs-link-hover-color:     #1249c9;
  --bs-border-radius:        6px;
  --bs-border-radius-sm:     4px;
  --bs-border-radius-lg:     10px;
  --bs-card-border-radius:   10px;
  --bs-card-cap-bg:          #fafafa;
  --bs-card-border-color:    rgba(0, 0, 0, .07);
}

/* ── 2. Base: font, body, links ──────────────────────────────────────────── */
body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #F2F3F6;
  color: #1c2033;
  font-size: 0.9rem;
  line-height: 1.6;
}

a {
  color: var(--and-blue);
  text-decoration: none;
}
a:hover { color: var(--and-blue-hover); text-decoration: underline; }

/* ── 3. Navbar ───────────────────────────────────────────────────────────── */
.navbar.bg-dark {
  background-color: var(--and-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Logo: already white on transparent — no filter needed. Cap width so the
   wide lockup image (icon + text) doesn't crowd the nav links. */
.navbar-brand img {
  display: block;          /* removes inline baseline gap */
  height: 26px !important;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}

/* Breathing room between brand and nav links */
.navbar-brand {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.navbar .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .72) !important;
  padding-left: .75rem !important;
  padding-right: .75rem !important;
  border-radius: var(--and-radius-sm);
  transition: color .15s ease, background .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .09);
}
.navbar .nav-link.active {
  color: #fff !important;
  background-color: rgba(22, 89, 228, .4);
}

/* Dropdown */
.navbar .dropdown-menu {
  background-color: #0b1d52;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--and-radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  min-width: 185px;
  padding: .3rem;
  margin-top: .35rem !important;
}
.navbar .dropdown-item {
  color: rgba(255, 255, 255, .78);
  font-size: 0.84rem;
  border-radius: 5px;
  padding: .45rem .8rem;
  transition: background .12s, color .12s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--and-blue);
  color: #fff;
}
.navbar .dropdown-item.active {
  background-color: var(--and-blue);
  color: #fff;
}
.navbar .dropdown-divider {
  border-color: rgba(255, 255, 255, .1);
  margin: .3rem;
}

/* Right-side user name span — dimmer, not clickable */
.navbar .nav-link.text-light.opacity-75 {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 0.82rem;
  cursor: default;
  pointer-events: none;
}

/* ── 4. Page layout ──────────────────────────────────────────────────────── */
main.container {
  padding-top: 1.75rem;
}

/* Page headings */
h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--and-navy);
  letter-spacing: -.01em;
}
h4, h5 {
  font-weight: 600;
  color: var(--and-navy);
}

/* ── 5. Cards ────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--and-radius);
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: var(--and-shadow);
  background-color: #fff;
}
.card-header {
  background-color: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-size: 0.875rem;
  border-top-left-radius: var(--and-radius) !important;
  border-top-right-radius: var(--and-radius) !important;
}
.card .card-body {
  padding: 1.1rem 1.25rem;
}
.card-header + .card-body,
.card-header + .table-responsive,
.card-header + .collapse {
  border-top: none;
}

/* Status borders on planning cards */
.card.border-danger  { border-color: rgba(245, 47, 87, .45)  !important; }
.card.border-warning { border-color: rgba(233, 90, 58, .45)  !important; }
.card.border-success { border-color: rgba(20, 201, 100, .45) !important; }

/* Planning card header tints for over/near status */
.card.border-danger  .card-header { background-color: rgba(245, 47, 87, .05);  }
.card.border-warning .card-header { background-color: rgba(233, 90, 58, .05);  }

/* ── 6. Tables ───────────────────────────────────────────────────────────── */
.table {
  font-size: 0.875rem;
  color: #2c3240;
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  padding: .6rem .85rem;
  vertical-align: middle;
}
.table-sm > :not(caption) > * > * {
  padding: .42rem .7rem;
}

/* Dark header (used on main timesheet table) */
.table thead.table-dark th {
  background-color: var(--and-navy) !important;
  color: rgba(255, 255, 255, .88);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-color: var(--and-navy) !important;
}
/* Light header (planning, sub-tables) */
.table thead.table-light th {
  background-color: #f0f1f5 !important;
  color: #6b7080;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(22, 89, 228, .04);
}

/* Warning row (missing days, admin table) */
.table > tbody > tr.table-warning > td,
.table > tbody > tr.table-warning > th {
  background-color: rgba(233, 90, 58, .07) !important;
}

/* Table footer totals row */
tfoot.table-light td {
  background-color: #f7f8fa !important;
  font-size: 0.84rem;
  border-top: 1px solid rgba(0, 0, 0, .1) !important;
}

/* Annual matrix — subtotal row separator */
.table > tbody > tr.fw-semibold[style*="border-top"] > td {
  border-top: 2px solid rgba(0, 0, 0, .12) !important;
}

/* Demand gap table rows */
.table > tbody > tr.text-muted > td {
  color: #6b7080 !important;
}

/* Table cells with planning status */
.table td.table-danger { background-color: rgba(245, 47, 87, .07) !important; }
.table td.table-warning { background-color: rgba(233, 90, 58, .09) !important; }

/* Last column (actions) in timesheet table */
.table td:last-child.text-end.text-nowrap { min-width: 120px; }

/* ── 7. Buttons ──────────────────────────────────────────────────────────── */
.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--and-radius-sm);
  padding: .38rem .85rem;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-sm {
  font-size: 0.8rem;
  padding: .25rem .65rem;
}

/* Primary */
.btn-primary {
  background-color: var(--and-blue);
  border-color: var(--and-blue);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--and-blue-hover);
  border-color: var(--and-blue-hover);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 89, 228, .2);
}
.btn-primary:disabled { background-color: #7fa0f0; border-color: #7fa0f0; }

/* Outline primary */
.btn-outline-primary {
  border-color: var(--and-blue);
  color: var(--and-blue);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--and-blue);
  border-color: var(--and-blue);
  color: #fff;
}

/* Secondary / muted */
.btn-outline-secondary {
  border-color: #d1d5db;
  color: #4b5563;
  background: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #1c2033;
}

/* Danger outline */
.btn-outline-danger {
  border-color: var(--and-coral);
  color: var(--and-coral);
  background: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--and-coral);
  border-color: var(--and-coral);
  color: #fff;
}

/* Link button */
.btn-link {
  color: var(--and-blue);
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
}
.btn-link:hover { color: var(--and-blue-hover); text-decoration: underline; }

/* Button group active state (view mode toggle) */
.btn-group .btn-outline-secondary.active {
  background-color: var(--and-navy);
  border-color: var(--and-navy);
  color: #fff;
}

/* ── 8. Badges ───────────────────────────────────────────────────────────── */
.badge {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .025em;
  padding: .3em .65em;
  border-radius: 20px;
}
.bg-primary  { background-color: var(--and-blue)      !important; }
.bg-success  { background-color: var(--and-green)     !important; }
.bg-danger   { background-color: var(--and-coral)     !important; }
.bg-info     { background-color: var(--and-turquoise) !important; }
.bg-warning  { background-color: #F59E0B              !important; }
.bg-secondary { background-color: #6b7180             !important; }

/* Hours-by-project summary badges */
.badge.bg-secondary.fs-6 {
  background-color: #f0f1f5 !important;
  color: #374151 !important;
  border: 1px solid #e2e4ea;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  border-radius: 8px;
}

/* ── 9. Text colour helpers ──────────────────────────────────────────────── */
.text-primary  { color: var(--and-blue)      !important; }
.text-success  { color: #0d9e51              !important; }
.text-danger   { color: var(--and-coral)     !important; }
.text-info     { color: var(--and-turquoise) !important; }
.text-warning  { color: #D97706              !important; }
.text-muted    { color: #6b7180              !important; }

/* ── 10. Alerts ──────────────────────────────────────────────────────────── */
.alert {
  font-size: 0.875rem;
  border-radius: var(--and-radius-sm);
  border-left-width: 4px;
  padding: .65rem 1rem;
}
.alert-success {
  background-color: rgba(20, 201, 100, .1);
  border-color: var(--and-green);
  color: #0a6b3a;
}
.alert-danger,
.alert-error {
  background-color: rgba(245, 47, 87, .08);
  border-color: var(--and-coral);
  color: #8a1025;
}
.alert-warning {
  background-color: rgba(245, 158, 11, .1);
  border-color: #F59E0B;
  color: #7c5400;
}
.alert-info {
  background-color: rgba(57, 190, 187, .1);
  border-color: var(--and-turquoise);
  color: #1a5b5a;
}

/* ── 11. Forms ───────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: inherit;
  font-size: 0.875rem;
  border-color: #d1d5db;
  border-radius: var(--and-radius-sm);
  color: #1c2033;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--and-blue);
  box-shadow: 0 0 0 3px rgba(22, 89, 228, .12);
  outline: none;
}
.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: .35rem;
}
.form-text {
  font-size: 0.8rem;
  color: #6b7180;
}
.form-control::placeholder { color: #9ca3af; }

/* ── 12. Progress bars ───────────────────────────────────────────────────── */
.progress {
  background-color: #e8eaef;
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar           { border-radius: 99px; }
.progress-bar.bg-success { background-color: var(--and-green)   !important; }
.progress-bar.bg-primary { background-color: var(--and-blue)    !important; }
.progress-bar.bg-warning { background-color: #F59E0B            !important; }

/* ── 13. Pagination ──────────────────────────────────────────────────────── */
.pagination { gap: 2px; }
.page-link {
  font-size: 0.84rem;
  color: var(--and-blue);
  border-radius: var(--and-radius-sm) !important;
  border-color: #d1d5db;
  padding: .3rem .65rem;
}
.page-link:hover {
  background-color: rgba(22, 89, 228, .07);
  border-color: var(--and-blue);
  color: var(--and-blue);
}
.page-item.active .page-link {
  background-color: var(--and-blue);
  border-color: var(--and-blue);
}
.page-item.disabled .page-link { color: #9ca3af; }

/* ── 14. FAB button (Quick Log) ──────────────────────────────────────────── */
button[data-bs-target="#quickLogModal"] {
  background-color: var(--and-blue) !important;
  border-color:     var(--and-blue) !important;
  box-shadow: 0 4px 18px rgba(22, 89, 228, .45) !important;
  color: #fff !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
button[data-bs-target="#quickLogModal"]:hover {
  background-color: var(--and-blue-hover) !important;
  border-color:     var(--and-blue-hover) !important;
  box-shadow: 0 6px 24px rgba(22, 89, 228, .55) !important;
  transform: scale(1.06);
}

/* ── 15. Modal ───────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--and-radius);
  border: none;
  box-shadow: 0 16px 56px rgba(0, 0, 0, .2);
}
.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: 1rem 1.25rem .8rem;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--and-navy);
}
.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, .07);
  padding: .75rem 1.25rem;
}

/* ── 16. Toast ───────────────────────────────────────────────────────────── */
.text-bg-success { background-color: var(--and-green) !important; }

/* ── 17. Dashboard stat card numbers ─────────────────────────────────────── */
.card .display-6 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--and-navy);
  letter-spacing: -.025em;
  line-height: 1.1;
}

/* Small uppercase category label inside cards */
.card .text-uppercase.small,
.card .text-uppercase.small.fw-semibold {
  font-size: 0.7rem !important;
  letter-spacing: .08em;
  color: #9ca3af !important;
}

/* ── 18. Recent-project chips ────────────────────────────────────────────── */
.recent-project-btn {
  font-size: 0.78rem;
  font-weight: 500;
  border-color: #d8dce6;
  color: #374151;
  background: #fff;
  border-radius: 20px;
  padding: .2rem .75rem;
  transition: background .12s, border-color .12s, color .12s;
}
.recent-project-btn:hover {
  background-color: var(--and-blue);
  border-color: var(--and-blue);
  color: #fff;
}

/* ── 19. Project field toggle ────────────────────────────────────────────── */
.project-toggle-btn {
  font-size: 0.78rem !important;
  color: var(--and-blue) !important;
  padding: 0 !important;
}
.project-search-hint { color: #6b7180; }

/* ── 20. Filter section ──────────────────────────────────────────────────── */
.card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.card-header[data-bs-toggle="collapse"]:hover { background-color: #f3f4f7; }

/* ── 21. Empty states ────────────────────────────────────────────────────── */
.text-center.text-muted.py-5 { padding: 3rem 0 !important; }
.text-center.text-muted.py-5 p { line-height: 1.8; }

/* ── 22. Table-responsive rounding ──────────────────────────────────────── */
.card > .table-responsive:last-child {
  border-bottom-left-radius: var(--and-radius);
  border-bottom-right-radius: var(--and-radius);
}
.card > .table-responsive:last-child .table tr:last-child td:first-child {
  border-bottom-left-radius: var(--and-radius);
}
.card > .table-responsive:last-child .table tr:last-child td:last-child {
  border-bottom-right-radius: var(--and-radius);
}

/* ── 23. Auth pages ──────────────────────────────────────────────────────── */
/*
   allauth renders some form fields without Bootstrap classes.
   This ensures those bare inputs look consistent on auth pages.
*/
.auth-card-wrapper .card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-card-wrapper .card select,
.auth-card-wrapper .card textarea {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  color: #1c2033;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--and-radius-sm);
  margin-top: .25rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-card-wrapper .card input:focus,
.auth-card-wrapper .card select:focus,
.auth-card-wrapper .card textarea:focus {
  border-color: var(--and-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(22, 89, 228, .12);
}


.auth-page-bg {
  background: linear-gradient(145deg, var(--and-navy) 0%, var(--and-indigo) 100%);
}
.auth-card-wrapper .card {
  border-radius: var(--and-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  border: none;
}
.auth-brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--and-white);
  letter-spacing: -.01em;
}

/* ── 24. Planning: capacity summary in card header ───────────────────────── */
.card-header .text-muted { font-size: 0.82rem; }
.card-header .badge       { font-size: 0.7rem; }

/* ── 25. Completeness / warning card header ──────────────────────────────── */
.card-header.bg-warning.bg-opacity-10 {
  background-color: rgba(245, 158, 11, .08) !important;
  border-bottom-color: rgba(245, 158, 11, .25) !important;
}

/* ── 26. Incentive card ──────────────────────────────────────────────────── */
.incentive-card {
  border-left: 3px solid var(--and-blue);
}

.incentive-item { min-width: 120px; }

.incentive-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a93a8;
  line-height: 1.2;
}

.incentive-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1c2033;
}

.incentive-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.incentive-divider {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, .1);
  flex-shrink: 0;
}

.incentive-badge-week {
  background-color: rgba(20, 201, 100, .15);
  color: #0d9e60;
  font-size: 0.78rem;
  font-weight: 600;
  padding: .3em .65em;
  border-radius: 20px;
}

.incentive-badge-month {
  background-color: rgba(22, 89, 228, .12);
  color: var(--and-blue);
  font-size: 0.78rem;
  font-weight: 600;
  padding: .3em .65em;
  border-radius: 20px;
}

/* ── 27. Miscellaneous polish ────────────────────────────────────────────── */
.display-6 { letter-spacing: -.025em; }

/* Collapsible filter panel */
.collapse .card-body { padding-top: .75rem; padding-bottom: .75rem; }

/* Subtle divider between card sections */
hr { border-color: rgba(0, 0, 0, .07); }

/* Table-bordered for annual matrix */
.table-bordered > :not(caption) > * > * {
  border-color: rgba(0, 0, 0, .08);
}
.table-bordered thead th {
  border-bottom-color: rgba(0, 0, 0, .12) !important;
}