/* ============================================================================
   Spinoza Centre — LibreBooking theme override
   ----------------------------------------------------------------------------
   Palette sampled from the Spinoza logo: black wordmark + vivid red (#E5231C)
   and azure blue (#0FA3EC) on white. The UI is anchored on black/white; BLUE
   is the primary interactive colour; RED is reserved for one meaningful job —
   "My Reservation" — so it reads as information, not decoration. Signature
   element: the red→blue split rule under the header, echoing the logo.

   Deploy:
     1. Put this file at  Web/css/custom.css  (or mount it there via Docker).
     2. config/config.php:  'css.theme'          => 'default',
                            'css.extension.file' => 'custom.css',
        (older flat style:  $conf['settings']['css.extension.file'] = 'custom.css';)

   Tuning: everything lives in :root below. The chrome rules (nav, buttons,
   forms, type) apply immediately; the schedule status rules (.reserved,
   .mine, .pending, …) are the classic Booked/LibreBooking class names —
   confirm them against your build's DOM before relying on them.

   VERIFIED against this build (LibreBooking 5.1.0, Bootstrap 5.3.3), 2026-07-06:
     - Grid status classes CONFIRMED in tpl/Schedule/schedule.tpl:
         reserved, mine, pending, restricted, unreservable, reservable.
     - Two names differ from the classic set and were CORRECTED here:
         .participant  -> actual class is `participating`
         .past         -> actual class is `pasttime`
       Both the old and the actual names are listed so the rules land on this
       build and no-op safely on others.
     - Chrome: this build is Bootstrap 5, so .navbar (bg + split rule), .btn*,
       .form-control, a, body, h1–h5 apply on all pages; .navbar-default,
       .panel, .well are BS3 remnants that only appear on some admin pages.
   ============================================================================ */

:root {
  /* --- Brand (sampled from logo) --- */
  --spin-black:       #141519;   /* wordmark black — text, headings */
  --spin-red:         #e5231c;   /* brand red — used sparingly (your reservations) */
  --spin-red-dark:    #b81a14;
  --spin-red-tint:    #fdecea;
  --spin-blue:        #0fa3ec;   /* brand azure — primary interactive colour */
  --spin-blue-dark:   #0b82bd;
  --spin-blue-tint:   #e7f5fd;

  /* --- Neutrals --- */
  --spin-page:          #f5f7f9;
  --spin-surface:       #ffffff;
  --spin-border:        #e3e8ec;
  --spin-border-strong: #ccd6dc;
  --spin-text:          #1a1d21;
  --spin-text-muted:    #5a6a71;

  /* --- Shape & type --- */
  --spin-radius:       8px;
  --spin-radius-block: 6px;
  --spin-shadow:       0 1px 3px rgba(20, 30, 40, .09), 0 1px 2px rgba(20, 30, 40, .05);
  --spin-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- Base / type */
body {
  background: var(--spin-page) !important;
  color: var(--spin-text);
  font-family: var(--spin-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .page-header, .subtitle {
  font-family: var(--spin-font);
  color: var(--spin-black);
  letter-spacing: -0.01em;
}

a { color: var(--spin-blue-dark); }
a:hover, a:focus { color: var(--spin-blue); }

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--spin-blue);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Header / navbar
   Signature: white header, black text, red→blue split rule on top echoing the
   logo's two-colour identity. */
.navbar, .navbar-default, #header {
  background: var(--spin-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--spin-border) !important;
  border-top: 3px solid var(--spin-blue) !important;               /* fallback */
  border-image: linear-gradient(90deg,
                  var(--spin-red) 0 50%, var(--spin-blue) 50% 100%) 1 !important;
  box-shadow: var(--spin-shadow);
}

.navbar-default .navbar-nav > li > a, #header a, .nav > li > a,
.navbar .nav-link, .navbar-nav .nav-link {
  color: var(--spin-black) !important;
  font-weight: 500;
  border-radius: var(--spin-radius);
  transition: background-color .12s ease, color .12s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.nav > li > a:hover,
.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: var(--spin-blue-dark) !important;
  background: var(--spin-blue-tint) !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
  color: var(--spin-blue-dark) !important;
  background: var(--spin-blue-tint) !important;
}

/* Logo swap — prefer the vector SVG from the site, self-hosted into Web/img/
   (the uploaded square JPG works as a favicon fallback but don't use it here —
   raster + white box looks worse than the SVG in the header).
.logo img, #header .logo img {
  content: url("../img/spinoza_logo.svg");
  height: 40px; width: auto;
}
*/

/* --------------------------------------------------------------------- Buttons */
.btn {
  border-radius: var(--spin-radius);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--spin-blue); border-color: var(--spin-blue); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--spin-blue-dark) !important;
  border-color: var(--spin-blue-dark) !important;
}
.btn-default, .btn-secondary {
  background: var(--spin-surface);
  border-color: var(--spin-border-strong);
  color: var(--spin-text);
}
.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--spin-blue-tint);
  border-color: var(--spin-blue);
  color: var(--spin-blue-dark);
}
/* Destructive / delete actions → brand red */
.btn-danger { background: var(--spin-red); border-color: var(--spin-red); }
.btn-danger:hover, .btn-danger:focus {
  background: var(--spin-red-dark) !important;
  border-color: var(--spin-red-dark) !important;
}

