/* ==========================================================================
   BOOKED 3.9.6 — CORPORATE NAVY THEME OVERRIDES
   Author: UI/UX pass
   HOW TO USE:
     1) Upload this file and load it AFTER booked.css and bootstrap.
     2) Change the variables in SECTION 01 to rebrand quickly.
     3) If a component still looks off, add tiny tweaks in SECTION 99.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS (COLORS, RADIUS, SHADOWS, TYPOGRAPHY)
   - Edit these first to change the overall look.
   ========================================================================== */
:root {
  /* Brand palette */
  --brand-primary: #171C32;     /* Corporate Navy — main brand color */
  --brand-on-primary: #ffffff;  /* Text/icons on brand surfaces */
  --brand-primary-600: #0F1426; /* Darker navy for hover/active */
  --brand-primary-300: #2A3355; /* Lighter navy accent */

  /* Link palette (used across content links) */
  --link: #1E3A8A;              /* Navy-ish link (replaces cyan) */
  --link-hover: #0F172A;        /* Darker on hover for contrast */

  /* Accent palette (optional brand colors) */
  --accent-1: #EF7D17;          /* Orange (alerts/warnings accent) */
  --accent-2: #00B4DA;          /* Light blue (only if needed) */
  --accent-3: #74C9DF;

  /* Neutrals */
  --ink: #171C32;               /* Primary text (dark) */
  --ink-2: #35354B;             /* Secondary text */
  --muted: #6b7280;             /* Tertiary text */
  --border: #e5e7eb;            /* Generic border */
  --surface: #ffffff;           /* Cards/panels */
  --surface-2: #f6f7fb;         /* Subtle surfaces */
  --page-bg: #f8fafc;           /* Page background */

  /* Tables */
  --thead-bg: #E8EAF3;          /* Table header background */
  --thead-fg: #0f172a;          /* Table header text */

  /* States */
  --success: #16a34a;
  --info: #2563eb;
  --warning: #eab308;
  --danger: #ef4444;

  /* Focus ring */
  --focus: #2563eb;

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 6px 24px rgba(0,0,0,.08);
}


/* ==========================================================================
   02. BASE / RESET
   ========================================================================== */
html, body { background: var(--page-bg); color: var(--ink); }
body { font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; }
a, a:link, a:visited {
  color: var(--link) !important;
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--link-hover) !important;
  text-decoration: underline;
}
:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


/* ==========================================================================
   03. NAVBAR / HEADER BAR
   - Top navigation bar, brand, items and hover states.
   ========================================================================== */
.navbar, nav.navbar, #header, .topbar {
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  border-bottom: 1px solid rgba(0,0,0,0);
  box-shadow: var(--shadow-1);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar a {
  color: var(--brand-on-primary) !important;
}
.navbar .nav-link:hover,
.navbar a:hover {
  color: #e6e8f2 !important; /* soft light hover, not cyan */
}


/* ==========================================================================
   04. NAVBAR DROPDOWNS
   - Ensures readable text and on-brand hover.
   ========================================================================== */
.navbar .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-menu[role="menu"] {
  background-color: #ffffff !important;
  border: 1px solid rgba(23,28,50,0.15) !important; /* navy-tinted border */
}
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a,
.navbar .dropdown-menu a:link,
.navbar .dropdown-menu a:visited {
  color: var(--brand-primary) !important;   /* navy text */
  background: #ffffff !important;
  text-decoration: none !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
  background-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}
/* Open menu state */
.navbar .nav-item.show .nav-link,
.navbar .nav-item.open .nav-link {
  color: var(--brand-on-primary) !important;
}


/* ==========================================================================
   05. DASHBOARD (PANELS / HEADER / LINKS)
   ========================================================================== */
.dashboard-header {
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  box-shadow: var(--shadow-2);
}
.dashboard-header .badge { background: var(--brand-primary); color: var(--brand-on-primary); }

/* Dashboard links */
.dashboard-contents a,
#page-dashboard a {
  color: var(--link) !important;
}
.dashboard-contents a:hover,
#page-dashboard a:hover {
  color: var(--link-hover) !important;
}


