/* RIETC SSO core stylesheet — base elements and the shared components (shell, navigation,
   buttons, panels, tables, badges, dialogs, states, toast). This file is the single source of
   truth for those components; tokens live in tokens.css (loaded first), brand/login surfaces in
   brand-system.css, fonts in typography.css and breakpoints in responsive.css. */

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{min-width:320px;background:var(--canvas);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;min-height:100dvh;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--dur-slow) var(--ease),color var(--dur) var(--ease)}
button,input,select,textarea{font:inherit;font-size:var(--text-base);line-height:1.5}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--accent-border);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p{text-wrap:pretty}
h1{margin:0;font-size:var(--text-3xl);font-weight:700;line-height:1.3;letter-spacing:-.01em}
h2{margin:0;font-size:var(--text-lg);font-weight:600;line-height:1.4}
h3{font-size:var(--text-md);font-weight:600;line-height:1.4}
h4,h5,h6{font-weight:600;line-height:1.4}
strong,b{font-weight:600}
label,th{font-weight:500}
code,pre,kbd,samp,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mono{font-size:var(--text-sm)}
.muted,.panel-head p{margin:3px 0 0;color:var(--text-muted);font-size:var(--text-sm)}
.eyebrow{margin:0 0 2px;color:var(--text-muted);font-size:var(--text-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-logo{display:block;max-width:100%;height:auto;object-fit:contain;border-radius:6px;background:#fff}
.brand-logo-sidebar{width:106px;height:46px}
.brand-logo-account{width:94px;height:44px}

/* Sprite icons (assets/rietc-icons.svg) */
.icon,svg.icon{display:inline-block;flex:0 0 auto;width:16px;height:16px;overflow:visible;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;vertical-align:middle}

/* Smooth theme switch — toggled for a moment by the portals' theme button. */
@media (prefers-reduced-motion:no-preference){html.theme-switching,html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease),fill var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)!important}}

