/* Topbar layout */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.topbar { justify-content: space-between; }
/* ═══════════════════════════════════════════
   DeadlineHub — Global Theme
   Palette: Sirin Labs inspired
   #2C3531 · #116466 · #FFCB9A · #D1E8E2
════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* ── Core palette ── */
  --bg:        #1C3334;
  --dark:      #2E151B;
  --teal:      #376E6F;
  --teal-mid:  #2F4454;
  --teal-lite: #4A8E8F;
  --peach:     #DA7B93;
  --peach-dk:  #B56576;
  --mist:      #D1E8E2;
  --white:     #ffffff;

  /* ── Semantic aliases (replaces old green/dark vars) ── */
  --green:     var(--peach);
  --light:     var(--peach-dk);
  --pale:      var(--mist);

  /* ── UI tokens ── */
  --border:    rgba(218, 123, 147, 0.25);
  --glass:     rgba(55, 110, 111, 0.08);
  --surface:   rgba(46, 21, 27, 0.7);
  --hover:     rgba(55, 110, 111, 0.2);
}

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

body {
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--mist);
}

/* ── Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: rgba(17,100,102,0.3) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { background: rgba(17,100,102,0.3); border-radius: 2px; }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  background: var(--dark) !important;
  border-right-color: var(--border) !important;
}

.sidebar-logo { color: var(--peach) !important; }
.logo-box { background: var(--teal) !important; }

.nav-item { color: rgba(209,232,226,0.45) !important; }
.nav-item:hover { background: rgba(17,100,102,0.2) !important; color: var(--mist) !important; }
.nav-item.active { background: rgba(17,100,102,0.3) !important; color: var(--peach) !important; }

.room-item { color: var(--mist) !important; }
.room-item:hover { background: rgba(17,100,102,0.2) !important; }
.room-item.active { background: rgba(17,100,102,0.3) !important; }
.room-item.active .room-name { color: var(--peach) !important; }
.room-meta { color: rgba(209,232,226,0.38) !important; }
.room-badge { background: rgba(255,203,154,0.2) !important; color: var(--peach) !important; }

.sidebar-label { color: rgba(209,232,226,0.3) !important; }

.user-bar { border-top-color: var(--border) !important; }
.user-bar:hover { background: rgba(17,100,102,0.15) !important; }
.user-avatar {
  background: rgba(17,100,102,0.4) !important;
  border-color: var(--teal-mid) !important;
  color: var(--peach) !important;
}
.user-name { color: var(--mist) !important; }
.user-id, .user-id-txt { color: rgba(209,232,226,0.35) !important; }
.user-status, .user-dot, .online-dot { background: var(--peach) !important; }

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
  background: rgba(44,53,49,0.85) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom-color: var(--border) !important;
}
.topbar-icon { background: rgba(17,100,102,0.3) !important; }
.topbar-title { color: var(--mist) !important; }
.topbar-sub, .topbar-members { color: rgba(209,232,226,0.4) !important; }

.tb-btn {
  background: rgba(17,100,102,0.18) !important;
  border-color: var(--border) !important;
  color: var(--mist) !important;
}
.tb-btn:hover { background: rgba(17,100,102,0.35) !important; }
.tb-btn.primary { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--mist) !important; }
.tb-btn.primary:hover { background: var(--teal-mid) !important; }

/* ══════════════════════════════════════════
   CARDS / SURFACES
══════════════════════════════════════════ */
.dl-card, .feat-card, .assistant-box, .upcoming-box,
.profile-card, .settings-card, .friends-card,
.requests-card, .search-box, .hero-card,
.hero-visual, .deadline-item, .deadline-card,
.how, .stat-mini {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.dl-card:hover, .feat-card:hover {
  border-color: rgba(17,100,102,0.55) !important;
}
.dl-card.urgent { border-color: rgba(255,203,154,0.3) !important; }
.dl-card.urgent:hover { border-color: rgba(255,203,154,0.5) !important; }

/* ══════════════════════════════════════════
   TYPOGRAPHY OVERRIDES
══════════════════════════════════════════ */
h1, h2, h3, .section-h, .modal-title,
.form-title, .cta h2, .left-tagline { color: var(--mist) !important; }

h1 em, h1 span, .cta h2 em,
.left-tagline em, .hero-badge { color: var(--peach) !important; }

.hero-desc, .hero-sub, .form-sub,
.left-sub, .section-sub, .feat-desc,
.step-desc, .cta p { color: rgba(209,232,226,0.5) !important; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary, .btn-nav, .btn-submit,
.btn-create, .save-btn, .search-btn,
.accept-btn, .asst-send, .add-friend-btn {
  background: var(--teal) !important;
  color: var(--mist) !important;
  border-color: var(--teal) !important;
}
.btn-primary:hover, .btn-nav:hover, .btn-submit:hover,
.btn-create:hover, .save-btn:hover, .search-btn:hover,
.accept-btn:hover, .asst-send:hover, .add-friend-btn:hover {
  background: var(--teal-mid) !important;
}

.btn-ghost, .btn-cancel, .btn-google,
.f-btn, .decline-btn, .danger-btn {
  background: rgba(17,100,102,0.1) !important;
  border-color: var(--border) !important;
  color: rgba(209,232,226,0.6) !important;
}
.btn-ghost:hover, .btn-cancel:hover, .btn-google:hover {
  background: rgba(17,100,102,0.25) !important;
  border-color: rgba(17,100,102,0.5) !important;
}

.my-status-btn {
  background: rgba(17,100,102,0.15) !important;
  border-color: rgba(17,100,102,0.3) !important;
  color: var(--teal-lite) !important;
}
.my-status-btn.done {
  background: rgba(17,100,102,0.25) !important;
  border-color: var(--teal-mid) !important;
  color: var(--peach) !important;
}

/* ══════════════════════════════════════════
   INPUTS
══════════════════════════════════════════ */
input, textarea, select, .asst-input,
.search-input, .search-input, .field input,
.m-field input, .m-field select, .m-field textarea {
  background: rgba(17,100,102,0.1) !important;
  border-color: var(--border) !important;
  color: var(--mist) !important;
}
input:focus, textarea:focus, select:focus,
.asst-input:focus, .search-input:focus,
.field input:focus, .m-field input:focus {
  border-color: var(--teal-mid) !important;
  background: rgba(17,100,102,0.18) !important;
}
input::placeholder, textarea::placeholder { color: rgba(209,232,226,0.22) !important; }

/* ══════════════════════════════════════════
   ACCENT COLORS (green → peach/teal)
══════════════════════════════════════════ */
.dl-time, .stat-n, .stat-num, .stat-n,
.prog-count, .id-value, .up-time,
.pc-time, .dc-time, .di-time,
.card-label, .section-eyebrow,
.hero-badge, .section-label-green,
.asst-bubble strong, .f-status.online,
.profile-name { color: var(--peach) !important; }

.prog-fill.fill-green, .timer-fill.fill-ok,
.prog-fill.fill-green { background: var(--teal-lite) !important; }

/* pulse dot */
.pulse, .dot-green { background: var(--peach) !important; }

/* orbs */
.orb-1 { background: rgba(17,100,102,0.14) !important; }
.orb-2 { background: rgba(29,122,125,0.1) !important; }

/* ══════════════════════════════════════════
   TAGS / BADGES
══════════════════════════════════════════ */
.tag-green, .badge-green {
  background: rgba(17,100,102,0.2) !important;
  color: var(--teal-lite) !important;
  border-color: rgba(17,100,102,0.3) !important;
}
.hero-badge {
  background: rgba(17,100,102,0.15) !important;
  border-color: rgba(17,100,102,0.3) !important;
  color: var(--peach) !important;
}

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal-overlay { background: rgba(26,42,40,0.88) !important; }
.modal {
  background: var(--dark) !important;
  border-color: var(--border) !important;
}
.m-field label { color: rgba(209,232,226,0.5) !important; }

/* ══════════════════════════════════════════
   STATS ROW (landing)
══════════════════════════════════════════ */
.stats-row { border-color: var(--border) !important; }
.stat { border-right-color: var(--border) !important; }

/* ══════════════════════════════════════════
   NAVIGATION (landing)
══════════════════════════════════════════ */
nav {
  background: rgba(44,53,49,0.88) !important;
  border-bottom-color: var(--border) !important;
}
.nav-links a { color: rgba(209,232,226,0.55) !important; }
.nav-links a:hover { color: var(--peach) !important; }

/* ══════════════════════════════════════════
   FEATURES (landing)
══════════════════════════════════════════ */
.feat-icon { background: rgba(17,100,102,0.2) !important; }
.how { background: rgba(17,100,102,0.06) !important; border-color: var(--border) !important; }
.step-num { color: rgba(255,203,154,0.15) !important; }

/* ══════════════════════════════════════════
   AUTH PAGE
══════════════════════════════════════════ */
.left-panel {
  border-right-color: var(--border) !important;
}
.tabs {
  background: rgba(17,100,102,0.1) !important;
  border-color: var(--border) !important;
}
.tab { color: rgba(209,232,226,0.45) !important; }
.tab.active { background: var(--teal) !important; color: var(--mist) !important; }

.pc { background: rgba(17,100,102,0.1) !important; border-color: var(--border) !important; }
.pc-name { color: var(--mist) !important; }
.pc-time { color: var(--peach) !important; }

/* forgot link */
.forgot a { color: var(--teal-lite) !important; }
.forgot a:hover { color: var(--peach) !important; }
.agree a { color: var(--teal-lite) !important; }
.agree a:hover { color: var(--peach) !important; }

/* ══════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════ */
.big-avatar {
  background: rgba(17,100,102,0.25) !important;
  border-color: var(--teal-mid) !important;
  color: var(--peach) !important;
}
.avatar-edit { background: var(--teal) !important; border-color: var(--bg) !important; }
.id-badge { background: rgba(17,100,102,0.12) !important; border-color: rgba(17,100,102,0.25) !important; }
.id-label { color: rgba(209,232,226,0.4) !important; }
.profile-stats { border-color: var(--border) !important; }
.ps-item { border-right-color: var(--border) !important; }
.ps-l, .stat-l { color: rgba(209,232,226,0.35) !important; }
.online-dot { background: var(--peach) !important; }
.settings-title { color: rgba(209,232,226,0.32) !important; }
.toggle { background: rgba(17,100,102,0.2) !important; border-color: rgba(17,100,102,0.3) !important; }
.toggle.on { background: var(--teal) !important; border-color: var(--teal) !important; }
.divider-line { background: var(--border) !important; }

/* ══════════════════════════════════════════
   FRIENDS PAGE
══════════════════════════════════════════ */
.friend-item { border-bottom-color: rgba(17,100,102,0.15) !important; }
.req-item { border-bottom-color: rgba(17,100,102,0.15) !important; }
.f-name, .req-name { color: var(--mist) !important; }
.f-status { color: rgba(209,232,226,0.35) !important; }
.f-status.online { color: var(--teal-lite) !important; }
.req-id, .f-id { color: rgba(209,232,226,0.3) !important; }
.req-badge { background: rgba(255,203,154,0.2) !important; color: var(--peach) !important; }
.copy-btn { color: rgba(209,232,226,0.35) !important; }
.copy-btn:hover { color: var(--peach) !important; }
.search-result { background: rgba(17,100,102,0.1) !important; border-color: var(--border) !important; }

/* toast */
.toast {
  background: var(--dark) !important;
  border-color: var(--teal) !important;
  color: var(--peach) !important;
}

/* ══════════════════════════════════════════
   MY DAY PAGE
══════════════════════════════════════════ */
.day-pill.today { background: var(--teal) !important; }
.day-pill.today .day-name,
.day-pill.today .day-num { color: var(--mist) !important; }
.day-pill.today .day-dot { background: var(--peach) !important; }
.day-dot { background: var(--peach) !important; }
.hour-row { border-bottom-color: rgba(17,100,102,0.12) !important; }
.hour-label { color: rgba(209,232,226,0.22) !important; }

.tb-blue  { background: rgba(17,100,102,0.15) !important; border-left-color: var(--teal-mid) !important; }
.tb-green { background: rgba(17,100,102,0.1) !important;  border-left-color: var(--teal-lite) !important; }
.tb-red   { background: rgba(255,203,154,0.08) !important; border-left-color: var(--peach) !important; }
.tb-amber { background: rgba(29,122,125,0.1) !important;  border-left-color: var(--teal-mid) !important; }

.tb-green .task-name { color: var(--mist) !important; }
.tb-red   .task-name { color: var(--peach) !important; }
.tb-amber .task-name { color: var(--teal-lite) !important; }
.tb-blue  .task-name { color: rgba(209,232,226,0.8) !important; }

.now-line { background: var(--peach) !important; }
.now-dot  { background: var(--peach) !important; }

.asst-bubble {
  background: rgba(17,100,102,0.12) !important;
  border-color: rgba(17,100,102,0.25) !important;
}
.up-time { color: var(--teal-lite) !important; }
.up-time.red { color: var(--peach) !important; }

/* ══════════════════════════════════════════
   LANDING PAGE OVERRIDES
══════════════════════════════════════════ */
.hero-visual, .hero-card {
  background: rgba(44,53,49,0.5) !important;
}
.deadline-item, .dl-card {
  background: rgba(26,42,40,0.7) !important;
}
.card-label { color: var(--peach) !important; }
.av-done {
  background: rgba(17,100,102,0.3) !important;
  color: var(--teal-lite) !important;
  border-color: var(--teal-mid) !important;
}
.av-prog {
  background: rgba(255,203,154,0.12) !important;
  color: var(--peach-dk) !important;
  border-color: var(--peach-dk) !important;
}

/* ═══════════════════════════════════════════
   МОБИЛЬНЫЙ ДИЗАЙН
   ═══════════════════════════════════════════ */

/* ── Burger button — показывается всегда ── */
.burger-btn {
  display: flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(17,100,102,0.15);
  border: 1px solid rgba(17,100,102,0.3);
  border-radius: 8px;
  cursor: pointer;
  color: var(--mist);
  flex-shrink: 0;
  margin-right: 10px;
  transition: background .2s;
}
.burger-btn:hover { background: rgba(17,100,102,0.3); }

/* ── Overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ── Desktop: sidebar скрыта по умолчанию, открывается по бургеру ── */
@media (min-width: 769px) {
  .sidebar {
    position: fixed;
    left: -260px;
    z-index: 1000;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidebar.open {
    left: 0;
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
  }
  .main {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .topbar { padding: 0 24px; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -280px;
    z-index: 1000;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    width: 280px;
  }
  .sidebar.open {
    left: 0;
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
  }
  .main { width: 100% !important; }
  .topbar { padding: 0 16px !important; height: 52px; }
  .topbar-title { font-size: 15px !important; }
  .topbar-sub { font-size: 11px !important; }
  .tb-btn { padding: 6px 10px !important; font-size: 12px !important; }
  .content { padding: 14px 16px !important; }
  .stats-grid, .stats { grid-template-columns: repeat(2,1fr) !important; }
  .kanban { grid-template-columns: 1fr !important; height: auto !important; }
  .right-panel { display: none !important; }
  .body-area { flex-direction: column; }
}