/* admin-modern.css
   A modern, accessible theme for the admin panel.
   Functional structure stays the same; only visuals are enhanced.
*/

:root {
  /* Edmonton Oilers brand palette */
  --oilers-navy: #041E42;
  --oilers-orange: #FF4C00;
  --bg: var(--oilers-navy);
  --bg-elev-1: #0a2a5a; /* slightly lighter navy */
  --bg-elev-2: #0e326b; /* elevated surface */
  --card: #0a2554;
  --muted: #b8c6e3;
  --text: #f1f5ff;
  --heading: #ffffff;
  --primary: var(--oilers-orange);
  --primary-600: #e04400;
  --primary-700: #c23a00;
  --success: #2ecc71;
  --warning: #f1c40f;
  --danger: #ff6b6b;
  --border: #23406e;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --radius: 14px;
}

/* Base */
.modern-body {
  background: radial-gradient(1200px 700px at 10% -10%, rgba(255,76,0,0.12), transparent 60%),
              radial-gradient(1000px 600px at 110% -10%, rgba(4,30,66,0.35), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navbar */
.modern-navbar {
  background: linear-gradient(145deg, rgba(4,30,66,0.92), rgba(10,42,90,0.92));
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--primary);
}
.modern-navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: 0.3px;
}
.modern-navbar .navbar-brand i { color: var(--primary); }

/* Container spacing */
.container { max-width: 1080px; }
.container.mt-4 { margin-top: 32px !important; }

/* Alerts */
.alert {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: var(--text);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.alert-success { border-left: 4px solid var(--success); }
.alert-danger { border-left: 4px solid var(--danger); }

/* Buttons */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: transform .06s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border-color: var(--primary-700);
  box-shadow: 0 6px 16px rgba(91,140,255,0.32);
}
.btn-success { box-shadow: 0 6px 16px rgba(46,204,113,0.28); }
.btn-danger { box-shadow: 0 6px 16px rgba(255,107,107,0.28); }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

/* Cards / Feed boxes */
.feed-box {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)), var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 18px !important;
}
.feed-box + .feed-box { margin-top: 24px; }
.feed-box h3 {
  color: var(--heading);
  font-weight: 700;
}

/* Forms */
.form-control, .form-select, select.form-control {
  background-color: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}
.form-control:focus, .form-select:focus, select.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(91,140,255,0.25);
  border-color: var(--primary);
}
.form-label { color: var(--muted); font-weight: 600; }

/* Headings */
h2, h3, h5, h6 { color: var(--heading); }

/* Nonprofit section */
.nonprofit-section { margin-top: 16px; }
.nonprofit-box {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}

/* Iframe preview */
.feed-preview iframe {
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  background: #fff !important; /* improved readability */
}

/* Links */
a { color: var(--primary); text-decoration-color: rgba(91,140,255,0.4); }
a:hover { color: #8fb0ff; }

/* Section headings */
.system-settings, #addFeedForm, .feed-box .edit-feed-form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  background: linear-gradient(180deg, rgba(17,26,46,0.75), rgba(15,24,44,0.75));
  box-shadow: var(--shadow);
}

/* Default hidden states preserved from original implementation */
#addFeedForm { display: none; }
.edit-feed-form { display: none; margin-top: 20px; }
#addNonprofitForm { display: none; }
.edit-nonprofit-form { display: none; }

/* Toggle buttons inside alerts */
.alert button.btn-outline-info {
  border-color: var(--primary);
  color: var(--primary);
}
.alert button.btn-outline-info:hover { background: var(--primary); color: #fff; }

/* Small utility spacing */
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Preformatted output */
pre.bg-light {
  background: #0a0f1d !important;
  color: #c7d2f8 !important;
  border-color: var(--border) !important;
}

/* Login card */
.login-card {
  max-width: 420px;
  width: 100%;
  background: linear-gradient(180deg, rgba(10,37,84,0.9), rgba(10,37,84,0.75));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.login-title { color: var(--heading); font-weight: 800; }
.login-disclaimer { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

/* Tables */
.table {
  color: var(--text);
}
.table thead th {
  background: rgba(255,255,255,0.04);
  border-bottom-color: var(--border);
}
.table td, .table th {
  border-color: var(--border) !important;
}
.table-hover tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
.table-bordered {
  border-color: var(--border) !important;
}