/* ------------------------------------------------------------ Panels / cards */
.panel, .well, .card, .dashboard-widget, .reservation-filter, .resource-filter {
  background: var(--spin-surface);
  border: 1px solid var(--spin-border);
  border-radius: var(--spin-radius);
  box-shadow: var(--spin-shadow);
}
.panel-heading, .panel-default > .panel-heading, .card-header {
  background: var(--spin-blue-tint);
  border-bottom: 1px solid var(--spin-border);
  color: var(--spin-blue-dark);
  font-weight: 600;
}

/* ----------------------------------------------------------- Forms / inputs */
.form-control, input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea {
  border: 1px solid var(--spin-border-strong);
  border-radius: var(--spin-radius);
  box-shadow: none;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--spin-blue);
  box-shadow: 0 0 0 3px var(--spin-blue-tint);
}

/* -------------------------------------------------------- Schedule / grid */
.reservations, table.reservations, .schedule { border-color: var(--spin-border); }

/* Day header rows (Sunday / Monday / …) → near-black, matches the wordmark */
.reservations th, .dateColumn, .day-header, tr.days {
  background: var(--spin-black) !important;
  color: #fff !important;
  border-color: #000 !important;
}
.reservations .period, .timeColumn, .hour { color: var(--spin-text-muted); }
.reservations td:hover { background: var(--spin-blue-tint); }

/* Rounded, softly-shadowed reservation blocks.
   NOTE: `pasttime`/`participating` are this build's real class names;
   `past`/`participant` are the classic aliases (kept as harmless no-ops). */
.reserved, div.reserved, .pending, .past, .pasttime, .restricted,
.unreservable, .mine, .participant, .participating {
  border-radius: var(--spin-radius-block) !important;
  box-shadow: 0 1px 2px rgba(20, 30, 40, .14);
}

/* Reserved (the dominant blocks) → brand azure */
.reserved, div.reserved {
  background: var(--spin-blue) !important;
  color: #fff !important;
  border-color: var(--spin-blue-dark) !important;
}
/* My reservation → brand RED, so the thing you care about pops
   (DOM is `reserved mine`; later !important rule wins over .reserved) */
.mine {
  background: var(--spin-red) !important;
  color: #fff !important;
  border-color: var(--spin-red-dark) !important;
}
/* Pending → amber (distinct from red/blue) */
.pending { background: #e6a935 !important; color: #3a2a10 !important; }
/* Participant → violet (kept semantic) */
.participant, .participating { background: #7c6bb0 !important; color: #fff !important; }
/* Blocked → muted rose */
.unreservable, .blocked { background: #c99a99 !important; color: #2b1f1f !important; }
/* Past / Restricted → neutral grey */
.past, .pasttime, .restricted { background: #b8c2c4 !important; color: #303a3c !important; }
/* Open / free cells → clean white hairline */
.reservable { background: var(--spin-surface) !important; border-color: var(--spin-border) !important; }

/* -------------------------------------------------------- Legend chips (top) */
.legend .btn, .reservation-legend button { border-radius: 999px; font-weight: 500; }

/* ------------------------------------------------------------------- Footer */
#footer, .footer { color: var(--spin-text-muted); border-top: 1px solid var(--spin-border); }

/* ============================================================================
   Optional dark mode — respects the OS setting. Status colours are kept so they
   stay distinguishable on dark surfaces.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --spin-page:          #101418;
    --spin-surface:       #191f26;
    --spin-border:        #29323b;
    --spin-border-strong: #3a4650;
    --spin-text:          #e6edf1;
    --spin-text-muted:    #9fb0b8;
    --spin-blue-tint:     #0f2f42;
    --spin-shadow:        0 1px 3px rgba(0, 0, 0, .45);
  }
  .navbar-default .navbar-nav > li > a, .nav > li > a, #header a,
  .navbar .nav-link, .navbar-nav .nav-link { color: var(--spin-text) !important; }
  .reservations th, tr.days { background: #000 !important; }
  .form-control, input, select, textarea { background: var(--spin-surface); color: var(--spin-text); }
  .reservable { background: var(--spin-surface) !important; border-color: var(--spin-border) !important; }
}