/* =====================================================================
   Sparksols Material — Material 3 surface + motion layer.

   Loaded LAST, after bootstrap.min.css and the sparksols_modern theme.
   This file changes NO markup and NO behaviour. It restyles the classes
   the app already emits, so every one of the ~200 views inherits it and
   none of them can break.

   Three ideas do all the work:
     1. Tonal surfaces + elevation instead of borders.
     2. One accent colour drives the whole palette.
     3. Motion is a *response to input*, never decoration. Nothing moves
        that the user did not touch, and nothing makes them wait.

   Accessibility: every animation here is disabled under
   prefers-reduced-motion. That is at the bottom of the file and it is
   not optional -- motion sickness is a real accessibility failure.
   ===================================================================== */

:root {
  /* ---- M3 tonal palette, derived from the existing Sparksols teal ---- */
  --md-primary:            #1D9E75;
  --md-primary-dark:       #0F6E56;
  --md-on-primary:         #ffffff;
  --md-primary-container:  #cdece1;
  --md-on-primary-c:       #05442f;

  /* Surfaces. M3 uses *tone*, not shadow, to express elevation.
     Higher surface = lighter/warmer, not "more shadowed". */
  --md-surface:            #ffffff;
  --md-surface-1:          #f7faf9;
  --md-surface-2:          #f1f6f4;
  --md-surface-3:          #eaf2ef;
  --md-bg:                 #f5f7f8;
  --md-outline:            #dfe4e8;
  --md-outline-soft:       #eceff2;

  /* Elevation. Deliberately soft -- Material 3 dialled shadows *down*
     from Material 2, which is why M2 apps read as dated now. */
  --md-e1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --md-e2: 0 2px 6px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --md-e3: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);

  /* Shape */
  --md-r-xs: 8px;
  --md-r-sm: 12px;
  --md-r-md: 16px;
  --md-r-lg: 20px;
  --md-r-full: 999px;

  /* ---- Motion tokens ----
     M3's "emphasized" curve. Fast out, slow in: the UI leaps to your
     input, then settles. The asymmetry is the whole trick. */
  --md-ease:      cubic-bezier(.2, 0, 0, 1);
  --md-ease-out:  cubic-bezier(.05, .7, .1, 1);
  --md-dur-1: 100ms;   /* state change: hover, focus */
  --md-dur-2: 180ms;   /* small element: menu, chip, row */
  --md-dur-3: 250ms;   /* container: modal, drawer, panel */
}

/* =====================================================================
   1. Surfaces
   ===================================================================== */

/* NOT .login-body: that page has a full-bleed background photo, and an
   !important background here would erase it regardless of load order. */
body:not(.login-body) { background: var(--md-bg) !important; }

.panel,
.dashboard-window,
.content-page,
.white-area-content,
.area-content,
.block-area,
.well {
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-soft) !important;
  border-radius: var(--md-r-md) !important;
  box-shadow: var(--md-e1) !important;
  transition: box-shadow var(--md-dur-2) var(--md-ease);
}

/* Cards lift on hover ONLY where the whole card is clickable. A card
   that lifts but does nothing is a lie about affordance. */
.click:hover,
a > .panel:hover,
.dashboard-window.click:hover {
  box-shadow: var(--md-e2) !important;
}

.panel-heading,
.db-header,
.home-label {
  background: transparent !important;
  border-bottom: 1px solid var(--md-outline-soft) !important;
  border-radius: var(--md-r-md) var(--md-r-md) 0 0 !important;
}

hr { border-color: var(--md-outline-soft); }

/* =====================================================================
   2. Navigation
   ===================================================================== */

.navbar-inverse,
.navbar-header2 {
  box-shadow: var(--md-e2) !important;
  border: none !important;
}

