/* ═══════════════════════════════════════════════════
   shared.css — общие стили для всех app-страниц
   post-it.app / public_html/shared.css
═══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f0f2f8;--surface:#fff;--card:#fff;
  --accent:#5b5ef4;--accent2:#7c7ff7;--accent-soft:#eef0ff;
  --green:#22c55e;--green-soft:#f0fdf4;--green-border:#bbf7d0;
  --red-c:#ef4444;--red-soft:#fef2f2;--red-border:#fecaca;
  --text:#1a1d3b;--text2:#6b7280;--text3:#9ca3af;--border:#e8eaf2;
  --r:14px;--r-sm:10px;--r-xs:8px;--font:'Outfit',sans-serif;
  --sh:0 2px 12px rgba(91,94,244,0.08);--sh-lg:0 8px 32px rgba(91,94,244,0.14);
  --bottom-nav-h:72px;
  --li:#0a66c2;--ig:#e1306c;--th:#000;--tg:#229ed9;--tt:#6c3bff;
}

/* ── DARK THEME ── */
html[data-theme="dark"]{
  --bg:#0f1117;--surface:#1a1d2e;--card:#1a1d2e;
  --accent:#7c7ff7;--accent2:#9b9efa;--accent-soft:rgba(124,127,247,0.15);
  --green:#22c55e;--green-soft:rgba(34,197,94,0.12);--green-border:rgba(34,197,94,0.3);
  --red-c:#f87171;--red-soft:rgba(248,113,113,0.1);--red-border:rgba(248,113,113,0.3);
  --text:#e8eaf6;--text2:#9ca3c8;--text3:#5c6080;--border:#272a3d;
  --sh:0 2px 12px rgba(0,0,0,0.3);--sh-lg:0 8px 32px rgba(0,0,0,0.45);
}
html[data-theme="dark"] body{background:var(--bg)}
html[data-theme="dark"] .nav-item:hover{background:rgba(124,127,247,0.12);color:var(--accent)}
html[data-theme="dark"] .nav-item.active{background:rgba(124,127,247,0.18);color:var(--accent)}
html[data-theme="dark"] .field-input{background:#13162a;border-color:var(--border);color:var(--text)}
html[data-theme="dark"] .field-input:focus{background:#181c30;border-color:var(--accent)}
html[data-theme="dark"] .btn-ghost{border-color:var(--border);color:var(--text2)}
html[data-theme="dark"] .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
html[data-theme="dark"] .btn-logout{background:#272a3d;color:var(--text2);border-color:var(--border)}
html[data-theme="dark"] .btn-logout:hover{background:#313454;color:var(--text)}
html[data-theme="dark"] .toast{background:#e8eaf6;color:#0f1117}
html[data-theme="dark"] .modal{background:var(--surface);border:1px solid var(--border)}
html[data-theme="dark"] .sidebar-overlay{background:rgba(0,0,0,0.6)}

html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── LAYOUT ── */
.app{display:flex;height:100dvh;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.page-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.page-subtitle{font-size:11px;color:var(--text3);margin-top:1px}
.content{flex:1;overflow-y:auto;padding:1.4rem 1.5rem}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── SIDEBAR ── */
.sidebar{width:240px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:2px 0 12px rgba(0,0,0,0.04);z-index:10}
.sidebar-logo{padding:1.5rem 1.4rem 1.2rem;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.logo-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 4px 12px rgba(91,94,244,0.35)}
.logo-name{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.logo-sub{font-size:10px;color:var(--text3);margin-top:1px}
.sidebar-section{padding:1.2rem 1rem 0.4rem;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:2px 8px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all 0.15s;border:none;background:transparent;font-family:var(--font);width:calc(100% - 16px);text-align:left;text-decoration:none}
.nav-item:hover{background:#f5f6ff;color:var(--accent)}
.nav-item.active{background:linear-gradient(135deg,#eef0ff,#f0f1ff);color:var(--accent);font-weight:600}
.nav-icon{width:18px;height:18px;flex-shrink:0;opacity:0.65}
.nav-item.active .nav-icon{opacity:1}
.sidebar-footer{margin-top:auto;padding:1rem;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background 0.15s}
.user-card:hover{background:#f5f6ff}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;color:var(--text)}
.user-role{font-size:10px;color:var(--text3)}

/* ── MOBILE HEADER ── */
.mobile-header{display:none;background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.2rem;height:56px;align-items:center;justify-content:space-between;flex-shrink:0;z-index:50}
.mh-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 3px 10px rgba(91,94,244,0.35)}
.mh-title{font-size:15px;font-weight:700;color:var(--text)}
.mh-sub{font-size:10px;color:var(--text3)}
.hamburger{width:36px;height:36px;border-radius:var(--r-xs);border:1.5px solid var(--border);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.hamburger span{display:block;width:16px;height:2px;background:var(--text2);border-radius:2px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,40,0.45);backdrop-filter:blur(3px);z-index:290;opacity:0;transition:opacity 0.25s;pointer-events:none}
.sidebar-overlay.open{opacity:1;pointer-events:all}

/* ── TOAST ── */
.toast{position:fixed;bottom:calc(1.5rem + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:#1a1d3b;color:#fff;padding:9px 18px;border-radius:30px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:all 0.25s;z-index:999;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.sidebar{width:200px}}
@media(max-width:680px){
  .sidebar{display:flex;position:fixed;top:0;left:0;height:100dvh;z-index:300;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);box-shadow:4px 0 32px rgba(0,0,0,0.18)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:block}
  .topbar{display:none}
  .mobile-header{display:flex}
  .app{flex-direction:column}
  .main{height:100dvh;overflow:hidden}
  .content{padding:.9rem .8rem 1.4rem;overflow-y:auto}
}