/*
 * Sound to Vision - main app layout.
 * Replaces the Metronic style.bundle.css / plugins.bundle.css on index.php.
 * Sits on top of plain Bootstrap 5.3 (same as asset_editor) and only defines
 * the layout pieces and the few non-Bootstrap utility classes still in use.
 */

:root {
  --stov-aside-width: 265px;
  --stov-header-height: 65px;
  --stov-aside-bg: #1e1e2d;
  --stov-aside-logo-bg: #1a1a27;
  --stov-page-bg: #F5F8FA;
}

html,
body {
  height: 100%;
  font-size: 13px;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #181C32;
  background-color: var(--stov-page-bg);
}

/* SweetAlert2 sets height:auto on body while a dialog is open. The stage is
   sized from body's height (ResizeObserver in PixiBackend), so keep it fixed. */
html body.swal2-height-auto {
  height: 100% !important;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

/* ---------- Page loader ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;   /* above the timeline (1001) and cookie banner (9999) */
  display: none;
  background: #ffffff;
}
.page-loading .page-loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Splash logo at ~4.5x its old 75px, but never taller than half the window */
.page-loader-logo {
  height: min(340px, 50vh);
  width: auto;
  max-width: 90vw;
}
.page-loader-status .spinner-border { width: 2.5rem; height: 2.5rem; border-width: 0.3em; }
.page-loader-status .text-muted { font-size: 1.6rem !important; }
.page-loading * {
  transition: none !important;
}

/* ---------- Page structure ---------- */
.flex-root { flex: 1; }
.flex-column-fluid { flex: 1 0 auto; }
.flex-row-fluid { flex: 1 auto; min-width: 0; }
.flex-column-auto { flex: none; }

.wrapper { padding-left: var(--stov-aside-width); }

/* The header is fixed; #kt_content_container's mt-14 clears it. */
.content { padding: 30px 0; }

/* ---------- Aside (left properties panel) ---------- */
.aside {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  width: var(--stov-aside-width);
  overflow: hidden;
  background-color: var(--stov-aside-bg);
  box-shadow: 0 0 28px 0 rgba(82, 63, 105, 0.05);
}
.aside .aside-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--stov-header-height);
  padding: 0 25px;
  background-color: var(--stov-aside-logo-bg);
}
.aside .aside-menu { width: var(--stov-aside-width); }
/* Colours for the aside, header and everything else: external/theme-app.css */
.aside .menu-section { color: #b8b8c7 !important; }

/* ---------- Header (top toolbar) ---------- */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--stov-aside-width);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--stov-header-height);
  background-color: #ffffff;
  box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);
}

/* ---------- Menu list markup (also generated by scripts/view/*) ---------- */
.menu {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu-column { flex-direction: column; width: 100%; }
.menu-item { display: block; padding: 0; }

/* ---------- Buttons ---------- */
.btn.btn-flush {
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  background-color: transparent;
  outline: none !important;
  margin: 0;
  padding: 0;
}
.btn.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: calc(1.5em + 1.5rem + 2px);
  width: calc(1.5em + 1.5rem + 2px);
}
.btn.btn-icon.btn-sm {
  height: calc(1.5em + 1.3rem + 2px);
  width: calc(1.5em + 1.3rem + 2px);
}
.btn.btn-icon i { padding: 0; margin: 0; line-height: 1; }
.btn.btn-outline { border: 1px solid var(--bs-border-color); }
.btn.btn-icon-dark i { color: #181C32; }
.btn.btn-icon-light i { color: #F5F8FA; }
.btn.btn-icon-primary i { color: var(--bs-primary); }

/* ---------- Inline SVG icons (generated by scripts/view/*) ---------- */
.svg-icon { line-height: 1; }
.svg-icon svg { height: 1.15rem; width: 1.15rem; }
.svg-icon svg [fill]:not(.permanent):not(g) { fill: #A1A5B7; }
.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) { fill: var(--bs-primary); }
.svg-icon.svg-icon-2 svg { height: 1.5rem !important; width: 1.5rem !important; }
.svg-icon.svg-icon-2x svg { height: 2rem !important; width: 2rem !important; }

/* ---------- Form switches ---------- */
.form-check.form-check-custom {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin: 0;
}
.form-check.form-check-custom .form-check-input {
  margin: 0;
  float: none;
  flex-shrink: 0;
}
.form-check.form-check-custom .form-check-label { margin-left: 0.55rem; }

/* ---------- Loading-state buttons (data-kt-indicator used by scripts) ---------- */
.indicator-progress { display: none; }
[data-kt-indicator="on"] > .indicator-progress { display: inline-block; }
[data-kt-indicator="on"] > .indicator-label { display: none; }

/* ---------- Standards-mode line boxes ----------
   In standards mode every line box keeps a full-height strut, so icon-only
   buttons, inline-block swatches and inline canvases come out taller than
   they did when the page rendered in quirks mode. */
i { line-height: 1; }
/* Icon-only buttons. :only-child ignores text nodes, so buttons with an icon
   and a label opt back out with Bootstrap's lh-base class. */
button:has(> i:only-child),
button:has(> svg:only-child) { line-height: 1; }
.palette .color { vertical-align: top; }
#stage canvas,
#stage2 canvas { vertical-align: top; }

/* ---------- Utilities not in Bootstrap ---------- */
.fs-8 { font-size: 0.85rem !important; }
.ls-1 { letter-spacing: 0.1rem !important; }
.text-sm { font-size: 0.875rem; }
.text-gray-400 { color: #B5B5C3 !important; }
.text-gray-600 { color: #7E8299 !important; }
.text-gray-800 { color: #3F4254 !important; }
.text-hover-primary:hover { color: var(--bs-primary) !important; }
.card-rounded { border-radius: 0.275rem; }
.z-index-3 { z-index: 3 !important; }
.rotate-90 { transition: transform 0.3s ease; }

.h-15px { height: 15px !important; }
.h-20px { height: 20px !important; }
.h-30px { height: 30px !important; }
.w-20px { width: 20px !important; }
.w-30px { width: 30px !important; }
.w-40px { width: 40px !important; }
.w-80px { width: 80px !important; }
.max-h-75px { max-height: 75px !important; }

.mt-8 { margin-top: 2rem !important; }
.mt-14 { margin-top: 3.5rem !important; }
.me-10 { margin-right: 2.5rem !important; }
.p-10 { padding: 2.5rem !important; }

@media (min-width: 1200px) {
  .g-xl-8 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
}