/* ==========================================================================
   Item Memory — main stylesheet
   Edit --header-height, --footer-height, --sidebar-width in :root to resize.
   To toggle header stickiness: set --header-position to sticky | relative.
   ========================================================================== */

/* font — Inter (SIL Open Font License 1.1) */
@font-face{font-family:'Inter';src:url('../fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* variables */
:root{--header-height:56px;--footer-height:42px;--sidebar-width:224px;--container-width:1440px;--header-position:sticky;--header-bg:#0f172a;--header-border:rgba(255,255,255,.07);--bg:#f4f3ef;--surface:#fff;--surface-sub:#f9f8f5;--accent:#2c52a0;--accent-dark:#1e3d7a;--accent-light:#eaeefc;--accent-border:#a3b8e8;--accent-ring:rgba(44,82,160,.12);--text:#111418;--text-muted:#636978;--text-faint:#9ca3af;--border:#dcdad4;--border-strong:#b8b4ac;--radius:3px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);--green:#16a34a;--green-bg:#f0fdf4;--green-border:#86efac;--green-ring:rgba(22,163,74,.12);--red:#dc2626;--red-bg:#fef2f2;--red-border:#fca5a5;--red-ring:rgba(220,38,38,.12);--amber:#d97706;--amber-bg:#fffbeb;--amber-border:#fcd34d;--blue:#2563eb;--blue-bg:#eff6ff;--blue-border:#93c5fd;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'Cascadia Code','JetBrains Mono','Fira Code',ui-monospace,monospace}

/* reset */
*{margin:0;padding:0;box-sizing:border-box}

/* base */
html{scrollbar-gutter:stable;font-family:var(--font);font-size:16px;color:var(--text);background:var(--bg)}
body{min-height:100vh;min-width:360px;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
/* external link indicator — add class .link-external to show open-in-new-tab icon after link text */
.link-external::after{content:'';display:inline-block;width:.7em;height:.7em;margin-left:.25em;vertical-align:middle;flex-shrink:0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain}
h1{margin-bottom:1.25rem;text-align:center}
h2,h3,h4,h5,h6{margin-bottom:.75rem}
/* inside flex/grid layout helpers gap handles spacing — reset heading margins */
.vstack > h1,.vstack > h2,.vstack > h3,.vstack > h4,.vstack > h5,.vstack > h6,
.hstack > h1,.hstack > h2,.hstack > h3,.hstack > h4,.hstack > h5,.hstack > h6,
.card-body > h1,.card-body > h2,.card-body > h3,.card-body > h4,.card-body > h5,.card-body > h6{margin-bottom:0}

/* header */
.header{height:var(--header-height);background:var(--header-bg);border-bottom:1px solid var(--header-border);position:var(--header-position);top:0;z-index:100;flex-shrink:0}
.header-inner{height:100%;max-width:var(--container-width);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem}

/* logo */
.logo{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:700;color:#fff;letter-spacing:-.02em;flex-shrink:0}
.logo:hover{color:var(--accent-border)}
.logo img{display:block;flex-shrink:0}

/* header menu — main navigation links between logo and right controls */
.header-menu{display:flex;align-items:center;gap:.25rem}
.header-menu-item{padding:.375rem .75rem;font-size:.875rem;color:rgba(255,255,255,.65);border-radius:var(--radius);transition:color .1s,background .1s}
.header-menu-item:hover{color:#fff;background:rgba(255,255,255,.08)}

/* header nav — right-side controls */
.header-nav{margin-left:auto;display:flex;align-items:center;gap:.875rem}

/* logged-in identity badge in header */
.nav-identity{font-size:.8125rem;color:rgba(255,255,255,.45);padding-right:.125rem}

/* lang switcher */
.lang-switcher{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;letter-spacing:.05em;border-left:1px solid rgba(255,255,255,.1);padding-left:.875rem;margin-left:.125rem}
.lang-switcher a{color:rgba(255,255,255,.4);text-transform:uppercase}
.lang-switcher a:hover{color:#fff}
.lang-switcher span{color:var(--accent-border);text-transform:uppercase}

/* layout — fills remaining height between header and footer */
.layout{flex:1;display:flex;min-height:0;width:100%;max-width:var(--container-width);margin:0 auto}

/* sidebar — stretches to full layout height via flex align-items:stretch default */
.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border)}
.sidebar-nav{padding:.375rem 0;position:sticky;top:var(--header-height);max-height:calc(100vh - var(--header-height));overflow-y:auto}
.sidebar-nav-section{display:block;padding:.625rem 1.125rem .3125rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);text-align:center;text-decoration:none;transition:color .1s}
a.sidebar-nav-section:hover{color:var(--text-muted);text-decoration:none}
a.sidebar-nav-section.is-active{color:var(--accent)}
.sidebar-nav-item{display:flex;align-items:center;gap:.5rem;padding:.4375rem 1.125rem;color:var(--text-muted);font-size:.875rem;border-left:2px solid transparent;transition:background .1s,color .1s}
.sidebar-nav-item:hover{color:var(--text);background:var(--bg);border-left-color:var(--border-strong);text-decoration:none}
.sidebar-nav-item.is-active{color:var(--accent);background:var(--accent-light);border-left-color:var(--accent);font-weight:500;text-decoration:none}
.sidebar-divider{height:1px;background:var(--border);margin:.375rem .75rem}

/* main content */
.content{flex:1;padding:1.5rem;overflow-y:auto;min-width:0}

/* footer */
.footer{height:var(--footer-height);background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
.footer-inner{height:100%;max-width:var(--container-width);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:.75rem;color:var(--text-faint)}
.footer-link{font-size:.75rem;color:var(--text-faint)}
.footer-link:hover{color:var(--accent)}
.footer-dev-link{font-size:.6875rem;color:var(--text-faint);border:1px solid var(--border);border-radius:var(--radius);padding:.125rem .4375rem}
.footer-dev-link:hover{color:var(--accent);border-color:var(--accent)}

/* accessibility / SEO: visually hidden but readable by screen readers and search engines */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* flash messages */
.flashes{margin-bottom:.875rem}
.flash{padding:.5rem .875rem;border-radius:var(--radius);border-left:3px solid transparent;margin-bottom:.375rem;font-size:.875rem;line-height:1.5}
.flash-success{background:var(--green-bg);border-left-color:var(--green);color:#14532d}
.flash-error{background:var(--red-bg);border-left-color:var(--red);color:#7f1d1d}
.flash-warning{background:var(--amber-bg);border-left-color:var(--amber);color:#78350f}
.flash-info{background:var(--blue-bg);border-left-color:var(--blue);color:#1e3a8a}

/* forms — required field asterisk via CSS; covers both Symfony-rendered (.required) and hand-coded forms */
.form-label.required::after,.form-group:has(input[required]) .form-label::after,.form-group:has(select[required]) .form-label::after,.form-group:has(textarea[required]) .form-label::after{content:' *';color:var(--red);font-weight:400}

/* forms — structure */
.form-group{margin-bottom:.875rem}
.form-label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-muted);margin-bottom:.3125rem;letter-spacing:.01em}
.form-label-counter{font-weight:400;color:var(--text-muted);opacity:.7;margin-left:.25rem}
.form-control{display:block;width:100%;padding:.5rem .75rem;font-size:.9375rem;line-height:1.5;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s;font-family:inherit}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.form-control::placeholder{color:var(--text-faint)}

/* reserve right padding on inputs for validation icon; no layout shift when icon appears */
input.form-control,select.form-control{padding-right:2.25rem;background-repeat:no-repeat;background-position:right .625rem center;background-size:1rem 1rem}
select.form-control{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}

/* valid state — green border + checkmark icon */
.form-control.is-valid{border-color:var(--green)}
.form-control.is-valid:focus{box-shadow:0 0 0 3px var(--green-ring)}
input.form-control.is-valid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* invalid state — red border + cross icon */
.form-control.is-invalid{border-color:var(--red)}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px var(--red-ring)}
input.form-control.is-invalid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}

.form-hint{font-size:.8125rem;color:var(--text-faint);margin-top:.25rem;line-height:1.4}
.form-error{font-size:.8125rem;color:var(--red);margin-top:.25rem;min-height:1.125rem;line-height:1.4}
.char-counter{display:block;font-size:.75rem;color:var(--text-faint);text-align:right;margin-top:.1875rem;line-height:1}
.char-counter.is-over{color:var(--red)}

.form-check{display:flex;align-items:center;gap:.5rem;margin-bottom:.875rem}
.form-check-input{width:1rem;height:1rem;flex-shrink:0;cursor:pointer;accent-color:var(--accent)}
.form-check-label{font-size:.875rem;color:var(--text-muted);cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem 1rem;font-size:.9375rem;font-weight:500;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .1s,color .1s,border-color .1s,box-shadow .1s;font-family:inherit;letter-spacing:.01em;line-height:1.5}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-sub);border-color:var(--border-strong);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:transparent}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn-link{background:none;border-color:transparent;color:var(--accent);padding:.25rem 0}
.btn-link:hover{color:var(--accent-dark)}
.btn-link-danger{background:none;border:none;color:var(--red);padding:0;font-size:.875rem;font-family:inherit;cursor:pointer;text-decoration:none}
.btn-link-danger:hover{color:#b91c1c;text-decoration:underline}
.btn-sm{padding:.3125rem .75rem;font-size:.8125rem}
.btn-lg{padding:.625rem 1.375rem;font-size:1rem}
.btn-block{width:100%}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:'';position:absolute;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .5s linear infinite;color:var(--text-muted)}
.btn-primary.is-loading::after{color:rgba(255,255,255,.7)}
.btn-danger.is-loading::after{color:rgba(255,255,255,.7)}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* panel — generic centred card (used for auth pages and similar narrow flows) */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.panel-narrow{width:100%;max-width:420px;margin:2.5rem auto 0}
.panel-body{padding:1.75rem 2rem}
.panel-title{font-size:.9375rem;font-weight:700;color:var(--text);margin-bottom:1.125rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);letter-spacing:-.01em}
.panel-foot{padding:.75rem 2rem;border-top:1px solid var(--border);background:var(--surface-sub);text-align:center;font-size:.8125rem;color:var(--text-muted)}
.panel-foot a:not(.btn){color:var(--accent);font-weight:500}
.panel-foot a:not(.btn):hover{color:var(--accent-dark)}

/* mono value display — for generated codes, passwords, tokens */
.mono-value{font-family:var(--font-mono);font-size:1rem;font-weight:600;letter-spacing:.06em;background:var(--accent-light);border:1px solid var(--accent-border);border-radius:var(--radius);padding:.625rem 1rem;text-align:center;color:var(--accent-dark);word-break:break-all;margin:.75rem 0;user-select:all}

/* card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-header{padding:.625rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.875rem;background:var(--surface-sub)}
.card-body{padding:1rem}
.card-footer{padding:.625rem 1rem;border-top:1px solid var(--border);background:var(--surface-sub)}
.card-accent{border-top:2px solid var(--accent)}

/* dropdown — opens on :hover (desktop) and :focus-within (click / tap / keyboard) */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;min-width:196px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.375rem 0 .3125rem;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s,visibility .15s,transform .15s;pointer-events:none;z-index:200;white-space:nowrap}
.dropdown-menu-end{right:0;left:auto}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
.dropdown-item{display:flex;align-items:center;gap:.5rem;padding:.4375rem 1rem;font-size:.875rem;color:var(--text);background:none;border:none;width:100%;text-align:left;cursor:pointer;text-decoration:none;line-height:1.5;font-family:inherit}
.dropdown-item:hover,.dropdown-item:focus{background:var(--bg);color:var(--text);text-decoration:none;outline:none}
.dropdown-item-danger{color:var(--red)}
.dropdown-item-danger:hover,.dropdown-item-danger:focus{background:var(--red-bg);color:var(--red)}
.dropdown-divider{height:0;border:0;border-top:1px solid var(--border);margin:.3125rem 0}
.dropdown-header{padding:.375rem 1rem .25rem;font-size:.6875rem;font-weight:600;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}

/* dropdown trigger variant for light backgrounds — extends .btn */
.dropdown-toggle-btn{gap:.375rem}
.dropdown-toggle-btn .icon:last-child{transition:transform .15s;margin-left:auto}
.dropdown:hover .dropdown-toggle-btn .icon:last-child,.dropdown:focus-within .dropdown-toggle-btn .icon:last-child{transform:rotate(180deg)}

/* nav-avatar — circular user trigger button for header */
.nav-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;transition:background .12s,border-color .12s,color .12s}
.nav-avatar:hover,.dropdown:focus-within .nav-avatar{background:var(--accent);border-color:var(--accent);color:#fff}

/* table */
.table{width:100%;border-collapse:collapse;font-size:.875rem;table-layout:fixed}
.table th{padding:.5rem .875rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--border);background:var(--surface-sub);overflow:hidden;text-overflow:ellipsis}
.table td{padding:.625rem .875rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;overflow-wrap:anywhere}
.table tbody tr:last-child td{border-bottom:0}
.table-striped tbody tr:nth-child(even) td{background:rgba(0,0,0,.035)}
.table-hover tbody tr:hover td{background:rgba(0,0,0,.07)}
.table .col-shrink{width:5rem;white-space:nowrap}
.table .col-shrink form{display:inline}
.table .col-actions{width:7.5rem;white-space:nowrap}
.table .col-actions form{display:inline}
.table-bordered{border:1px solid var(--border)}
.table-bordered th,.table-bordered td{border-right:1px solid var(--border)}
.table-bordered th:last-child,.table-bordered td:last-child{border-right:0}
.table-bordered th{text-align:center}
.table-bordered tbody tr:last-child td{border-bottom:0}
.table .col-check{width:2.5rem;text-align:center}
.table tr.is-deleting td{opacity:.4;pointer-events:none}

