/* TaskDay app shell — stage 4. Loaded last. Source: Figma 01A (desktop), M01 (mobile, tab bar variant D).
   Overrides old sidebar.css / td-figma.css shell rules; old files are untouched. */

/* ================= Desktop sidebar (>=1025px, same breakpoint as isMobileBoard) ================= */
@media (min-width: 1025px) {
  :root { --sidebar-w: var(--td-sidebar-w); }
  .app-shell { background: var(--td-color-bg-sidebar); }
  .app-sidebar {
    width: var(--td-sidebar-w); padding: 28px 14px 24px; gap: 0;
    background: var(--td-color-bg-sidebar); border-right: 0; color: var(--td-color-text-sidebar);
    font-family: var(--td-font-sans);
  }
  .app-sidebar-brand { padding: 0 11px 22px; }
  .app-sidebar-brand-text > * { display: none !important; }
  .app-sidebar-brand-text::after { content: "TaskDay"; color: var(--td-color-text-on-accent); font: var(--td-fw-bold) var(--td-fs-title)/33px var(--td-font-sans); }
  .app-sidebar-tagline { display: none; }
  /* Работа / Жизнь */
  .app-sidebar-realm.realm-pill-toggle {
    display: grid; grid-template-columns: 1fr 1fr; margin: 0 6px 22px; padding: 3px; height: 44px; box-sizing: border-box;
    background: var(--td-color-bg-sidebar-selected); border: 0; border-radius: 22px; box-shadow: none;
  }
  .app-sidebar-realm .realm-opt {
    height: 38px; border: 0 !important; outline: 0; background: transparent; color: var(--td-color-text-sidebar); box-shadow: none;
    font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); border-radius: 19px 0 0 19px; cursor: pointer;
  }
  .app-sidebar-realm .realm-opt:last-child { border-radius: 0 19px 19px 0; }
  .app-sidebar-realm .realm-opt.active { background: var(--td-color-realm-selected) !important; color: var(--td-color-text-on-accent) !important; box-shadow: none !important; }
  .app-sidebar-realm .realm-opt.active[data-realm="life"] { background: var(--td-color-realm-life) !important; }
  /* Nav items = Figma «Nav item» */
  .app-sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
  .app-sidebar .app-side-btn {
    display: flex; align-items: center; gap: var(--td-space-12); width: 100%; min-height: 44px; box-sizing: border-box;
    padding: var(--td-space-12) 15px var(--td-space-12) 19px; margin: 0; border: 0; background: transparent; box-shadow: none;
    border-radius: var(--td-corner-card-main-left); color: var(--td-color-text-sidebar);
    font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); text-align: left; cursor: pointer;
  }
  .app-sidebar .app-side-btn .td-icon { color: currentColor; --td-icon-accent: currentColor; }
  .app-sidebar .app-side-btn:hover { background: var(--td-color-bg-sidebar-selected); color: var(--td-color-text-sidebar); }
  .app-sidebar .app-side-btn.is-active, .app-sidebar .app-side-btn[aria-selected="true"] {
    background: var(--td-color-bg-sidebar-selected); color: var(--td-color-text-on-accent);
  }
  .app-sidebar .app-side-btn.is-active .td-icon { --td-icon-accent: var(--td-color-accent); }
  .app-sidebar .app-side-btn::before, .app-sidebar .app-side-btn::after { display: none !important; }
  /* Settings live in the profile (Figma has no «Настройки» nav item) */
  .app-sidebar .app-sidebar-section:not(.td-admin-nav-section),
  .app-sidebar .app-side-btn[data-nav="settings"] { display: none; }
  .app-sidebar .td-admin-nav-section { display: none; }
  .app-sidebar .td-admin-nav-btn:not([hidden]) { margin-top: auto; }
  /* Profile */
  .app-sidebar-foot { margin-top: 12px; padding: 0; border: 0; background: none; }
  .app-sidebar-profile { display: flex; align-items: center; gap: var(--td-space-12); padding: 8px 11px; border: 0; background: none; width: 100%; border-radius: var(--td-corner-card-main-left); cursor: pointer; }
  .app-sidebar-profile:hover { background: var(--td-color-bg-sidebar-selected); }
  .app-sidebar-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--td-color-profile-avatar); color: var(--td-color-text-primary); font: var(--td-fw-semibold) var(--td-fs-subtitle)/1 var(--td-font-sans); }
  .app-sidebar-profile-name { color: var(--td-color-text-on-accent); font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); }
  .app-sidebar-profile-sub { color: var(--td-color-profile-sub); font: var(--td-fw-regular) var(--td-fs-caption)/16px var(--td-font-sans); }
  /* Workspace surface overlaps the sidebar with a rounded left edge */
  .app-shell > .app-main {
    position: relative; z-index: 141; margin-left: calc(-1 * var(--td-sidebar-overlap));
    background: var(--td-color-bg-workspace); border-radius: var(--td-corner-workspace); overflow: hidden;
  }
  .td-tabbar, .td-mobile-daily-action { display: none !important; }
}

