/* app/static/css/base.css
 * Layout foundation, reset, and typography for the Chepeh web app.
 * Responsive breakpoints:
 *   ≥ 1024px  desktop   — expanded sidebar (256 px), collapsible to 80 px
 *   768–1023px tablet   — sidebar starts collapsed (80 px), can be expanded
 *   < 768px   mobile    — hidden off-canvas drawer + fixed top header bar
 */

/* ── CSS Reset & Base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Application Shell ────────────────────────────────────────────────────── */
.chepeh-app-shell {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   Two states (via class on .chepeh-app-shell):
     (default)        → expanded  256 px, icons + labels
     .nav-collapsed   → collapsed  80 px, icons only
   Mobile (<768 px):
     .nav-open        → off-canvas drawer slides in; backdrop shown
   ══════════════════════════════════════════════════════════════════════════ */

.chepeh-nav {
  width: var(--chepeh-nav-expanded-width);    /* 256 px */
  min-height: 100vh;
  background-color: var(--md-sys-color-surface);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--chepeh-space-sm) 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  overflow: hidden;
  box-shadow: var(--chepeh-elevation-1);
  transition: width 0.25s cubic-bezier(.4, 0, .2, 1);
}

/* ── Collapsed rail (icon-only) ─────────────────────────────────────────── */
.nav-collapsed .chepeh-nav {
  width: var(--chepeh-nav-width);             /* 80 px */
}

/* ── Panel toggle button (Claude-style edge toggle) ─────────────────────── */
.chepeh-nav__toggle {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  z-index: 201;
  box-shadow: var(--chepeh-elevation-2);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.chepeh-nav__toggle:hover {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--chepeh-elevation-2);
}

.chepeh-nav__toggle-icon {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
}

/* Flip arrow when collapsed */
.nav-collapsed .chepeh-nav__toggle-icon {
  transform: rotate(180deg);
}

/* ── Logo row ────────────────────────────────────────────────────────────── */
.chepeh-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--chepeh-space-sm);
  padding: var(--chepeh-space-sm) var(--chepeh-space-md);
  margin-bottom: var(--chepeh-space-xs);
  text-decoration: none;
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
}

.nav-collapsed .chepeh-nav__logo {
  justify-content: center;
  padding: var(--chepeh-space-sm);
}

.chepeh-nav__logo .chepeh-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--md-sys-shape-corner-medium);
  flex-shrink: 0;
}

.chepeh-nav__brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}

.nav-collapsed .chepeh-nav__brand {
  opacity: 0;
  width: 0;
  flex: 0;
}

/* ── Nav item list ───────────────────────────────────────────────────────── */
.chepeh-nav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 0 var(--chepeh-space-sm);
  overflow: hidden;
}

.chepeh-nav__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--chepeh-space-md);
  padding: 0.6rem var(--chepeh-space-sm);
  border-radius: var(--md-sys-shape-corner-large);
  text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none;
  width: 100%;
  background: none;
  font-family: inherit;
}

.nav-collapsed .chepeh-nav__item {
  justify-content: center;
  gap: 0;
  padding: 0.6rem;
}

.chepeh-nav__item:hover {
  background-color: var(--ctb-color-nav-hover-bg);
  color: var(--md-sys-color-on-surface);
}

.chepeh-nav__item--active {
  background-color: var(--ctb-color-nav-active-bg);
  color: var(--ctb-color-nav-active-text);
  font-weight: 600;
}

.chepeh-nav__item-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chepeh-nav__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  transition: opacity 0.15s ease;
}

.nav-collapsed .chepeh-nav__item-label {
  opacity: 0;
  width: 0;
  flex: 0;
  overflow: hidden;
}

/* ── Bottom section (theme + logout) ─────────────────────────────────────── */
.chepeh-nav__logout {
  padding: 0 var(--chepeh-space-sm);
  padding-bottom: var(--chepeh-space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.chepeh-nav__theme-toggle {
  color: var(--ctb-color-nav-active-text);
  opacity: 0.85;
}

.chepeh-nav__theme-toggle:hover {
  opacity: 1;
  background-color: var(--ctb-color-nav-hover-bg) !important;
}

/* ── Main content area ────────────────────────────────────────────────────── */
.chepeh-main {
  margin-left: var(--chepeh-nav-expanded-width);  /* 256 px */
  flex: 1;
  padding: var(--chepeh-space-xl);
  min-width: 0;
  transition: margin-left 0.25s cubic-bezier(.4, 0, .2, 1);
}

.nav-collapsed .chepeh-main {
  margin-left: var(--chepeh-nav-width);           /* 80 px */
}

/* No nav (login/register pages) */
.chepeh-main--full {
  margin-left: 0;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER BAR  (hidden on desktop/tablet — shown only <768 px)
   ══════════════════════════════════════════════════════════════════════════ */
.chepeh-mobile-header {
  display: none;                /* hidden by default; shown via media query */
}

/* ══════════════════════════════════════════════════════════════════════════
   OFF-CANVAS BACKDROP  (mobile overlay behind open drawer)
   ══════════════════════════════════════════════════════════════════════════ */
.chepeh-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 195;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── Auth Pages ────────────────────────────────────────────────────────────── */
.chepeh-auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--md-sys-color-primary-container) 0%,
    var(--md-sys-color-background) 60%
  );
  padding: var(--chepeh-space-lg);
}

.chepeh-auth-card {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--chepeh-elevation-3);
  padding: var(--chepeh-space-2xl);
  width: 100%;
  max-width: 420px;
}

.chepeh-auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--chepeh-space-xl);
}

.chepeh-auth-card__logo-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -1px;
}

