/**
 * EDUFORMIUM TIMETABLE GENERATOR
 * Component Styles — Navy/Teal palette, white backgrounds, no hard shadows
 */

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 58px; z-index: var(--z-sticky);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center;
  padding: 0 24px;
}
.app-header-content {
  display: flex; align-items: center;
  justify-content: space-between;
  width: 100%; max-width: 1600px; margin: 0 auto;
}

/* ── Logo ── */
.app-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none !important; flex-shrink: 0;
}
.app-logo-img {
  width: 34px; height: 34px;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--color-border);
}
.app-logo-text  { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name     { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.brand-sub      { font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-muted); }

/* ── Header Nav ── */
.app-header-nav { display: flex; align-items: center; gap: 24px; }
.app-header-nav a {
  font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.app-header-nav a:hover,
.app-header-nav a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  text-decoration: none;
}

.app-header-actions { display: flex; align-items: center; gap: 8px; }
.app-header-actions button {
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.app-header-actions button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-faint);
}
.app-header-actions button svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.app-sidebar {
  position: fixed; left: 0; top: 58px;
  width: 240px; height: calc(100vh - 58px);
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  overflow-y: auto; overflow-x: hidden;
  z-index: var(--z-fixed);
  display: flex; flex-direction: column;
}
.app-sidebar-header {
  padding: 16px 16px 8px;
}
.app-sidebar-nav {
  display: flex; flex-direction: column;
  padding: 4px 10px 16px;
  flex: 1;
}
.app-sidebar-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 14px 8px 5px;
  pointer-events: none; user-select: none;
}
.app-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  margin-bottom: 1px;
}
.app-sidebar-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.app-sidebar-item:hover {
  background: var(--color-surface-2);
  color: var(--color-primary);
  text-decoration: none;
}
.app-sidebar-item.active {
  background: var(--color-primary-faint);
  color: var(--color-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════ */
.app-main {
  margin-left: 240px;
  margin-top: 58px;
  padding: 28px 32px;
  min-height: calc(100vh - 58px);
  background: var(--color-bg);
}

/* ══════════════════════════════════════════
   NOTIFICATIONS
══════════════════════════════════════════ */
#notification-container {
  position: fixed; top: 16px; right: 16px;
  z-index: var(--z-notification);
  display: flex; flex-direction: column;
  gap: 8px; pointer-events: none;
}

/* ══════════════════════════════════════════
   DARK MODE OVERRIDES
══════════════════════════════════════════ */
[data-theme="dark"] .app-header  { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .app-sidebar { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .app-main    { background: #0f172a; }

[data-theme="dark"] .card        { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { border-color: #2d3f55; }

[data-theme="dark"] .stat-card   { background: #1e293b; border-color: #2d3f55; }

[data-theme="dark"] .modal       { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer{ border-color: #2d3f55; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65); }

[data-theme="dark"] .timetable td           { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .timetable th,
[data-theme="dark"] .timetable td:first-child,
[data-theme="dark"] .timetable thead        { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .timetable tbody tr:hover { background: rgba(26,58,107,.2); }

[data-theme="dark"] .app-sidebar-item:hover  { background: rgba(26,58,107,.25); }
[data-theme="dark"] .app-sidebar-item.active { background: rgba(26,58,107,.35); }

[data-theme="dark"] .notification            { background: #1e293b; border-color: #2d3f55; color: #f1f5f9; }
[data-theme="dark"] .btn-secondary           { background: #1e293b; border-color: #2d3f55; color: #4f86c6; }
[data-theme="dark"] .btn-ghost:hover         { background: #263548; }
[data-theme="dark"] .dropdown-menu          { background: #1e293b; border-color: #2d3f55; }
[data-theme="dark"] .dropdown-item:hover    { background: rgba(13,148,136,.12); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-sidebar    { display: none; }
  .app-main       { margin-left: 0; padding: 16px; }
  .app-header-nav { display: none; }
  .stats-grid     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .stats-grid   { grid-template-columns: 1fr; }
  .page-header  { flex-direction: column; align-items: flex-start; }
  .modal        { width: 95%; }
}