/* ---------- Admin shell ---------- */
.skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);padding:8px 12px;border-radius:var(--radius-sm);background:var(--text);color:var(--surface)}
.skip-link:focus{transform:none}
.shell-frame{min-height:100dvh}
.shell{min-height:100dvh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);background:var(--canvas-soft)}
.sidebar{position:sticky;top:0;display:flex;height:100dvh;min-height:0;flex-direction:column;padding:18px 14px 14px;border-right:1px solid var(--divider);background:var(--surface)}
.brand{display:flex;min-height:50px;align-items:center;gap:8px;padding:0 8px;color:var(--text)}
.brand-home{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.sidebar-toggle{margin-left:auto;display:grid;width:32px;height:32px;place-items:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted)}
.sidebar-toggle:hover{background:var(--surface-2);color:var(--text)}
.organization-switcher{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin-top:14px;padding:6px 12px;border:1px solid var(--divider);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-2);text-align:left;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.organization-switcher:hover{border-color:var(--accent-border);background:var(--surface)}
.organization-switcher>svg:first-child{width:18px;height:18px;color:var(--accent)}
.organization-switcher span{display:grid;min-width:0}
.organization-switcher strong{font-size:var(--text-sm);line-height:1.3}
.organization-switcher small{overflow:hidden;color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.organization-switcher .i-chevron{margin-left:auto;width:14px;color:var(--text-muted)}

/* Grouped navigation */
.side-nav{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;gap:2px;margin:18px -6px 0;padding:0 6px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nav-section{display:grid;gap:2px}
.nav-section+.nav-section{margin-top:14px}
.nav-label{margin:0 0 4px;padding:0 12px;color:var(--text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em}
.side-nav a{position:relative;display:flex;min-height:40px;align-items:center;gap:10px;padding:0 12px;border-radius:10px;color:var(--text-2);font-size:var(--text-base);font-weight:500;line-height:1.5;text-decoration:none;white-space:nowrap;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.side-nav a>span{flex:1 0 auto;white-space:nowrap}
.side-nav a .icon{flex:0 0 18px;width:18px;height:18px;color:var(--text-muted);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a:hover .icon{color:var(--accent);transform:scale(1.08)}
.side-nav a.active{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.side-nav a.active .icon,.side-nav a.active small{color:var(--on-accent)}
.side-nav a.active:hover .icon{transform:none}
.side-nav small{margin-left:auto;color:var(--text-muted);font-size:var(--text-xs);font-weight:500}
.sidebar-card{margin-top:12px;padding:10px 12px;border:1px solid var(--divider);border-radius:var(--radius-md);background:var(--surface-2)}
.system-line{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600}
.system-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-border)}
.sidebar-card p{margin:2px 0 4px;color:var(--text-muted);font-size:var(--text-sm)}
.logout-button{display:flex;min-height:36px;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:var(--text-muted);font-size:var(--text-base);font-weight:500;transition:color var(--dur) var(--ease)}
.logout-button:hover{color:var(--danger)}

.main-column{min-width:0;background:var(--canvas-soft)}
.topbar{position:sticky;z-index:20;top:0;display:flex;height:var(--topbar-height);align-items:center;justify-content:space-between;gap:16px;padding:0 32px;border-bottom:1px solid var(--divider);background:color-mix(in srgb,var(--canvas-soft) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.topbar-start{display:flex;min-width:0;align-items:center;gap:12px}
.mobile-menu{display:none;width:36px;height:36px;place-items:center;border:1px solid var(--divider);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2)}
.breadcrumb{display:flex;min-width:0;align-items:center;gap:6px;overflow:hidden;color:var(--text-muted);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap}
.breadcrumb .icon{width:14px;height:14px;color:var(--text-faint)}
.breadcrumb b{color:var(--text);font-size:var(--text-base);font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:10px}
.signed-in{color:var(--text-muted);font-size:var(--text-xs);line-height:1.4;text-align:right}
.signed-in b{display:block;color:var(--text);font-size:var(--text-sm)}
.avatar{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:var(--accent-subtle);color:var(--accent-text);font-weight:600;text-decoration:none;transition:box-shadow var(--dur) var(--ease)}
.avatar:hover{box-shadow:0 0 0 3px var(--accent-border)}
.content{max-width:var(--content-max);margin:0 auto;padding:28px 32px 48px}
.page-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-bottom:24px}
.page-heading>div:first-child{flex:1 1 300px;min-width:min(100%,300px)}
.page-heading>:not(:first-child){margin-left:auto}
.page-heading h1{font-size:var(--text-3xl)}
.page-heading .muted{margin-top:4px;font-size:var(--text-base)}
.page-heading .eyebrow{display:none}
.page-heading>.topbar-actions{flex-wrap:wrap;justify-content:flex-end}

/* ---------- Buttons ---------- */
.primary-button,.secondary-button,.text-action,.icon-button,.danger-button{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:6px;border-radius:10px;font-size:var(--text-base);font-weight:600;line-height:1.4;text-decoration:none;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.primary-button{padding:0 16px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.14)}
.primary-button:hover{border-color:var(--accent-hover);background:var(--accent-hover);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 75%,transparent);transform:translateY(-1px)}
.secondary-button{padding:0 14px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);box-shadow:var(--shadow-1)}
.secondary-button:hover{border-color:var(--border-strong);background:var(--surface-2);color:var(--text)}
.text-action{min-height:30px;padding:0 10px;border:1px solid var(--border);background:var(--surface);color:var(--accent);font-size:var(--text-sm)}
.text-action:hover{border-color:var(--accent-border);background:var(--accent-subtle)}
.icon-button{width:36px;padding:0;border:1px solid var(--border);background:var(--surface);color:var(--text-muted)}
.icon-button:hover{color:var(--text);background:var(--surface-2)}
.danger-button{padding:0 14px;border:1px solid var(--danger);background:var(--danger);color:var(--on-danger)}
.danger-button:hover{filter:brightness(.93)}
.primary-button:active,.secondary-button:active,.danger-button:active,.text-action:active,.icon-button:active,.small-button:active{transform:translateY(0) scale(.97);box-shadow:none}
.primary-button:disabled,.secondary-button:disabled,.danger-button:disabled,.text-action:disabled,.small-button:disabled{opacity:.6;transform:none;box-shadow:none}
.danger-button:disabled{cursor:wait}
.theme-button{border-color:transparent;background:transparent;box-shadow:none}
.theme-button:hover{border-color:var(--divider);background:var(--surface-2)}
.theme-button .icon{transition:transform var(--dur-slow) var(--ease)}
.theme-button:hover .icon{transform:rotate(-18deg)}
.small-button{display:inline-flex;min-height:30px;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);font-size:var(--text-sm);font-weight:600;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.small-button:hover{border-color:var(--border-strong);background:var(--surface-2)}
.small-button.danger{border-color:var(--danger-border);color:var(--danger)}
.row-actions{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Notices ---------- */
.notice{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 14px;border:1px solid var(--success-border);border-left:3px solid var(--success);border-radius:var(--radius-md);background:var(--success-subtle);color:var(--success)}
.notice>.icon{margin-top:2px}
.notice strong{font-size:var(--text-base)}
.notice p{margin:2px 0 0;color:var(--text-2);font-size:var(--text-sm)}
.notice.warning{border-color:var(--warning-border);border-left-color:var(--warning);background:var(--warning-subtle);color:var(--warning)}
.notice.danger{border-color:var(--danger-border);border-left-color:var(--danger);background:var(--danger-subtle);color:var(--danger)}
.notice.info{border-color:var(--info-border);border-left-color:var(--info);background:var(--info-subtle);color:var(--info)}

/* ---------- Overview ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.stat-card{--tone:var(--accent);--tone-subtle:var(--accent-subtle);position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 12px;min-height:124px;padding:18px 20px;overflow:hidden;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.stat-card::after{position:absolute;top:-56px;right:-56px;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tone) 13%,transparent),transparent);content:'';pointer-events:none}
.stat-card:hover{border-color:color-mix(in srgb,var(--tone) 30%,var(--divider));box-shadow:var(--shadow-2);transform:translateY(-2px)}
.stat-card p{margin:0;color:var(--text-muted);font-size:var(--text-sm);font-weight:500}
.stat-card strong{display:block;margin-top:6px;color:var(--text);font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-card small{grid-column:1/-1;align-self:end;color:var(--text-muted);font-size:var(--text-sm)}
.stat-icon{position:relative;z-index:1;display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--tone-subtle);color:var(--tone)}
.stat-icon .icon{width:20px;height:20px}
.stat-card.tone-success{--tone:var(--success);--tone-subtle:var(--success-subtle)}
.stat-card.tone-info{--tone:var(--info);--tone-subtle:var(--info-subtle)}
.stat-card.tone-violet{--tone:var(--violet);--tone-subtle:var(--violet-subtle)}
.stat-card.warning{--tone:var(--warning);--tone-subtle:var(--warning-subtle)}

.attention-panel{margin-bottom:16px;padding:16px 20px;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.attention-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.attention-head .icon{color:var(--warning)}
.attention-head h2{font-size:var(--text-lg)}
.attention-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.attention-item{display:flex;min-height:64px;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--divider);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);text-decoration:none;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.attention-item:hover{border-color:var(--accent-border);background:var(--surface);transform:translateY(-1px)}
.attention-item>span:nth-child(2){display:grid;flex:1;min-width:0}
.attention-item strong{font-size:var(--text-base)}
.attention-item small{color:var(--text-muted);font-size:var(--text-sm)}
.attention-item>.icon:last-child{color:var(--text-faint);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.attention-item:hover>.icon:last-child{color:var(--accent);transform:translateX(3px)}
.attention-icon{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:10px;background:var(--surface-3);color:var(--text-muted)}
.attention-item.has-items .attention-icon{background:var(--warning-subtle);color:var(--warning)}
.attention-item.has-items small{color:var(--warning);font-weight:600}
.attention-item.is-clear .attention-icon{background:var(--success-subtle);color:var(--success)}

.service-status{display:grid;grid-template-columns:1.15fr repeat(3,1fr);align-items:stretch;margin-bottom:16px;overflow:hidden;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface-header);box-shadow:var(--shadow-1)}
.service-status>header{display:grid;align-content:center;padding:12px 16px}
.service-status header p{margin:2px 0 0;color:var(--text-muted);font-size:var(--text-sm)}
.service{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-left:1px solid var(--divider);background:var(--surface)}
.service .system-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)}
.service.unavailable .system-dot{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
.service strong,.service small{display:block}
.service strong{font-size:var(--text-sm)}
.service small{color:var(--text-muted);font-size:var(--text-xs)}
.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}

/* ---------- Panels ---------- */
.panel{overflow:hidden;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.content>.panel+.panel{margin-top:16px}
.panel-head{display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--divider)}
.panel-head a{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:var(--text-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.panel-head a .icon{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.panel-head a:hover{text-decoration:underline}
.panel-head a:hover .icon{transform:translateX(3px)}
.activity{margin:0;padding:0;list-style:none}
.activity li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;min-height:48px;padding:10px 20px;border-top:1px solid var(--divider);transition:background-color var(--dur-fast) var(--ease)}
.activity li:first-child{border-top:0}
.activity li:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.activity strong{overflow:hidden;font-size:var(--text-sm);font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.activity small{color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Tables ---------- */
.table-tools{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.search-control{display:flex;width:min(280px,100%);height:38px;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.search-control:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring);outline:2px solid var(--accent);outline-offset:1px}
.search-control input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.table-meta{margin-left:auto;color:var(--text-muted);font-size:var(--text-sm)}
.table-wrap{width:100%;overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-base)}
thead{background:var(--surface-header)}
th{height:42px;padding:8px 16px;border-bottom:1px solid var(--divider);background:var(--surface-header);color:var(--text-muted);font-size:var(--text-sm);font-weight:600;line-height:1.5;text-align:left;white-space:nowrap}
.table-wrap thead th{position:sticky;z-index:1;top:0}
td{height:52px;padding:10px 16px;border-top:1px solid var(--divider);color:var(--text-2);font-size:var(--text-base);line-height:1.5;vertical-align:middle;transition:background-color var(--dur-fast) var(--ease)}
tbody tr:first-child td{border-top:0}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
td strong,td small{display:block}
td strong{color:var(--text);font-weight:600}
td small{color:var(--text-muted);font-size:var(--text-sm)}
.uri{max-width:360px;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-muted);font-size:var(--text-xs);font-weight:600;line-height:1.7;white-space:nowrap}
.badge::before{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;content:''}
.badge.success{border-color:var(--success-border);background:var(--success-subtle);color:var(--success)}
.badge.danger{border-color:var(--danger-border);background:var(--danger-subtle);color:var(--danger)}
.badge.warning{border-color:var(--warning-border);background:var(--warning-subtle);color:var(--warning)}
.badge.info{border-color:var(--info-border);background:var(--info-subtle);color:var(--info)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips span{padding:1px 8px;border:1px solid var(--divider);border-radius:6px;background:var(--surface-2);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-xs)}

/* ---------- Loading, empty and error states ---------- */
.empty-state,.error-state,.loading-state{display:grid;min-height:220px;place-items:center;align-content:center;gap:6px;padding:32px;color:var(--text-muted);text-align:center}
.state-card{max-width:440px}
.state-icon{display:grid;width:44px;height:44px;margin:0 auto 12px;place-items:center;border-radius:12px;background:var(--danger-subtle);color:var(--danger)}
.state-card h2{color:var(--text)}
.state-card p{margin:4px 0 14px}
/* Rows with nothing to show get a small illustration (single-hue mask, follows the theme). */
td>.empty-state{min-height:0;padding:36px 16px 40px;color:var(--text-muted);font-size:var(--text-base)}
td>.empty-state:not(.is-loading)::before{display:block;width:88px;height:72px;margin:0 auto 6px;background:var(--accent);content:'';-webkit-mask:url('assets/empty-state.svg') center/contain no-repeat;mask:url('assets/empty-state.svg') center/contain no-repeat;opacity:.9}
tbody tr:hover td>.empty-state{background:transparent}
/* In-table loading: three shimmering skeleton rows; the Thai status text stays for screen readers. */
.empty-state.is-loading{position:relative;display:block;min-height:0;padding:14px 0;overflow:hidden}
.empty-state.is-loading::before{display:block;height:88px;background:linear-gradient(var(--surface-3),var(--surface-3)) 0 0/62% 12px no-repeat,linear-gradient(var(--surface-3),var(--surface-3)) 0 38px/86% 12px no-repeat,linear-gradient(var(--surface-3),var(--surface-3)) 0 76px/44% 12px no-repeat;border-radius:6px;content:''}
.empty-state.is-loading::after{position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);content:'';transform:translateX(-100%);animation:shimmer 1.3s var(--ease) infinite}
:not(td)>.empty-state.is-loading{padding:20px}
.skeleton{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-3)}
.skeleton::after{position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);content:'';transform:translateX(-100%);animation:shimmer 1.3s var(--ease) infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
/* Whole-page skeleton shown while a route loads. */
.page-skeleton{display:grid;gap:16px}
.page-skeleton .sk-heading{width:min(320px,70%);height:34px}
.page-skeleton .sk-text{width:min(520px,90%);height:14px;margin-top:-6px}
.sk-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sk-cards>.skeleton{height:118px;border-radius:var(--radius-lg)}
.page-skeleton .sk-hero{height:108px;border-radius:var(--radius-lg)}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}
.sk-tiles>.skeleton{height:176px;border-radius:20px}
.sk-panel{display:grid;gap:14px;padding:20px;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface)}
.sk-panel>.skeleton{height:14px}
.sk-panel>.skeleton:nth-child(3n+1){width:88%}
.sk-panel>.skeleton:nth-child(3n+2){width:64%}
.sk-panel>.skeleton:nth-child(3n){width:76%}

/* ---------- Dialogs ---------- */
.dialog-layer{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:layer-in var(--dur) var(--ease) both}
.dialog{width:min(520px,100%);max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-3);animation:dialog-in var(--dur) var(--ease) both}
.dialog.wide{width:min(640px,100%)}
.dialog-head{position:sticky;z-index:2;top:0;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--divider);background:var(--surface)}
.dialog-head>div:first-child{flex:1;min-width:180px}
.dialog-head h2{font-size:var(--text-xl);font-weight:700}
.dialog-head p{margin:2px 0 0;color:var(--text-muted);font-size:var(--text-sm)}
.dialog-layer.is-closing{animation:layer-out var(--dur-fast) var(--ease-in) both;pointer-events:none}
.dialog-layer.is-closing .dialog{animation:dialog-out var(--dur-fast) var(--ease-in) both}
@keyframes layer-in{from{opacity:0}}
@keyframes layer-out{to{opacity:0}}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes dialog-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes sheet-in{from{transform:translateY(40px);opacity:.4}}
@keyframes drawer-in{from{transform:translateX(32px);opacity:0}}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:12px;padding:16px 20px 20px}
.form-grid.two{grid-template-columns:1fr 1fr}
.form-grid label,.field-group{display:grid;gap:4px;color:var(--text-2);font-size:var(--text-sm);font-weight:600}
.form-grid label.full,.field-group.full,.form-actions{grid-column:1/-1}
.form-grid small{color:var(--text-muted);font-size:var(--text-sm);font-weight:400}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-height:38px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);outline:0;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.form-grid textarea{resize:vertical}
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:var(--border-strong)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}
.form-grid input:focus-visible,.form-grid select:focus-visible,.form-grid textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:240px;overflow:auto;padding:8px;border:1px solid var(--divider);border-radius:var(--radius-sm);background:var(--surface-2)}
.permission-list label{display:flex;align-items:flex-start;gap:8px;padding:6px;border-radius:6px;font-weight:400}
.permission-list label:hover{background:var(--surface)}
.permission-list input{width:auto;min-height:0;margin-top:3px;accent-color:var(--accent)}
.permission-list span{display:grid}
.permission-list code{font-size:var(--text-xs)}
.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.form-error{grid-column:1/-1;padding:8px 12px;border:1px solid var(--danger-border);border-radius:var(--radius-sm);background:var(--danger-subtle);color:var(--danger);font-size:var(--text-sm)}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:90;right:20px;bottom:20px;display:flex;min-width:260px;max-width:min(440px,calc(100% - 40px));align-items:center;gap:10px;padding:12px 16px 12px 14px;border:1px solid var(--success-border);border-radius:var(--radius-md);background:var(--success-subtle);color:var(--success);font-weight:600;box-shadow:var(--shadow-2);opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast::before{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);content:''}
.toast.show{opacity:1;transform:none}
.toast.error{border-color:var(--danger-border);background:var(--danger-subtle);color:var(--danger)}

