/*
 * app-ui.css: the Artbucket app's own components, as plain CSS, for demos on the site that should look like the
 * real app. Translated class for class from the core's shadcn/ui components (artbucket/src/components/ui/*.tsx,
 * their cva and Tailwind strings) and its tokens (artbucket/src/app/globals.css): same sizes, radii, colors,
 * borders and states. Change them together: when a component changes in the core, change it here.
 *
 * The app's primary color follows the Artbucket brand's accent (the organization's Settings, Branding follows the
 * brand), so here it is --accent with --on-accent on it. ponytail: the app lifts a light accent until it reads on
 * white (lib/color.ts lift); here the brand's own pairing stands in, so Volt stays Volt.
 *
 * Classes (each mirrors the component and its props: variant and size modifiers, data-state for states)
 *   .ui-button  --default --destructive --outline --secondary --ghost --link   --xs --sm --lg --icon --icon-sm --icon-lg
 *   .ui-badge   --default --secondary --destructive --outline --success --warning
 *   .ui-card  .ui-card-header .ui-card-title .ui-card-description .ui-card-content .ui-card-footer
 *   .ui-input  .ui-select (a <select>, the trigger's look)
 *   .ui-tabs-list (--line)  .ui-tabs-trigger ([aria-selected=true] is active)
 *   .ui-sidebar  .ui-sidebar-label  .ui-sidebar-item ([aria-current] or [data-active=true] is active)
 *   .ui-dialog .ui-dialog-title .ui-dialog-description .ui-dialog-footer (drawn in place, never fixed)
 *   .ui-table (the library's list: wrap it in .ui-table-wrap)  .ui-checkbox ([data-state=checked])  .ui-switch
 *   .ui-muted (muted-foreground text)
 */
