/* =========================================================
   Catsplatter • Dark MDL Theme (fixed)
   - Dark red accent, readable light text
   - Cards lighter than page background, with red glow
   ========================================================= */

:root {
  --primary: #520606;      /* header / raised buttons */
  --button: #8b0000;
  --surface: #1b1c1f;      /* page background */
  --card-bg: #33363d;      /* lighter than surface so cards pop */
  --text-primary: #f5f6f7; /* main text */
  --text-muted: #aab0b6;   /* labels / placeholders */
  --border: #2e3136;       /* subtle borders */
}

/* ---------- Base & layout ---------- */

html, body {
  background: var(--surface);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, .mdl-layout__content, .app-content, p, span, li, label, small {
  color: var(--text-primary);
}

/* Header */
.mdl-layout__header,
.mdl-color--primary { background: var(--primary) !important; }
.mdl-layout-title { color: #fff; }
.mdl-navigation__link { color: #ffe9e9 !important; }

/* ---------- Cards (lighter bg + red glow) ---------- */

/* Force background override across elevations */
.mdl-card,
.mdl-card.mdl-shadow--2dp,
.mdl-card.mdl-shadow--3dp,
.mdl-card.mdl-shadow--4dp,
.mdl-card.mdl-shadow--6dp,
.mdl-card.mdl-shadow--8dp,
.mdl-card.mdl-shadow--16dp {
  background: var(--card-bg) !important;      /* clearly lighter than page bg */
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 4px 12px rgba(139, 0, 0, 1),
    0 0 10px rgba(139, 0, 0, 1) !important;  /* #8b0000 red glow */
}

/* Ensure inner areas inherit text color and no stray fills */
.mdl-card__title,
.mdl-card__supporting-text,
.mdl-card__actions,
.mdl-card__menu {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.mdl-card__title-text { color: var(--text-primary) !important; }

/* Links inside cards */
.mdl-card__supporting-text a,
.mdl-card a {
  color: #ff8a80 !important;
  text-decoration: none;
}
.mdl-card__supporting-text a:hover,
.mdl-card a:hover { color: #ffc1bd !important; text-decoration: underline; }

/* ---------- Inputs / selects ---------- */

.mdl-textfield__input {
  color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  background: transparent !important;
}
.mdl-textfield__label { color: var(--text-muted) !important; }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  color: #ff8a80 !important;
}
.mdl-textfield__input::placeholder { color: var(--text-muted) !important; }

/* Native select styled to match textfields */
select.mdl-select {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  outline: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #ff8a80 50%),
    linear-gradient(135deg, #ff8a80 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 2.5em;
  background-repeat: no-repeat;
}
select.mdl-select:focus {
  border-color: #ff8a80;
  box-shadow: 0 0 0 2px rgba(255,138,128,0.2);
}

/* ---------- Buttons ---------- */

.mdl-button.mdl-button--raised {
  background: var(--button) !important;
  color: #fff !important;
}
.mdl-button { color: var(--text-primary) !important; }

/* ---------- Tables ---------- */

.mdl-data-table {
  width: 100%;
  background: #25272c !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.mdl-data-table th, .mdl-data-table td {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.mdl-data-table tbody tr:hover { background: #2a2c32 !important; }

/* ---------- Links (global) ---------- */
a { color: #ff8a80; }
a:hover { color: #ffc1bd; }

/* ---------- Snackbar ---------- */
.mdl-snackbar {
  background: #25272c !important;
  color: var(--text-primary) !important;
}

/* ---------- Utility ---------- */
.fullwidth { width: 100%; }
.center { display:flex; align-items:center; justify-content:center; }
.mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; }
.flex { display:flex; gap:12px; flex-wrap:wrap; }
.grow { flex:1 1 300px; }
.right { text-align:right; }
.hidden { display:none !important; }
.click { cursor:pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 840px) {
  .mdl-card {
    box-shadow:
      0 3px 10px rgba(139, 0, 0, 1),
      0 0 8px rgba(139, 0, 0, 1) !important;
  }
}