/* =========================================================
   THEME VARIABLES
   Global colors, spacing, radius, typography
   ========================================================= */

:root{

  /* Backgrounds */
  --bg-main:#0f172a;
  --bg-surface:#1e293b;

  /* Text */
  --text-primary:#e2e8f0;
  --text-muted:#94a3b8;

  /* Accent */
  --accent:#3b82f6;

  /* Strategy Colors */
  --buy-bg:#22c55e22;
  --buy-text:#4ade80;

  --sell-bg:#ef444422;
  --sell-text:#f87171;

  --calendar-bg:#a855f722;
  --calendar-text:#c084fc;

  --credit-bg:#f59e0b22;
  --credit-text:#fbbf24;

  /* UI */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;

  --font-main:system-ui;

}


/* =========================================================
   BASE / RESET
   ========================================================= */

body{
  background:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--font-main);
}


/* =========================================================
   HEADER
   Top page layout
   ========================================================= */

.header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
}

/* left section */
.header-left{
justify-self:start;
}

/* center month display */
.header-center{
justify-self:center;
font-weight:600;
color:var(--text-muted);
}

/* right section */
.header-right{
justify-self:end;
}

/* =========================================================
   DASHBOARD CARDS
   Shared container styles
   ========================================================= */

.dashboard-card{
  background:var(--bg-surface);
  border:none;
  border-radius:var(--radius-lg);
}


/* =========================================================
   WEEK STRATEGY CARDS
   ========================================================= */

.week-card{
  background:var(--bg-surface);
  border-radius:var(--radius-md);
  padding:16px;
  height:100%;
}


/* Highlight active week */

.current-week{
  border:2px solid var(--accent);
}


/* =========================================================
   STRATEGY ITEMS
   ========================================================= */

.strategy{
  padding:6px 10px;
  border-radius:var(--radius-sm);
  margin-bottom:6px;
  font-size:13px;
}


/* Option Buying */

.buy{
  background:var(--buy-bg);
  color:var(--buy-text);
}


/* Option Selling */

.sell{
  background:var(--sell-bg);
  color:var(--sell-text);
}


/* Calendar Strategies */

.calendar{
  background:var(--calendar-bg);
  color:var(--calendar-text);
}


/* Credit Strategies */

.credit{
  background:var(--credit-bg);
  color:var(--credit-text);
}


/* =========================================================
   CALENDAR LAYOUT
   ========================================================= */

/* calendar grid */

#calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  font-size:12px;
}


/* weekday labels */

.calendar-header{
  text-align:center;
  font-weight:700;
  color:var(--text-muted);
  padding-bottom:4px;
  opacity: 0.5;
}


/* calendar day cell */

.calendar-day{
  text-align:center;
  padding:3px 6px;
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}


/* today highlight */

.today{
  background:var(--accent);
  color:white;
  font-weight:600;
}


/* empty placeholder cells */

.calendar-empty{
  visibility:hidden;
}