:root{
  --ui-radius:.625rem;
  --ui-background:#ffffff;--ui-foreground:#20241f;
  --ui-card:#ffffff;--ui-card-foreground:#20241f;--ui-popover:#ffffff;--ui-popover-foreground:#20241f;
  --ui-primary:var(--accent,#6d4aff);--ui-primary-foreground:var(--on-accent,#ffffff);--ui-primary-ink:var(--ink,#5b38f0);
  --ui-secondary:#f4f4f7;--ui-secondary-foreground:#20241f;
  --ui-muted:#f4f4f7;--ui-muted-foreground:#67646e;
  --ui-accent:#f4f4f7;--ui-accent-foreground:#20241f;
  --ui-destructive:oklch(.577 .245 27.325);--ui-success:#2f6b2a;--ui-warning:#9a5500;
  --ui-border:#eae8eb;--ui-input:#dcdae0;--ui-ring:var(--ui-primary);
  --ui-sidebar:#fafafc;--ui-sidebar-foreground:#20241f;--ui-sidebar-border:#eae8eb;
  --ui-sidebar-accent:color-mix(in srgb,var(--ui-primary) 10%,var(--ui-sidebar));--ui-sidebar-accent-foreground:var(--ui-primary-ink);
  --ui-shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --ui-shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
  --ui-shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --ui-ease:cubic-bezier(.23,1,.32,1);
}
.ui,[class^="ui-"],[class*=" ui-"]{font-family:'Funnel Sans',system-ui,sans-serif}
.ui-muted{color:var(--ui-muted-foreground)}

/* Button */
.ui-button{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;height:36px;padding:8px 16px;border:0;border-radius:calc(var(--ui-radius) - 2px);font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;text-decoration:none;cursor:pointer;background:var(--ui-primary);color:var(--ui-primary-foreground);transition:color 150ms var(--ui-ease),background-color 150ms var(--ui-ease),border-color 150ms var(--ui-ease),box-shadow 150ms var(--ui-ease),opacity 150ms var(--ui-ease),scale 150ms var(--ui-ease)}
.ui-button:active{scale:.97;transition-duration:75ms}
.ui-button:disabled,.ui-button[aria-disabled=true]{pointer-events:none;opacity:.5}
.ui-button svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}
.ui-button:focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px}
.ui-button--default:hover{background:color-mix(in srgb,var(--ui-primary) 90%,transparent)}
.ui-button--destructive{background:var(--ui-destructive);color:#fff}
.ui-button--destructive:hover{background:color-mix(in srgb,var(--ui-destructive) 90%,transparent)}
.ui-button--outline{border:1px solid var(--ui-border);background:var(--ui-background);color:var(--ui-foreground);box-shadow:var(--ui-shadow-xs)}
.ui-button--outline:hover{background:var(--ui-accent);color:var(--ui-accent-foreground)}
.ui-button--secondary{background:var(--ui-secondary);color:var(--ui-secondary-foreground)}
.ui-button--secondary:hover{background:color-mix(in srgb,var(--ui-secondary) 80%,transparent)}
.ui-button--ghost{background:transparent;color:var(--ui-foreground)}
.ui-button--ghost:hover{background:var(--ui-accent);color:var(--ui-accent-foreground)}
.ui-button--link{background:transparent;color:var(--ui-primary-ink);text-underline-offset:4px}
.ui-button--link:hover{text-decoration:underline}
.ui-button--link:active{scale:1}
.ui-button--xs{height:24px;gap:4px;padding:0 8px;font-size:.75rem;line-height:1rem}
.ui-button--xs svg{width:12px;height:12px}
.ui-button--sm{height:32px;gap:6px;padding:0 12px}
.ui-button--lg{height:40px;padding:0 24px}
.ui-button--icon{width:36px;padding:0}
.ui-button--icon-sm{width:32px;height:32px;padding:0}
.ui-button--icon-lg{width:40px;height:40px;padding:0}
.ui-button--icon:active,.ui-button--icon-sm:active,.ui-button--icon-lg:active{scale:.92}

/* Badge */
.ui-badge{display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:4px;overflow:hidden;padding:2px 8px;border:1px solid transparent;border-radius:999px;font-size:.75rem;line-height:1rem;font-weight:500;white-space:nowrap;background:var(--ui-primary);color:var(--ui-primary-foreground)}
.ui-badge svg{pointer-events:none;width:12px;height:12px}
.ui-badge--secondary{background:var(--ui-secondary);color:var(--ui-secondary-foreground)}
.ui-badge--destructive{background:var(--ui-destructive);color:#fff}
.ui-badge--outline{background:transparent;border-color:var(--ui-border);color:var(--ui-foreground)}
.ui-badge--success{background:color-mix(in srgb,var(--ui-success) 15%,transparent);color:var(--ui-success)}
.ui-badge--warning{background:color-mix(in srgb,var(--ui-warning) 15%,transparent);color:var(--ui-warning)}

/* Card */
.ui-card{display:flex;flex-direction:column;gap:24px;padding:24px 0;border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius) + 4px);background:var(--ui-card);color:var(--ui-card-foreground);box-shadow:var(--ui-shadow-sm)}
.ui-card-header{display:grid;grid-auto-rows:min-content;align-items:start;gap:8px;padding:0 24px}
.ui-card-title{line-height:1;font-weight:600}
.ui-card-description{font-size:.875rem;line-height:1.25rem;color:var(--ui-muted-foreground)}
.ui-card-content{padding:0 24px}
.ui-card-footer{display:flex;align-items:center;padding:0 24px}

/* Input and select */
.ui-input,.ui-select{height:36px;min-width:0;padding:4px 12px;border:1px solid var(--ui-input);border-radius:calc(var(--ui-radius) - 2px);background:transparent;color:var(--ui-foreground);font-size:1rem;line-height:1.5rem;box-shadow:var(--ui-shadow-xs);outline:none;transition:color 150ms var(--ui-ease),border-color 150ms var(--ui-ease),box-shadow 150ms var(--ui-ease)}
.ui-input{width:100%}
.ui-input::placeholder{color:var(--ui-muted-foreground)}
.ui-input:focus-visible,.ui-select:focus-visible{border-color:var(--ui-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-ring) 50%,transparent)}
.ui-select{appearance:none;padding:8px 36px 8px 12px;font-size:.875rem;line-height:1.25rem;white-space:nowrap;background:linear-gradient(45deg,transparent 50%,var(--ui-muted-foreground) 50%) calc(100% - 17px) 50%/5px 5px no-repeat,linear-gradient(135deg,var(--ui-muted-foreground) 50%,transparent 50%) calc(100% - 12px) 50%/5px 5px no-repeat;background-color:transparent}
@media (min-width:768px){.ui-input{font-size:.875rem;line-height:1.25rem}}

