/* Shared CMS UI chrome — used by frontend page, qino-cms (shadow), backend, login, not_found.
Generic CMS look: tokens, form elements, tables, modal box, console toast.
Inline page-editing styles live in cms.frontend.4/pub/inline/ instead. */

/* Material Icons v145, Apache-2.0; see ../font/material-icons.LICENSE. */
@font-face {
  font-family: 'Material Icons';
  src:url('../font/material-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

u2-ico[icon] {
  --size: calc(var(--rem) * 1.5);
}
u2-ico[icon]:not(:has(> svg)) {
    font-size:0;
    &::before {
        content: attr(icon);
        display:block;
        font-size: var(--size);
    }
}


:root, :host, qino-cms {
  --cms-color: #a06aef;
  --cms-dark: #222;
  --cms-light: #e8e8e8;
  --cms-access-0: #3c3c3b;
  --cms-access-1: #14aa3F;
  --cms-access-2: #dd8E00;
  --cms-access-3: #aa0018;
  --cms-background:var(--cms-color) radial-gradient(ellipse farthest-corner at -10% 40% , rgba(255,255,255,.5) 0%, rgba(0,0,0,0) 60%);
}

:host, .qgCMS {
  --u2-ico-dir:;
  --u2-ico-font: 'Material Icons';
  --color: var(--cms-color);
  color: var(--cms-dark);
  accent-color: var(--color);
  font-family: Arial, sans-serif;
  --rem: 13px; /* our own root unit: rem would follow the customer page's html font-size */
  font-size: var(--rem);
  text-align:left;

  & a { color: var(--cms-color); text-decoration:none; }
  & a:hover { text-decoration:underline; }

  & button, & .btn,
    & input:not([type=checkbox], [type=radio], [type=range]),
    & textarea,
    & select,
    & .-input {
    color:var(--cms-dark);
    border:1px solid;
    border-radius:0;
    padding: .5em .8em;
    font-size: 12px;
    background-color:var(--cms-light);
    border-color:transparent transparent var(--cms-dark) transparent;
    border-left-width:0;
    border-right-width:0;
    min-width:0;
  }
  & :is(button, .btn) {
    color:#fff;
    border-color:transparent;
    background:var(--cms-color);
    border-radius:.2rem;
    padding: .5em 1.1em;
  }
  & table { font-size:inherit; }
  & input[type=number] { padding-right:0; }
  & input[type=color] { padding:0; }
  & :is(input, textarea, select, .-input):focus { border-bottom-color:var(--cms-color); }
  & :is(input, textarea, select):user-invalid { border-bottom-color:var(--cms-access-3); }
  & :is(button, .btn):hover , & :is(button, .btn):focus {
    background:var(--cms-dark);
    color:#fff;
  }

  & input:is([type=checkbox], [type=radio]) {
    width:1.5em;
    height:1.5em;
    margin:0 .125rem;
    min-width:1em;
    min-height:1em;
    vertical-align: text-bottom;
  }

  & .-access-0 { color:var(--cms-access-0); }
  & .-access-1 { color:var(--cms-access-1); }
  & .-access-2 { color:var(--cms-access-2); }
  & .-access-3 { color:var(--cms-access-3); }

  & .-access-1-bg { background-color:var(--cms-access-1); }
  & .-access-2-bg { background-color:var(--cms-access-2); }
  & .-access-3-bg { background-color:var(--cms-access-3); }

  & .-h1 {
    letter-spacing: .08em;
    font-size: 18px;
    border-bottom: 1px solid var(--cms-light);
    margin-bottom: 1em;
    padding-bottom: .5em;
    display:flex;
    align-items: flex-end;
  }
  & .-h1 > span { flex:1 1 auto; }
  & .-h1 button, & .-h1 input { margin:0; }

  /* tables */
  & table.-padding > * > tr > * {
    padding:.1875rem;
    vertical-align:middle;
  }
  & table.-styled {
    border-collapse:collapse;
    & > tbody > tr:hover,
      & > tbody > tr.active { background-color:#fafafa; }
    & > * > tr > * {
      border:1px solid #ddd;
      border-width:1px 0;
      padding:.6em;
      vertical-align:middle;
    }
    &.-noborder > * > tr > * { border-width:0; }
    & > * > tr > * > :is(input, textarea, select, button) { margin:0; }
    & > * > tr > *:first-child { padding-inline:0; }
    & > * > tr > *:last-child { padding-right:0; }
    & > * > tr > th { border:none; }
    & :where(img, audio, video, svg) {
      display:block;
      margin:auto;
      transition:all .12s linear; /* media-list */
    }
    & > thead { font-weight:bold; }
  }

  dialog {
    border:none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:0;
    margin:auto;
    min-width:20rem;
    &::backdrop { background:rgba(0,0,0,.4); }
    & > * { padding:1.2rem; margin:0;}
    & > :is(header, .-head) {
      padding-block: .8rem;
      background:var(--cms-dark);
      color:var(--cms-light);
      display:flex;
      flex:0 0 auto;
      position: sticky;
      top:0;
      z-index:1;
    }
    & > :is(footer, .-foot) {
      margin:0;
      flex:0 0 auto;
      position: sticky;
      bottom:0;
      z-index:1;
      display:flex;
      gap: calc(var(--gap) / 2);
    }
  }

  u2-alert {
    background: color-mix(var(--color), #fff 88%);
    border-radius: var(--radius);
  }
  u2-buttongroup {
    display:flex;
    gap: 1px;
    & > * { margin:0; }
  }
  u2-code {
    font-size: 11px;
  }
  u2-flex.-Col {
    flex-wrap: no-wrap;
  }

}

#cmsConsole {
  position:fixed;
  width:max-content;
  padding:.25rem 1.125rem;
  left:0;
  right:0;
  top:auto;        /* reset [popover] UA inset:0 */
  bottom:.5rem;
  margin:auto;
  border:0;        /* reset [popover] UA border */
  overflow:visible;/* don't clip the .-new scale pop */
  background:var(--cms-color);
  border-radius:.9375rem;
  text-align:center;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: .12s, .25s;
  transform:scale(1.01);

  &.-active { opacity:.8; }
  &.-new {
    opacity:1;
    transform:scale(1.2);
  }
  &[data-type=info]    { background:var(--cms-color); }
  &[data-type=warning] { background:var(--cms-access-2); }
  &[data-type=error]   { background:var(--cms-access-3); }
}

/* possibly move to u2-framework? */
.u2-unstyle.u2-unstyle.u2-unstyle:is(:hover, :focus) {
  background-color: unset;
  color: unset;
}