/* ── APP SHELL ───────────────────────────────────────────────── */
.app         { display: none; height: 100vh; overflow: hidden; }
.app.visible { display: flex; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar);
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 30;
  transition: transform 0.25s;
}

.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 29;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 30;
  }
  .sidebar.open     { transform: translateX(0); }
  .sb-overlay.open  { display: block; }
}

/* ── MAIN ────────────────────────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s6);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: var(--s3);
}

.topbar-left  { display: flex; align-items: center; gap: var(--s3); }
.topbar-right { display: flex; gap: var(--s2); align-items: center; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s2);
  border-radius: var(--r-md);
  color: var(--muted);
}
.menu-toggle:hover { background: var(--bg); }
.menu-toggle i     { font-size: 22px; }

@media (max-width: 768px) {
  .menu-toggle { display: flex; align-items: center; }
  .topbar      { padding: 0 var(--s4); }
}

/* ── PAGES ───────────────────────────────────────────────────── */
.page        { display: none; }
.page.active { display: block; }
.pad         { padding: var(--s6); }

@media (max-width: 768px) {
  .pad { padding: var(--s4); }
}

/* ── DASHBOARD LAYOUT ────────────────────────────────────────── */
.quick-actions {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s6);
}

@media (max-width: 900px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } }

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

@media (max-width: 768px) { .dash-row { grid-template-columns: 1fr; } }

/* ── CALENDAR LAYOUT ─────────────────────────────────────────── */
.cal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s4);
}

@media (max-width: 600px) {
  .cal-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
}

/* ── KANBAN LAYOUT ───────────────────────────────────────────── */
.kanban-filters {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
  align-items: center;
}

.kanban-wrap {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s4);
  align-items: flex-start;
}

/* ── MODAL OVERLAY ───────────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s6) var(--s4);
  overflow-y: auto;
}
.modal-bg.open { display: flex; }

/* ── FORM GRID ───────────────────────────────────────────────── */
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

@media (max-width: 520px) { .fg { grid-template-columns: 1fr; } }
.fg .full { grid-column: 1 / -1; }

/* ── RESPONSIVE OVERRIDES ────────────────────────────────────── */
@media (max-width: 600px) {
  .modal     { padding: var(--s4); border-radius: var(--r-lg); }
  .modal-bg  { padding: var(--s3); }
}

@media (max-width: 480px) {
  .modal-ft          { flex-direction: column-reverse; }
  .modal-ft .btn     { width: 100%; justify-content: center; }
  .btn span          { display: none; }
  .btn               { padding: var(--s2) var(--s3); }
  .qa-btn            { flex: 1; justify-content: center; }
  .k-col             { flex: 0 0 240px; }
  .kanban-filters input { width: 100%; flex: 1; }
}