/* Tabs */
.ui-tabs-list{display:inline-flex;width:fit-content;height:36px;align-items:center;justify-content:center;padding:3px;border-radius:var(--ui-radius);background:var(--ui-muted);color:var(--ui-muted-foreground)}
.ui-tabs-list--line{gap:4px;background:transparent;border-radius:0}
.ui-tabs-trigger{position:relative;display:inline-flex;flex:1;height:calc(100% - 1px);align-items:center;justify-content:center;gap:6px;padding:4px 8px;border:1px solid transparent;border-radius:calc(var(--ui-radius) - 2px);background:transparent;color:color-mix(in srgb,var(--ui-foreground) 60%,transparent);font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color 150ms var(--ui-ease),background-color 150ms var(--ui-ease),box-shadow 150ms var(--ui-ease)}
.ui-tabs-trigger:hover{color:var(--ui-foreground)}
.ui-tabs-trigger[aria-selected=true]{background:var(--ui-background);color:var(--ui-foreground);box-shadow:var(--ui-shadow-sm)}
.ui-tabs-list--line .ui-tabs-trigger[aria-selected=true]{background:transparent;box-shadow:none}
.ui-tabs-list--line .ui-tabs-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--ui-foreground);opacity:0;transition:opacity 150ms var(--ui-ease)}
.ui-tabs-list--line .ui-tabs-trigger[aria-selected=true]::after{opacity:1}

/* Sidebar */
.ui-sidebar{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--ui-sidebar);color:var(--ui-sidebar-foreground);border-inline-end:1px solid var(--ui-sidebar-border)}
.ui-sidebar-label{display:flex;height:32px;align-items:center;padding:0 8px;font-size:.75rem;font-weight:500;color:color-mix(in srgb,var(--ui-sidebar-foreground) 70%,transparent)}
.ui-sidebar-item{display:flex;width:100%;height:32px;align-items:center;gap:8px;overflow:hidden;padding:8px;border:0;border-radius:calc(var(--ui-radius) - 2px);background:transparent;color:inherit;font-size:.875rem;line-height:1.25rem;text-align:left;text-decoration:none;cursor:pointer;transition:background-color 150ms var(--ui-ease),color 150ms var(--ui-ease)}
.ui-sidebar-item>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-sidebar-item svg{flex-shrink:0;width:16px;height:16px}
.ui-sidebar-item:hover{background:color-mix(in srgb,var(--ui-sidebar-accent) 60%,transparent);color:var(--ui-sidebar-accent-foreground)}
.ui-sidebar-item[aria-current],.ui-sidebar-item[data-active=true],.ui-sidebar-item[aria-selected=true]{background:var(--ui-sidebar-accent);color:var(--ui-sidebar-accent-foreground);font-weight:500}

/* Dialog, drawn in place */
.ui-dialog{display:grid;gap:16px;width:100%;max-width:512px;padding:24px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-popover);color:var(--ui-popover-foreground);box-shadow:var(--ui-shadow-lg)}
.ui-dialog-title{margin:0;font-size:1rem;line-height:1;font-weight:600;letter-spacing:-.025em}
.ui-dialog-description{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--ui-muted-foreground)}
.ui-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* Table, as the library's list (components/asset-table.tsx) */
.ui-table-wrap{overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-background)}
.ui-table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem;color:var(--ui-foreground)}
.ui-table thead{background:color-mix(in srgb,var(--ui-muted) 40%,transparent);color:var(--ui-muted-foreground);text-align:left;font-size:.75rem;line-height:1rem;letter-spacing:.025em;text-transform:uppercase}
.ui-table th{padding:8px 12px;font-weight:500}
.ui-table td{padding:8px 12px;border-top:1px solid var(--ui-border);vertical-align:middle}
.ui-table tbody tr:hover{background:color-mix(in srgb,var(--ui-muted) 40%,transparent)}

/* Checkbox and switch */
.ui-checkbox{display:inline-grid;place-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--ui-input);border-radius:4px;box-shadow:var(--ui-shadow-xs);color:var(--ui-primary-foreground)}
.ui-checkbox[data-state=checked]{border-color:var(--ui-primary);background:var(--ui-primary)}
.ui-switch{display:inline-flex;flex-shrink:0;align-items:center;width:32px;height:1.15rem;border:1px solid transparent;border-radius:999px;background:var(--ui-input);box-shadow:var(--ui-shadow-xs);transition:background-color 200ms var(--ui-ease)}
.ui-switch::after{content:"";width:16px;height:16px;border-radius:999px;background:var(--ui-background);transition:transform 200ms var(--ui-ease)}
.ui-switch[data-state=checked]{background:var(--ui-primary)}
.ui-switch[data-state=checked]::after{transform:translateX(calc(100% - 2px))}