/* GameEngine Studios Professional UI v3.1
   Shared, non-destructive finishing layer for Main, Cloud, and Admin. */
:root {
  --ges-bg: #020817;
  --ges-bg-soft: #06152c;
  --ges-surface: rgba(8, 27, 57, .78);
  --ges-surface-strong: rgba(8, 34, 73, .94);
  --ges-surface-hover: rgba(13, 48, 96, .92);
  --ges-text: #eef7ff;
  --ges-muted: #a9bed6;
  --ges-primary: #22b5ff;
  --ges-primary-strong: #0878ff;
  --ges-line: rgba(112, 198, 255, .23);
  --ges-line-strong: rgba(113, 211, 255, .58);
  --ges-success: #51dfa7;
  --ges-warning: #ffd369;
  --ges-danger: #ff7387;
  --ges-radius-sm: 12px;
  --ges-radius-md: 18px;
  --ges-radius-lg: 26px;
  --ges-shadow: 0 20px 58px rgba(0, 0, 0, .30);
  --ges-shadow-soft: 0 10px 32px rgba(0, 0, 0, .22);
  --ges-glow: 0 0 28px rgba(34, 181, 255, .30);
  --ges-transition: 180ms ease;
}

html { color-scheme: dark; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, iframe { max-width: 100%; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  overflow-wrap: anywhere;
}
p, li, td, th, label, .muted, .subtitle, .description {
  overflow-wrap: anywhere;
}

/* Consistent keyboard focus */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(73, 193, 255, .55);
  outline-offset: 3px;
}

/* Professional controls */
:where(button, input[type="button"], input[type="submit"], input[type="reset"],
       a.btn, a.button, a[class*="btn"], a[class*="button"], a[class*="action"],
       .admin-home-btn, .preview-size-btn) {
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  line-height: 1.25;
  text-align: center;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
  border-radius: 999px;
  transition: transform var(--ges-transition), border-color var(--ges-transition),
              background-color var(--ges-transition), box-shadow var(--ges-transition),
              color var(--ges-transition);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"],
       a.btn, a.button, a[class*="btn"], a[class*="button"], a[class*="action"],
       .admin-home-btn, .preview-size-btn):not(:disabled):hover {
  transform: translateY(-2px);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Icon buttons: allow the label to wrap while keeping the icon stable. */
.ges-has-icon {
  min-width: 0;
  height: auto;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
}
.ges-has-icon > .ges-icon { flex: 0 0 auto; }
.ges-has-icon > .ges-icon-label,
.ges-has-icon > span:not(.badge):not(.count) {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Dashboard/action tiles use a large icon above a wrapping label. */
:where(.cloud-actions, .dashboard-grid, .action-grid, .menu-grid, .quick-actions,
       .admin-actions, .shortcut-grid, .tile-grid) > :where(a, button) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  padding: 16px 14px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
:where(.cloud-actions, .dashboard-grid, .action-grid, .menu-grid, .quick-actions,
       .admin-actions, .shortcut-grid, .tile-grid) > :where(a, button) > .ges-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
}

/* Surfaces */
:where(.card, [class$="-card"], [class*=" card"], .panel, [class$="-panel"],
       .glass-card, .widget, .modal-content, .dialog, fieldset) {
  min-width: 0;
}
:where(.glass-card, .cloud-card, .editor-panel, .preview-panel, .modal-content) {
  border-color: var(--ges-line);
  box-shadow: var(--ges-shadow-soft);
}

/* Forms */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  color: var(--ges-text);
  background-color: rgba(1, 8, 20, .76);
  border: 1px solid var(--ges-line);
  border-radius: var(--ges-radius-sm);
  transition: border-color var(--ges-transition), box-shadow var(--ges-transition), background var(--ges-transition);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover {
  border-color: rgba(112, 198, 255, .4);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: var(--ges-primary);
  box-shadow: 0 0 0 4px rgba(34, 181, 255, .14);
  outline: none;
}
textarea { line-height: 1.5; resize: vertical; }
::placeholder { color: rgba(182, 204, 226, .57); opacity: 1; }

/* Tables */
:where(.table-wrap, .table-responsive, [class*="table-container"]) {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--ges-radius-md);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
th {
  color: #dff4ff;
  font-size: .78rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}
th, td { vertical-align: middle; }
tbody tr { transition: background-color var(--ges-transition); }
tbody tr:hover { background: rgba(49, 170, 255, .055); }

/* Navigation polish without changing display/breakpoint behavior. */
:where(.site-header, .admin-header, .topbar, .navbar, header[role="banner"]) {
  border-bottom-color: var(--ges-line);
}
:where(.site-nav, .admin-nav, .top-nav, nav) a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Modals and previews should fit the viewport. */
:where(.modal, .dialog, [role="dialog"]) {
  max-width: 100vw;
  max-height: 100dvh;
}
:where(.modal-content, .dialog-content, .preview-content, .preview-panel) {
  max-width: min(100%, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}
:where(.modal img, .modal video, .preview-modal img, .preview-modal video, .file-preview img, .file-preview video) {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78dvh, 900px);
  object-fit: contain;
}

/* Badges and notices */
:where(.badge, .status, .pill, .tag) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
:where(.alert, .notice, .message, .editor-status, .form-status) {
  border-radius: var(--ges-radius-sm);
  overflow-wrap: anywhere;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(74, 184, 255, .55) rgba(4, 15, 33, .55); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: rgba(4, 15, 33, .55); }
*::-webkit-scrollbar-thumb { background: rgba(74, 184, 255, .46); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(74, 184, 255, .68); }

/* Prevent layout overflow in common flex/grid containers. */
:where(main, section, article, aside, header, footer, nav, form, .row, .grid, [class*="grid"], [class*="layout"]) > * {
  min-width: 0;
}

@media (max-width: 760px) {
  :where(.cloud-actions, .dashboard-grid, .action-grid, .menu-grid, .quick-actions,
         .admin-actions, .shortcut-grid, .tile-grid) {
    grid-template-columns: 1fr !important;
  }
  :where(.cloud-actions, .dashboard-grid, .action-grid, .menu-grid, .quick-actions,
         .admin-actions, .shortcut-grid, .tile-grid) > :where(a, button) {
    min-height: 72px;
    padding: 14px;
  }
  :where(button, input[type="button"], input[type="submit"], input[type="reset"],
         a.btn, a.button, a[class*="btn"], a[class*="button"], a[class*="action"],
         .admin-home-btn) {
    font-size: 1rem;
  }
  :where(input, select, textarea) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}


/* GES v3.2: File Explorer text wrapping and control sizing */
#explorerWindow :where(.btn, .tiny, .upload-picker, .context button),
.top .actions .btn,
.modal :where(.btn, .tiny),
.media-tools .tiny {
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto;
  height: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center;
  line-height: 1.2;
  flex-wrap: wrap;
  justify-content: center;
}

#explorerWindow .upload-picker {
  flex: 1 1 130px;
}

