/* ========================================
   DRAGON BALL THEME FOR orDOS
   Inspired by the Dragon Ball universe
   - Orange gi colors
   - Blue Capsule Corp tech
   - Saiyan power effects
   - Scouter-style UI elements
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Russo+One&family=Orbitron:wght@400;500;600;700&display=swap');

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {
  /* Dragon Ball Orange (Goku's Gi) */
  --db-orange-light: #ff8c42;
  --db-orange: #ff6b1a;
  --db-orange-dark: #e55a00;
  
  /* Capsule Corp Blue */
  --db-blue-light: #5eb8ff;
  --db-blue: #2196f3;
  --db-blue-dark: #1565c0;
  
  /* Saiyan Gold (Super Saiyan) */
  --db-gold-light: #ffe066;
  --db-gold: #ffd700;
  --db-gold-dark: #daa520;
  
  /* Ki Energy */
  --db-ki-blue: #00bfff;
  --db-ki-yellow: #ffff00;
  --db-ki-red: #ff4444;
  
  /* Backgrounds */
  --db-bg-dark: #1a1a2e;
  --db-bg-medium: #16213e;
  --db-bg-light: #0f3460;
  
  /* Text */
  --db-text-primary: #ffffff;
  --db-text-secondary: #ffd700;
  --db-text-muted: rgba(255, 255, 255, 0.7);
  
  /* Borders */
  --db-border: rgba(255, 107, 26, 0.5);
  --db-border-glow: rgba(255, 215, 0, 0.6);
  
  /* Fonts */
  --font-display: 'Bangers', 'Russo One', cursive;
  --font-ui: 'Russo One', 'Orbitron', sans-serif;
  --font-mono: 'Orbitron', monospace;
  
  /* Windows 95 Variable Overrides */
  --WindowFrame: var(--db-bg-medium);
  --Window: var(--db-bg-dark);
  --WindowText: var(--db-text-primary);
  --ActiveTitle: var(--db-orange);
  --TitleText: #ffffff;
  --InactiveTitle: var(--db-bg-light);
  --InactiveTitleText: var(--db-text-muted);
  --Menu: var(--db-bg-medium);
  --MenuText: var(--db-text-primary);
  --Highlight: var(--db-orange);
  --HighlightText: #ffffff;
  --ButtonFace: var(--db-bg-light);
  --ButtonHilight: var(--db-gold);
  --ButtonShadow: rgba(0, 0, 0, 0.5);
  --Scrollbar: var(--db-bg-medium);
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

body {
  background: linear-gradient(135deg, var(--db-bg-dark) 0%, var(--db-bg-medium) 50%, var(--db-bg-dark) 100%);
  font-family: var(--font-ui);
}

/* Animated Ki energy background effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 107, 26, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 191, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ========================================
   TASKBAR - Scouter Style
   ======================================== */

ui-dock {
  background: linear-gradient(180deg, 
    rgba(26, 26, 46, 0.95) 0%,
    rgba(22, 33, 62, 0.98) 50%,
    rgba(15, 52, 96, 0.95) 100%) !important;
  border-top: 2px solid var(--db-orange) !important;
  box-shadow: 
    0 -2px 20px rgba(255, 107, 26, 0.3),
    inset 0 1px 0 rgba(255, 215, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}

/* Scouter-style power level indicator effect */
ui-dock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    var(--db-gold) 20%,
    var(--db-orange) 50%,
    var(--db-gold) 80%,
    transparent 100%);
  animation: scouter-scan 3s ease-in-out infinite;
}

