@import url("../tokens.css");

body { overflow:hidden; background:var(--color-surface); }
button { color:inherit; }
.app-shell { --app-sidebar-width:208px; --app-sidebar-collapsed:68px; height:100vh; display:grid; grid-template-columns:var(--app-sidebar-width) minmax(0,1fr); background:var(--color-surface); transition:grid-template-columns var(--motion-base) linear; }
.app-shell[data-nav-state="collapsed"] { grid-template-columns:var(--app-sidebar-collapsed) minmax(0,1fr); }
.app-sidebar { position:relative; min-width:0; min-height:0; height:100vh; padding:12px 10px; border-right:1px solid var(--color-divider); background:#fafafa; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:visible; }
.app-sidebar > * { min-width:0; }
.app-sidebar-head { min-height:44px; padding:0 4px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--color-divider); }
.app-mark { min-width:0; display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap; overflow:hidden; }
.app-mark-icon { flex:0 0 36px; width:36px; height:36px; border-radius:10px; background:var(--color-text); color:var(--color-text-inverse); display:grid; place-items:center; font-size:var(--text-lg); }
.icon-btn { width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; display:grid; place-items:center; cursor:pointer; }
.icon-btn:hover { background:var(--color-surface-subtle); }
.icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.nav-trigger { flex:0 0 36px; }
.nav-trigger svg { transition:transform var(--motion-base) linear; }
.app-shell[data-nav-state="collapsed"] .nav-trigger svg { transform:rotate(180deg); }
.app-nav { min-height:0; padding-top:14px; display:grid; align-content:start; gap:4px; }
.nav-item { min-width:0; min-height:44px; padding:0 12px; border:0; border-radius:var(--radius-md); background:transparent; color:var(--color-text-muted); display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; white-space:nowrap; overflow:hidden; cursor:pointer; transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.nav-item:hover { background:#eeeeee; color:var(--color-text); }
.nav-item[aria-current="page"] { background:#e9e9e9; color:var(--color-text); }
.nav-item .icon { flex:0 0 20px; width:20px; height:20px; }
.nav-label { overflow:hidden; text-overflow:ellipsis; }
.app-sidebar-foot { padding-top:12px; border-top:1px solid var(--color-divider); }
.staff { min-height:44px; padding:4px 8px; display:flex; align-items:center; gap:10px; overflow:hidden; }
.staff-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:#e7e7e7; display:grid; place-items:center; font-size:var(--text-sm); font-weight:700; }
.staff-copy { min-width:0; display:grid; white-space:nowrap; }
.staff-copy small { color:var(--color-text-muted); }
.nav-rail { position:absolute; inset-block:0; right:-18px; z-index:4; width:36px; padding:0; border:0; background:transparent; cursor:col-resize; }
.nav-rail::after { content:""; position:absolute; top:0; bottom:0; left:17px; width:1px; background:transparent; transition:background var(--motion-fast) var(--ease-out); }
.nav-rail:hover::after,.nav-rail:focus-visible::after { background:var(--color-border-strong); }
.app-shell[data-nav-state="collapsed"] .app-sidebar-head { justify-content:center; }
.app-shell[data-nav-state="collapsed"] .app-mark,.app-shell[data-nav-state="collapsed"] .nav-label,.app-shell[data-nav-state="collapsed"] .staff-copy { display:none; }
.app-shell[data-nav-state="collapsed"] .nav-item { padding:0; justify-content:center; }
.app-shell[data-nav-state="collapsed"] .staff { padding-inline:8px; justify-content:center; }

.page { min-width:0; min-height:0; height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr); }
.page-head { min-height:76px; padding:16px 24px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.page-title { margin:0; font-size:var(--text-2xl); line-height:var(--leading-tight); }
.page-meta { margin-top:4px; color:var(--color-text-muted); font-size:var(--text-sm); }
.page-actions { display:flex; align-items:center; gap:8px; }
.button { min-height:44px; padding:0 16px; border:0; border-radius:var(--radius-md); background:var(--color-surface-subtle); font-weight:600; cursor:pointer; transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform 100ms var(--ease-out); }
.button:active,.segment button:active,.settings-link:active { transform:scale(.985); }
.button:hover { background:#e5e5e5; }
.button.primary { background:var(--color-text); color:var(--color-text-inverse); }
.button.primary:hover { background:#303030; }
.button.danger { color:var(--color-danger); background:var(--color-danger-soft); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.page-body { min-width:0; min-height:0; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); }
.toolbar { min-height:64px; padding:10px 24px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; gap:10px; }
.search { min-width:220px; min-height:42px; padding:0 13px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-surface); }
.search:focus { border-color:var(--color-border-strong); }
.segment { display:flex; align-items:center; gap:3px; padding:3px; border-radius:var(--radius-md); background:var(--color-surface-subtle); }
.segment button { min-height:36px; padding:0 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-muted); font-weight:600; cursor:pointer; transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform 100ms var(--ease-out); }
.segment button[aria-pressed="true"] { background:var(--color-surface); color:var(--color-text); box-shadow:0 1px 3px rgba(23,25,24,.1); }
.toolbar-note { margin-left:auto; color:var(--color-text-muted); font-size:var(--text-sm); }
.workspace { min-width:0; min-height:0; display:grid; grid-template-columns:minmax(380px,1fr) minmax(330px,42%); }
.master { min-width:0; min-height:0; overflow:auto; border-right:1px solid var(--color-divider); }
.inspector { min-width:0; min-height:0; overflow:auto; background:#fafafa; }
.list-head,.record { display:grid; align-items:center; gap:16px; }
.list-head { min-height:42px; padding:0 24px; position:sticky; top:0; z-index:2; background:rgba(255,255,255,.96); border-bottom:1px solid var(--color-divider); color:var(--color-text-muted); font-size:var(--text-xs); font-weight:600; }
.record { width:100%; min-height:70px; padding:10px 24px; border:0; border-bottom:1px solid var(--color-divider); background:var(--color-surface); text-align:left; cursor:pointer; transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out); }
.record:hover { background:#fafafa; }
.record[aria-selected="true"],.record[aria-pressed="true"] { background:#f0f0f0; box-shadow:inset 2px 0 var(--color-text); }
.record strong,.record span { min-width:0; }
.muted { color:var(--color-text-muted); }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--color-text-muted); font-size:var(--text-sm); }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.success { color:var(--color-success); }
.status.warning { color:var(--color-warning); }
.status.danger { color:var(--color-danger); }
.numeric { font-variant-numeric:tabular-nums lining-nums; }
.inspector-head { min-height:88px; padding:20px 24px; border-bottom:1px solid var(--color-divider); background:var(--color-surface); display:flex; align-items:start; justify-content:space-between; gap:20px; }
.inspector-title { margin:0; font-size:var(--text-xl); }
.inspector-body { padding:22px 24px 32px; }
.section + .section { margin-top:28px; padding-top:24px; border-top:1px solid var(--color-divider); }
.section-title { margin:0 0 12px; font-size:var(--text-lg); }
.detail-row { min-height:40px; display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.detail-row span:first-child { color:var(--color-text-muted); }
.field { display:grid; gap:6px; }
.inspector-body > .field + .field,.modal-body > .field + .field,.settings-card > .field + .field { margin-top:16px; }
.field label { font-size:var(--text-sm); line-height:var(--leading-ui); font-weight:600; }
.input,.select,.textarea { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--color-border-strong); border-radius:10px; background:var(--color-surface); }
.textarea { min-height:76px; padding-block:11px; resize:vertical; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.field-grid .field + .field { margin-top:0; }
.inspector-body > .field-grid + .field,.modal-body > .field-grid + .field,.settings-card > .field-grid + .field { margin-top:16px; }
.field-grid + .button,.field + .button { margin-top:12px; }
.field + .switch-row { margin-top:12px; }
.editor-photo + .field { margin-top:16px; }
.switch-row { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.field + .section,.field-grid + .section { margin-top:24px; }
.switch-row + .switch-row { margin-top:8px; }
.switch-copy { display:grid; gap:2px; }
.switch-copy small { color:var(--color-text-muted); }
.switch { position:relative; width:44px; height:36px; padding:0; border:0; background:transparent; cursor:pointer; }
.switch::before { content:""; position:absolute; inset:5px 0; border-radius:var(--radius-pill); background:#d0d0d0; transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out); }
.switch::after { content:""; position:absolute; top:8px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform var(--motion-fast) var(--ease-out); }
.switch[aria-checked="true"]::before { background:var(--color-accent); }
.switch[aria-checked="true"]::after { transform:translateX(18px); }
.toast { position:fixed; left:50%; bottom:24px; z-index:30; min-height:44px; padding:0 16px; border-radius:var(--radius-md); background:var(--color-text); color:var(--color-text-inverse); display:flex; align-items:center; box-shadow:var(--shadow-overlay); opacity:0; transform:translate(-50%,10px); pointer-events:none; transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out); }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.modal { width:min(560px,calc(100vw - 48px)); max-height:calc(100vh - 48px); margin:auto; padding:0; border:0; border-radius:var(--radius-lg); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-overlay); opacity:0; transform:translateY(14px) scale(.988); transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-overlay) var(--ease-out),display var(--motion-overlay) allow-discrete,overlay var(--motion-overlay) allow-discrete; }
.modal[open] { opacity:1; transform:none; }
.modal.closing { opacity:0; transform:translateY(8px) scale(.992); }
.modal::backdrop { background:rgba(23,25,24,.3); opacity:0; backdrop-filter:blur(0); transition:opacity var(--motion-base) var(--ease-out),backdrop-filter var(--motion-overlay) var(--ease-out),display var(--motion-overlay) allow-discrete,overlay var(--motion-overlay) allow-discrete; }
.modal[open]::backdrop { opacity:1; backdrop-filter:blur(4px); }
@starting-style { .modal[open] { opacity:0; transform:translateY(14px) scale(.988); } .modal[open]::backdrop { opacity:0; backdrop-filter:blur(0); } }
.modal-head { min-height:64px; padding:14px 18px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.modal-title { margin:0; font-size:var(--text-xl); }
.modal-body { padding:22px; max-height:calc(100vh - 190px); overflow:auto; }
.modal-actions { padding:14px 18px; border-top:1px solid var(--color-divider); display:flex; justify-content:flex-end; gap:8px; }

@media (max-width:1100px) {
  .app-shell { --app-sidebar-width:196px; }
  .app-sidebar-head { gap:4px; }
  .app-mark { gap:8px; font-size:var(--text-sm); }
  .workspace { grid-template-columns:minmax(330px,1fr) minmax(310px,44%); }
  .page-head,.toolbar { padding-inline:18px; }
  .record,.list-head { padding-inline:18px; }
}
@media (max-height:800px) {
  .app-sidebar { padding-block:10px; }
  .page-head { min-height:64px; padding-block:10px; }
  .toolbar { min-height:56px; padding-block:7px; }
  .inspector-head { min-height:72px; padding-block:14px; }
  .inspector-body { padding-block:16px 24px; }
  .section + .section { margin-top:16px; padding-top:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-shell,.nav-trigger svg,.nav-item,.button,.segment button,.record,.switch::before,.switch::after,.toast,.modal,.modal::backdrop { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}