/* Dark theme overrides for HalftoneLab, matching the Xeroxizer aesthetic. */

/* Define a dark palette using CSS custom properties. These values
   override the built‑in variables defined in index.html. */
:root {
  --page: #1c1c1e;
  --surface: rgba(48, 48, 50, 0.92);
  --text: #f2f2f7;
  --secondary: #8e8e93;
  --tertiary: #6e6e73;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --blue: #0a84ff;
  --blue-hover: #409cff;
  --green: #30d158;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --sidebar-width: 360px;
}

/* Dark background with subtle colourful accents, similar to Xeroxizer. */
body {
  background:
    radial-gradient(circle at 16% 8%, rgba(64, 200, 255, 0.04), transparent 30rem),
    radial-gradient(circle at 88% 92%, rgba(255, 55, 140, 0.04), transparent 34rem),
    var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Prevent the page from scrolling. We rely on internal scrollable panels
     (e.g. sidebar) so the stage stays in view. */
  overflow: hidden;
}

/* Adjust the overall app shell to a darker translucent panel. */
.app-shell {
  border-color: var(--border);
  background: rgba(28, 28, 30, 0.7);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  /* Make the entire app fill the viewport so the stage remains fixed while
     the sidebar scrolls independently. */
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Toolbar styling: dark translucent background with subtle border. */
.toolbar {
  background: rgba(28, 28, 30, 0.86);
  border-bottom: 1px solid var(--border);
}

/* App icon and title area. */
.app-icon {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(44, 44, 46, 0.85), rgba(36, 36, 38, 0.95));
}
.app-icon span {
  background: var(--text);
  opacity: 0.9;
}
.subtitle {
  color: var(--secondary);
}

/* Sidebar: dark translucent panel with border. */
.sidebar {
  background: rgba(20, 20, 22, 0.88);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

/* Main content area: dark tint similar to Xeroxizer stage area. */
.main {
  background:
    radial-gradient(circle at 80% 10%, rgba(0, 0, 0, 0.05), transparent 22rem),
    rgba(28, 28, 30, 0.32);
}

/* Panels and sections inside the sidebar. */
.section {
  background: rgba(36, 36, 38, 0.92);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.32);
}
.section-title {
  color: var(--secondary);
  border-bottom: 1px solid var(--border);
}
.section-title::after {
  color: var(--tertiary);
}
.control {
  border-bottom: 1px solid var(--border);
}

/* Form elements: darker inputs with lighter text. */
select,
input[type="color"],
input[type="text"],
textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(48, 48, 50, 0.92);
  color: var(--text);
}
select:hover,
input[type="color"]:hover,
input[type="text"]:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input[type="range"] {
  accent-color: var(--blue);
}

.check-pill {
  background: rgba(48, 48, 50, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
}
.check-pill:hover {
  background: rgba(56, 56, 58, 0.98);
  border-color: var(--border-strong);
}

/* Buttons and upload controls: dark with blue highlights. */
button,
.upload-btn {
  background: rgba(40, 40, 42, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
button:hover,
.upload-btn:hover {
  background: rgba(48, 48, 50, 0.96);
  border-color: var(--border-strong);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}
button:active,
.upload-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.primary-btn {
  background: linear-gradient(180deg, #168cff, #0a84ff);
  border-color: rgba(10, 132, 255, 0.65);
  color: #fff;
}
.primary-btn:hover {
  background: linear-gradient(180deg, #0f83f5, #007aff);
}

/* Stage and canvas card: dark card with inner shadow. */
.stage-card {
  border: 1px solid var(--border);
  background: rgba(32, 32, 34, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px rgba(0, 0, 0, 0.42);
}
canvas {
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2);
  background: transparent;
  border-radius: 18px;
}

/* Chips and status cards. */
.chip,
.status-item {
  background: rgba(44, 44, 46, 0.86);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--tertiary);
}
.status-item strong {
  color: var(--text);
}

/* Split handle knob for before/after. */
.split-knob {
  background: rgba(56, 56, 58, 0.95);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

/* Footer credit styling. */
.footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--secondary);
  font-size: 0.8rem;
}
.footer img {
  height: 24px;
  width: auto;
}
.footer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

/* Layout overrides to keep the stage stationary and allow sidebar
   scrolling, similar to the Xeroxizer interface. These rules ensure
   the app-shell fills the viewport height, the workspace takes up the
   available space below the toolbar, and that only the sidebar
   scrolls independently while the main canvas area remains fixed. */

/* Ensure the workspace fills the remaining height beneath the toolbar. */
.workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* Allow the sidebar to scroll independently of the main content. */
.sidebar {
  overflow-y: auto;
  height: 100%;
}

/* Make the main area take up the full height and hide overflow so the
   canvas stays in view while the sidebar scrolls. */
.main {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}