/* ==========================================================
   ASTrade Global Inner-Pages Theme v1
   UI-only layer — preserves existing Django markup/functionality
   ========================================================== */

:root {
  --ast-bg: #060b10;
  --ast-bg-2: #0a1118;
  --ast-panel: #0d161f;
  --ast-panel-2: #111b25;
  --ast-panel-3: #15212c;
  --ast-text: #eef5f7;
  --ast-muted: #94a5b0;
  --ast-faint: #667781;
  --ast-teal: #39d4c3;
  --ast-cyan: #52d8f3;
  --ast-green: #4adea1;
  --ast-red: #ff7085;
  --ast-border: rgba(157, 185, 200, .14);
  --ast-border-strong: rgba(57, 212, 195, .30);
}

/* ---- Global workspace background ---- */
body {
  color: var(--ast-text) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(57,212,195,.08), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(82,216,243,.045), transparent 22%),
    #060b10 !important;
}

body::before {
  background:
    linear-gradient(rgba(102, 170, 190, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 170, 190, .035) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  opacity: 1 !important;
}

body::after { background: transparent !important; }

.app-shell::before,
.app-shell::after { opacity: .14 !important; }

/* ---- Every ordinary page ---- */
.page-shell {
  display: grid;
  gap: 14px !important;
  padding: 18px !important;
  background: transparent !important;
  color: var(--ast-text) !important;
}

.hero-banner {
  display: flex;
  align-items: flex-end !important;
  justify-content: space-between;
  gap: 18px !important;
  flex-wrap: wrap;
  padding: 26px 24px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(57,212,195,.10), transparent 28%),
    linear-gradient(180deg, rgba(16,27,37,.98), rgba(10,17,24,.98)) !important;
  border: 1px solid var(--ast-border) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.28) !important;
}

.hero-banner::before { display: none !important; }

.hero-banner-content h1 {
  color: #f3fafb !important;
  font-family: "Manrope", sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.055em !important;
  margin: 0 !important;
}

.hero-banner-content p {
  color: var(--ast-muted) !important;
  max-width: 820px !important;
  margin-top: 8px !important;
}

.hero-tag {
  background: rgba(57,212,195,.07) !important;
  border: 1px solid rgba(57,212,195,.20) !important;
  color: #72e6da !important;
  margin-bottom: 12px !important;
}

.hero-banner-actions {
  align-self: center !important;
}

/* ---- Buttons / controls ---- */
.btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 11px !important;
  font-weight: 800 !important;
}

.btn-primary {
  background: linear-gradient(135deg, #34d4c2, #44cce9) !important;
  color: #041015 !important;
  box-shadow: 0 14px 32px rgba(53,214,196,.16) !important;
  border: none !important;
}

.btn-primary:hover {
  box-shadow: 0 18px 38px rgba(53,214,196,.22) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255,255,255,.035) !important;
  color: #e8f1f3 !important;
  border: 1px solid var(--ast-border) !important;
}

/* ---- Panels / summary cards ---- */
.panel-card {
  background:
    linear-gradient(180deg, rgba(18,29,39,.98), rgba(11,18,25,.98)) !important;
  color: var(--ast-text) !important;
  border: 1px solid var(--ast-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.23) !important;
}

.panel-head { padding: 18px 20px 0 !important; }

.panel-head h3,
.table-shell-head h3,
.chart-panel-top h3 {
  color: #edf6f7 !important;
  font-family: "Manrope", sans-serif !important;
  letter-spacing: -.035em !important;
}

.panel-kicker {
  color: var(--ast-teal) !important;
}

.panel-body {
  padding: 16px !important;
}

.panel-main-text {
  color: #a9bac3 !important;
  padding: 10px !important;
}

/* summary grids used across Degree/Days/Pentagon/Red Ball/etc. */
.summary-grid,
.info-stat-grid,
.stats-grid {
  gap: 10px !important;
}

.summary-card,
.info-stat-card,
.stat-card {
  min-height: 82px;
  padding: 13px 15px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #eaf3f5 !important;
  box-shadow: none !important;
}