/* ================= Mobile tab bar — variant D (<=1024px) ================= */
@media (max-width: 1024px) {
  .mobile-app-nav.td-tabbar {
    position: fixed; z-index: 250; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    height: var(--td-tabbar-h); min-height: var(--td-tabbar-h); padding: 0 var(--td-space-8) env(safe-area-inset-bottom, 0px) !important; box-sizing: content-box;
    background: transparent; border: 0; backdrop-filter: none; box-shadow: none;
  }
  .mobile-app-nav.td-tabbar::before {          /* bulged panel: Figma «Bar bulge vector» */
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
    top: calc(-1 * var(--td-tabbar-bulge));
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='132' viewBox='0 0 390 132'%3E%3Cpath d='M0 41H128C156 41 158 0 195 0C232 0 234 41 262 41H390V132H0V41Z' fill='%23ffffff'/%3E%3C/svg%3E") center top / 390px 132px no-repeat,
      linear-gradient(var(--td-color-bg-surface), var(--td-color-bg-surface)) left var(--td-tabbar-bulge) / 100% 100% no-repeat;
    filter: drop-shadow(var(--td-shadow-tabbar));
  }
  .mobile-app-nav.td-tabbar .td-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; min-height: 52px; height: 52px; margin: 2px 0 2px; padding: 0; border: 0; background: transparent; box-shadow: none;
    border-radius: var(--td-corner-tile-diag); color: var(--td-color-text-secondary); cursor: pointer;
    font: var(--td-fw-semibold) 11px/15px var(--td-font-sans);
  }
  .mobile-app-nav.td-tabbar .td-tab .td-icon { width: 24px; height: 24px; stroke: none; --td-icon-accent: currentColor; }
  .mobile-app-nav.td-tabbar .td-tab[aria-current="page"] {
    background: var(--td-color-accent-subtle); color: var(--td-color-accent); font-weight: var(--td-fw-bold);
  }
  .mobile-app-nav.td-tabbar .td-tab--add { justify-content: flex-end; padding-bottom: 4px; color: var(--td-color-accent); position: relative; overflow: visible; }
  .td-tab-add-round {
    position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
    width: var(--td-tabbar-fab); height: var(--td-tabbar-fab); border-radius: 50%; display: grid; place-items: center;
    background: var(--td-color-accent); color: var(--td-color-text-on-accent); box-shadow: var(--td-shadow-fab);
  }
  .td-tab-add-round .td-icon { color: var(--td-color-text-on-accent); --td-icon-accent: currentColor; }
  .mobile-app-nav.td-tabbar .td-tab:focus-visible { outline: 2px solid var(--td-color-accent); outline-offset: -2px; }
  /* old dock / floating buttons replaced by the tab bar */
  .mobile-add-fab, #mobileAddFab, .ai-bot-fab { display: none !important; }
  /* content clears bar + bulge */
  #boardGrid.board-grid, .td-mobile-pad-bottom {
    padding-bottom: calc(var(--td-tabbar-h) + var(--td-content-pad-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Дейли in header */
  .td-mobile-daily-action { display: inline-grid !important; place-items: center; min-width: 44px; min-height: 44px; color: var(--td-color-daily); --td-icon-accent: var(--td-color-daily); }
}

/* old safe-area filler of the previous dock (dark strip) — the tab bar covers safe area itself */
@media (max-width: 1024px) { .nav-safe-fill { display: none !important; } }

/* ===== Flat tab bar (t63u): no bulge, accent "+" tile inside the panel ===== */
@media (max-width: 1024px) {
  .mobile-app-nav.td-tabbar { align-items: center; padding-top: 0 !important; background: var(--td-color-bg-surface); box-shadow: var(--td-shadow-tabbar, 0 -1px 0 rgb(20 30 60 / .06)); }
  .mobile-app-nav.td-tabbar::before { display: none !important; content: none; }
  .mobile-app-nav.td-tabbar .td-tab { margin: 6px 0; }
  .mobile-app-nav.td-tabbar .td-tab--add { justify-content: center; padding-bottom: 0; background: transparent !important; }
  .mobile-app-nav.td-tabbar .td-tab--add > span:not(.td-tab-add-round) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .td-tab-add-round { position: static; transform: none; width: 52px; height: 48px; border-radius: var(--td-corner-tile-diag, 14px 6px); box-shadow: 0 4px 12px rgb(61 99 235 / .30); transition: transform .12s ease; }
  .mobile-app-nav.td-tabbar .td-tab--add:active .td-tab-add-round { transform: scale(.95); }
  .td-tab-add-round .td-icon { width: 26px; height: 26px; }
}

/* «+ Новая задача» — закреплена внизу сайдбара (desktop), всегда видна; со страницы «Другие» убрана */
.app-sidebar-new { display: none; }
@media (min-width: 1025px) {
  .app-sidebar .app-sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .app-sidebar .app-sidebar-nav::-webkit-scrollbar { display: none; }
  .app-sidebar .app-sidebar-foot { flex: none; position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 12px; }
  .app-sidebar .app-sidebar-new {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; box-sizing: border-box;
    padding: 0 16px; margin: 0; border: 0; border-radius: var(--td-corner-button-left); background: var(--td-color-accent);
    color: var(--td-color-text-on-accent, #fff); font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); cursor: pointer; box-shadow: none;
  }
  .app-sidebar .app-sidebar-new .td-icon { width: 20px; height: 20px; color: currentColor; --td-icon-accent: currentColor; }
  .app-sidebar .app-sidebar-new:hover { filter: brightness(1.08); }
  .app-sidebar .app-sidebar-new:focus-visible { outline: 2px solid var(--td-color-text-on-accent, #fff); outline-offset: 2px; }
  html body[data-desktop-nav="tasks"] #colOther .tdo-new { display: none !important; }
}