/*
  Workboard UI tweaks for Bootstrap 5 (no build step required).
  Keep this file small; prefer Bootstrap utilities/components.
*/

/*
  Design system (dark)
  - keep it simple, but add a bit more depth + accents
*/
:root {
  --wb-bg: #070810;
  --wb-surface: rgba(255, 255, 255, 0.045);
  --wb-surface-2: rgba(255, 255, 255, 0.065);
  /* More opaque than surfaces; used for overlays like dropdowns. */
  --wb-overlay: rgba(10, 12, 18, 0.98);
  --wb-overlay-2: rgba(16, 18, 26, 0.96);
  --wb-border: rgba(255, 255, 255, 0.12);
  --wb-border-strong: rgba(255, 255, 255, 0.18);
  --wb-text: rgba(255, 255, 255, 0.92);
  --wb-muted: rgba(255, 255, 255, 0.68);
  --wb-subtle: rgba(255, 255, 255, 0.48);

  /* accents */
  --wb-accent: #7c5cff;      /* violet */
  --wb-accent-2: #22d3ee;    /* cyan */
  --wb-accent-rgb: 124, 92, 255;
  --wb-accent-2-rgb: 34, 211, 238;

  --wb-radius: 14px;

  /* Desktop sidebar width (kept stable to prevent layout jitter) */
  --wb-sidebar-width: 18rem;
}

/* Let Bootstrap components inherit our accents without changing markup */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--wb-bg);
  --bs-body-color: var(--wb-text);
  --bs-border-color: var(--wb-border);

  --bs-primary: var(--wb-accent);
  --bs-primary-rgb: var(--wb-accent-rgb);
  --bs-link-color: rgba(var(--wb-accent-2-rgb), 0.95);
  --bs-link-hover-color: rgba(var(--wb-accent-2-rgb), 0.8);
}

body {
  background:
    radial-gradient(900px circle at 12% -10%, rgba(var(--wb-accent-rgb), 0.18), transparent 58%),
    radial-gradient(700px circle at 88% 0%, rgba(var(--wb-accent-2-rgb), 0.10), transparent 55%),
    radial-gradient(900px circle at 35% 110%, rgba(255, 255, 255, 0.06), transparent 60%),
    var(--wb-bg);
  color: var(--wb-text);

  /* Prevent horizontal "jumping" when pages differ in scroll height (Windows scrollbar width). */
  overflow-y: scroll;
}

/* Also keep the scrollbar gutter stable where supported (newer browsers). */
html {
  scrollbar-gutter: stable;
}

@media (min-width: 1200px) {
  /* Fixed sidebar width on desktop (Bootstrap xl and up) */
  .wb-sidebar {
    width: var(--wb-sidebar-width);
    min-width: var(--wb-sidebar-width);
    max-width: var(--wb-sidebar-width);
    flex: 0 0 var(--wb-sidebar-width);
  }
}

/* Typography: subtle tightening for a more "product" feel */
h1, h2, h3, h4, h5 {
  letter-spacing: -0.015em;
}

/* Links in dark mode: slightly brighter by default */
a {
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

::selection {
  background: rgba(var(--wb-accent-rgb), 0.35);
}

.wb-card {
  position: relative;
  background: linear-gradient(180deg, var(--wb-surface-2), var(--wb-surface)) !important;
  border-color: var(--wb-border) !important;
  border-radius: var(--wb-radius);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* A small accent "edge" so cards feel less flat */
.wb-card::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(var(--wb-accent-rgb), 0.0),
    rgba(var(--wb-accent-rgb), 0.65),
    rgba(var(--wb-accent-2-rgb), 0.55),
    rgba(var(--wb-accent-2-rgb), 0.0)
  );
  opacity: .55;
  pointer-events: none;
}

.wb-card:hover {
  border-color: var(--wb-border-strong) !important;
}

.wb-border {
  border-color: var(--wb-border) !important;
}

.wb-muted {
  color: var(--wb-muted) !important;
}

.wb-subtle {
  color: var(--wb-subtle) !important;
}