@keyframes scouter-scan {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ========================================
   START BUTTON - Dragon Ball Style
   ======================================== */

ui-dock > [aria-label="Start"],
ui-dock > button:first-child {
  background: linear-gradient(180deg, 
    var(--db-orange-light) 0%,
    var(--db-orange) 50%,
    var(--db-orange-dark) 100%) !important;
  border: 2px solid var(--db-gold) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 215, 0, 0.5) !important;
  box-shadow: 
    0 0 15px rgba(255, 107, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}

ui-dock > [aria-label="Start"]:hover,
ui-dock > button:first-child:hover {
  background: linear-gradient(180deg, 
    var(--db-gold-light) 0%,
    var(--db-gold) 50%,
    var(--db-gold-dark) 100%) !important;
  box-shadow: 
    0 0 25px rgba(255, 215, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.05) !important;
}

/* ========================================
   TASKBAR BUTTONS - Capsule Corp Style
   ======================================== */

ui-dock > button {
  background: linear-gradient(180deg, 
    rgba(15, 52, 96, 0.9) 0%,
    rgba(22, 33, 62, 0.95) 100%) !important;
  border: 1px solid rgba(255, 107, 26, 0.4) !important;
  border-radius: 3px !important;
  color: var(--db-text-primary) !important;
  font-family: var(--font-ui) !important;
  transition: all 0.2s ease !important;
}

ui-dock > button:hover {
  background: linear-gradient(180deg, 
    rgba(255, 107, 26, 0.3) 0%,
    rgba(255, 107, 26, 0.2) 100%) !important;
  border-color: var(--db-orange) !important;
  box-shadow: 0 0 15px rgba(255, 107, 26, 0.3) !important;
}

ui-dock > button[aria-pressed="true"] {
  background: linear-gradient(180deg, 
    var(--db-orange-dark) 0%,
    var(--db-orange) 100%) !important;
  border-color: var(--db-gold) !important;
  box-shadow: 
    0 0 20px rgba(255, 107, 26, 0.5),
    inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
}

/* ========================================
   WINDOW FRAMES - Scouter Display
   ======================================== */

ui-dialog {
  background: linear-gradient(180deg, 
    var(--db-bg-dark) 0%,
    var(--db-bg-medium) 100%) !important;
  border: 2px solid var(--db-orange) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 30px rgba(255, 107, 26, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
}

/* Window Title Bar - Power Level Display */
ui-dialog__header,
.ui-dialog__header {
  background: linear-gradient(90deg, 
    var(--db-orange-dark) 0%,
    var(--db-orange) 50%,
    var(--db-orange-dark) 100%) !important;
  border-bottom: 1px solid var(--db-gold) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 215, 0, 0.3) !important;
  text-transform: uppercase !important;
}

/* Window Control Buttons */
.ui-dialog__button {
  background: linear-gradient(180deg, 
    var(--db-bg-light) 0%,
    var(--db-bg-medium) 100%) !important;
  border: 1px solid var(--db-orange) !important;
  border-radius: 3px !important;
  color: var(--db-text-primary) !important;
  transition: all 0.15s ease !important;
}

.ui-dialog__button:hover {
  background: linear-gradient(180deg, 
    var(--db-orange) 0%,
    var(--db-orange-dark) 100%) !important;
  box-shadow: 0 0 10px rgba(255, 107, 26, 0.4) !important;
}

/* Close button - Ki blast red */
.ui-dialog__button[aria-label*="Close"]:hover,
.ui-dialog__button:last-child:hover {
  background: linear-gradient(180deg, 
    #ff4444 0%,
    #cc0000 100%) !important;
  border-color: #ff6666 !important;
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.5) !important;
}

/* ========================================
   DESKTOP ICONS - Dragon Ball Items
   ======================================== */

ui-icon {
  color: var(--db-text-primary) !important;
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 107, 26, 0.3) !important;
  font-family: var(--font-ui) !important;
  transition: all 0.2s ease !important;
}

ui-icon:hover {
  background: radial-gradient(ellipse, 
    rgba(255, 107, 26, 0.3) 0%,
    transparent 70%) !important;
  transform: scale(1.1) !important;
}

ui-icon[aria-selected="true"] {
  background: radial-gradient(ellipse, 
    rgba(255, 215, 0, 0.4) 0%,
    rgba(255, 107, 26, 0.2) 70%) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3) !important;
}

/* ========================================
   START MENU - Saiyan Power Menu
   ======================================== */

#startMenu,
.start-menu,
ui-menu[aria-labelledby="start"] {
  bottom: 44px !important;
  left: 4px !important;
  
  /* Capsule Corp blue with orange glow */
  background: linear-gradient(180deg, 
    rgba(15, 52, 96, 0.98) 0%,
    rgba(22, 33, 62, 0.98) 50%,
    rgba(26, 26, 46, 0.98) 100%) !important;
  
  border: 2px solid var(--db-orange) !important;
  border-radius: 8px !important;
  
  box-shadow: 
    0 0 30px rgba(255, 107, 26, 0.4),
    0 0 60px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 40px rgba(0, 0, 0, 0.5) !important;
  
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  
  padding: 8px 4px !important;
  min-width: 220px !important;
  max-width: 300px !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
}

/* Start menu header glow */
#startMenu::before,
.start-menu::before,
ui-menu[aria-labelledby="start"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--db-orange) 0%,
    var(--db-gold) 50%,
    var(--db-orange) 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Start menu items - CLEAR TEXT */