.chepeh-auth-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--chepeh-space-xs);
  text-align: center;
}

.chepeh-auth-card__subtitle {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  margin-bottom: var(--chepeh-space-xl);
}

.chepeh-form-field {
  margin-bottom: var(--chepeh-space-md);
  display: block;
  width: 100%;
}

.chepeh-form-error {
  color: var(--md-sys-color-error);
  font-size: 0.8rem;
  margin-top: var(--chepeh-space-xs);
  display: block;
}

.chepeh-form-actions {
  margin-top: var(--chepeh-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--chepeh-space-sm);
}

.chepeh-auth-link {
  text-align: center;
  margin-top: var(--chepeh-space-md);
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
}

.chepeh-auth-link a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-weight: 500;
}

.chepeh-auth-link a:hover {
  text-decoration: underline;
}

/* ── Flash Messages ───────────────────────────────────────────────────────── */
.chepeh-flash {
  padding: var(--chepeh-space-sm) var(--chepeh-space-md);
  border-radius: var(--md-sys-shape-corner-medium);
  margin-bottom: var(--chepeh-space-md);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--chepeh-space-sm);
}

.chepeh-flash--success {
  background-color: var(--ctb-color-success-container);
  color: var(--ctb-color-on-success-container);
  border-left: 4px solid var(--ctb-color-success);
}

.chepeh-flash--error {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-left: 4px solid var(--md-sys-color-error);
}

.chepeh-flash--info {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-left: 4px solid var(--md-sys-color-primary);
}

.chepeh-flash--warning {
  background-color: var(--ctb-color-warning-container);
  color: var(--ctb-color-on-warning-container);
  border-left: 4px solid var(--ctb-color-warning);
}

.chepeh-error-message {
  color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-error-container);
  padding: var(--chepeh-space-sm) var(--chepeh-space-md);
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 0.9rem;
  margin-bottom: var(--chepeh-space-md);
}

/* ── Dashboard Header ─────────────────────────────────────────────────────── */
.chepeh-dashboard-header {
  margin-bottom: var(--chepeh-space-xl);
}

.chepeh-dashboard-header__greeting {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--chepeh-space-xs);
}

.chepeh-dashboard-header__school {
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (768 px – 1023 px): sidebar starts collapsed ─────────────────── */
/* (JS applies .nav-collapsed on init when no localStorage preference) */

/* ── Mobile (< 768 px): off-canvas drawer + top header bar ───────────────── */
@media (max-width: 767px) {

  /* Sidebar becomes an off-canvas drawer */
  .chepeh-nav {
    width: var(--chepeh-nav-expanded-width) !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  /* Open state: slide drawer in */
  .nav-open .chepeh-nav {
    transform: translateX(0);
    box-shadow: var(--chepeh-elevation-3);
  }

  /* Show backdrop when drawer is open */
  .nav-open .chepeh-nav-backdrop {
    display: block;
  }

  /* Hide desktop panel toggle on mobile */
  .chepeh-nav__toggle {
    display: none;
  }

  /* Mobile top header bar */
  .chepeh-mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: 0 var(--chepeh-space-sm);
    gap: var(--chepeh-space-xs);
    z-index: 150;
    box-shadow: var(--chepeh-elevation-1);
  }

  .chepeh-mobile-header__btn {
    width: 44px;
    height: 44px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background 0.15s;
    font-family: inherit;
  }

  .chepeh-mobile-header__btn:hover {
    background: var(--md-sys-color-surface-variant);
  }

  .chepeh-mobile-header__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    letter-spacing: -0.2px;
  }

  /* Push main content below header, remove sidebar offset */
  .chepeh-main {
    margin-left: 0 !important;
    padding: var(--chepeh-space-md);
    padding-top: calc(56px + var(--chepeh-space-md));
  }

  /* Auth pages: reduce padding on small screens */
  .chepeh-auth-card {
    padding: var(--chepeh-space-xl) var(--chepeh-space-lg);
  }

  .chepeh-auth-container {
    padding: var(--chepeh-space-md);
    align-items: flex-start;
    padding-top: var(--chepeh-space-xl);
  }

  /* Dashboard header: smaller font on mobile */
  .chepeh-dashboard-header__greeting {
    font-size: 1.35rem;
  }
}

/* ── Small phone (<480 px): extra tightening ──────────────────────────────── */
@media (max-width: 479px) {
  .chepeh-main {
    padding: var(--chepeh-space-sm);
    padding-top: calc(56px + var(--chepeh-space-sm));
  }

  .chepeh-auth-card {
    padding: var(--chepeh-space-lg) var(--chepeh-space-md);
    border-radius: var(--md-sys-shape-corner-large);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OAUTH SOCIAL LOGIN BUTTONS
   Used on /auth/login and /auth/register.
   ══════════════════════════════════════════════════════════════════════════ */

.chepeh-oauth-divider {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 1.5rem 0 1.25rem;
  font-size: .8rem;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.chepeh-oauth-divider::before,
.chepeh-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}

.chepeh-oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: var(--chepeh-space-sm);
}

.chepeh-btn-oauth {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem 1.25rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.chepeh-btn-oauth:hover {
  background: var(--md-sys-color-surface-variant);
  border-color: var(--md-sys-color-primary);
}

.chepeh-btn-oauth:active {
  background: var(--md-sys-color-surface-variant);
  opacity: .85;
}

.chepeh-btn-oauth__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chepeh-btn-oauth__icon svg {
  width: 20px;
  height: 20px;
}

/* Apple logo is portrait — nudge dimensions slightly */
.chepeh-btn-oauth--apple .chepeh-btn-oauth__icon svg {
  width: 17px;
  height: 20px;
}