/* ============================================================================
   KIPS PDF — Tool Premium Skin
   ----------------------------------------------------------------------------
   Re-skins ONLY the shared "chrome" elements of legacy tool pages to the new
   premium look, WITHOUT touching any functional element. Loaded last on each
   tool page, so it wins the cascade over the page's own inline <style> at
   equal specificity. No HTML or JavaScript is changed.

   SAFETY CONTRACT — this file must NEVER define rules for:
     textarea, canvas, #editor-wrapper, #page-grid, .page-container,
     .page-delete, .page-label, .floating-img-container, .resize-handle,
     .img-delete, .preview-header, .btn-preview, .img-input-btn, .preview-hint,
     .sortable-ghost
   ...so live previews (text-to-pdf), drag/reorder, delete, and image
   move/resize keep working exactly as before.

   Only restyles: .card, .card h2, .tool-desc, .toolbar, .btn-main, #status,
   .back, input[type="file"]. Pure CSS, GPU-light, with low-end downgrades.
   Requires kips-design-system.css (tokens) loaded first.
   ========================================================================== */

/* ---- THEME PIN (critical) -----------------------------------------------
   Tool pages are hardcoded dark (their inline <body> is #020617 / white text).
   But kips-platform.js sets data-theme="light" on devices in light mode, which
   would flip the design-system surface/text tokens to light values — turning
   the skinned card/status LIGHT while the rest of the tool stays dark (a
   broken, half-light look). This file is loaded ONLY on tool pages, so we pin
   the theme-reactive tokens to their dark values here, for both default and
   light, keeping every tool cohesively dark regardless of OS theme. Brand
   colors, radii and the glow are theme-independent and left untouched. */
:root,
:root[data-theme="light"] {
  --kips-surface-1: #0f172a;
  --kips-surface-2: #111b2e;
  --kips-surface-3: #1e293b;
  --kips-border: rgba(255, 255, 255, 0.08);
  --kips-border-strong: rgba(255, 255, 255, 0.14);
  --kips-text: #f1f5f9;
  --kips-text-muted: #94a3b8;
  --kips-grad-surface: linear-gradient(145deg, #111b2e, #060b18);
  --kips-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --kips-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ---- Outer panel (the old flat .card -> premium glass panel) ------------- */
/* NOTE: we deliberately do NOT set display/flex/order/overflow so existing
   layouts (e.g. text-to-pdf's preview-on-top flex order) stay intact. */
.card {
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--kips-brand-400) 12%, transparent), transparent 55%),
    var(--kips-grad-surface) !important;
  border: 1px solid var(--kips-border) !important;
  border-top: 1.5px solid var(--kips-border-strong) !important;
  border-radius: var(--kips-r-xl) !important;
  box-shadow: var(--kips-shadow-lg) !important;
}

/* ---- Gradient title (font-size stays from normalize.css) -----------------
   Guarded with @supports so browsers without background-clip:text keep a solid,
   readable title instead of transparent (invisible) text. */
.card h2 { color: var(--kips-brand-400); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .card h2 {
    background: linear-gradient(180deg, var(--kips-text), color-mix(in srgb, var(--kips-brand-400) 75%, var(--kips-text)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -0.02em;
  }
}

.tool-desc { color: var(--kips-text-muted) !important; }

/* ---- Toolbar (glass pill). Keeps position/order/flex from the tool. ------ */
.toolbar {
  background: color-mix(in srgb, var(--kips-surface-1) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--kips-border) !important;
  border-radius: var(--kips-r-lg) !important;
  box-shadow: var(--kips-shadow-md);
}

/* ---- File input -> friendly dropzone look -------------------------------- */
input[type="file"] {
  background: var(--kips-surface-1) !important;
  border: 2px dashed color-mix(in srgb, var(--kips-brand-400) 45%, var(--kips-border-strong)) !important;
  border-radius: var(--kips-r-md) !important;
  color: var(--kips-text-muted) !important;
  padding: 16px !important;
  transition: border-color var(--kips-dur) var(--kips-ease-out), background-color var(--kips-dur) var(--kips-ease-out);
  cursor: pointer;
}
input[type="file"]:hover {
  border-color: var(--kips-brand-400) !important;
  background: color-mix(in srgb, var(--kips-brand-400) 8%, var(--kips-surface-1)) !important;
}

/* ---- Primary action button -> gradient CTA with glow --------------------- */
.btn-main {
  background: var(--kips-grad-brand) !important;
  color: #021018 !important;
  border: none !important;
  border-radius: var(--kips-r-md) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(14,165,233,0.45), var(--kips-glow);
  transition: transform var(--kips-dur-fast) var(--kips-ease-out), box-shadow var(--kips-dur-fast) var(--kips-ease-out), filter var(--kips-dur-fast) var(--kips-ease-out);
  will-change: transform;
}
.btn-main:hover {
  background: var(--kips-grad-brand) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 12px 30px rgba(14,165,233,0.6), var(--kips-glow);
}
.btn-main:active { transform: translateY(0) !important; }
.btn-main:disabled { filter: grayscale(0.4) brightness(0.85); box-shadow: none; cursor: default; transform: none !important; }

/* ---- Status -> pill with indicator dot ----------------------------------- */
#status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-inline: auto;
  padding: 9px 16px;
  background: var(--kips-surface-2);
  border: 1px solid var(--kips-border);
  border-radius: var(--kips-r-pill);
  color: var(--kips-text-muted) !important;
  font-weight: 600;
}
#status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--kips-brand-400); box-shadow: 0 0 10px var(--kips-brand-400);
}

/* ---- Back link -> ghost chip --------------------------------------------- */
.back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--kips-border-strong);
  border-radius: var(--kips-r-pill);
  background: var(--kips-surface-2);
  color: var(--kips-text-muted) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform var(--kips-dur-fast) var(--kips-ease-out), border-color var(--kips-dur-fast);
}
.back:hover { transform: translateY(-2px); border-color: var(--kips-brand-400); color: var(--kips-text) !important; }

/* ---- Low-end / reduced-motion downgrades --------------------------------- */
[data-perf="low"] .toolbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-perf="low"] .btn-main,
[data-perf="low"] .back { transition: none; will-change: auto; }
[data-perf="low"] .btn-main:hover,
[data-perf="low"] .back:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-main, .back { transition: none; }
  .btn-main:hover, .back:hover { transform: none; }
}
