/* 1Tool4Every1 - Master Universal Stylesheet & 5-Theme Engine */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =========================================================
   1. THEME PALETTE DEFINITIONS
   ========================================================= */

:root, [data-theme="dark"] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-primary: #090d16;
  --bg-secondary: #0f172a;
  --header-bg: rgba(15, 23, 42, 0.95);
  --card-bg: #0f172a;
  --card-border: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --input-bg: #0b1120;
  --input-border: #334155;
  --accent-color: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.35);
  --nav-tab-bg: #0f172a;
  --nav-tab-hover: #1e293b;
}

/* Studio Light (Crisp Minimal High-Contrast White) */
[data-theme="light"] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.98);
  --card-bg: #ffffff;
  --card-border: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --input-bg: #f8fafc;
  --input-border: #cbd5e1;
  --accent-color: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.2);
  --nav-tab-bg: #ffffff;
  --nav-tab-hover: #e2e8f0;
}

/* Pure OLED (Pitch Black True High-Contrast) */
[data-theme="oled"] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --header-bg: rgba(5, 5, 5, 0.98);
  --card-bg: #0d0d0d;
  --card-border: #262626;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --input-bg: #000000;
  --input-border: #262626;
  --accent-color: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --nav-tab-bg: #080808;
  --nav-tab-hover: #171717;
}

/* Nordic Emerald (Deep Arctic Pine & Cyan Terminal) */
[data-theme="nord"] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-primary: #021217;
  --bg-secondary: #052129;
  --header-bg: rgba(5, 33, 41, 0.96);
  --card-bg: #062831;
  --card-border: #0d9488;
  --text-primary: #ecfdf5;
  --text-secondary: #99f6e4;
  --text-muted: #5eead4;
  --input-bg: #02161c;
  --input-border: #0f766e;
  --accent-color: #10b981;
  --accent-glow: rgba(168, 85, 247, 0.45);
  --nav-tab-bg: #062630;
  --nav-tab-hover: #083340;
}

/* Cyber Violet (Obsidian Neon Purple & Magenta) */
[data-theme="violet"] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg-primary: #080314;
  --bg-secondary: #14082e;
  --header-bg: rgba(20, 8, 46, 0.96);
  --card-bg: #160a33;
  --card-border: #7c3aed;
  --text-primary: #faf5ff;
  --text-secondary: #d8b4fe;
  --text-muted: #c084fc;
  --input-bg: #0a0418;
  --input-border: #6d28d9;
  --accent-color: #a855f7;
  --accent-glow: rgba(168, 85, 247, 0.45);
  --nav-tab-bg: #160c30;
  --nav-tab-hover: #221247;
}

/* =========================================================
   2. GLOBAL CORE APPLIED RULES & DIRECT THEME MAPPINGS
   ========================================================= */

html, body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* MIDNIGHT DARK */
body, [data-theme="dark"], body[data-theme="dark"], html[data-theme="dark"] {
  background-color: #090d16 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: #334155 !important;
}

[data-theme="dark"] aside#app-sidebar,
[data-theme="dark"] #sidebar-footer {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] [class*="bg-slate-9"],
[data-theme="dark"] [class*="bg-slate-8"],
[data-theme="dark"] #split-view-container > div,
[data-theme="dark"] #split-left-pane,
[data-theme="dark"] #split-right-pane {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* STUDIO LIGHT */
body[data-theme="light"], html[data-theme="light"], [data-theme="light"] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] header {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] aside#app-sidebar,
[data-theme="light"] #sidebar-footer {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .glass-card,
[data-theme="light"] [class*="bg-slate-9"],
[data-theme="light"] [class*="bg-slate-8"],
[data-theme="light"] [class*="bg-black"],
[data-theme="light"] #split-view-container > div,
[data-theme="light"] #split-left-pane,
[data-theme="light"] #split-right-pane {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] p,
[data-theme="light"] label,
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: #334155 !important;
}

[data-theme="light"] .text-slate-500 {
  color: #64748b !important;
}

[data-theme="light"] .sidebar-tool-item {
  color: #334155 !important;
}

[data-theme="light"] .sidebar-tool-item:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-category-header {
  color: #64748b !important;
}

/* PURE OLED */
body[data-theme="oled"], html[data-theme="oled"], [data-theme="oled"] {
  background-color: #000000 !important;
  color: #ffffff !important;
}

[data-theme="oled"] header {
  background-color: #050505 !important;
  border-color: #262626 !important;
}

[data-theme="oled"] aside#app-sidebar,
[data-theme="oled"] #sidebar-footer {
  background-color: #080808 !important;
  border-color: #262626 !important;
}

[data-theme="oled"] .glass-card,
[data-theme="oled"] [class*="bg-slate-9"],
[data-theme="oled"] [class*="bg-slate-8"],
[data-theme="oled"] #split-view-container > div,
[data-theme="oled"] #split-left-pane,
[data-theme="oled"] #split-right-pane {
  background-color: #0d0d0d !important;
  border-color: #262626 !important;
}

/* NORDIC EMERALD */
body[data-theme="nord"], html[data-theme="nord"], [data-theme="nord"] {
  background-color: #021217 !important;
  color: #ecfdf5 !important;
}

