/* 
  ==========================================================================================
  Responsive Calendar UI with Theme Support, Custom Styling, and Interactive Components
  ==========================================================================================
  This stylesheet implements a dynamic light/dark theme interface for a calendar-based layout
  with a responsive grid system. It includes:

  - Theme Variables:
    Defined in :root and [data-theme="dark"] to handle background, text, glow effects, etc.

  - Base Body Styling:
    Applies background and text color with font and smooth transitions.

  - UI Components:
    .current-section, .action-box, .calendar-box are styled containers with glow effects.
    Buttons have animated hover states to enhance interactivity.

  - Calendar Styling:
    #inline-calendar and .td-calendar classes format the calendar, header, and day elements.
    Active and hover states are visually distinct for better usability.

  - Layout:
    A grid-based layout is used via .parent and its child .div1, .div2, .div3 areas.
    Adjusts to a vertical stack layout on small screens (mobile responsive).

  - Animations & Effects:
    Uses box-shadow glow based on theme, transition animations for UI elements.

  This CSS is designed to be both functional and visually modern across both light and dark modes.
*/

:root {
  --nav-bg: #ffffff;
  --text-color: #000000;
  --glow: rgba(0, 140, 255, 0.5);
  --box-bg: #f8f9fa;
}

[data-theme="dark"] {
  --nav-bg: #1e1e1e;
  --text-color: #ffffff;
  --glow: rgba(0, 200, 255, 0.7);
  --box-bg: #2c2c2c;
}

body {
  background-color: var(--nav-bg);
  color: var(--text-color);
  font-family: 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.current-section,
.action-box,
.calendar-box {
  background-color: var(--box-bg);
  color: var(--text-color);
  border-radius: 10px;
  box-shadow: 0 0 15px var(--glow);
  transition: background-color 0.3s ease, color 0.3s ease;
}

button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-weight: 500;
}

button:hover {
  transform: scale(1.03);
  box-shadow: 0 0 8px var(--glow);
}

#inline-calendar {
  width: 100%;
  max-width: 100%;
  background-color: var(--box-bg);
  color: var(--text-color);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 12px var(--glow);
}

.td-calendar .td-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background-color: var(--nav-bg);
  border-radius: 8px;
  margin-bottom: 10px;
  color: var(--text-color);
}

.td-calendar .td-header button {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.25rem;
}

.td-calendar .td-header button:hover {
  color: var(--glow);
  cursor: pointer;
}

.td-calendar .td-days td,
.td-calendar .td-days th {
  color: var(--text-color);
}

.td-calendar .td-day.active,
.td-calendar .td-day:hover {
  background-color: var(--glow);
  color: #fff !important;
  border-radius: 6px;
  cursor: pointer;
}

footer {
  color: var(--text-color);
}

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 6; }
.div2 { grid-area: 2 / 1 / 5 / 4; }
.div3 { grid-area: 2 / 4 / 5 / 6; }

@media (max-width: 768px) {
  .parent {
    display: block;
  }
  .div2,
  .div3 {
    margin-bottom: 20px;
  }
}
/* ===============================
   STATUS CARD – BASE
================================ */
.status-card {
  width: 100%;
}

.status-card .form-control {
  font-size: 0.95rem;
}

/* ===============================
   MOBILE (≤576px)
================================ */
@media (max-width: 576px) {
  .status-card {
    padding: 1rem !important;
    border-radius: 10px;
  }

  /* Header stacks nicely */
  .status-header {
    gap: 0.75rem;
  }

  .status-header h4 {
    font-size: 1.05rem;
    font-weight: 600;
  }

  /* Bigger tap area for button */
  .status-reload-btn {
    padding: 6px 10px;
  }

  .status-reload-btn i {
    font-size: 1.1rem;
  }

  /* Compact form spacing */
  .status-card .mb-3 {
    margin-bottom: 0.75rem !important;
  }

  .status-card .form-label {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }

  .status-card .form-control {
    font-size: 0.9rem;
    padding: 8px 10px;
  }
}

/* ===============================
   TABLET (≤768px)
================================ */
@media (max-width: 768px) {
  .status-card {
    padding: 1.25rem;
  }

  .status-header h4 {
    font-size: 1.15rem;
  }
}

/* ===============================
   LARGE SCREENS (≥1200px)
================================ */
@media (min-width: 1200px) {
  .status-card {
    padding: 1.75rem;
  }
}