/* DocuApp — system designu wg layout_frontend (granat→niebieski + slate). Akcent (--accent) ustawiany per firma inline na . */ :root { --brand-50:#eef4fb; --brand-100:#d6e4f3; --brand-200:#b0cae8; --brand-300:#82a9d8; --brand-400:#5285c2; --brand-500:#3b6fa0; --brand-600:#325b86; --brand-700:#2b4a6c; --brand-800:#233a54; --brand-900:#1b2c40; --ink-950:#111827; --ink-900:#0f172a; --ink-800:#1e293b; --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-600:#059669; --emerald-700:#047857; --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309; --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-600:#e11d48; --rose-700:#be123c; --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-600:#0284c7; --sky-700:#0369a1; --accent:#0b5cab; --accent-2:#083f76; --radius:12px; --radius-lg:16px; --radius-sm:8px; --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08); --shadow:0 4px 12px rgba(15,23,42,.08); } * { box-sizing:border-box; } html,body { margin:0; padding:0; } body { background:var(--slate-100); color:var(--ink-900); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:14px; line-height:1.5; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } .icon { width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:none; } .h-4 { width:16px; height:16px; } .h-5 { width:20px; height:20px; } .muted { color:var(--slate-500); } .small { font-size:12px; } .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---------- App shell ---------- */ .layout { display:flex; min-height:100vh; } .sidebar { width:248px; flex:none; background:var(--ink-950); color:#cbd5e1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .sidebar-brand { padding:18px 18px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.07); } .sidebar-brand .logo { height:30px; width:auto; max-width:150px; object-fit:contain; } .sidebar-brand .app-name { font-weight:700; color:#fff; font-size:15px; letter-spacing:.2px; } .nav { padding:12px 10px; flex:1; overflow-y:auto; } .nav-section { padding:14px 10px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#64748b; } .nav-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm); color:#cbd5e1; font-weight:500; margin-bottom:2px; transition:background .12s,color .12s; } .nav-item:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; } .nav-item.active { background:var(--accent); color:#fff; } .nav-item .icon { width:18px; height:18px; } .sidebar-foot { padding:12px; border-top:1px solid rgba(255,255,255,.07); } .user-chip { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); } .user-chip .avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .user-chip .u-name { color:#fff; font-weight:600; font-size:13px; } .user-chip .u-role { color:#64748b; font-size:11px; } .content { flex:1; min-width:0; display:flex; flex-direction:column; } .topbar { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--slate-200); padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; } .topbar .brand-pill { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink-800); } .topbar .brand-pill .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); } .main { padding:24px; max-width:1100px; width:100%; margin:0 auto; } /* ---------- PageHeader ---------- */ .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; } .page-header .ph-left { display:flex; align-items:center; gap:13px; } .page-header .ph-icon { width:42px; height:42px; border-radius:11px; background:var(--brand-50); color:var(--accent); display:flex; align-items:center; justify-content:center; border:1px solid var(--brand-100); } .page-header .ph-icon .icon { width:21px; height:21px; } .page-header h1 { margin:0; font-size:20px; color:var(--ink-900); font-weight:700; } .page-header .ph-desc { margin:2px 0 0; color:var(--slate-500); font-size:13px; } .page-header .ph-actions { display:flex; gap:8px; align-items:center; } /* ---------- Card ---------- */ .card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } .card + .card { margin-top:16px; } .card-head { padding:16px 20px; border-bottom:1px solid var(--slate-200); } .card-head h2 { margin:0; font-size:15px; font-weight:700; color:var(--ink-900); } .card-head .c-desc { margin:2px 0 0; font-size:12px; color:var(--slate-500); } .card-body { padding:20px; } .card-body.tight { padding:0; } .card-foot { padding:14px 20px; border-top:1px solid var(--slate-200); display:flex; justify-content:flex-end; gap:8px; background:var(--slate-50); border-radius:0 0 var(--radius-lg) var(--radius-lg); } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--radius-sm); font-weight:600; font-size:13px; border:1px solid transparent; cursor:pointer; background:none; transition:background .12s,border-color .12s,opacity .12s; white-space:nowrap; text-decoration:none; } .btn:hover { text-decoration:none; } .btn .icon { width:16px; height:16px; } .btn-sm { padding:6px 10px; font-size:12px; } .btn-lg { padding:11px 18px; font-size:14px; } .btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent-2); } .btn-secondary { background:var(--brand-50); color:var(--accent); border-color:var(--brand-100); } .btn-secondary:hover { background:var(--brand-100); } .btn-outline { background:#fff; color:var(--ink-800); border-color:var(--slate-300); } .btn-outline:hover { background:var(--slate-50); } .btn-ghost { background:transparent; color:var(--slate-600); } .btn-ghost:hover { background:var(--slate-100); } .btn-danger { background:var(--rose-600); color:#fff; } .btn-danger:hover { background:var(--rose-700); } .btn-success { background:var(--emerald-600); color:#fff; } .btn-success:hover { background:var(--emerald-700); } .btn[disabled] { opacity:.55; cursor:not-allowed; } /* ---------- Badges ---------- */ .badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:600; border:1px solid; } .badge .icon { width:13px; height:13px; } .badge-emerald { background:var(--emerald-50); color:var(--emerald-700); border-color:#a7f3d0; } .badge-amber { background:var(--amber-50); color:var(--amber-700); border-color:#fde68a; } .badge-rose { background:var(--rose-50); color:var(--rose-700); border-color:#fecdd3; } .badge-sky { background:var(--sky-50); color:var(--sky-700); border-color:#bae6fd; } .badge-slate { background:var(--slate-100); color:var(--slate-600); border-color:var(--slate-200); } .badge-brand { background:var(--brand-50); color:var(--accent); border-color:var(--brand-100); } .badge-kommer { background:#e8f1fb; color:#0b5cab; border-color:#c5dcf5; } .badge-seleco { background:#e6f5ee; color:#1d6e51; border-color:#bfe6d2; } /* ---------- Forms ---------- */ .field { margin-bottom:16px; } .field:last-child { margin-bottom:0; } .label { display:block; font-weight:600; font-size:13px; color:var(--ink-800); margin-bottom:6px; } .hint { font-size:12px; color:var(--slate-500); margin-top:5px; } .input, .select, .textarea { width:100%; padding:9px 12px; border:1px solid var(--slate-300); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:#fff; color:var(--ink-900); } .input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .textarea { resize:vertical; min-height:78px; } .check { display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--slate-200); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; } .check:hover { background:var(--slate-50); } .check input { width:16px; height:16px; accent-color:var(--accent); } .row { display:flex; gap:14px; flex-wrap:wrap; } .row > * { flex:1; min-width:200px; } /* ---------- Tables / file lists ---------- */ .table { width:100%; border-collapse:collapse; } .table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-500); padding:10px 16px; border-bottom:1px solid var(--slate-200); font-weight:600; } .table td { padding:12px 16px; border-bottom:1px solid var(--slate-100); vertical-align:middle; } .table tr:last-child td { border-bottom:none; } .table tr:hover td { background:var(--slate-50); } .file-name { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink-900); min-width:0; } .file-name .f-ico { width:34px; height:34px; border-radius:9px; background:var(--slate-100); display:flex; align-items:center; justify-content:center; color:var(--slate-600); flex:none; } .file-name .f-ico .icon { width:18px; height:18px; } .file-name .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .file-name .f-thumb { width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none; background:var(--slate-100); border:1px solid var(--slate-200); display:block; } .f-thumb-link { display:block; flex:none; line-height:0; } .f-thumb-link:hover .f-thumb { border-color:var(--accent); } .actions-cell { display:flex; gap:6px; justify-content:flex-end; } /* ---------- EmptyState ---------- */ .empty { text-align:center; padding:46px 20px; } .empty .e-ico { width:54px; height:54px; border-radius:14px; background:var(--slate-100); color:var(--slate-400); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; } .empty .e-ico .icon { width:26px; height:26px; } .empty h3 { margin:0 0 4px; font-size:15px; color:var(--ink-800); } .empty p { margin:0 0 16px; color:var(--slate-500); font-size:13px; } /* ---------- Grid cards (projekty) ---------- */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; } .proj-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .12s,border-color .12s; } .proj-card:hover { box-shadow:var(--shadow); border-color:var(--brand-200); text-decoration:none; } .proj-card .pc-top { display:flex; align-items:center; gap:12px; } .proj-card .pc-ico { width:42px; height:42px; border-radius:11px; background:var(--brand-50); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .proj-card .pc-ico .icon { width:22px; height:22px; } .proj-card .pc-title { font-weight:700; color:var(--ink-900); font-size:15px; } .proj-card .pc-desc { color:var(--slate-500); font-size:13px; min-height:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .proj-card .pc-meta { display:flex; align-items:center; gap:6px; justify-content:space-between; margin-top:auto; padding-top:6px; border-top:1px solid var(--slate-100); } /* ---------- Flash ---------- */ .flash { padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; display:flex; gap:10px; align-items:center; font-size:13px; border:1px solid; } .flash .icon { width:18px; height:18px; flex:none; } .flash-success { background:var(--emerald-50); color:var(--emerald-700); border-color:#a7f3d0; } .flash-error { background:var(--rose-50); color:var(--rose-700); border-color:#fecdd3; } .flash-info { background:var(--sky-50); color:var(--sky-700); border-color:#bae6fd; } /* ---------- Auth pages ---------- */ .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); } .auth-card { width:100%; max-width:420px; background:#fff; border-radius:var(--radius-lg); box-shadow:0 20px 50px rgba(15,23,42,.25); overflow:hidden; } .auth-head { padding:28px 28px 8px; text-align:center; } .auth-head .logo { height:46px; max-width:200px; object-fit:contain; margin-bottom:14px; } .auth-head h1 { margin:0; font-size:19px; color:var(--ink-900); } .auth-head p { margin:6px 0 0; color:var(--slate-500); font-size:13px; } .auth-body { padding:20px 28px 28px; } .totp-secret { font-family:ui-monospace,Consolas,monospace; background:var(--slate-100); border:1px dashed var(--slate-300); border-radius:var(--radius-sm); padding:10px; text-align:center; letter-spacing:2px; font-size:15px; word-break:break-all; } .qr-box { text-align:center; margin:14px 0; } .qr-box img { width:200px; height:200px; border:1px solid var(--slate-200); border-radius:var(--radius-sm); padding:8px; background:#fff; } /* ---------- Public explorer (link udostępniania) ---------- */ .exp-body { background:var(--slate-100); min-height:100vh; } .exp-header { background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff; padding:28px 0; } .exp-header .wrap { max-width:920px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:18px; } .exp-header .logo-tile { background:#fff; border-radius:12px; padding:10px 14px; display:flex; align-items:center; } .exp-header .logo-tile img { height:40px; max-width:170px; object-fit:contain; } .exp-header h1 { margin:0; font-size:22px; } .exp-header .sub { opacity:.9; font-size:13px; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; } .exp-header .sub span { display:inline-flex; align-items:center; gap:6px; } .exp-main { max-width:920px; margin:0 auto; padding:24px; } .exp-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; } .exp-toolbar .t-title { font-weight:700; font-size:15px; color:var(--ink-900); display:flex; align-items:center; gap:8px; } .exp-footer { text-align:center; padding:24px; color:var(--slate-500); font-size:12px; white-space:pre-line; } .expired { text-align:center; padding:60px 24px; } .expired .e-ico { width:64px; height:64px; border-radius:16px; background:var(--rose-50); color:var(--rose-600); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; } /* ---------- Misc ---------- */ .stack { display:flex; flex-direction:column; gap:16px; } .flex { display:flex; align-items:center; gap:8px; } .between { justify-content:space-between; } .wrap-gap { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mb-2{margin-bottom:8px} .divider { height:1px; background:var(--slate-200); margin:16px 0; } hr { border:none; border-top:1px solid var(--slate-200); margin:16px 0; } /* ---------- Responsive ---------- */ @media (max-width:820px) { .sidebar { position:fixed; left:-260px; z-index:50; transition:left .2s; box-shadow:var(--shadow); } .sidebar.open { left:0; } .menu-toggle { display:inline-flex !important; } .backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:40; } .backdrop.show { display:block; } } .menu-toggle { display:none; }