/* ============================================================
   ASTrade UI Polish v2
   Goal: one consistent dark ASTrade visual system.
   UI-only overrides; preserves Django/backend functionality.
   ============================================================ */

:root{
  --ast-bg:#050a0f;
  --ast-bg-2:#081119;
  --ast-surface:#0c151d;
  --ast-surface-2:#101c25;
  --ast-surface-3:#13212b;
  --ast-text:#f1f7f8;
  --ast-text-2:#d4e0e4;
  --ast-muted:#91a3ad;
  --ast-faint:#667a85;
  --ast-line:rgba(153,185,198,.14);
  --ast-line-strong:rgba(55,214,198,.30);
  --ast-teal:#36d5c3;
  --ast-cyan:#50d7f3;
  --ast-green:#47dca0;
  --ast-red:#ff7286;
  --ast-yellow:#e8c968;
  --ast-radius:18px;
}

/* ---------- HARD REMOVE THE OLD CREAM CANVAS ---------- */
html,
body{
  background:#050a0f !important;
  color:var(--ast-text) !important;
}

body{
  background:
    radial-gradient(circle at 12% 8%,rgba(54,213,195,.075),transparent 23%),
    radial-gradient(circle at 92% 12%,rgba(80,215,243,.045),transparent 20%),
    linear-gradient(rgba(84,154,177,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,154,177,.028) 1px,transparent 1px),
    #050a0f !important;
  background-size:auto,auto,56px 56px,56px 56px,auto !important;
}

body::before{
  background:
    linear-gradient(rgba(84,154,177,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,154,177,.028) 1px,transparent 1px) !important;
  background-size:56px 56px !important;
  opacity:1 !important;
}

body::after{
  background:radial-gradient(circle at center,transparent 52%,rgba(0,0,0,.30) 100%) !important;
}

/* Remove the pale cream outer container on every inner page. */
.main-wrap{
  background:transparent !important;
  padding:8px 0 18px !important;
}

.main-wrap > .container{
  min-height:calc(100vh - 100px) !important;
  padding:14px !important;
  border:1px solid rgba(92,145,159,.16) !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 100% 0,rgba(54,213,195,.045),transparent 24%),
    linear-gradient(180deg,rgba(10,18,25,.97),rgba(6,12,17,.98)) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.28) !important;
}