#explorerWindow .card-actions {
  align-items: stretch;
}

#explorerWindow .card-actions > :where(a, button, form) {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 92px;
}

#explorerWindow .card-actions > form {
  display: flex !important;
  margin: 0;
}

#explorerWindow .card-actions > form > .tiny {
  width: 100%;
}

#explorerWindow :where(.btn, .tiny, .upload-picker) > .ges-icon {
  flex: 0 0 auto;
}

#explorerWindow :where(.name, .meta, .tree a, .crumbs a, .details th, .details td),
#explorerWindow .details td:first-child label {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word;
}

#explorerWindow .details td:first-child label {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}

@media (max-width: 700px) {
  #explorerWindow .card-actions > :where(a, button, form) {
    flex-basis: calc(50% - 6px);
  }

  #explorerWindow :where(.btn, .tiny, .upload-picker) {
    font-size: .92rem;
  }
}

@media (max-width: 430px) {
  #explorerWindow .card-actions > :where(a, button, form) {
    flex-basis: 100%;
  }
}

/* GameEngine Studios UI v4 — canonical cross-app visual system. */
:root {
  --ges-bg: #07101f;
  --ges-bg-soft: #0a1830;
  --ges-surface: #0d1b34;
  --ges-surface-strong: #10213d;
  --ges-surface-hover: #142a4d;
  --ges-text: #edf8ff;
  --ges-muted: #9eb2ca;
  --ges-primary: #58d8ff;
  --ges-primary-strong: #168dff;
  --ges-line: rgba(126, 211, 255, .18);
  --ges-line-strong: rgba(126, 211, 255, .42);
  --ges-radius-sm: 11px;
  --ges-radius-md: 16px;
  --ges-radius-lg: 20px;
  --ges-shadow: 0 20px 55px rgba(0, 0, 0, .3);
  --ges-shadow-soft: 0 10px 30px rgba(0, 0, 0, .2);
}

body {
  color: var(--ges-text);
  background-color: var(--ges-bg);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

:where(.card, [class$="-card"], .panel, [class$="-panel"], .glass-card,
       .widget, fieldset, dialog, .modal-content) {
  border-color: var(--ges-line);
}

:where(.btn, .button, [class$="-button"], .admin-home-btn, .primary-button,
       .secondary-button, .ghost-button, button) {
  border-radius: var(--ges-radius-sm);
}

:where(.primary, .primary-button, .btn.primary, .button.primary,
       .admin-home-btn:not(.secondary)) {
  border-color: transparent;
  color: #03101e;
  background: linear-gradient(135deg, var(--ges-primary), var(--ges-primary-strong));
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  color: var(--ges-text);
  background: rgba(3, 13, 29, .78);
  border-color: var(--ges-line);
  border-radius: var(--ges-radius-sm);
}

:where(table) { background: transparent; }
:where(th) { color: #dff5ff; }
:where(td, th) { border-color: var(--ges-line); }

:where(.muted, .meta, .subtitle, .description, small) { color: var(--ges-muted); }

@media (max-width: 680px) {
  :where(.page-shell, .shell, .wrap, .container, main) { max-width: 100%; }
}