.w-0 {
  width: 0 !important;
}

/* Make list-group in sidebar blend with dark background */
.list-group-item {
  background-color: transparent;
  border-color: var(--wb-border);
}

/* Sidebar navigation: more modern pill feel */
.nav.nav-pills .nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: 12px;
  padding: .45rem .65rem;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

.nav.nav-pills .nav-link i.bi {
  width: 1.15rem;
  opacity: .86;
  flex: 0 0 auto;
}

.nav.nav-pills .nav-link span {
  min-width: 0;
}

.nav.nav-pills .nav-link.link-light {
  color: rgba(255, 255, 255, 0.82) !important;
}

.nav.nav-pills .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.nav.nav-pills .nav-link.active {
  background: linear-gradient(135deg, rgba(var(--wb-accent-rgb), 0.95), rgba(var(--wb-accent-2-rgb), 0.55));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.nav.nav-pills .nav-link.active i.bi {
  opacity: 1;
}

/* Keep tables readable on dark */
.table {
  --bs-table-border-color: var(--wb-border);
}

.table > :not(caption) > * > * {
  border-color: var(--wb-border);
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Forms: consistent dark surfaces + accent focus ring */
.form-control,
.form-select,
.input-group-text,
.form-check-input {
  background-color: rgba(0, 0, 0, 0.20) !important;
  border-color: var(--wb-border) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--wb-accent-2-rgb), 0.7) !important;
  box-shadow: 0 0 0 .18rem rgba(var(--wb-accent-rgb), 0.22) !important;
}

/* Buttons: add subtle depth */
.btn {
  border-radius: 12px;
}

.btn-primary {
  background-image: linear-gradient(135deg, rgba(var(--wb-accent-rgb), 0.95), rgba(var(--wb-accent-2-rgb), 0.55));
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.btn-primary:hover {
  filter: brightness(1.05);
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.02);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Overlays should match the same surfaces */
.offcanvas,
.modal-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035)) !important;
  border-color: var(--wb-border) !important;
  border-radius: var(--wb-radius);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Dropdowns need to be readable above the (busy) app background. */
.dropdown-menu {
  background: linear-gradient(180deg, var(--wb-overlay-2), var(--wb-overlay)) !important;
  border-color: var(--wb-border-strong) !important;
  border-radius: var(--wb-radius);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}

.dropdown-divider {
  border-top-color: var(--wb-border) !important;
}

.dropdown-item {
  color: var(--wb-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--wb-text) !important;
  background-color: rgba(255, 255, 255, 0.08);
}

.dropdown-item:active,
.dropdown-item.active {
  color: rgba(255, 255, 255, 0.98) !important;
  background-image: linear-gradient(135deg, rgba(var(--wb-accent-rgb), 0.85), rgba(var(--wb-accent-2-rgb), 0.55));
}

/* Alerts: less default Bootstrap flatness */
.alert {
  border-color: var(--wb-border) !important;
}

/* Top bar + subheader (glass) */
.wb-navbar,
.wb-subheader {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)) !important;
  backdrop-filter: blur(10px);
}

.wb-navbar {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

/* Make the brand/title feel more "app" */
.wb-navbar .fw-semibold,
.wb-subheader .h4,
.wb-subheader .h5 {
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* Keep per-row action buttons visible when tables overflow horizontally.
   Works well inside Bootstrap .table-responsive (horizontal scroll container). */
.wb-sticky-actions {
  position: sticky;
  right: 0;
  background-color: var(--bs-table-bg);
  background-clip: padding-box;
  box-shadow: -14px 0 14px -14px rgba(0, 0, 0, 0.9);
  min-width: 12rem;
}

thead .wb-sticky-actions {
  z-index: 3;
}

tbody .wb-sticky-actions {
  z-index: 2;
}

/* Customers/Projects overview: subtle separation (no bright colors) */
.wb-customer-header {
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--wb-border);
}

.wb-project-item {
  background: rgba(255, 255, 255, 0.02);
}