/* M3 navigation items are pills, not full-bleed rows. */
.sidebar a,
.admin-sb-link,
.inner-sidebar-links a,
.nav-sidebar > li > a {
  border-radius: var(--md-r-full) !important;
  margin: 2px 10px !important;
  padding: 10px 16px !important;
  position: relative;
  overflow: hidden;                 /* clips the ripple */
  transition: background-color var(--md-dur-1) var(--md-ease),
              color            var(--md-dur-1) var(--md-ease);
}

.sidebar .active > a,
.sidebar li.active > a,
.nav-sidebar > .active > a {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-c) !important;
  font-weight: 600;
  box-shadow: none !important;      /* the pill IS the indicator */
}

.navbar-nav > li > a {
  transition: background-color var(--md-dur-1) var(--md-ease);
}

/* =====================================================================
   3. Buttons -- pill shape, state layer, ripple
   ===================================================================== */

.btn {
  border-radius: var(--md-r-full) !important;
  border: none;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 20px;
  position: relative;
  overflow: hidden;                 /* clips the ripple */
  box-shadow: none;
  transition: box-shadow    var(--md-dur-2) var(--md-ease),
              background    var(--md-dur-1) var(--md-ease),
              transform     var(--md-dur-1) var(--md-ease);
}
.btn-xs { padding: 4px 10px; }
.btn-sm { padding: 6px 14px; }

.btn:hover  { box-shadow: var(--md-e2); }
.btn:active { transform: scale(.97); box-shadow: var(--md-e1); }
.btn:focus-visible {
  outline: 2px solid var(--md-primary-dark);
  outline-offset: 2px;
}

.btn-primary,
.btn-success {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}
.btn-primary:hover,
.btn-success:hover { background: var(--md-primary-dark) !important; }

.btn-default {
  background: var(--md-surface-2) !important;
  color: #33404d !important;
}
.btn-default:hover { background: var(--md-surface-3) !important; }

/* The ripple. Injected by material.js; the geometry lives here. */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: .35;
  background: currentColor;
  pointer-events: none;
  animation: md-ripple var(--md-dur-3) var(--md-ease-out) forwards;
}
@keyframes md-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* =====================================================================
   4. Inputs -- outlined, with a focus ring that grows
   ===================================================================== */

.form-control,
select,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
  border-radius: var(--md-r-xs) !important;
  border: 1px solid var(--md-outline) !important;
  box-shadow: none !important;
  background: var(--md-surface) !important;
  transition: border-color var(--md-dur-1) var(--md-ease),
              box-shadow   var(--md-dur-1) var(--md-ease);
}

.form-control:focus,
select:focus,
textarea:focus {
  border-color: var(--md-primary) !important;
  /* Ring rather than glow: 2px, same colour, no blur. Reads as
     deliberate; a blurred glow reads as a 2014 Bootstrap default. */
  box-shadow: 0 0 0 3px rgba(29,158,117,.16) !important;
}

.checkbox input,
input[type=checkbox],
input[type=radio] { accent-color: var(--md-primary); }

/* =====================================================================
   5. Tables
   ===================================================================== */

.table { border-collapse: separate; border-spacing: 0; }

.table > thead > tr > td,
.table > thead > tr > th,
.table-header td {
  background: var(--md-surface-2) !important;
  border-bottom: 1px solid var(--md-outline) !important;
  font-weight: 600;
  color: #46535f;
  text-transform: none;
}

.table > tbody > tr {
  transition: background-color var(--md-dur-1) var(--md-ease);
}
.table > tbody > tr:hover { background: var(--md-surface-1) !important; }
.table > tbody > tr > td { border-color: var(--md-outline-soft) !important; }

.table-bordered { border: 1px solid var(--md-outline-soft) !important; }

/* =====================================================================
   6. Chips / labels / badges
   ===================================================================== */

.label, .badge {
  border-radius: var(--md-r-full) !important;
  font-weight: 600;
  padding: .3em .75em;
  letter-spacing: .01em;
}

/* =====================================================================
   7. Modals -- rise and settle, never just appear
   ===================================================================== */

