/*
A26 Web Design System — Primitive Components
Version: v1.0.0-alpha.0010-buttons-controls
*/

@layer a26.components {
  :root {
    --a26-control-hit-min: 44px;
    --a26-control-compact-visual-min: 28px;
    --a26-pane-bg: var(--a26-bg-pane);
    --a26-pane-border: var(--a26-separator);
    --a26-toolbar-height: 52px;
    --a26-toolbar-padding-x: var(--a26-space-4);
    --a26-toolbar-gap: var(--a26-space-2);
    --a26-toolbar-compact-height: 48px;
    --a26-toolbar-section-gap: 12px;
    --a26-toolbar-title-max: 15ch;
    --a26-toolbar-bg: var(--a26-material-regular-fill);
    --a26-toolbar-blur: var(--a26-material-regular-blur);
    --a26-sidebar-width: 280px;
    --a26-sidebar-bg: var(--a26-material-regular-fill);
    --a26-sidebar-blur: var(--a26-material-regular-blur);
    --a26-group-bg: var(--a26-bg-surface);
    --a26-group-radius: var(--a26-radius-lg);
    --a26-group-border-width: 1px;
    --a26-group-header-padding-x: var(--a26-space-4);
    --a26-group-shadow: none;
    --a26-group-border: var(--a26-separator);
    --a26-row-min-height: 44px;
    --a26-row-padding-x: var(--a26-space-4);
    --a26-row-padding-y: 10px;
    --a26-row-title-color: var(--a26-text-primary);
    --a26-row-subtitle-color: var(--a26-text-secondary);
    --a26-row-meta-color: var(--a26-text-tertiary);
    --a26-row-gap: var(--a26-space-3);
    --a26-row-leading-size: 30px;
    --a26-row-separator: var(--a26-separator);
    --a26-tag-height: 22px;
    --a26-tag-padding-x: 8px;
    --a26-tag-bg: var(--a26-fill-tertiary);
    --a26-tag-text: var(--a26-text-secondary);
    --a26-row-selected-bg: var(--a26-fill-secondary);
    --a26-button-height: 34px;
    --a26-button-padding-x: 14px;
    --a26-button-radius: var(--a26-radius-pill);
    --a26-button-bg: var(--a26-fill-tertiary);
    --a26-button-bg-hover: var(--a26-fill-secondary);
    --a26-button-text: var(--a26-text-primary);

    --a26-button-border: var(--a26-separator);
    --a26-button-pressed-scale: .975;
    --a26-button-disabled-opacity: .42;
    --a26-button-prominent-bg: var(--a26-accent);
    --a26-button-prominent-text: #ffffff;
    --a26-button-destructive: var(--a26-status-danger);
    --a26-button-cancel-text: var(--a26-text-secondary);
    --a26-button-loading-spinner-size: 14px;
    --a26-split-sidebar-width: 280px;
    --a26-split-secondary-width: 360px;
    --a26-split-tertiary-min-width: 420px;
    --a26-split-divider: 1px solid var(--a26-separator);
  }
  .a26-app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--a26-sidebar-width) minmax(0, 1fr); background: var(--a26-bg-app); color: var(--a26-text-primary); }
  .a26-pane { min-width: 0; min-height: 100vh; background: var(--a26-pane-bg); border-inline-start: 1px solid var(--a26-pane-border); display: flex; flex-direction: column; }
  .a26-pane__content { flex: 1; min-width: 0; padding: var(--a26-space-5); overflow: auto; }
  .a26-toolbar { min-height: var(--a26-toolbar-height); padding-inline: var(--a26-toolbar-padding-x); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--a26-toolbar-gap); background: var(--a26-toolbar-bg); backdrop-filter: var(--a26-toolbar-blur); -webkit-backdrop-filter: var(--a26-toolbar-blur); border-bottom: 1px solid var(--a26-separator); }
  .a26-toolbar__leading, .a26-toolbar__center, .a26-toolbar__trailing { display: flex; align-items: center; gap: var(--a26-space-2); min-width: 0; }
  .a26-toolbar__center { justify-content: center; }
  .a26-toolbar__trailing { justify-content: flex-end; }
  .a26-toolbar__title { margin: 0; font: var(--a26-font-headline); color: var(--a26-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a26-sidebar { min-height: 100vh; padding: var(--a26-space-5) var(--a26-space-4); background: var(--a26-sidebar-bg); backdrop-filter: var(--a26-sidebar-blur); -webkit-backdrop-filter: var(--a26-sidebar-blur); display: flex; flex-direction: column; gap: var(--a26-space-4); }
  .a26-sidebar__title { margin: 0; font: var(--a26-font-title-3); font-weight: var(--a26-type-title-3-weight-bold); }
  .a26-sidebar__section-title { margin: var(--a26-space-3) var(--a26-space-2) var(--a26-space-1); font: var(--a26-font-caption-1); color: var(--a26-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .a26-sidebar__item { min-height: var(--a26-control-hit-min); padding: 8px 10px; display: flex; align-items: center; gap: var(--a26-space-2); border-radius: var(--a26-radius-md); color: var(--a26-text-primary); text-decoration: none; }
  .a26-sidebar__item:hover { background: var(--a26-fill-quaternary); }
  .a26-sidebar__item[aria-current="page"] { background: var(--a26-row-selected-bg); }
  .a26-group { background: var(--a26-group-bg); border: 1px solid var(--a26-group-border); border-radius: var(--a26-group-radius); overflow: hidden; }
  .a26-list { list-style: none; padding: 0; margin: 0; }
  .a26-list-row { min-height: var(--a26-row-min-height); padding: var(--a26-row-padding-y) var(--a26-row-padding-x); display: flex; align-items: center; gap: var(--a26-space-3); color: var(--a26-row-title-color); }
  .a26-list-row + .a26-list-row { border-top: 1px solid var(--a26-separator); }
  .a26-list-row[aria-current="page"] { background: var(--a26-row-selected-bg); }
  .a26-list-row__content { min-width: 0; flex: 1; }
  .a26-list-row__title { margin: 0; font: var(--a26-font-body); color: var(--a26-row-title-color); }
  .a26-list-row__subtitle { margin: 2px 0 0; font: var(--a26-font-subheadline); color: var(--a26-row-subtitle-color); }
  .a26-list-row__meta { margin: 0; font: var(--a26-font-footnote); color: var(--a26-row-meta-color); white-space: nowrap; }
  .a26-button, .a26-icon-button { min-height: var(--a26-control-hit-min); min-width: var(--a26-control-hit-min); border: 0; border-radius: var(--a26-button-radius); font: var(--a26-font-callout); color: var(--a26-button-text); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--a26-space-2); cursor: pointer; }
  .a26-button { min-height: var(--a26-button-height); padding-inline: var(--a26-button-padding-x); background: var(--a26-button-bg); }
  .a26-button:hover, .a26-icon-button:hover { background: var(--a26-button-bg-hover); }
  .a26-button:active, .a26-icon-button:active { transform: scale(.98); }
  .a26-button:focus-visible, .a26-icon-button:focus-visible, .a26-sidebar__item:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent); outline-offset: 2px; }
  .a26-button[data-variant="plain"] { background: transparent; color: var(--a26-accent); }
  .a26-button[data-variant="tinted"] { background: var(--a26-fill-secondary); color: var(--a26-accent); }
  .a26-button[data-variant="prominent"] { background: var(--a26-accent); color: white; }
  .a26-button[data-role="destructive"] { color: var(--a26-status-danger); }
  .a26-button[data-variant="prominent"][data-role="destructive"] { background: var(--a26-status-danger); color: white; }
  @media (max-width: 760px) { .a26-app-shell { grid-template-columns: 1fr; } .a26-sidebar { min-height: auto; } .a26-pane { border-inline-start: 0; } .a26-toolbar { grid-template-columns: 1fr auto; } .a26-toolbar__center { display: none; } }
}