/* ---------- Misc shared ---------- */
.registration-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.group-panel{margin-bottom:16px}
.group-panel h3{margin:14px 16px 6px;font-size:var(--text-sm)}
.application-workspace{display:grid;gap:16px}

/* ---------- Breakpoints for the core shell (the shared responsive layer adds the rest) ---------- */
html[data-theme='dark'] .brand-logo{box-shadow:0 0 0 1px var(--divider)}
@media (min-width:901px){.sidebar-toggle{display:none}
/* Paint the sidebar column on the shell too, so tall pages never show canvas below the sticky sidebar. */
.shell{background:linear-gradient(to right,var(--surface) calc(var(--sidebar-width) - 1px),var(--divider) calc(var(--sidebar-width) - 1px) var(--sidebar-width),var(--canvas-soft) var(--sidebar-width))}}
@media(max-width:900px){.shell{min-height:100dvh;grid-template-columns:1fr}
.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;height:auto;width:264px;transform:translateX(-105%);box-shadow:var(--shadow-3);transition:transform var(--dur-slow) var(--ease)}
.shell.mobile-open .sidebar{transform:none}
.mobile-menu{display:grid}
.content{padding:20px 16px 32px}
.stats,.sk-cards{grid-template-columns:1fr 1fr}
.service-status{grid-template-columns:1fr}
.service{border-top:1px solid var(--divider);border-left:0}
.dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:720px){.page-heading>div:first-child{flex:none;min-width:0}
.page-heading>:not(:first-child){margin-left:0}
}
@media(max-width:560px){.signed-in{display:none}
.page-heading{align-items:flex-start}
.stats{grid-template-columns:1fr 1fr}
.form-grid.two,.permission-list{grid-template-columns:1fr}
.table-tools{align-items:stretch;flex-wrap:wrap}
.search-control{width:100%}
.table-meta{width:100%;margin:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
.stat-card:hover,.attention-item:hover,.primary-button:hover{transform:none}
}