.summary-card span,
.info-stat-card span,
.stat-card span {
  color: #718490 !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.summary-card strong,
.info-stat-card strong,
.stat-card strong {
  color: #edf6f7 !important;
  font-size: 1rem !important;
}

/* ---- Status / inline notices ---- */
.inline-status,
.notification-success,
.panel-success,
.panel-danger {
  border-radius: 13px !important;
}

.inline-status,
.panel-success {
  background: rgba(57,212,195,.055) !important;
  border: 1px solid rgba(57,212,195,.14) !important;
  color: #a8e4dd !important;
}

.panel-danger {
  background: rgba(255,112,133,.055) !important;
  border: 1px solid rgba(255,112,133,.16) !important;
  color: #ffacb9 !important;
}

/* ---- Inputs / selectors ---- */
.toolbar-input,
.toolbar-select,
.form-input,
.calendar-filter-select {
  min-height: 44px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: #091119 !important;
  color: #e9f1f3 !important;
  box-shadow: none !important;
}

.toolbar-input:focus,
.toolbar-select:focus,
.form-input:focus,
.calendar-filter-select:focus {
  border-color: rgba(57,212,195,.45) !important;
  box-shadow: 0 0 0 3px rgba(57,212,195,.10) !important;
}

.field-wrap label,
.year-search-wrap label,
.calendar-filter-field label {
  color: #7e919c !important;
}

/* ---- Tables ---- */
.table-shell,
.table-shell-head,
.custom-table-wrap,
.moon-mars-table-panel,
.broadcast-results-table-wrap {
  background: transparent !important;
  border-color: var(--ast-border) !important;
}

.table-shell {
  overflow: hidden !important;
  border: 1px solid var(--ast-border) !important;
  border-radius: 17px !important;
  box-shadow: none !important;
}

.table-shell-head {
  padding: 17px 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent) !important;
}

.table-wrap {
  overflow-x: auto;
}

.reversal-table,
.custom-data-table,
.moon-table,
.broadcast-results-table {
  width: 100% !important;
  color: #dce7ea !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.reversal-table thead th,
.custom-data-table thead th,
.moon-table th,
.broadcast-results-table th {
  background: #0b151e !important;
  color: #7fded5 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  font-size: .66rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  padding: 13px 14px !important;
}

.reversal-table tbody td,
.custom-data-table tbody td,
.moon-table td,
.broadcast-results-table td {
  color: #c7d5da !important;
  background: #0d171f !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding: 13px 14px !important;
}

.reversal-table tbody tr:nth-child(even) td,
.custom-data-table tbody tr:nth-child(even) td {
  background: #0b141c !important;
}

.reversal-table tbody tr:hover td,
.custom-data-table tbody tr:hover td {
  background: rgba(57,212,195,.045) !important;
}

.empty-cell,
.table-empty-state {
  color: #70828c !important;
}

/* ---- Calendar ---- */
.calendar-panel {
  background: linear-gradient(180deg, rgba(13,22,31,.98), rgba(9,16,23,.98)) !important;
  border: 1px solid var(--ast-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.23) !important;
}

.calendar-panel-head {
  padding: 18px !important;
}

.calendar-legend-item {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #d9e4e8 !important;
}

.fc {
  --fc-border-color: rgba(255,255,255,.07) !important;
  --fc-page-bg-color: transparent !important;
  --fc-neutral-bg-color: #0c151d !important;
  --fc-today-bg-color: rgba(57,212,195,.08) !important;
  color: #dce7ea !important;
}

.fc .fc-toolbar-title { color:#eef5f7 !important; }

.fc .fc-button {
  background:#111d27 !important;
  color:#dbe7eb !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
}

.fc .fc-button:hover {
  background:#172631 !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background:linear-gradient(135deg,#34d4c2,#44cce9) !important;
  color:#041015 !important;
  border-color:transparent !important;
}

.fc .fc-col-header-cell {
  background:#0b151e !important;
  color:#91a6b0 !important;
}

.fc .fc-daygrid-day-frame {
  background:#0c151d !important;
}

.fc .fc-daygrid-day-frame:hover {
  background:#101d27 !important;
}

.fc .fc-daygrid-day-number {
  color:#dce8eb !important;
}

/* ---- Notification pages ---- */
.notification-card {
  background: linear-gradient(180deg, rgba(17,28,38,.98), rgba(10,18,25,.98)) !important;
  border:1px solid var(--ast-border) !important;
  color:#dfeaec !important;
  border-radius:15px !important;
}

.notification-title { color:#edf6f7 !important; }
.notification-subtitle { color:#82959f !important; }

/* ---- Searchable strategy chips ---- */
.year-btn,
.strategy-pill,
.status-pill {
  background:rgba(255,255,255,.025) !important;
  color:#a9bbc4 !important;
  border-color:rgba(255,255,255,.08) !important;
}

.year-btn.active,
.strategy-pill.active {
  color:#041015 !important;
  background:linear-gradient(135deg,#35d4c2,#44cee8) !important;
  border-color:transparent !important;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .page-shell { padding: 12px !important; }
  .hero-banner { padding: 20px !important; }
}

@media (max-width: 620px) {
  .page-shell { padding: 9px !important; }
  .hero-banner-content h1 { font-size: 2rem !important; }
  .summary-grid,
  .info-stat-grid,
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 430px) {
  .summary-grid,
  .info-stat-grid,
  .stats-grid { grid-template-columns: 1fr !important; }
}