/* ==========================================================================
   AsadWebs tool pages — v2 design layer (professional restyle, 2026-10-12).
   Loaded LAST on every tool page (injected by ToolController@show).
   Strategy: re-skin the existing design system by redefining its CSS
   variables to a clean, CloudConvert-like professional system: light
   neutral background, white cards, 1px light borders, ONE solid indigo
   accent (#4f46e5), solid ink/accent buttons — no gradients anywhere.
   No layout/display properties are changed. Dark mode: [data-theme="dark"]
   (set by the injected toggle, localStorage key 'aw-theme', same as the hub)
   or the OS preference when no theme was chosen.
   ========================================================================== */

/* ---------- palette: light (default) ---------- */
:root{
  --bg:#f7f7f8; --bg-soft:#f1f1f3; --surface:#ffffff; --surface-2:#f4f4f5;
  --border:#e4e4e7; --border-soft:#ececee;
  --text:#17171c; --text-muted:#6d6d78; --text-faint:#9c9ca6;
  --accent:#4f46e5; --accent-dim:#4338ca; --accent-ink:#ffffff;
  --accent-2:#4f46e5; --accent-2-dim:#4338ca;
  --danger:#dc2626; --success:#059669;
  --radius-sm:10px; --radius-md:10px; --radius-lg:12px;
  --shadow-card:0 1px 2px rgba(16,24,40,.05),0 4px 16px -8px rgba(16,24,40,.08);
  --shadow-pop:0 8px 28px -12px rgba(16,24,40,.18);
  --v2-nav-bg:rgba(255,255,255,.92);
  color-scheme:light;
}
/* ---------- palette: dark ---------- */
:root[data-theme="dark"]{
  --bg:#0c0f14; --bg-soft:#10141a; --surface:#151a21; --surface-2:#1c232d;
  --border:#262e38; --border-soft:#1f262e;
  --text:#e8eaed; --text-muted:#98a2ad; --text-faint:#6b7684;
  --accent:#818cf8; --accent-dim:#6366f1; --accent-ink:#ffffff;
  --accent-2:#818cf8; --accent-2-dim:#6366f1;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 4px 16px -8px rgba(0,0,0,.5);
  --shadow-pop:0 8px 28px -12px rgba(0,0,0,.65);
  --v2-nav-bg:rgba(12,15,20,.92);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0f14; --bg-soft:#10141a; --surface:#151a21; --surface-2:#1c232d;
    --border:#262e38; --border-soft:#1f262e;
    --text:#e8eaed; --text-muted:#98a2ad; --text-faint:#6b7684;
    --accent:#818cf8; --accent-dim:#6366f1; --accent-ink:#ffffff;
    --accent-2:#818cf8; --accent-2-dim:#6366f1;
    --shadow-card:0 1px 2px rgba(0,0,0,.4),0 4px 16px -8px rgba(0,0,0,.5);
    --shadow-pop:0 8px 28px -12px rgba(0,0,0,.65);
    --v2-nav-bg:rgba(12,15,20,.92);
    color-scheme:dark;
  }
}

/* ---------- page chrome ---------- */
body.tool-body{background:var(--bg)}
::selection{background:rgba(79,70,229,.18)}
.tool-topbar{background:var(--v2-nav-bg);border-bottom-color:var(--border-soft)}
.tool-back:hover{color:var(--accent)}
.site-tools-nav{background:var(--v2-nav-bg);border-bottom:1px solid var(--border-soft)}
.site-tools-nav a{color:var(--text)}
.site-tools-nav nav a{color:var(--text-muted);font-weight:600}
.site-tools-nav nav a:hover{color:var(--accent)}
.site-webs{color:var(--accent)}
.site-brace{color:var(--text-faint)}
.tool-topbar a:focus-visible,.site-tools-nav a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- hero ---------- */
.tool-hero h1{letter-spacing:-.02em}
.tool-hero .tool-card-tag,.tool-hero .hub-eyebrow{
  background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px;padding:6px 13px;
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600}
.tool-footer a{color:var(--accent)}