#startMenu .ui-menu__menuitem,
.start-menu .ui-menu__menuitem,
ui-menu[aria-labelledby="start"] .ui-menu__menuitem,
#startMenu ui-menuitem,
.start-menu ui-menuitem,
ui-menu[aria-labelledby="start"] ui-menuitem {
  padding: 10px 14px !important;
  margin: 2px 4px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  
  /* HIGH CONTRAST TEXT - white on dark */
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

/* Start menu item hover */
#startMenu .ui-menu__menuitem:hover,
.start-menu .ui-menu__menuitem:hover,
ui-menu[aria-labelledby="start"] .ui-menu__menuitem:hover,
#startMenu ui-menuitem:hover,
.start-menu ui-menuitem:hover,
ui-menu[aria-labelledby="start"] ui-menuitem:hover {
  background: linear-gradient(90deg, 
    rgba(255, 107, 26, 0.5) 0%,
    rgba(255, 107, 26, 0.3) 100%) !important;
  border-color: rgba(255, 107, 26, 0.6) !important;
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 0 10px rgba(255, 107, 26, 0.3) !important;
}

/* Start menu icons */
#startMenu .ui-menu__menuitem ui-picto,
.start-menu .ui-menu__menuitem ui-picto,
ui-menu[aria-labelledby="start"] .ui-menu__menuitem ui-picto,
#startMenu ui-menuitem ui-picto,
.start-menu ui-menuitem ui-picto,
ui-menu[aria-labelledby="start"] ui-menuitem ui-picto {
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3)) !important;
}

/* Start menu separators - orange power lines */
#startMenu hr,
.start-menu hr,
ui-menu[aria-labelledby="start"] hr {
  margin: 6px 8px !important;
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 107, 26, 0.6) 20%,
    rgba(255, 215, 0, 0.8) 50%,
    rgba(255, 107, 26, 0.6) 80%,
    transparent 100%) !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* Submenus */
