/*
 * Cyberbude AI Asset Hub
 * MR.08 UX Foundation
 *
 * Deliberately scoped to shared UX primitives.
 * Feature-specific visual design remains in app.css.
 */

:root{
  --ux-focus:#1677e6;
  --ux-focus-ring:rgba(22,119,230,.28);
  --ux-success-bg:#ecfdf3;
  --ux-success-border:#bbf7d0;
  --ux-success-text:#166534;
  --ux-warning-bg:#fff7ed;
  --ux-warning-border:#fed7aa;
  --ux-warning-text:#9a3412;
  --ux-danger-bg:#fef2f2;
  --ux-danger-border:#fecaca;
  --ux-danger-text:#991b1b;
  --ux-info-bg:#eff6ff;
  --ux-info-border:#bfdbfe;
  --ux-info-text:#1e40af;
}

.skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:200000;
  transform:translateY(-160%);
  padding:10px 14px;
  border-radius:10px;
  background:#10233f;
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 28px rgba(15,23,42,.25);
  transition:transform .16s ease;
}

.skip-link:focus{
  transform:translateY(0);
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible{
  outline:3px solid var(--ux-focus)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px var(--ux-focus-ring);
}

:where(button,[role="button"],a).is-disabled,
:where(button,[role="button"],a)[aria-disabled="true"]{
  cursor:not-allowed;
}

.ux-state{
  display:grid;
  gap:8px;
  padding:18px;
  border:1px solid var(--line,#dfe5ec);
  border-radius:16px;
  background:#fff;
}

.ux-state h1,
.ux-state h2,
.ux-state h3,
.ux-state p{
  margin:0;
}

.ux-state p{
  color:var(--muted,#657184);
  line-height:1.5;
}

.ux-alert{
  padding:12px 14px;
  border:1px solid;
  border-radius:14px;
  line-height:1.45;
}

.ux-alert-info{
  background:var(--ux-info-bg);
  border-color:var(--ux-info-border);
  color:var(--ux-info-text);
}

.ux-alert-success{
  background:var(--ux-success-bg);
  border-color:var(--ux-success-border);
  color:var(--ux-success-text);
}

.ux-alert-warning{
  background:var(--ux-warning-bg);
  border-color:var(--ux-warning-border);
  color:var(--ux-warning-text);
}

.ux-alert-danger{
  background:var(--ux-danger-bg);
  border-color:var(--ux-danger-border);
  color:var(--ux-danger-text);
}

.ux-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.ux-field-hint{
  display:block;
  margin-top:6px;
  color:var(--muted,#657184);
  font-size:.84rem;
  line-height:1.4;
}

.ux-validation-message{
  display:block;
  margin-top:6px;
  color:var(--ux-danger-text);
  font-size:.84rem;
  font-weight:700;
}

[aria-invalid="true"]{
  border-color:#dc2626!important;
}

[aria-busy="true"]{
  cursor:progress;
}

@media (max-width:700px){
  .ux-inline-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .ux-inline-actions > *{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* MR.08.02-03 shared empty-state pattern */
.ux-empty-state{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:18px;
  border:1px dashed var(--line,#dfe5ec);
  border-radius:16px;
  background:#f8fafc;
  color:var(--text,#17202a);
}

.ux-empty-state-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef3f6;
  color:var(--muted,#657184);
  font-size:1.1rem;
  font-weight:900;
}

.ux-empty-state-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.ux-empty-state-copy strong{
  color:var(--text,#17202a);
}

.ux-empty-state-copy p{
  margin:0;
  color:var(--muted,#657184);
  line-height:1.45;
}

.ux-empty-state-action{
  align-self:center;
}

@media(max-width:700px){
  .ux-empty-state{
    grid-template-columns:auto 1fr;
  }

  .ux-empty-state-action{
    grid-column:1 / -1;
    width:100%;
    text-align:center;
  }
}

/* MR.08.04-05 shared form/table ergonomics */
.ux-table-scroll{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}

.ux-table-scroll > table{
  min-width:760px;
}

form[aria-readonly="true"]{
  opacity:.9;
}

form[aria-readonly="true"] [data-demo-readonly="true"]{
  cursor:not-allowed;
}

/* MR.08.06-08 public view and responsive consistency */
.ux-public-shell{
  width:min(1100px, calc(100% - 32px));
  margin:40px auto;
}

.ux-public-shell-narrow{
  width:min(520px, calc(100% - 32px));
  margin:60px auto;
}

.ux-public-card{
  padding:20px;
  border:1px solid var(--line,#dfe5ec);
  border-radius:16px;
  background:#fff;
}

.ux-public-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.ux-public-error{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--ux-danger-border);
  border-radius:12px;
  background:var(--ux-danger-bg);
  color:var(--ux-danger-text);
}

@media(max-width:900px){
  .ux-public-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .ux-public-shell,
  .ux-public-shell-narrow{
    width:min(100% - 24px, 1100px);
    margin:24px auto;
  }

  .ux-public-grid{
    grid-template-columns:1fr;
  }
}