.modal-content {
  border: none !important;
  border-radius: var(--md-r-lg) !important;
  box-shadow: var(--md-e3) !important;
}
.modal-header, .modal-footer { border-color: var(--md-outline-soft) !important; }
.modal-backdrop.in { opacity: .32; }

/* Bootstrap 3 slides the dialog down. M3 scales it up from the centre:
   the dialog "grows out of" the click. */
.modal.fade .modal-dialog {
  transform: scale(.94) translateY(8px) !important;
  opacity: 0;
  transition: transform var(--md-dur-3) var(--md-ease),
              opacity   var(--md-dur-3) var(--md-ease) !important;
}
.modal.in .modal-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1;
}

/* =====================================================================
   8. Dropdowns / tooltips / alerts
   ===================================================================== */

.dropdown-menu {
  border: none;
  border-radius: var(--md-r-sm);
  box-shadow: var(--md-e3);
  padding: 6px;
  overflow: hidden;
  transform-origin: top right;
  animation: md-menu-in var(--md-dur-2) var(--md-ease);
}
.dropdown-menu > li > a {
  border-radius: var(--md-r-xs);
  padding: 8px 14px;
  transition: background-color var(--md-dur-1) var(--md-ease);
}
.dropdown-menu > li > a:hover { background: var(--md-surface-2); }

@keyframes md-menu-in {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.alert {
  border: none;
  border-radius: var(--md-r-sm);
  box-shadow: var(--md-e1);
  animation: md-slide-in var(--md-dur-3) var(--md-ease);
}
@keyframes md-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tooltip-inner {
  border-radius: var(--md-r-xs);
  padding: 6px 10px;
  background: #303a45;
}

/* =====================================================================
   9. Kanban -- the one place drag feedback really matters
   ===================================================================== */

.kanban-card {
  border-radius: var(--md-r-sm) !important;
  box-shadow: var(--md-e1);
  transition: box-shadow var(--md-dur-2) var(--md-ease),
              transform  var(--md-dur-2) var(--md-ease);
}
.kanban-card:hover { box-shadow: var(--md-e2); }

/* While dragging: lift it off the board and tilt it slightly. This is
   the single cheapest cue that a thing is "in your hand". */
.kanban-card.ui-sortable-helper {
  box-shadow: var(--md-e3);
  transform: rotate(1.5deg) scale(1.02);
}
/* The gap left behind should breathe open, not snap. */
.kanban-placeholder {
  background: var(--md-primary-container);
  border-radius: var(--md-r-sm);
  opacity: .5;
  transition: height var(--md-dur-2) var(--md-ease);
}

/* =====================================================================
   10. Progress / loading
   ===================================================================== */

.progress {
  border-radius: var(--md-r-full);
  box-shadow: none;
  background: var(--md-surface-3);
  height: 8px;
}
.progress-bar {
  background: var(--md-primary);
  border-radius: var(--md-r-full);
  transition: width var(--md-dur-3) var(--md-ease);
}

/* Page content settles in on load. 250ms, 6px -- below the threshold
   where it feels like waiting, above the threshold where it registers. */
#main-content > .row,
.white-area-content {
  animation: md-page-in var(--md-dur-3) var(--md-ease);
}
@keyframes md-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   11. Reduced motion.

   Not a nicety. For users with vestibular disorders, motion in a UI
   causes actual nausea. If the OS says "no motion", we obey -- the
   whole layer degrades to a static Material skin, which still looks
   like a 2020s product.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .md-ripple { display: none !important; }
  .kanban-card.ui-sortable-helper { transform: none; }
}


