*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans','Helvetica Neue',Arial,sans-serif;margin:0;background:#f7f7fb;color:#222}
header{background:#fff;border-bottom:1px solid #e5e7eb}
header .container,main.container,footer .container{ max-width:1300px; margin:0 auto; padding:12px 16px}
nav a{margin-right:16px;color:#2563eb;text-decoration:none}
nav a:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb}
th,td{padding:8px 10px;border-bottom:1px solid #eee;vertical-align:top}
th{background:#f3f4f6;text-align:left}
tr:hover{background:#fafafa}
.toolbar{display:flex;gap:8px;align-items:center;margin:12px 0;flex-wrap:wrap}
.btn{display:inline-block;padding:6px 10px;border-radius:6px;border:1px solid #d1d5db;background:#fff;cursor:pointer;text-decoration:none}
.btn.primary{background:#2563eb;color:#fff;border-color:#1d4ed8}
.btn.danger{background:#dc2626;color:#fff;border-color:#b91c1c}
.btn.small{padding:4px 8px;font-size:12px;border-radius:6px}
.btn.ghost{background:transparent;border-color:transparent}
.form-row{display:flex;flex-direction:column;margin:8px 0}
label{font-weight:600;margin-bottom:4px}
input,select,textarea{padding:8px;border:1px solid #d1d5db;border-radius:6px;background:#fff}
.hint{font-size:12px;color:#6b7280;margin-top:4px}
.error{color:#dc2626;font-size:13px}
.flash{padding:10px;border-radius:6px;margin:8px 0}
.flash.ok{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.flash.err{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px}

/* ---------- File preview box ---------- */
.file-preview { display:flex; flex-direction:column; gap:8px; }
.media-box { display:flex; flex-direction:column; gap:8px; max-width:100%; }
.media-box img.thumb { max-width:220px; max-height:160px; object-fit:cover; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
.media-box iframe.doc-frame, .media-box video { width:280px; height:200px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
.media-box.expanded { align-items:stretch; }
.media-box.expanded iframe.doc-frame, .media-box.expanded video { width:100%; height:72vh; max-height:85vh; }
.media-box.expanded img.thumb { max-width:100%; max-height:80vh; object-fit:contain; }
.file-actions { display:flex; gap:8px; flex-wrap:wrap; }
.doc-frame { display:block; }

/* ---------- Header layout with userbar ---------- */
.header-flex { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo-title { display:flex; align-items:center; gap:10px; }
.logo-title h1 { margin:0; font-size:18px; line-height:1.2; }

.main-nav { display:flex; gap:12px; flex-wrap:wrap; }
.main-nav a { margin:0; }

.userbar { display:flex; align-items:center; gap:10px; }
.user-info { display:flex; align-items:center; gap:8px; }
.user-info .avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d1d5db; background:#fff; font-weight:700; }
.user-info .meta { display:flex; flex-direction:column; line-height:1.1; }
.user-info .meta .username { font-weight:600; text-decoration:none; }
.user-info .meta .line .muted { font-size: 12px; display: none;}
.user-info .meta .line { display:flex; gap:6px; flex-wrap:wrap; }

.badge { display:inline-block; padding:2px 6px; border-radius:999px; border:1px solid #d1d5db; font-size:12px; background:#fff; }
.badge.role { border-color:#93c5fd; }

.muted { color:#9ca3af; }
.sysbar { border-bottom:1px solid #e5e7eb; }

/* ---------- Left drawer (push mode) ---------- */
#leftDrawer {
  position: fixed; top:0; left:0; height:100vh; width:250px;
  transform: translateX(-100%);
  transition: transform .2s ease;
  background:#fff; border-right:1px solid #e5e7eb; z-index:999;
  overflow:auto;
}
#leftDrawer.open { transform: translateX(0); }
#leftDrawer .drawer-content { display:flex; flex-direction:column; min-height:100%; }
#leftDrawer .drawer-header { display:flex; justify-content:flex-end; align-items:center; padding:10px; border-bottom:1px solid #e5e7eb; }
#leftDrawer .drawer-nav { display:flex; flex-direction:column; padding:10px; }
#leftDrawer .drawer-nav a { margin-bottom:6px; text-decoration:none; color:#2563eb; }
#leftDrawer .drawer-nav .submenu { display:block; padding-left:12px; }

/* Когда меню открыто — сдвигаем всю страницу вправо */
body.drawer-open { padding-left:250px; transition: padding-left .2s ease; }

/* labels for list headers */
.col-label { display:block; font-weight:600; line-height:1.1; }
.col-name  { display:block; font-size:12px; color:#6b7280; text-decoration:none; }
.col-name:hover { text-decoration:underline; }

/* ---------- Expandable tree menu ---------- */
#leftDrawer .menu-level{list-style:none;margin:0;padding:0 0 0 6px}
#leftDrawer .menu-item{position:relative;margin:2px 0;padding-left:18px}
#leftDrawer .menu-item>.toggle{position:absolute;left:0;top:4px;width:12px;height:12px;border:none;background:none;cursor:pointer}
#leftDrawer .menu-item.has-children>.toggle::before{content:"▶";display:inline-block;font-size:10px;transition:transform .2s;color:#555}
#leftDrawer .menu-item.open>.toggle::before{transform:rotate(90deg)}
#leftDrawer .menu-item>a,#leftDrawer .menu-item>span{color:#2563eb;text-decoration:none}
#leftDrawer .submenu{overflow:hidden;max-height:0;opacity:0;transition:max-height .25s ease,opacity .25s ease;padding-left:10px;border-left:1px dotted #d1d5db}
#leftDrawer .menu-item.open>.submenu{max-height:800px;opacity:1}

.top-menu .menu-level{list-style:none;margin:0;padding:0}
.top-menu .menu-lvl-0{display:flex;gap:14px;align-items:center}
.top-menu .menu-lvl-0>.menu-item{position:relative;padding:0}
.top-menu .menu-item>a,.top-menu .menu-item>span{color:#2563eb;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;transition:background .15s}
.top-menu .menu-item>a:hover{background:#f3f4f6}
.top-menu .menu-lvl-0>.menu-item.has-children>.toggle{border:none;background:0 0;cursor:pointer;padding:0;line-height:1;display:inline-block}
.top-menu .submenu,.top-menu .submenu .menu-item.has-children>.submenu{position:absolute;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:6px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.top-menu .menu-lvl-0>.menu-item.has-children>.toggle::before{content:"▾";font-size:12px;color:#555;transition:transform .18s}
.top-menu .menu-lvl-0>.menu-item.open>.toggle::before{transform:rotate(180deg)}
.top-menu .submenu{top:100%;left:0;margin-top:6px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;transform:translateY(4px);z-index:1000;overflow:visible}
.top-menu .menu-item.open>.submenu,.top-menu .menu-item:hover>.submenu{opacity:1;pointer-events:auto;transform:translateY(0)}
.top-menu .submenu .menu-level{display:block}
.top-menu .submenu .menu-item{position:relative;margin:2px 0;padding:0}
.top-menu .submenu .menu-item>a,.top-menu .submenu .menu-item>span{display:block;padding:6px 10px;border-radius:6px;color:#1f2937;text-decoration:none;transition:background .15s,color .15s}
.top-menu .submenu .menu-item>a:hover{background:#f3f4f6;color:#111827}
.top-menu .submenu .menu-item.has-children>.toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:12px;height:12px;border:none;background:0 0;cursor:pointer}
.top-menu .submenu .menu-item.has-children>.toggle::before{content:"▸";font-size:12px;color:#555;transition:transform .18s}
.top-menu .submenu .menu-item.open>.toggle::before,.top-menu .submenu .menu-item:hover>.toggle::before{transform:translateY(0) rotate(90deg)}
.top-menu .submenu .menu-item.has-children>.submenu{top:0;left:100%;margin-left:8px;margin-top:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;transform:translateX(4px);z-index:1100}
.top-menu .submenu .menu-item.has-children.open>.submenu,.top-menu .submenu .menu-item.has-children:hover>.submenu{opacity:1;pointer-events:auto;transform:translateX(0)}
.top-menu .submenu .menu-item.has-children{padding-right:12px}
.top-menu .submenu .menu-item.has-children>a,.top-menu .submenu .menu-item.has-children>span{padding-left:22px}