/* list toolbar — select all / deselect / delete selected above table */
.list-toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem 0}
.list-toolbar.is-hidden{visibility:hidden}
.list-toolbar-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.8125rem;font-family:inherit;padding:0}
.list-toolbar-btn:hover{color:var(--accent-dark);text-decoration:underline}
.list-checkbox{cursor:pointer}

/* icons */
.icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.icon-sm{width:.875em;height:.875em}
.icon-lg{width:1.25em;height:1.25em}
.nav-avatar .icon{width:15px;height:15px}
/* icon actions — clickable icon buttons with tooltip */
.icon-action{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius);color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:inherit;font-size:.875rem;text-decoration:none;transition:color .12s,background .12s}
.icon-action:hover{color:var(--accent);background:var(--accent-light);text-decoration:none}
.icon-action-placeholder{display:inline-flex;width:28px;height:28px;visibility:hidden}
.icon-action-danger{color:var(--red)}
.icon-action-danger:hover{color:var(--red);background:var(--red-bg)}
.icon-action[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:.25rem .5rem;font-size:.6875rem;font-weight:500;line-height:1.3;white-space:nowrap;color:#fff;background:var(--header-bg);border-radius:var(--radius);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none;z-index:50}
.icon-action[data-tooltip]:hover::after{opacity:1;visibility:visible}
.feature-icon{color:var(--accent)}
.feature-icon .icon{width:18px;height:18px}
.icon-user{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-list{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-lock{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-log-out{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-log-in{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-user-plus{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Cline x1='9' y1='14' x2='15' y2='14'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-home{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-briefcase{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cline x1='12' y1='12' x2='12' y2='17'/%3E%3Cline x1='9.5' y1='14.5' x2='14.5' y2='14.5'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-monitor{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-check{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-minus{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-edit{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-trash{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-chevron-down{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-search{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-plus{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-folder{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}
.icon-file{--_i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");-webkit-mask-image:var(--_i);mask-image:var(--_i)}

/* category tree — indent inside table cells */
.category-tree-indent{display:inline-flex;align-items:center;gap:.375rem}
.category-tree-indent.category-depth-0{padding-left:0}
.category-tree-indent.category-depth-1{padding-left:1.25rem}
.category-tree-indent.category-depth-2{padding-left:2.5rem}
.category-tree-indent.category-depth-3{padding-left:3.75rem}

/* badges */
.badge{display:inline-flex;align-items:center;padding:.125rem .4375rem;font-size:.6875rem;font-weight:600;border-radius:2px;letter-spacing:.03em;text-transform:uppercase}
.badge-primary{background:var(--accent-light);color:var(--accent-dark)}
.badge-success{background:var(--green-bg);color:#14532d}
.badge-error{background:var(--red-bg);color:#7f1d1d}
.badge-warning{background:var(--amber-bg);color:#78350f}
.badge-info{background:var(--blue-bg);color:#1e3a8a}
.badge-neutral{background:var(--bg);color:var(--text-muted);border:1px solid var(--border)}

/* form accordion — collapsible sections for optional fields */
.form-accordion-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.625rem 0;margin:.5rem 0 0;font-size:.8125rem;font-weight:500;color:var(--text-muted);background:none;border:none;border-top:1px solid var(--border);cursor:pointer;font-family:inherit}
.form-accordion-toggle:hover{color:var(--text)}
.form-accordion-toggle .icon{width:1.125em;height:1.125em;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.form-accordion-toggle.is-open .icon{transform:rotate(180deg)}
.form-accordion-body{overflow:hidden}
.form-accordion-section{border:1px solid var(--border);border-radius:var(--radius);padding:.875rem;margin-top:.5rem;background:color-mix(in srgb,var(--accent) 3%,var(--surface))}

/* tabs — reusable tabbed sections (classic folder-tab style) */
.tabs-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:0}
.tabs-btn{padding:.4375rem .875rem;font-size:.8125rem;font-weight:500;color:var(--text-muted);background:var(--surface-sub);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;margin-bottom:-1px;margin-right:-1px;cursor:pointer;font-family:inherit;transition:color .12s,background .12s}
.tabs-btn:hover{color:var(--text);background:var(--bg)}
.tabs-btn.is-active{color:var(--accent);background:var(--surface);border-bottom:1px solid var(--surface);font-weight:600}
.tabs-panel{display:none}
.tabs-panel.is-active{display:block;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:.875rem}

/* breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:.25rem;font-size:.8125rem}
.breadcrumb-item{color:var(--text-faint)}
.breadcrumb-item:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--border-strong)}
.breadcrumb-current{color:var(--text);font-weight:500}

/* empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:2.5rem 1rem;text-align:center}
.empty-state-icon{color:var(--border-strong)}
.empty-state-icon.icon{width:48px;height:48px}
.empty-state-title{font-size:.9375rem;font-weight:600;color:var(--text)}
.empty-state-text{font-size:.8125rem;color:var(--text-muted);max-width:280px}

/* layout utilities */
.vstack{display:flex;flex-direction:column}
.hstack{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.flex-nowrap{flex-wrap:nowrap}
.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:2rem}

/* display */
.d-none{display:none}

/* margin-bottom — same scale as gap-* */
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:2rem}

/* margin-top — same scale as gap-* */
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:2rem}

/* css grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}

/* page sections */
.section{display:flex;flex-direction:column;gap:1rem}
.section-title{font-size:1.25rem;font-weight:700;color:var(--text);padding-bottom:.5rem;border-bottom:2px solid var(--accent)}
.label{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-top:.25rem}

/* colour swatches */
.palette{display:flex;flex-wrap:wrap;gap:.875rem}
.swatch{display:flex;flex-direction:column;gap:.375rem;min-width:120px}
.swatch-color{height:56px;border-radius:var(--radius);border:1px solid var(--border)}
.swatch-label{font-size:.75rem;color:var(--text-muted)}
.swatch-label strong{display:block;color:var(--text);font-weight:600;margin-bottom:.125rem}
.swatch-label code{font-size:.6875rem;color:var(--text-faint)}
.swatch-accent .swatch-color{background:var(--accent)}
.swatch-accent-dark .swatch-color{background:var(--accent-dark)}
.swatch-accent-light .swatch-color{background:var(--accent-light)}
.swatch-text .swatch-color{background:var(--text)}
.swatch-text-muted .swatch-color{background:var(--text-muted)}
.swatch-surface .swatch-color{background:var(--surface)}
.swatch-bg .swatch-color{background:var(--bg)}
.swatch-border .swatch-color{background:var(--border)}
.swatch-success .swatch-color{background:var(--green-bg);border-color:var(--green-border)}
.swatch-error .swatch-color{background:var(--red-bg);border-color:var(--red-border)}
.swatch-warning .swatch-color{background:var(--amber-bg);border-color:var(--amber-border)}
.swatch-info-color .swatch-color{background:var(--blue-bg);border-color:var(--blue-border)}

/* preview boxes — dark/light background containers for UI kit demos */
.preview-dark{padding:1rem;background:var(--header-bg);border-radius:var(--radius);display:flex;align-items:center;gap:1rem}
.preview-light{padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;gap:1rem}
.preview-dark .small{color:rgba(255,255,255,.35)}
.logo-dark{color:var(--text)}

/* constrained widths — for demos and narrow content */
.max-w-xs{max-width:260px}
.max-w-sm{max-width:420px}
.max-w-md{max-width:480px}

/* landing page — hero & features */
.hero-tagline{font-size:1.0625rem;color:var(--text-muted);line-height:1.65;max-width:600px}
.section-heading{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.feature-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-title{font-size:.9375rem;font-weight:700}
.feature-text{line-height:1.55}

/* typography utilities */
.display-1{font-size:2.375rem;font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--text)}
.display-4{font-size:1.625rem;font-weight:300;letter-spacing:-.02em;color:var(--text)}
.text-muted{color:var(--text-muted)}
.small{font-size:.8125rem;color:var(--text-muted)}
.list-unstyled{padding-left:1.25rem;display:flex;flex-direction:column;gap:.3125rem}
.list-unstyled li{font-size:.9375rem}
.list-unstyled ul,.list-unstyled ol{padding-left:1rem;margin-top:.3125rem}
.blockquote{border-left:2px solid var(--accent);padding:.5rem .875rem;background:var(--accent-light);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--text-muted);font-size:.9375rem}
.pre{background:var(--header-bg);color:#e2e0db;padding:.875rem 1rem;border-radius:var(--radius);font-size:.8125rem;overflow-x:auto;line-height:1.6}
.hr{border:0;border-top:1px solid var(--border);margin:.375rem 0}

/* v.confirm — modal dialog */
.v-confirm-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.v-confirm-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:400px;width:calc(100% - 2rem);box-shadow:var(--shadow-md);overflow:hidden}
.v-confirm-modal.is-danger{border-color:var(--red-border)}
.v-confirm-header{padding:.75rem 1.25rem;font-size:.875rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);background:var(--surface-sub)}
.v-confirm-header.is-danger{color:var(--red);border-bottom-color:var(--red-border);background:var(--red-bg)}
.v-confirm-body{padding:1.25rem}
.v-confirm-message{font-size:.9375rem;color:var(--text);line-height:1.5;margin-bottom:1.25rem}
.v-confirm-actions{display:flex;justify-content:flex-end;gap:.5rem}

/* vImageUpload — theme overrides (structural CSS in vImageUpload.css) */
.vImageUpload-dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:1.5rem}
.vImageUpload-dropzone:hover,.vImageUpload-dropzone.is-dragover{border-color:var(--accent);background:var(--accent-light)}
.vImageUpload-dropzone.is-disabled:hover{border-color:var(--border-strong);background:none}
.vImageUpload-dropzoneText{font-size:.875rem;color:var(--text-muted)}
.vImageUpload-toolbarBtn{background:var(--surface-sub);color:var(--text)}
.vImageUpload-toolbarBtn:hover{background:var(--border)}
.vImageUpload-checkbox{accent-color:var(--accent)}
.vImageUpload-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}
.vImageUpload-card{border-radius:var(--radius);background:var(--surface-sub);border:1px solid var(--border)}
.vImageUpload-delete{background:rgba(0,0,0,.55);color:#fff}
.vImageUpload-delete:hover{background:var(--red)}
.vImageUpload-spinner{border-color:var(--border);border-top-color:var(--accent)}
.vImageUpload-card.is-error{border-color:var(--red-border);background:var(--red-bg)}
.vImageUpload-error{color:var(--red)}
.vImageUpload-lightbox{background:rgba(0,0,0,.85)}
.vImageUpload-lightbox img{border-radius:var(--radius)}

/* mobile burger menu — hidden on desktop */
.mobile-burger{display:none}
.mobile-menu{display:none}

/* filter form — inline fields + button */
.filter-form form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.filter-form .form-group{margin-bottom:0;flex:0 0 12rem}
.filter-actions{display:flex;gap:.5rem}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem 0}
.pagination-link{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .5rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text);text-decoration:none;transition:background .1s,border-color .1s}
.pagination-link:hover{background:var(--surface-sub);border-color:var(--border-strong)}
.pagination-current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination-disabled{opacity:.35;cursor:default;pointer-events:none}
.pagination-ellipsis{padding:0 .25rem;color:var(--text-muted)}

/* sort */
.sort-link{color:var(--text);text-decoration:none;white-space:nowrap}
.sort-link:hover{color:var(--accent)}

/* ==========================================================================
   Responsive — mobile ≤ 768px
   ========================================================================== */
@media(max-width:768px){

/* layout stacks vertically */
.layout{flex-direction:column}

/* sidebar becomes horizontal tab bar under header */
.sidebar{width:100%;flex-shrink:0;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.sidebar-nav{display:flex;padding:0}
.sidebar-nav-section{display:none}
.sidebar-divider{display:none}
.sidebar-nav-item{border-left:0;border-bottom:2px solid transparent;padding:.5rem 1rem;white-space:nowrap;font-size:.8125rem}
.sidebar-nav-item:hover{border-left-color:transparent;border-bottom-color:var(--border-strong)}
.sidebar-nav-item.is-active{border-left-color:transparent;border-bottom-color:var(--accent)}

/* content — tighter padding */
.content{padding:1rem}

/* header — compact */
.header{height:auto;min-height:var(--header-height);position:relative}
.header-inner{padding:.5rem 1rem;gap:.5rem;flex-wrap:nowrap}
.header-menu{display:none}
.header-nav{gap:.5rem}
.header-nav .btn-lg{padding:.375rem .75rem;font-size:.8125rem}
.header-nav .dropdown{display:none}
.logo img{height:36px}

/* burger button */
.mobile-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:rgba(255,255,255,.75);cursor:pointer;flex-shrink:0;border-radius:var(--radius);transition:background .12s,color .12s;border:none;padding:0;background:none}
.mobile-burger:hover{background:rgba(255,255,255,.08);color:#fff}
.mobile-burger .icon{width:20px;height:20px}

/* mobile menu panel */
.mobile-menu{display:none;flex-direction:column;background:var(--header-bg);border-top:1px solid var(--header-border);padding:.5rem 0}
.mobile-menu.is-open{display:flex}
.mobile-menu-item{display:block;padding:.625rem 1.25rem;font-size:.9375rem;color:rgba(255,255,255,.75);text-decoration:none;transition:background .1s,color .1s}
.mobile-menu-item:hover{background:rgba(255,255,255,.08);color:#fff}
.mobile-menu-divider{height:0;border:0;border-top:1px solid rgba(255,255,255,.1);margin:.375rem .75rem}
.mobile-menu-item-danger{color:var(--red)}
.mobile-menu-item-danger:hover{color:#ff6b6b;background:rgba(220,38,38,.1)}

/* footer — compact */
.footer-inner{padding:0 1rem;gap:.5rem;font-size:.6875rem;flex-wrap:wrap;justify-content:center}

/* panels — full width on mobile */
.panel-narrow{max-width:100%}

/* grids — single column on mobile */
.grid-2,.grid-3{grid-template-columns:1fr}

/* vImageUpload — 2 columns on mobile */
.vImageUpload-grid{grid-template-columns:repeat(2,1fr)}

}

/* tablet — 3 columns */
@media(min-width:769px) and (max-width:1024px){
.vImageUpload-grid{grid-template-columns:repeat(3,1fr)}
}