/* =====================================================================
   12. Contrast repairs.

   Two classes in this app paint text WHITE and rely on a coloured box
   behind them. Once surfaces became white, they vanished:

     .giant-white-icon / .d-w-num  -- the dashboard tile icon + number.
       These went invisible when this layer whitened .dashboard-window.
       That is a bug I introduced, and this is the fix.

     .sidebar-icon -- white icons on the sidebar. These were ALREADY
       invisible before this layer: the sparksols_modern theme turned the
       sidebar white and never recoloured the icons. Worth fixing while
       we are here.

   The lesson is general: any rule that whitens a surface must be checked
   against every class that assumed a dark one.
   ===================================================================== */

/* --- Dashboard tiles: icon in a tonal circle, number in ink --- */
.dashboard-window {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.dashboard-window .d-w-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--md-r-full);
  background: var(--md-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 !important;
}
.dashboard-window .giant-white-icon {
  color: var(--md-on-primary-c) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.dashboard-window .d-w-text {
  float: none !important;
  text-align: left !important;
  color: var(--md-muted, #7a8894);
  font-size: 13px;
  line-height: 1.3;
}
.dashboard-window .d-w-num {
  color: #1c2430 !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

/* --- Sidebar icons: inherit the link's colour instead of forcing white,
       so they follow both the resting and the active-pill state. --- */
.sidebar-icon,
.sidebar a .glyphicon,
.inner-sidebar-links a .glyphicon {
  color: inherit !important;
  opacity: .75;
  margin-right: 10px;
}
.sidebar .active > a .glyphicon,
.sidebar li.active > a .glyphicon { opacity: 1; }

/* The collapse caret on the Admin Panel group was white too -- same class
   of bug, same fix: inherit the link colour rather than hardcode white. */
.glyphicon-menu-right,
.glyphicon-menu-down,
.glyphicon-menu-up { color: inherit !important; }


/* =====================================================================
   13. Login screen.

   It has its own layout (login_layout.php) and its own stylesheet, so it
   inherits nothing from the app theme -- the Material layer had to be
   added there explicitly. Its background is a full-bleed photo, so the
   body rule above deliberately skips it.
   ===================================================================== */

.login-form {
  border-radius: var(--md-r-lg) !important;
  /* was a 44px-blur drop shadow -- the single most dated thing on the page */
  box-shadow: 0 12px 40px rgba(16,24,40,.22), 0 2px 8px rgba(16,24,40,.12) !important;
  overflow: hidden;
}
.login-form-bottom {
  background: var(--md-surface-2) !important;
  border-radius: 0 !important;
}
.login-page        { border-radius: 0 0 var(--md-r-md) var(--md-r-md); }
.login-page-header { border-radius: var(--md-r-md) var(--md-r-md) 0 0; background: var(--md-surface-2); }

/* The sign-in button: same primary as the rest of the app, not its own teal. */
.btn-flat-login {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}
.btn-flat-login:hover { background: var(--md-primary-dark) !important; }

.login-icon-color { color: var(--md-muted, #7a8894); }


/* =====================================================================
   14. Mobile reconciliation.

   material.css loads AFTER responsive.css, so at equal specificity this
   file silently wins inside the phone media query -- undoing tuning that
   was put there for good reasons. These rules hand it back.
   ===================================================================== */

@media (max-width: 767px) {
  /* responsive.css wanted a tighter tile and a smaller numeral on a phone;
     section 12 was overriding both (higher specificity + later load). */
  .dashboard-window { padding: 12px !important; gap: 10px; }
  .dashboard-window .d-w-icon { width: 40px; height: 40px; }
  .dashboard-window .d-w-num { font-size: 22px !important; }

  /* 44px is the smallest target a thumb reliably hits. Section 3 set a
     padding that could shrink buttons below it. */
  .btn { min-height: 44px !important; padding: 10px 18px; }
  .btn-xs, .btn-sm { min-height: 36px !important; }

  /* Drawer links keep the pill, but the flex row + 44px height from
     responsive.css must survive. */
  .sidebar a,
  .admin-sb-link,
  .inner-sidebar-links a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    margin: 2px 6px !important;
    padding: 10px 14px !important;
  }
}