#startMenu ui-menu,
.start-menu ui-menu,
ui-menu[aria-labelledby="start"] ui-menu {
  background: linear-gradient(180deg, 
    rgba(15, 52, 96, 0.98) 0%,
    rgba(22, 33, 62, 0.98) 100%) !important;
  border: 2px solid var(--db-orange) !important;
  box-shadow: 
    0 0 20px rgba(255, 107, 26, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   CONTEXT MENUS - Capsule Menu
   ======================================== */

ui-menu,
[role="menu"] {
  background: linear-gradient(180deg, 
    rgba(26, 26, 46, 0.98) 0%,
    rgba(22, 33, 62, 0.98) 100%) !important;
  border: 2px solid var(--db-orange) !important;
  border-radius: 6px !important;
  box-shadow: 
    0 0 20px rgba(255, 107, 26, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

ui-menuitem,
[role="menuitem"] {
  color: #ffffff !important;
  font-family: var(--font-ui) !important;
  transition: all 0.15s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

ui-menuitem:hover,
[role="menuitem"]:hover {
  background: linear-gradient(90deg, 
    rgba(255, 107, 26, 0.4) 0%,
    rgba(255, 107, 26, 0.2) 100%) !important;
  color: var(--db-gold) !important;
}

/* ========================================
   SCROLLBARS - Ki Energy Flow
   ======================================== */

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

::-webkit-scrollbar-track {
  background: var(--db-bg-dark);
  border: 1px solid rgba(255, 107, 26, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    var(--db-orange) 0%,
    var(--db-orange-dark) 100%);
  border: 1px solid var(--db-gold);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    var(--db-gold) 0%,
    var(--db-orange) 100%);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* ========================================
   BUTTONS & INPUTS - Capsule Corp Tech
   ======================================== */

button, .button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  background: linear-gradient(180deg, 
    var(--db-bg-light) 0%,
    var(--db-bg-medium) 100%) !important;
  border: 2px solid var(--db-orange) !important;
  border-radius: 6px !important;
  color: var(--db-text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

button:hover, .button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(180deg, 
    var(--db-orange) 0%,
    var(--db-orange-dark) 100%) !important;
  border-color: var(--db-gold) !important;
  box-shadow: 0 0 20px rgba(255, 107, 26, 0.4) !important;
  color: #ffffff !important;
}

button:active, .button:active {
  background: linear-gradient(180deg, 
    var(--db-gold) 0%,
    var(--db-orange) 100%) !important;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

/* Text Inputs - Scouter Display */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: rgba(26, 26, 46, 0.9) !important;
  border: 2px solid rgba(255, 107, 26, 0.4) !important;
  border-radius: 6px !important;
  color: var(--db-gold) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--db-gold) !important;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 0 10px rgba(255, 107, 26, 0.1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 215, 0, 0.5) !important;
}

/* ========================================
   FOLDER VIEW
   ======================================== */

ui-folder {
  background: rgba(26, 26, 46, 0.8) !important;
}

/* ========================================
   SYSTEM TRAY
   ======================================== */

ui-dock [role="status"],
.system-tray {
  color: var(--db-gold) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.3) !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Super Saiyan power-up glow animation */
@keyframes power-up {
  0% { 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
  50% { 
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 107, 26, 0.3);
  }
  100% { 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
}

/* Ki charging effect */
@keyframes ki-charge {
  0% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.5; transform: scale(1); }
}

/* Apply to focused windows */
ui-dialog:focus-within {
  animation: power-up 2s ease-in-out infinite;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  /* Taskbar adjustments */
  ui-dock {
    padding: 6px 12px !important;
  }
  
  ui-dock .start-button,
  ui-dock button[data-action="start"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  
  /* Window sizing */
  ui-dialog {
    min-width: 300px !important;
    max-width: calc(100vw - 20px) !important;
  }
  
  /* Title bar adjustments */
  [role="toolbar"],
  header[role="toolbar"] {
    padding: 6px 10px !important;
  }
  
  [role="toolbar"] span,
  header[role="toolbar"] span {
    font-size: 12px !important;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  /* Taskbar mobile */
  ui-dock {
    padding: 4px 8px !important;
    flex-wrap: nowrap !important;
  }
  
  ui-dock .start-button,
  ui-dock button[data-action="start"] {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  
  ui-dock .start-button::before,
  ui-dock button[data-action="start"]::before {
    font-size: 14px !important;
    margin-right: 4px !important;
  }
  
  /* Window full-width on mobile */
  ui-dialog {
    width: calc(100vw - 10px) !important;
    max-width: none !important;
    left: 5px !important;
  }
  
  /* Title bar compact */
  [role="toolbar"],
  header[role="toolbar"] {
    padding: 4px 8px !important;
  }
  
  [role="toolbar"] span,
  header[role="toolbar"] span {
    font-size: 11px !important;
    max-width: 60% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Window controls smaller */
  [role="toolbar"] button,
  header[role="toolbar"] button {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  
  /* Menu compact */
  ui-menubar,
  [role="menubar"] {
    padding: 4px 6px !important;
    flex-wrap: wrap !important;
  }
  
  ui-menubar [role="menuitem"],
  [role="menubar"] button {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
  
  /* Desktop icons grid */
  .desktop-icons {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  
  .desktop-icon {
    font-size: 10px !important;
  }
  
  .desktop-icon img,
  .desktop-icon .icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Scrollbar thinner on mobile */
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
  /* Taskbar ultra-compact */
  ui-dock {
    padding: 3px 6px !important;
    height: auto !important;
    min-height: 32px !important;
  }
  
  ui-dock .start-button,
  ui-dock button[data-action="start"] {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
  
  ui-dock .start-button span,
  ui-dock button[data-action="start"] span {
    display: none !important;
  }
  
  ui-dock .start-button::before,
  ui-dock button[data-action="start"]::before {
    margin-right: 0 !important;
  }
  
  /* Window maximize on small screens */
  ui-dialog {
    width: 100vw !important;
    height: calc(100vh - 40px) !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Title bar minimal */
  [role="toolbar"],
  header[role="toolbar"] {
    padding: 3px 6px !important;
  }
  
  [role="toolbar"] span,
  header[role="toolbar"] span {
    font-size: 10px !important;
    max-width: 50% !important;
  }
  
  /* System tray compact */
  ui-dock [role="status"],
  .system-tray {
    font-size: 10px !important;
  }
  
  /* Desktop icons smaller */
  .desktop-icons {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    gap: 6px !important;
  }
  
  .desktop-icon {
    font-size: 9px !important;
    padding: 4px !important;
  }
  
  .desktop-icon img,
  .desktop-icon .icon {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Buttons touch-friendly */
  button,
  .btn {
    min-height: 36px !important;
    min-width: 36px !important;
    touch-action: manipulation !important;
  }
  
  /* Inputs larger tap target */
  input,
  select,
  textarea {
    min-height: 36px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  ui-dock {
    padding: 2px 8px !important;
    min-height: 28px !important;
  }
  
  ui-dialog {
    max-height: calc(100vh - 35px) !important;
  }
}

/* Touch-friendly scrollbars on touch devices */
@media (hover: none) and (pointer: coarse) {
  ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
  }
  
  ::-webkit-scrollbar-thumb {
    min-height: 40px !important;
    min-width: 40px !important;
  }
  
  /* Larger tap targets */
  [role="toolbar"] button,
  header[role="toolbar"] button,
  ui-menubar [role="menuitem"],
  [role="menubar"] button {
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

/* High-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  ui-dialog,
  [role="toolbar"],
  header[role="toolbar"] {
    border-width: 0.5px !important;
  }
}