[data-theme="nord"] header {
  background-color: #052129 !important;
  border-color: #0d9488 !important;
}

[data-theme="nord"] aside#app-sidebar,
[data-theme="nord"] #sidebar-footer {
  background-color: #052129 !important;
  border-color: #0d9488 !important;
}

[data-theme="nord"] .glass-card,
[data-theme="nord"] [class*="bg-slate-9"],
[data-theme="nord"] [class*="bg-slate-8"],
[data-theme="nord"] #split-view-container > div,
[data-theme="nord"] #split-left-pane,
[data-theme="nord"] #split-right-pane {
  background-color: #062831 !important;
  border-color: #0d9488 !important;
}

[data-theme="nord"] h1, [data-theme="nord"] h2, [data-theme="nord"] h3, [data-theme="nord"] h4 {
  color: #ecfdf5 !important;
}

[data-theme="nord"] .text-slate-300, [data-theme="nord"] .text-slate-400 {
  color: #99f6e4 !important;
}

/* CYBER VIOLET */
body[data-theme="violet"], html[data-theme="violet"], [data-theme="violet"] {
  background-color: #080314 !important;
  color: #faf5ff !important;
}

[data-theme="violet"] header {
  background-color: #14082e !important;
  border-color: #7c3aed !important;
}

[data-theme="violet"] aside#app-sidebar,
[data-theme="violet"] #sidebar-footer {
  background-color: #14082e !important;
  border-color: #7c3aed !important;
}

[data-theme="violet"] .glass-card,
[data-theme="violet"] [class*="bg-slate-9"],
[data-theme="violet"] [class*="bg-slate-8"],
[data-theme="violet"] #split-view-container > div,
[data-theme="violet"] #split-left-pane,
[data-theme="violet"] #split-right-pane {
  background-color: #160a33 !important;
  border-color: #7c3aed !important;
}

[data-theme="violet"] h1, [data-theme="violet"] h2, [data-theme="violet"] h3, [data-theme="violet"] h4 {
  color: #faf5ff !important;
}

[data-theme="violet"] .text-slate-300, [data-theme="violet"] .text-slate-400 {
  color: #d8b4fe !important;
}

/* Universal Button Text Protection */
button[class*="bg-blue-"],
button[class*="bg-indigo-"],
button[class*="bg-purple-"],
button[class*="bg-emerald-"],
button[class*="bg-teal-"],
button[class*="bg-red-"],
.active-tool,
.active-tool span,
[class*="bg-gradient-"] {
  color: #ffffff !important;
}

/* =========================================================
   4. SCROLLBARS & ANIMATIONS
   ========================================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-scaleUp {
  animation: scaleUp 0.18s ease-out forwards;
}

/* Monospace & Code */
code, pre, .font-mono {
  font-family: var(--font-mono);
}

/* =========================================================
   5. VERTICAL LEFT SIDEBAR & COMPACT DOCK ENGINE
   ========================================================= */

#app-sidebar {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease;
}

#app-sidebar.sidebar-collapsed {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

#app-sidebar.sidebar-collapsed .sidebar-text-container,
#app-sidebar.sidebar-collapsed .sidebar-text-label,
#app-sidebar.sidebar-collapsed .sidebar-category-header,
#app-sidebar.sidebar-collapsed #collapse-text,
#app-sidebar.sidebar-collapsed .sidebar-badge {
  display: none !important;
}

#app-sidebar.sidebar-collapsed .sidebar-tool-item {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

#app-sidebar.sidebar-collapsed .sidebar-tool-icon {
  font-size: 1.25rem !important;
  margin: 0 !important;
}

.sidebar-tool-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.18s ease;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
}

.sidebar-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sidebar-text-label {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.sidebar-badge {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.sidebar-tool-item:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--card-border);
  transform: translateX(2px);
}

[data-theme="light"] .sidebar-tool-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-tool-item.active-tool {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.sidebar-category-header {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
}

/* =========================================================
   MOBILE PHONE WEB BROWSER OPTIMIZATIONS (iOS & Android)
   ========================================================= */

/* Prevent 300ms tap delay and double-tap zoom on buttons */
button, a, input, select, textarea {
  touch-action: manipulation;
}

/* iOS Safe Area Padding for bottom navigation */
.safe-area-bottom {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 8px));
}

/* Main content bottom margin on mobile to clear the bottom dock */
@media (max-width: 1023px) {
  #main-workspace, #app-content-area, .tool-container {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 12px)) !important;
  }

  /* Compact header on mobile */
  header {
    padding-top: max(4px, env(safe-area-inset-top, 0px));
  }

  /* Smooth horizontal scroll for categories on mobile */
  .mobile-scroll-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* Active Mobile Dock Button */
.mobile-dock-btn.active-dock-tab {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 0.75rem;
}
.mobile-dock-btn.active-dock-tab span {
  font-weight: 800;
}

/* Mobile Sidebar Drawer Smooth Transitions */
#app-sidebar {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 1023px) {
  #app-sidebar:not(.mobile-open) {
    display: none !important;
  }
  #app-sidebar.mobile-open {
    transform: translateX(0) !important;
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    z-index: 60;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.85);
  }
  
  /* Mobile Tool Keypads & Cards Touch Target Sizing */
  button {
    min-height: 38px;
  }
}