/* =========================================================
   GamingZero • 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);
}

/* Container */
.gz-container { max-width: 980px; margin: 24px auto; padding: 0 16px; }

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

/* Transparent header variant (getmdl.io) */
.mdl-layout__header--transparent { background: transparent !important; }
.mdl-layout__header--transparent .mdl-navigation__link,
.mdl-layout__header--transparent .mdl-layout-title { color: var(--text-primary) !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 cards expand responsively instead of any fixed MDL width */
.mdl-card { width: 100% !important; }
/* Prevent text clipping inside cards */
.mdl-card__title, .mdl-card__supporting-text, .mdl-card__actions {
  overflow: visible !important;
  white-space: normal !important;
}
.mdl-card__supporting-text { word-break: break-word; overflow-wrap: anywhere; }
/* Ensure cards expand responsively instead of any fixed MDL width */
.mdl-card { width: 100% !important; }

/* 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 { width: 100% !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;
}
.mdl-snackbar { z-index: 10000; }

/* ---------- 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;
  }
}

/* ---------- Extras: demo hero + wide card ---------- */
.gz-hero { min-height: 243px; height: 243px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0)); }
.gz-card-wide { width: 100%; max-width: 800px; margin: 16px auto; }
.gz-card-wide .mdl-card__title { color: #fff; min-height: 176px; background-size: cover; background-position: center; }
.gz-card-wide .mdl-card__menu { color: #fff; }
.gz-card-wide.welcome-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.gz-hero.welcome-hero {
  background-image: linear-gradient(180deg, rgba(27,28,31,0.2), rgba(27,28,31,0.85)), url('/app/img/GZN_1280.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: 100% 100%, 969px 243px;
}
.gz-feed-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.gz-feed-header h4 { margin:0; }
.gz-feed-pill { font-size:12px; text-transform:uppercase; background:rgba(255,255,255,0.12); padding:4px 10px; border-radius:999px; letter-spacing:0.08em; color:var(--text-primary); }
.gz-feed-meta { margin:8px 0 16px; font-size:13px; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.gz-feed-body p { margin: 0 0 12px; line-height: 1.5; }
.gz-feed-body ul { margin: 0 0 12px 20px; padding-left: 18px; }
.gz-feed-body li { margin-bottom: 6px; }

/* ---------- App/body helpers restored ---------- */
body.gz-body { background: var(--surface); color: var(--text-primary); }
.gz-app .mdl-layout__header { color: var(--text-primary); }

/* ---------- Dialog (polyfill) theme ---------- */
.mdl-dialog { background: var(--card-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
.mdl-dialog__title, .mdl-dialog__content, .mdl-dialog__actions { color: var(--text-primary) !important; }

/* ---------- Responsive cards & layout ---------- */
.gz-card { width: 100% !important; max-width: 800px; margin: 16px auto; }

/* Birthday row: keep on one line when possible */
.gz-bday { display:flex; gap:12px; flex-wrap: nowrap; }
.gz-bday select { flex:1 1 0; min-width: 0; }

@media (max-width: 480px) {
  .gz-bday { flex-wrap: wrap; }
}