/* ==========================================================================
   06. AVAILABILITY / RESOURCE LISTING
   - Addresses selectors seen in inspector (resourceName etc.).
   ========================================================================== */
.availabilityDashboard .resourceName a {
  color: var(--link) !important;
}
.availabilityDashboard .resourceName a:hover {
  color: var(--link-hover) !important;
}


/* ==========================================================================
   07. BUTTONS
   - Primary: Navy; also neutralize "success" to navy if theme used it as main.
   ========================================================================== */
.btn, button, input[type="button"], input[type="submit"] {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--brand-primary-600) !important;
  border-color: var(--brand-primary-600) !important;
  color: var(--brand-on-primary) !important;
}

/* Optional: convert green success buttons to navy for consistency */
.btn-success, a.btn-success, button.btn-success {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--brand-primary-600) !important;
  border-color: var(--brand-primary-600) !important;
}

/* Outline variant */
.btn-outline-primary, a.btn.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}


/* ==========================================================================
   08. TABLES
   ========================================================================== */
table thead th {
  background: var(--thead-bg);
  color: var(--thead-fg);
  border-bottom: 1px solid var(--border);
}
table tbody td {
  border-bottom: 1px solid var(--border);
}
table tbody tr:hover {
  background: #f2f4fb;
}


/* ==========================================================================
   09. FORMS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  padding: .55rem .65rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent);
  border-color: var(--focus);
}


/* ==========================================================================
   10. RESERVATION GRID HEADERS
   ========================================================================== */
table.reservations td.resdate {
  background: var(--ink-2) !important;
  color: #fff !important;
}
table.reservations tr.today td.resdate {
  background: var(--brand-primary-600) !important;
  color: #fff !important;
}


/* ==========================================================================
   11. CHIPS / TAGS (selected resource/group)
   ========================================================================== */
#page-reservation .reservation-group,
#page-reservation .reservation-resource {
  background: color-mix(in srgb, var(--brand-primary) 14%, white);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, white);
  border-radius: 999px;
}


/* ==========================================================================
   12. ALERTS
   ========================================================================== */
.alert-success { background: color-mix(in srgb, var(--success) 12%, #fff); border: 1px solid var(--success); color: #065f46; }
.alert-info    { background: color-mix(in srgb, var(--info)    12%, #fff); border: 1px solid var(--info);    color: #0c4a6e; }
.alert-warning { background: color-mix(in srgb, var(--warning) 12%, #fff); border: 1px solid var(--warning); color: #7c3e00; }
.alert-danger  { background: color-mix(in srgb, var(--danger)  12%, #fff); border: 1px solid var(--danger);  color: #7f1d1d; }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
#footer, .footer {
  background: var(--surface);
  color: var(--muted);
  border-top: 1px solid var(--border);
}
#footer a { color: var(--link) !important; }
#footer a:hover { color: var(--link-hover) !important; }


/* ==========================================================================
   99. LAST-MILE TWEAKS (put tiny overrides here if something wins the cascade)
   - If you find a selector still forcing cyan/green, duplicate it here and set
     colors to tokens above. Keep !important for safety.
   ========================================================================== */

/* Example: If some legacy rule still sets cyan link in dashboard explicitly */
.dashboard-contents a.some-legacy-class {
  /* color: var(--link) !important; */
}

/* Example: If a plugin injects a green .btn-success somewhere else */
.plugin-scope .btn-success {
  /* background: var(--brand-primary) !important; */
}

/* ==========================================================================
   14. CALENDAR FIXES (override unreadable blue-on-blue)
   ========================================================================== */

/* Calendar day cells (default text color) */
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
  color: var(--ink) !important; /* dark navy text */
}

/* Calendar events */
.fc-event, .fc-event-dot, .fc-daygrid-event {
  background-color: var(--brand-primary) !important; /* navy event background */
  border-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important; /* white text inside events */
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

/* Calendar event hover/focus */
.fc-event:hover, .fc-event:focus {
  background-color: var(--brand-primary-600) !important;
  border-color: var(--brand-primary-600) !important;
  color: var(--brand-on-primary) !important;
}

/* Today cell highlight */
.fc .fc-day-today {
  background-color: #fdf6ec !important; /* subtle orange-tinted background */
  color: var(--ink) !important;
}