/* ocloudhs design system layer: scale tokens and the shared components built on them. Loaded right after brand.css; colours come from theme.css. Fixes are made here once, in shared selectors, instead of per-page patches. */ :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:48px; --fs-xs:12px;--fs-sm:13px;--fs-body:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px; --ctl-h:46px;--ctl-h-sm:38px;--r-pill:999px; --shadow-card:0 1px 2px #1d0f4f0f,0 6px 20px -12px #3a1d9a33;--shadow-pop:0 12px 32px -8px #1d0f4f40; --ease:cubic-bezier(.2,.7,.3,1);--dur:.16s; --measure:72ch; } /* ---------- vertical rhythm: a card that follows anything in the page flow never touches it ---------- Sibling margins collapse, so blocks that already keep a larger bottom margin are unaffected. */ .workspace main>*+:is(.panel,.table-scroll,.empty-state,.notice,.admin-stats,.file-detail-layout,.health-summary,.section-block,.file-section), .workspace main>:is(.panel,.table-scroll,.empty-state,.notice)+*{margin-top:var(--gap,20px)} .workspace main>:is(.page-heading,.subnav,.toasts)+*{margin-top:0} /* the first and last child of a card do not add their own margins to its padding */ .panel>:first-child,.empty-state>:first-child{margin-top:0} .panel>:last-child,.empty-state>:last-child{margin-bottom:0} .workspace .panel>h2:first-child{font-size:var(--fs-xl);letter-spacing:-.3px;margin-bottom:var(--space-3)} .workspace main>p.muted{max-width:var(--measure)} /* ---------- tabs (.subnav): one line that scrolls sideways on narrow screens instead of wrapping ---------- */ .subnav{flex-wrap:nowrap;justify-content:flex-start;gap:var(--space-1);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:var(--space-4) 0 var(--space-6)} .subnav::-webkit-scrollbar{display:none} @media (min-width:900px){.subnav{flex-wrap:wrap;overflow-x:visible}} /* wide screens: every tab visible, a second row instead of a hidden scroll */ .subnav a{flex:0 0 auto;white-space:nowrap;padding:10px 14px;border-radius:var(--r-ctl,12px) var(--r-ctl,12px) 0 0;font-weight:500;transition:color var(--dur),background var(--dur)} .subnav a:hover{color:var(--ink);background:color-mix(in srgb,var(--tint) 60%,transparent)} .subnav a[aria-current=page]{font-weight:600} .subnav[data-more-end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)} .subnav[data-more-start]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)} .subnav[data-more-start][data-more-end]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)} /* ---------- interaction states shared by every button-like control ---------- */ button,.primary,.secondary,.danger,.quiet,.icon-btn,.text-link{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} :is(button,.primary,.secondary,.danger):not(:disabled):active{transform:translateY(1px)} :is(button,.primary,.secondary,.danger,input,select,textarea):disabled,[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none} .primary:not(:disabled):hover{filter:brightness(1.08)} button[aria-busy=true],.is-busy{cursor:progress;opacity:.7} .text-link:hover{text-decoration:underline;text-underline-offset:3px} /* ---------- forms: Django help text and error lists read as quiet hints, not body copy ---------- */ .helptext,.helptext ul{font-size:var(--fs-sm);line-height:1.45;color:var(--muted)} .helptext ul,ul.helptext{margin:var(--space-2) 0 0;padding-left:18px} .helptext li+li{margin-top:2px} .errorlist{margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--fs-sm);font-weight:500} /* ---------- tables: brand brand — a solid violet header with white text, a lime marker on selected rows ---------- The only place that colours table headers and selected rows, for every layout (.layout-*) and both themes. */ :root{--th-bg:var(--uu-primary,#4b17cc);--th-ink:#fff;--th-sub:#e4dcff;--row-pick:color-mix(in srgb,var(--uu-lime,#b8f54a) 20%,var(--card));--row-pick-bar:#7cbf1a} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--th-bg:#3b2591;--th-sub:#d6cbff;--row-pick:color-mix(in srgb,var(--uu-lime,#b8f54a) 12%,var(--card));--row-pick-bar:var(--uu-lime,#b8f54a)}} :root[data-theme="dark"]{--th-bg:#3b2591;--th-sub:#d6cbff;--row-pick:color-mix(in srgb,var(--uu-lime,#b8f54a) 12%,var(--card));--row-pick-bar:var(--uu-lime,#b8f54a)} .file-table thead th{background:var(--th-bg);color:var(--th-ink);border:0;font-weight:600} .file-table thead th+th{color:var(--th-sub)} .file-table thead th :is(a,button){color:inherit} .file-table thead input[type=checkbox]{accent-color:var(--uu-lime,#b8f54a)} .file-table td{font-variant-numeric:tabular-nums} .file-table tbody tr:is(.is-selected,:has(.bulk-check:checked)){background:var(--row-pick)} /* the checkbox column: header and row boxes share one size and sit on one vertical line; icons in a row share its middle */ .file-table :is(th,td).check-col{width:56px;padding-left:20px;padding-right:0;vertical-align:middle} .file-table .check-col input[type=checkbox]{display:block;margin:0;border-radius:6px} .file-table thead .check-col input[type=checkbox]{accent-color:var(--uu-lime,#b8f54a)} .file-table td{vertical-align:middle} .file-table .file-name-cell{display:flex;align-items:center;gap:14px} .file-table .type-icon{flex:none} .file-table .row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px} /* ---------- one size per control kind on workspace pages ---------- 46 px: page buttons, fields and selects; 40 px: icon buttons in rows and cards, the list/tiles switch; 40 px boxes for file and folder icons; 24 px checkboxes (WCAG 2.5.8); 18 px icons inside icon buttons, 20 px in the header */ .workspace:not(.layout-panes) main :is(.primary,.secondary,.danger):not(.bulk-btn), .workspace:not(.layout-panes) main select{min-height:46px;height:46px;border-radius:var(--r-ctl,12px)} .workspace:not(.layout-panes) main .search-input{box-sizing:border-box;height:46px;min-height:46px;border-radius:var(--r-ctl,12px)} .workspace:not(.layout-panes) main .search-input input:not([type=checkbox]){height:100%;min-height:0} .workspace:not(.layout-panes) main .search-input>.icon{width:18px;height:18px} .workspace:not(.layout-panes) main .file-table td :is(.primary,.secondary,.danger){min-height:var(--ctl-h-sm,36px);height:auto} .workspace :is(.row-actions .icon-button,.row-actions .row-menu>summary,.folder-card .pin-folder,.tile-tools .icon-button){display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:var(--r-ctl,12px);font-size:16px;line-height:1} .workspace :is(.row-actions,.folder-card,.tile-tools) :is(.icon-button,summary,.pin-folder) .icon{width:18px;height:18px} .workspace .header :is(.icon-btn) .icon{width:20px;height:20px} .workspace .header .icon-btn{width:46px;height:46px} .workspace .layout-switch a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px} .workspace :is(.type-icon,.folder-card .folder-glyph){display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px} .workspace :is(.type-icon,.folder-card .folder-glyph) .icon{width:20px;height:20px} .workspace .bulk-check,.workspace .file-table .check-col input[type=checkbox]{width:24px;height:24px;min-width:24px;min-height:24px;margin:0} /* ---------- bulk bar: floats at the bottom of the screen and slides in, so choosing a file never moves the page ---------- */ .bulk-bar{position:fixed;z-index:40;bottom:20px;left:calc(var(--sb,0px) + 24px);right:24px;width:fit-content;max-width:calc(100vw - var(--sb,0px) - 48px);margin:0 auto; display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--card); box-shadow:0 2px 6px #1d0f4f14,0 18px 40px -12px #1d0f4f55; transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s} .bulk-bar[hidden]{display:flex;visibility:hidden;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s} .bulk-selected{display:inline-flex;align-items:center;min-height:38px;padding:0 4px 0 14px;border-radius:12px;background:var(--th-bg);color:#fff} .bulk-count{font-size:13px;font-weight:700;white-space:nowrap} .bulk-clear{display:grid;place-items:center;width:30px;height:30px;margin-left:6px;padding:0;border:0;border-radius:9px;background:#ffffff1f;color:#fff;font-size:18px;line-height:1;cursor:pointer} .bulk-clear:hover{background:#ffffff3d} .bulk-group{display:inline-flex;align-items:center;gap:4px;padding-left:6px;margin-left:2px;border-left:1px solid var(--line)} .bulk-bar .bulk-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .14s} .bulk-bar .bulk-btn .icon{width:18px;height:18px;color:var(--accent)} .bulk-bar .bulk-icon{justify-content:center;width:38px;padding:0;font-size:17px} .bulk-bar .bulk-btn:hover:not(:disabled){background:var(--tint)} .bulk-bar .bulk-btn.is-danger,.bulk-bar .bulk-btn.is-danger .icon{color:var(--danger-text,#b3261e)} .bulk-bar .bulk-btn.is-danger:hover{background:color-mix(in srgb,var(--danger-text,#b3261e) 10%,transparent)} .bulk-bar select,.bulk-bar .bulk-tags input{width:auto;max-width:180px;min-height:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px} .bulk-bar .bulk-tags input{width:96px;min-width:0} .bulk-end{border-left:0} .bulk-link{min-height:38px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer} .bulk-link:hover{color:var(--ink);background:var(--surface-2)} .workspace main:has(.bulk-bar:not([hidden])){padding-bottom:140px} /* the last rows stay reachable above the bar */ @media (max-width:900px){.bulk-bar{left:12px;right:12px;bottom:12px;max-width:calc(100vw - 24px)}.bulk-group{border-left:0;padding-left:0}} @media (max-width:620px){.bulk-bar .bulk-btn{padding:0 10px}.bulk-bar select{max-width:150px}} @media (prefers-reduced-motion:reduce){.bulk-bar,.bulk-bar[hidden]{transform:none;transition:opacity .1s,visibility 0s}} /* ---------- tables: an empty-result row is centred and quiet ---------- */ .file-table td[colspan]{text-align:center;color:var(--muted);padding:var(--space-7) var(--space-5)} .file-table td :is(.primary,.secondary,.danger){min-height:var(--ctl-h-sm);padding:0 14px;white-space:nowrap} /* on phones only the file list (.file-list hides its secondary columns) may shrink to the screen; every other table keeps readable columns and scrolls sideways inside its own container instead of squeezing cells into each other */ @media (max-width:620px){ .file-table:not(.file-list){min-width:560px} .table-scroll:has(.file-table:not(.file-list)){overflow-x:auto;overscroll-behavior-x:contain} .file-table th{white-space:nowrap} } .scroll-x{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain} .scroll-x,.table-scroll{position:relative} /* keeps absolutely positioned .sr-only text inside the scroller */ /* ---------- meters: themed track and fill (tiles and the storage card restyle their own) ---------- */ meter{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--r-pill);background:var(--tint);overflow:hidden} meter::-webkit-meter-bar{background:var(--tint);border:0;border-radius:var(--r-pill);height:8px} meter::-webkit-meter-optimum-value{background:var(--uu-violet,#7138ff);border-radius:var(--r-pill)} meter::-moz-meter-bar{background:var(--uu-violet,#7138ff);border-radius:var(--r-pill)} .grant-row meter{margin-top:var(--space-2)} /* ---------- empty states ---------- */ .empty-symbol{background:var(--tint)} .empty-state.compact{padding:var(--space-7) var(--space-6)} .empty-state.compact h2{font-size:var(--fs-lg);margin:0 0 var(--space-1)} /* ---------- list rows (admin lists, events, grants) ---------- */ .grant-row{padding:var(--space-3) 0;border-bottom-color:var(--line)} .grant-row strong{font-size:var(--fs-body)} .grant-row small{font-size:var(--fs-sm);margin-top:2px} .panel>.grant-row:last-child,.panel>.grant-row:has(+ :not(.grant-row)){border-bottom:0} .panel>.grant-row+:is(a,button,form,p){margin-top:var(--space-4)} /* rows placed straight into the page (lists of groups, rules, templates, activity) read as one card */ .workspace main>.grant-row{background:var(--card);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);margin:0} .workspace main>:not(.grant-row)+.grant-row{margin-top:var(--gap,20px);border-top-left-radius:var(--r-card,16px);border-top-right-radius:var(--r-card,16px)} .workspace main>.grant-row:not(:has(+ .grant-row)){border-bottom:0;border-bottom-left-radius:var(--r-card,16px);border-bottom-right-radius:var(--r-card,16px);box-shadow:0 8px 20px -14px #3a1d9a33} .workspace main>.grant-row:hover{background:color-mix(in srgb,var(--surface-2) 60%,var(--card))} .grant-row>.row-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:0 0 auto;opacity:1;position:static} @media (max-width:620px){.grant-row:has(>.row-actions){flex-wrap:wrap}.grant-row>.row-actions{width:100%}.workspace main>.grant-row{padding:var(--space-3) var(--space-4)}} .audit-code{font:12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)} /* ---------- key figures (admin overview and similar) ---------- */ .admin-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin:0} @media (max-width:1100px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} .workspace .admin-stat{padding:var(--space-5) var(--space-6);gap:2px} .admin-stat small{font-size:var(--fs-sm);font-weight:600} .admin-stat strong{font-size:30px;line-height:1.1} .admin-stat .muted{font-size:var(--fs-sm)} @media (max-width:620px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)} .workspace .admin-stat{padding:var(--space-4)}.admin-stat strong{font-size:24px}} /* ---------- onboarding: finished steps are quieter but keep readable contrast (was opacity .75, failed AA) ---------- */ .ob-steps li.is-done{opacity:1} .ob-steps li.is-done a{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px} /* ---------- sidebar ---------- */ .side-nav #project-pins>.nav-label{margin-top:20px} /* ---------- dashboard tiles: three tiles in the last row, no fixed height on phones ---------- */ .uu-tile{min-height:200px;padding:32px 36px} .uu-tile .uu-stickers{position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;margin-top:var(--space-5)} .uu-tile .uu-sticker{font-size:16px;padding:6px 14px;margin:0} .uu-tile .uu-stats{gap:clamp(24px,3vw,56px);row-gap:var(--space-3)} .uu-tile.uu-a .uu-more,.uu-tile.uu-c .uu-more{margin-top:var(--space-6)} .uu-e{grid-column:span 6}.uu-f,.uu-g{grid-column:span 3} .uu-tile.uu-f,.uu-tile.uu-g{min-height:0} .uu-tile.uu-f h2,.uu-tile.uu-g h2{overflow-wrap:anywhere} @media (max-width:1100px){.uu-e{grid-column:span 12}.uu-f,.uu-g{grid-column:span 6}} @media (max-width:720px){.uu-tile{min-height:0;gap:var(--space-5)}.uu-tile h2{margin-bottom:var(--space-3)}.uu-stickers{display:none} .recent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)} .recent-card{padding:var(--space-3)}.recent-card .file-illustration{height:64px;margin-bottom:0}.recent-card h3{font-size:var(--fs-body);margin:10px 0 4px;overflow-wrap:anywhere} .uu-tile .uu-more{margin-top:var(--space-2)}.uu-f,.uu-g{grid-column:span 12}.uu-tiles{gap:var(--space-3)}} /* ---------- team space tiles keep their brand fill (the generic card rule above would turn them white) ---------- */ .uu-tile.space-tile{box-shadow:none;min-height:180px;color:#fff} .uu-tile.space-tile.uu-purple,.uu-tile.space-tile.uu-deep{background:var(--uu-primary,#4b17cc)} .uu-tile.space-tile.uu-lav{background:#8d6ff0} .uu-tile.space-tile:hover{filter:brightness(1.06)} .space-tile .uu-stats{display:flex;flex-wrap:wrap;gap:var(--space-5)} .space-tile .uu-stat span{display:block;font-size:var(--fs-sm)} /* ---------- report KPIs: equal columns, no orphan on its own row ---------- */ .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-6)} @media (min-width:1400px){.kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}} .kpi-grid li{background:var(--card);border-color:transparent;box-shadow:var(--shadow-card)} @media (max-width:620px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-grid strong{font-size:24px}} /* ---------- filter chips: a short row of mutually exclusive filters kept in the address ---------- */ .filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0 var(--space-4)} .filter-chips a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--ctl-h-sm);padding:0 14px;border-radius:var(--r-pill); background:var(--card);border:1px solid var(--line);font-size:var(--fs-body);font-weight:500;color:var(--ink);text-decoration:none} .filter-chips a b{font-size:var(--fs-xs);min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:var(--surface-2);text-align:center} .filter-chips a:hover{border-color:var(--uu-lavender,#9b76ef);background:var(--surface-2)} .filter-chips a[aria-current=true]{background:var(--uu-primary,#4b17cc);border-color:var(--uu-primary,#4b17cc);color:#fff} .filter-chips a[aria-current=true] b{background:#ffffff2e;color:#fff} /* ---------- status colours shared by badges, dots and metrics ---------- */ .sev-problem{--sev:var(--bad);--sev-bg:var(--bad-bg)} .sev-warning{--sev:var(--warn);--sev-bg:var(--warn-bg)} .sev-info{--sev:var(--note);--sev-bg:var(--note-bg)} .count-badge.sev-problem,.count-badge.sev-warning,.count-badge.sev-info{background:var(--sev-bg);color:var(--sev)} /* ---------- content health ---------- */ .health-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-5) var(--space-6); padding:var(--space-6);border-radius:var(--r-card,16px);background:var(--card);box-shadow:var(--shadow-card)} .health-summary.is-ok{--state:var(--ok);--state-bg:var(--ok-bg)} .health-summary.is-problem{--state:var(--bad);--state-bg:var(--bad-bg)} .health-summary.is-warning{--state:var(--warn);--state-bg:var(--warn-bg)} .health-summary.is-info{--state:var(--note);--state-bg:var(--note-bg)} .health-state-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--state-bg);color:var(--state)} .health-state-icon .icon{width:28px;height:28px;stroke-width:2.2} .health-state-text h2{margin:0 0 var(--space-1);font-size:var(--fs-xl);letter-spacing:-.3px} .health-state-text p{margin:0;font-size:var(--fs-body);line-height:1.5} .health-time{display:block;margin-top:2px;font-size:var(--fs-xs)} .health-metrics{display:flex;gap:var(--space-2);margin:0} .health-metrics .metric{min-width:88px;padding:10px 14px;border-radius:var(--r-ctl,12px);background:var(--sev-bg,var(--surface-2))} .health-metrics dt{font-size:var(--fs-xs);font-weight:600;color:var(--sev,var(--muted))} .health-metrics dd{margin:2px 0 0;font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--sev,var(--ink))} .health-metrics dd small{font-size:var(--fs-sm);font-weight:600;color:var(--muted)} .health-metrics .metric.is-zero{background:var(--surface-2)} .health-metrics .metric.is-zero :is(dt,dd){color:var(--muted)} .health-metrics .is-clean{background:var(--ok-bg)} .health-metrics .is-clean :is(dt,dd){color:var(--ok)} .health-issues{display:grid;gap:var(--space-4)} .health-group{padding:var(--space-5) var(--space-6) var(--space-2);border-radius:var(--r-card,16px);background:var(--card);box-shadow:var(--shadow-card)} .health-group>.health-area{margin:0 0 var(--space-1);color:var(--muted)} .health-issue{padding:var(--space-4) 0} .health-issue+.health-issue{border-top:1px solid var(--line)} .health-issue>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4);align-items:start} .health-issue .sev-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--sev-bg);color:var(--sev)} .health-issue .sev-dot .icon{width:20px;height:20px} .health-area{font-size:var(--fs-xs);font-weight:700;letter-spacing:.8px;text-transform:uppercase} .health-issue h3{margin:6px 0 2px;font-size:var(--fs-md);letter-spacing:-.1px} .health-issue header p{margin:0;max-width:var(--measure)} .health-issue .count-badge{min-width:32px;height:28px;margin-top:4px;border-radius:14px;font-size:var(--fs-body)} .health-list{list-style:none;margin:var(--space-2) 0 0 52px;padding:0} .health-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:48px;padding:var(--space-2) var(--space-3);margin:0 calc(-1 * var(--space-3));border-radius:var(--r-ctl,12px);text-decoration:none;color:inherit} .health-item:hover{background:var(--surface-2)} .health-item-text{display:flex;flex-direction:column;min-width:0} .health-item-name{font-weight:600;font-size:var(--fs-body);overflow-wrap:anywhere} .health-item small{font-size:var(--fs-sm);overflow-wrap:anywhere} .health-fix{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--accent);white-space:nowrap} .health-fix .icon{width:16px;height:16px;transition:transform var(--dur) var(--ease)} .health-item:hover .health-fix .icon{transform:translateX(3px)} .health-more summary{margin-top:var(--space-2);padding:var(--space-2) 0;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--accent)} .health-more .health-list{margin-top:0} .health-limit{margin:var(--space-3) 0 0} .health-clean{margin-top:var(--space-7)} .health-clean h2{font-size:var(--fs-md);margin:0 0 var(--space-3)} .health-clean h2 .muted{font-weight:500} .health-clean ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-2)} .health-clean li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);align-items:center;padding:10px 14px;border-radius:var(--r-ctl,12px);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);font-size:var(--fs-body)} .health-clean li small{grid-column:2;font-size:var(--fs-xs)} .health-clean .ok-dot{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-bg);color:var(--ok)} .health-clean .ok-dot .icon{width:14px;height:14px;stroke-width:2.6} @media (max-width:900px){ .health-summary{grid-template-columns:auto minmax(0,1fr)} .health-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .health-metrics .metric{min-width:0} } @media (max-width:620px){ .health-summary{padding:var(--space-5);gap:var(--space-4)} .health-state-icon{width:44px;height:44px;border-radius:12px} .health-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .health-group{padding:var(--space-4) var(--space-4) var(--space-1)} .health-list{margin-left:0} .health-issue>header{gap:var(--space-3)} .health-item{align-items:flex-start;flex-direction:column;gap:var(--space-1)} } /* ====================================================================================================== Workspace layouts, chosen per account in the profile (cloud.User.ui_layout): «Кампус» (body.layout-campus) is the default look above; «Проводник» (body.layout-panes) below turns the sidebar into an icon rail, shows the folder tree on file pages and uses a denser, flatter surface. ====================================================================================================== */ /* ---------- profile: layout choice ---------- */ .layout-choice fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3);margin:0 0 var(--space-5);padding:0;border:0} .layout-option{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-4);border:2px solid var(--line);border-radius:var(--r-card,16px);background:var(--surface);cursor:pointer;transition:border-color var(--dur),background-color var(--dur)} .layout-option:hover{border-color:var(--uu-lavender,#9b76ef)} .layout-option:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--tint) 45%,var(--surface))} .layout-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .layout-option input{position:absolute;opacity:0;pointer-events:none} .layout-option:has(input:checked)::after{content:"✓";position:absolute;top:10px;right:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--surface);font-weight:700;font-size:13px} .layout-text{display:grid;gap:4px} .layout-text strong{font-size:var(--fs-md)} .layout-text small{font-size:var(--fs-sm);line-height:1.45;color:var(--muted)} .layout-sketch{display:grid;gap:4px;height:82px;padding:6px;border-radius:10px;background:var(--canvas);border:1px solid var(--line)} .layout-sketch i{display:block;border-radius:3px;background:var(--surface);border:1px solid var(--line)} .layout-sketch.is-campus{grid-template-columns:26px 1fr 1fr;grid-template-rows:10px 1fr 1fr;grid-template-areas:"nav head head" "nav card card2" "nav list list"} .layout-sketch.is-campus .s-nav{grid-area:nav;background:var(--surface)} .layout-sketch.is-campus .s-head{grid-area:head;background:var(--uu-primary,#4b17cc);border:0} .layout-sketch.is-campus .s-card:nth-of-type(3){grid-area:card} .layout-sketch.is-campus .s-card:nth-of-type(4){grid-area:card2} .layout-sketch.is-campus .s-list{grid-area:list} .layout-sketch.is-panes{grid-template-columns:10px 26px 1fr;grid-template-rows:10px 1fr;grid-template-areas:"rail tree head" "rail tree list";gap:0;padding:0;overflow:hidden;background:var(--surface)} .layout-sketch.is-panes i{border-radius:0;border-width:0 1px 0 0} .layout-sketch.is-panes .s-rail{grid-area:rail;background:#1b1240;border:0} .layout-sketch.is-panes .s-tree{grid-area:tree;background:repeating-linear-gradient(180deg,var(--surface-2) 0 6px,var(--line) 6px 7px,var(--surface-2) 7px 12px)} .layout-sketch.is-panes .s-head{grid-area:head;border-width:0 0 1px} .layout-sketch.is-panes .s-list{grid-area:list;border:0;background:repeating-linear-gradient(180deg,var(--surface) 0 9px,var(--line) 9px 10px)} @media (max-width:620px){.layout-option{grid-template-columns:84px minmax(0,1fr)}.layout-sketch{height:64px}} /* ---------- «Проводник»: density and flat surfaces on every page ---------- */ body.layout-panes{--r-card:8px;--r-ctl:6px;--gap:12px;--gap-lg:20px;--hd:56px;--ctl-h:38px;--ctl-h-sm:32px;--tree:248px} .layout-panes.workspace main,.layout-panes.workspace footer{background:var(--surface)} .layout-panes.workspace main{padding:20px 24px 48px} .layout-panes.workspace h1{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.4px} .layout-panes.workspace .page-heading{margin-bottom:16px;align-items:center} .layout-panes.workspace .eyebrow{margin-bottom:4px} .layout-panes :is(.panel,.table-scroll,.empty-state,.stat,.folder-card,.video-card,.recent-card,.space-tile,.health-summary,.health-group,.file-tile,.kpi-grid li,.admin-stat,.processing-panel){box-shadow:none;border:1px solid var(--line)} .layout-panes.workspace .panel{padding:20px} .layout-panes.workspace :is(.primary,.secondary,.danger){min-height:36px;padding:0 14px;font-size:13.5px} .layout-panes.workspace .page-heading>.secondary,.layout-panes.workspace .page-heading .heading-actions>.secondary:last-child{padding-right:14px;background:var(--surface)} .layout-panes.workspace .page-heading>.secondary .icon,.layout-panes.workspace .page-heading .heading-actions>.secondary:last-child .icon{margin-right:0} .layout-panes.workspace :is(select,.search-input input:not([type=checkbox])){min-height:38px} .layout-panes.workspace input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:38px} .layout-panes .file-table{font-size:13.5px} .layout-panes .file-table th,.layout-panes .file-table td{padding:8px 14px} .layout-panes .file-table th{font-weight:600} .layout-panes .uu-tile{min-height:0;padding:22px 24px} .layout-panes .uu-tiles{gap:12px} .layout-panes .header .header-search input{height:40px} .layout-panes .grant-row{padding:10px 0} .layout-panes .filter-chips a{min-height:32px;border-radius:6px} .layout-panes .subnav a{padding:8px 12px} /* rail and tree exist only where there is room for them; phones keep the drawer menu */ @media (min-width:901px){ body.layout-panes{--sb:64px} .layout-panes.workspace .brand{flex:0 0 auto;width:auto;padding:0 14px 0 13px} .layout-panes.workspace .header-search{margin-left:12px} .layout-panes.workspace .sidebar{padding:10px 10px 16px;gap:2px;align-items:center;background:#1b1240;border-right:0;scrollbar-width:none} .layout-panes .side-nav{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%} .layout-panes .side-nav .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0} .layout-panes .side-nav .nav-label~.nav-label{position:static;width:32px;height:1px;margin:8px 0;overflow:visible;clip-path:none;background:#3b2f73;font-size:0;color:transparent} .layout-panes.workspace .side-nav a{position:relative;justify-content:center;width:44px;min-height:40px;padding:0;gap:0;border-radius:8px;font-size:0;color:#d9d2f5} .layout-panes.workspace .side-nav a .icon{width:20px;height:20px;color:#b3aad8} .layout-panes.workspace .side-nav a:hover{background:#2a1f5c} .layout-panes.workspace .side-nav a:hover .icon{color:#fff} .layout-panes.workspace .side-nav a[aria-current=page]{background:var(--uu-lime,#b8f54a)} .layout-panes.workspace .side-nav a[aria-current=page] .icon{color:#16112b} .layout-panes.workspace .side-nav a .count-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:10px;margin:0} .layout-panes #project-pins,.layout-panes .storage-card{display:none} .layout-panes.has-tree.workspace main,.layout-panes.has-tree.workspace footer{margin-left:calc(var(--sb) + var(--tree))} .folder-tree{position:fixed;z-index:25;top:var(--hd);bottom:0;left:var(--sb);width:var(--tree);overflow:auto;overscroll-behavior:contain;padding:12px 8px 24px;background:var(--surface-2);border-right:1px solid var(--line);scrollbar-width:thin} } .folder-tree{display:block;gap:0} /* app.css styles every