/* ---------- HEADER: ONE ASTRADE ONLY ---------- */
.site-header{
  background:rgba(5,10,15,.90) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.header-inner,
.site-header .header-inner{
  min-height:72px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(5,10,15,.90) !important;
  box-shadow:none !important;
}

/* Kill both older pseudo-branding systems. */
.brand-mark::before,
.brand-mark::after,
.site-header .brand-mark::before,
.site-header .brand-mark::after{
  content:none !important;
  display:none !important;
}

.brand-logo{
  display:none !important;
  visibility:hidden !important;
}

.brand-mark,
.site-header .brand-mark{
  width:auto !important;
  min-width:145px !important;
  height:auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  border-radius:0 !important;
}

.brand-mark .ast-brand-name,
.ast-brand-name{
  display:block !important;
  color:#f3f8f9 !important;
  font-family:"Manrope","Inter",sans-serif !important;
  font-size:1.30rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.055em !important;
}

.brand-mark .ast-brand-tagline,
.ast-brand-tagline{
  display:block !important;
  margin-top:6px !important;
  color:#627681 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  line-height:1 !important;
}

/* Header navigation never becomes cream/white on tap. */
.site-nav .nav-item,
.site-header .nav-item{
  background:transparent !important;
  color:#9fb0b9 !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease !important;
}

.site-nav .nav-item:hover,
.site-nav .nav-item:focus,
.site-nav .nav-item:focus-visible,
.site-nav .nav-item:active,
.site-header .nav-item:hover,
.site-header .nav-item:focus,
.site-header .nav-item:focus-visible,
.site-header .nav-item:active{
  background:#101b24 !important;
  color:#f1f8f9 !important;
  border-color:rgba(120,180,194,.12) !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none !important;
}

.site-nav .nav-item-cta,
.site-header .nav-item.nav-item-cta{
  background:linear-gradient(135deg,#2dc9b6,#46cee9) !important;
  color:#061114 !important;
  border-color:transparent !important;
}

.site-nav .nav-item-cta:hover,
.site-nav .nav-item-cta:focus,
.site-nav .nav-item-cta:active,
.site-header .nav-item.nav-item-cta:hover,
.site-header .nav-item.nav-item-cta:focus,
.site-header .nav-item.nav-item-cta:active{
  background:linear-gradient(135deg,#36d8c4,#50d7f3) !important;
  color:#061114 !important;
  border-color:transparent !important;
}

/* Current-page active state: dark, not cream. */
.site-nav .nav-item.active,
.site-nav .nav-item[aria-current="page"]{
  background:#111e28 !important;
  color:#f3fbfc !important;
  border-color:rgba(54,213,195,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(54,213,195,.035) !important;
}

/* ---------- TYPOGRAPHY / PAGE SHELL ---------- */
.page-shell{
  display:grid !important;
  gap:14px !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--ast-text) !important;
}

/* Old pale hero/header cards become dark. */
.hero-banner,
.page-title,
.page-header,
.calendar-header,
.calendar-page-header{
  background:
    radial-gradient(circle at 92% 10%,rgba(54,213,195,.08),transparent 30%),
    linear-gradient(180deg,#101c25,#0a141c) !important;
  color:var(--ast-text) !important;
  border:1px solid var(--ast-line) !important;
  border-radius:20px !important;
  box-shadow:0 20px 55px rgba(0,0,0,.24) !important;
}

h1,h2,h3,h4,h5,h6,
.hero-banner-content h1,
.page-title h1{
  color:#f1f7f8 !important;
  text-shadow:none !important;
}

/* ---------- FORMS: NO WHITE/CREAM INPUTS ---------- */
input,
select,
textarea,
.form-control,
.form-input,
.toolbar-input,
.toolbar-select,
.calendar-filter-select{
  background:#081119 !important;
  color:#e9f4f6 !important;
  border:1px solid rgba(150,184,198,.14) !important;
  box-shadow:none !important;
}

input::placeholder,
textarea::placeholder{
  color:#657982 !important;
}

input:hover,
select:hover,
textarea:hover{
  border-color:rgba(150,184,198,.24) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.toolbar-input:focus,
.toolbar-select:focus{
  background:#0a141d !important;
  color:#f4fbfc !important;
  border-color:rgba(54,213,195,.42) !important;
  box-shadow:0 0 0 3px rgba(54,213,195,.09) !important;
  outline:none !important;
}

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

/* ---------- ALL COMMON BUTTONS ---------- */
button,
.btn,
.button,
input[type="button"],
input[type="submit"]{
  background:#111d27 !important;
  color:#eaf3f5 !important;
  border:1px solid rgba(150,184,198,.13) !important;
  box-shadow:none !important;
}

button:hover,
button:focus,
button:focus-visible,
button:active,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.button:hover,
.button:focus,
.button:active{
  background:#172631 !important;
  color:#f5fbfc !important;
  border-color:rgba(54,213,195,.22) !important;
  box-shadow:none !important;
  outline:none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary{
  background:linear-gradient(135deg,#32d2bf,#49d2ee) !important;
  color:#041014 !important;
  border-color:transparent !important;
  box-shadow:0 12px 30px rgba(54,213,195,.13) !important;
}

/* Prevent white flash on touch/click. */
*{
  -webkit-tap-highlight-color:transparent;
}

/* ---------- CONTENT PANELS ---------- */
.card,
.panel,
.panel-card,
.content-card,
.dashboard-card,
.widget,
.form-card,
.calendar-panel,
.table-shell,
.moon-mars-table-panel,
.broadcast-results-table-wrap{
  background:linear-gradient(180deg,rgba(14,24,33,.98),rgba(9,16,23,.98)) !important;
  color:var(--ast-text) !important;
  border:1px solid var(--ast-line) !important;
  border-radius:18px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.20) !important;
}

.card:hover,
.panel:hover,
.panel-card:hover,
.dashboard-card:hover,
.content-card:hover,
.widget:hover,
.form-card:hover{
  border-color:rgba(120,180,194,.20) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.25) !important;
  transform:none !important;
}

/* summary/info cards */
.summary-card,
.info-stat-card,
.stat-card{
  background:linear-gradient(180deg,#111e27,#0d1820) !important;
  border:1px solid rgba(150,184,198,.10) !important;
  color:#eaf4f6 !important;
}

.summary-card span,
.info-stat-card span,
.stat-card span{
  color:#758a95 !important;
}

.summary-card strong,
.info-stat-card strong,
.stat-card strong{
  color:#eef7f8 !important;
}

/* success/info notices */
.inline-status,
.notification-success,
.panel-success{
  background:rgba(54,213,195,.055) !important;
  color:#a9e8e0 !important;
  border:1px solid rgba(54,213,195,.16) !important;
}

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

/* ---------- TABLES: KEEP EVERYTHING DARK ---------- */
table,
.reversal-table,
.custom-data-table,
.moon-table,
.broadcast-results-table{
  background:#0b151d !important;
  color:#d7e3e7 !important;
  border:1px solid rgba(150,184,198,.10) !important;
  box-shadow:none !important;
}

thead,
th,
.reversal-table thead th,
.custom-data-table thead th,
.moon-table th,
.broadcast-results-table th{
  background:#0a141c !important;
  color:#72ddd4 !important;
  border-color:rgba(150,184,198,.09) !important;
}

td,
.reversal-table tbody td,
.custom-data-table tbody td,
.moon-table td,
.broadcast-results-table td{
  background:#0c171f !important;
  color:#cad8dd !important;
  border-color:rgba(150,184,198,.07) !important;
}

tbody tr:nth-child(even) td{
  background:#0a141c !important;
}

tbody tr:hover td{
  background:#101e27 !important;
  color:#eff7f8 !important;
}

/* Kill any pale row selected/hover state from old theme. */
tr.selected td,
tr.active td,
tr:hover td,
td.selected,
td.active{
  background:#101e27 !important;
  color:#eff7f8 !important;
}

/* ---------- CALENDAR LEGEND / EVENTS ---------- */
.calendar-legend,
.calendar-legend-item{
  background:#0b151d !important;
  color:#dce8eb !important;
  border:1px solid rgba(150,184,198,.10) !important;
}

.calendar-legend-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:34px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  font-size:.72rem !important;
  font-weight:750 !important;
}

/* Make calendar event labels legible and compact. */
.calendar-event,
.fc-event{
  color:#061114 !important;
  border-radius:7px !important;
  font-size:.68rem !important;
  font-weight:800 !important;
  text-shadow:none !important;
  padding:3px 5px !important;
}

/* FullCalendar dark surface. */
.fc{
  --fc-border-color:rgba(150,184,198,.09) !important;
  --fc-page-bg-color:transparent !important;
  --fc-neutral-bg-color:#0b151d !important;
  --fc-list-event-hover-bg-color:#111e27 !important;
  --fc-today-bg-color:rgba(54,213,195,.07) !important;
  color:#dbe7ea !important;
}

.fc .fc-scrollgrid,
.fc .fc-daygrid-day,
.fc .fc-timegrid-slot{
  background:#0b151d !important;
}

.fc .fc-col-header-cell,
.fc .fc-daygrid-day-top{
  background:#0a141c !important;
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion,
.fc .fc-toolbar-title{
  color:#eaf4f6 !important;
}

.fc .fc-button{
  background:#111d27 !important;
  color:#eaf3f5 !important;
  border:1px solid rgba(150,184,198,.10) !important;
  border-radius:9px !important;
}

.fc .fc-button:hover,
.fc .fc-button:focus{
  background:#172631 !important;
  color:#fff !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{
  background:linear-gradient(135deg,#32d2bf,#49d2ee) !important;
  color:#041014 !important;
}

/* ---------- NOTIFICATIONS ---------- */
.notification-dropdown,
.notification-modal-card{
  background:linear-gradient(180deg,#091822,#06121a) !important;
  border:1px solid rgba(150,184,198,.15) !important;
}

.notification-dropdown-item:hover,
.notification-modal-item:hover{
  background:#101f29 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .main-wrap > .container{padding:10px !important;}
}

@media (max-width:780px){
  .main-wrap > .container{
    padding:8px !important;
    border-radius:14px !important;
  }
  .header-inner{
    padding:10px 12px !important;
  }
}

/* ---------- CALENDAR SHORT LABELS ----------
   If your calendar template contains these labels, keep the
   symbol + short name together:
   DD = Dark Day
   LD = Light Day
   PG = Pentagon
   RB = Red Ball
   ID = Intra Day
   TB = Top/Bottom
   FL = Flower
   DDG = Degree Date
   This CSS styles the compact badges consistently.
*/
.event-short-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  background:#111d27 !important;
  color:#dce8eb !important;
  border:1px solid rgba(150,184,198,.10) !important;
  font-size:.67rem !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.event-short-symbol{
  display:inline-flex !important;
  width:7px !important;
  height:7px !important;
  border-radius:999px !important;
  background:var(--ast-teal) !important;
}