/* ---------- panels & results ---------- */
.tool-panel{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.results-panel,.data-panel{border-radius:var(--radius-md);border-color:var(--border-soft)}

/* ---------- inputs (mirrors theme.css override selectors) ---------- */
.tool-panel input:not(.tox-tinymce *,.jodit *),.tool-panel textarea:not(.tox-tinymce *,.jodit *),.tool-panel select:not(.tox-tinymce *,.jodit *){
  border-radius:10px !important;padding:12px 14px !important}
.tool-panel input:not(.tox-tinymce *,.jodit *):focus,.tool-panel textarea:not(.tox-tinymce *,.jodit *):focus,.tool-panel select:not(.tox-tinymce *,.jodit *):focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent) !important}

/* ---------- buttons: solid primaries ----------
   Mirrors theme.css button selectors; .btn-teal keeps its deliberate teal
   (excluded here) and Bootstrap contextual variants are left alone. */
.tool-panel button:not(.tox-tinymce *,.jodit *,.btn-teal,.btn-danger,.btn-success,.btn-warning,.btn-secondary,.btn-outline-primary,.btn-outline-secondary),
.tool-panel .btn:not(.tox-tinymce *,.jodit *,.btn-teal,.btn-danger,.btn-success,.btn-warning,.btn-secondary,.btn-outline-primary,.btn-outline-secondary),
.tool-panel .button:not(.tox-tinymce *,.jodit *),
.tool-panel input[type="button"]:not(.tox-tinymce *,.jodit *),
.tool-panel input[type="submit"]:not(.tox-tinymce *,.jodit *),
.tool-panel a.button:not(.tox-tinymce *,.jodit *),
.tool-panel .uploadButton,.tool-panel .downloadButton,.tool-panel .downloadButtonSingle,
.tool-panel .convertButton,.tool-panel .download-all-btn,.tool-panel .downloadAllButton,
.tool-panel label.uploadButton{
  background:var(--accent) !important;color:#fff !important;
  border-radius:10px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.08) !important}
.tool-panel button:not(.tox-tinymce *,.jodit *,.btn-teal,.btn-danger,.btn-success,.btn-warning,.btn-secondary,.btn-outline-primary,.btn-outline-secondary):hover,
.tool-panel .btn:not(.tox-tinymce *,.jodit *,.btn-teal,.btn-danger,.btn-success,.btn-warning,.btn-secondary,.btn-outline-primary,.btn-outline-secondary):hover,
.tool-panel .button:not(.tox-tinymce *,.jodit *):hover,
.tool-panel a.button:not(.tox-tinymce *,.jodit *):hover,
.tool-panel .convertButton:hover,.tool-panel .download-all-btn:hover,.tool-panel .downloadAllButton:hover{
  background:var(--accent-dim) !important}

/* ---------- drop zones ---------- */
label.dropzone,.dropzone{border-radius:var(--radius-lg)}
label.dropzone:hover,.dropzone:hover{border-color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 4%,transparent) !important}
label.dropzone.drag,.dropzone.drag{border-color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 8%,transparent) !important}
.dropzone-icon{border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}

/* ---------- PDF suite rows ---------- */
.pdfs-file-row{border-radius:10px;border-color:var(--border)}
.pdfs-primary{background:var(--accent);border-radius:10px}
.pdfs-primary:hover:not(:disabled){background:var(--accent-dim)}

/* ---------- injected guide (tool-guide.css is dark-hardcoded) ---------- */
.tool-guide{background:var(--surface);color:var(--text-muted);border-color:var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.tool-guide h2,.tool-guide h3,.tool-guide summary{color:var(--text)}
.tool-guide p{color:var(--text-muted)}
.tool-guide header>span{color:var(--accent)}
.tool-guide a{color:var(--accent)}
.tool-guide nav,.tool-guide footer{border-color:var(--border)}
.tool-guide details{border-color:var(--border)}
.tool-guide aside{background:var(--bg-soft);border-left-color:var(--accent)}

/* ---------- floating dark-mode toggle (injected with this layer) ---------- */
#aw-theme-toggle{position:fixed;right:22px;bottom:22px;z-index:1200;width:48px;height:48px;
  border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow-pop);
  display:flex;align-items:center;justify-content:center}
#aw-theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:640px){
  .tool-topbar{padding:12px 16px}
  #aw-theme-toggle{right:16px;bottom:16px;width:44px;height:44px}
}