/* ============================================================
   macOS Web — CRYSTAL (Aqua) theme
   The classic glossy Mac OS X look: candy gel buttons, the
   reflective glass Dock, glossy pinstriped title bars and
   aqua-blue gloss throughout. Scoped to  body.aqua .
   ============================================================ */

body.aqua {
  --aqua-blue: #3f86e2;
  --aqua-blue-lt: #7fb2f0;
  --aqua-blue-dk: #2f72d6;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Inter", "Segoe UI", sans-serif;
}
body.aqua ::selection { background: #b4d3fb; }

/* pinstripe used on chrome surfaces */
body.aqua #menubar,
body.aqua .titlebar {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fdfdfd, #d3d3d3);
}

/* ============================================================
   MENU BAR
   ============================================================ */
body.aqua #menubar {
  background: linear-gradient(180deg, rgba(253,253,253,0.95), rgba(214,214,214,0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #8d8d8d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  color: #1a1a1a;
}
body.aqua #menubar .menu-item {
  height: 100%;
  border-radius: 0;
  padding: 0 10px;
}
body.aqua #menubar .menu-item:hover,
body.aqua #menubar .menu-item.active {
  background: linear-gradient(180deg, #5a9bea 0%, #2f72d6 50%, #2768c8 51%, #2f72d6 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
body.aqua .menu-status:hover {
  background: linear-gradient(180deg, #5a9bea, #2f72d6);
  color: #fff;
}
body.aqua .battery-pct { color: inherit; }

/* dropdown / context menus — glossy white with blue selection */
body.aqua #menu-dropdown,
body.aqua #context-menu {
  background: linear-gradient(180deg, #ffffff, #f1f3f6);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid #9a9a9a;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
}
body.aqua .dropdown-item { border-radius: 0; padding: 4px 14px; }
body.aqua .dropdown-item:hover:not(.disabled) {
  background: linear-gradient(180deg, #5a9bea 0%, #2f72d6 50%, #2566c4 51%, #2f72d6 100%);
  color: #fff;
}
body.aqua .dropdown-sep { background: #cfcfcf; }

/* ============================================================
   WINDOWS
   ============================================================ */
body.aqua .window {
  border-radius: 8px 8px 7px 7px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.5);
}
body.aqua .titlebar {
  height: 36px;
  background: linear-gradient(180deg, #fbfbfb, #cfcfcf);
  border-bottom: 1px solid #8a8a8a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
body.aqua .window.inactive .titlebar {
  background: linear-gradient(180deg, #f6f6f6, #e6e6e6);
}
body.aqua .win-title {
  color: #2a2a2a;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

/* candy gel traffic lights */
body.aqua .traffic { gap: 8px; }
body.aqua .traffic button {
  width: 14px; height: 14px;
  border: 0.5px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.18), inset 0 1px 1px rgba(255,255,255,0.7), 0 1px 1px rgba(0,0,0,0.25);
  position: relative; overflow: hidden;
}
body.aqua .traffic .tl-close { background: radial-gradient(circle at 50% 130%, #ff5f57, #d8362f); }
body.aqua .traffic .tl-min   { background: radial-gradient(circle at 50% 130%, #ffc848, #e09a17); }
body.aqua .traffic .tl-max   { background: radial-gradient(circle at 50% 130%, #45d35a, #1ea330); }
body.aqua .window.inactive .traffic button {
  background: radial-gradient(circle at 50% 130%, #e9e9e9, #c2c2c2);
}
body.aqua .traffic button::before {
  content: ""; position: absolute; top: 1px; left: 2px; right: 2px; height: 45%;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.1));
  pointer-events: none;
}
body.aqua .traffic button svg { position: relative; z-index: 2; }

/* the little diagonal resize grip, bottom-right */
body.aqua .window::after {
  content: ""; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px;
  background: repeating-linear-gradient(135deg, rgba(120,120,120,0.55) 0 1px, transparent 1px 3px);
  pointer-events: none; border-bottom-right-radius: 6px; z-index: 6;
}

/* ============================================================
   SIDEBARS (Aqua "source list")
   ============================================================ */
body.aqua .app-sidebar {
  background: linear-gradient(180deg, #e6ecf6, #d2dcec);
  border-right: 1px solid #9fb0c8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.aqua .sidebar-item { color: #243140; }
body.aqua .sidebar-item:hover { background: rgba(63,134,226,0.16); }
body.aqua .sidebar-item.active {
  background: linear-gradient(180deg, #7fb2f0, #3f86e2);
  color: #fff;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 1px rgba(0,0,0,0.18);
}
body.aqua .sidebar-item.active .si-ico { color: #fff; }
body.aqua .sidebar-section { color: #5d6b7e; }

/* finder selection / mail / generic blue-gloss selection */
body.aqua .finder-file.selected,
body.aqua .desktop-icon.selected {
  background: linear-gradient(180deg, #7fb2f0, #3f86e2);
}
body.aqua .finder-file.selected .ff-name { color: #fff; }
body.aqua .desktop-icon.selected .di-label { background: var(--aqua-blue-dk); }

/* ============================================================
   GLOSSY GLASS DOCK with reflections
   ============================================================ */
body.aqua #dock {
  align-items: flex-end;
  gap: 6px;
  height: auto;
  padding: 7px 12px 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(214,224,238,0.32) 48%, rgba(255,255,255,0.42) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.95);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -10px 18px rgba(255,255,255,0.35);
}
/* glassy reflection under each icon */
body.aqua .dock-item .app-icon {
  -webkit-box-reflect: below 0px linear-gradient(transparent 62%, rgba(255,255,255,0.25) 100%);
}
/* running indicator → glossy blue LED */
body.aqua .dock-indicator {
  width: 5px; height: 5px; bottom: -3px;
  background: radial-gradient(circle at 50% 35%, #cfe6ff, #3f86e2);
  box-shadow: 0 0 4px 1px rgba(63,134,226,0.8);
}
body.aqua .dock-label {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,236,242,0.96));
  color: #1a1a1a;
  border: 1px solid #9aa3b0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.aqua .dock-label::after { border-top-color: rgba(232,236,242,0.96); }
body.aqua .dock-sep { background: rgba(0,0,0,0.18); }

/* ============================================================
   GLOSSY AQUA SCROLLBARS
   ============================================================ */
body.aqua ::-webkit-scrollbar { width: 15px; height: 15px; }
body.aqua ::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #e9e9e9, #f6f6f6);
  border-left: 1px solid #cdcdcd;
}
body.aqua ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #b9d6f6 0%, #5a9be8 50%, #3f86e2 51%, #6fa9ee 100%);
  border: 1px solid #2f6cc0;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.15);
  background-clip: padding-box;
}
body.aqua ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #a9caf2 0%, #4a8fe4 50%, #2f78d8 51%, #5f9deb 100%);
  background-clip: padding-box;
}

/* ============================================================
   FORM CONTROLS — glossy inset wells + aqua focus glow
   ============================================================ */
body.aqua .window-body input[type="text"],
body.aqua .window-body input[type="password"] {
  background: linear-gradient(180deg, #f3f3f3, #ffffff);
  border: 1px solid #9d9d9d;
  border-top-color: #888;
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  color: #111;
}
body.aqua .window-body input[type="text"]:focus,
body.aqua .window-body input[type="password"]:focus {
  outline: none;
  border-color: #5a9be8;
  box-shadow: 0 0 4px 1px rgba(90,160,240,0.75), inset 0 1px 2px rgba(0,0,0,0.12);
}

/* ============================================================
   SPOTLIGHT / CONTROL CENTER / LAUNCHPAD / NOTIFICATIONS
   ============================================================ */
body.aqua .spotlight-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(234,238,244,0.93));
  border: 1px solid #8d99a8;
  box-shadow: 0 26px 70px rgba(0,0,0,0.5), inset 0 1px 0 #fff;
}
body.aqua #spotlight-input { color: #111; }
body.aqua .spotlight-icon { color: #3f86e2; }
body.aqua .spot-result.sel {
  background: linear-gradient(180deg, #5a9bea, #2f72d6);
}
body.aqua #controlcenter {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(228,233,241,0.82));
  border: 1px solid #9aa6b4;
  box-shadow: 0 20px 56px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
  color: #1a1a1a;
}
body.aqua .cc-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,243,247,0.88));
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.12);
}
body.aqua .cc-toggle-icon.on {
  background: linear-gradient(180deg, #5a9bea, #2f72d6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
body.aqua #launchpad-search {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,243,247,0.85));
  color: #111;
  border: 1px solid #9aa6b4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
body.aqua #launchpad-search::placeholder { color: #888; }
body.aqua .notification {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(233,237,243,0.9));
  border: 1px solid #9aa6b4;
  box-shadow: 0 14px 36px rgba(0,0,0,0.32), inset 0 1px 0 #fff;
  color: #1a1a1a;
}

/* ============================================================
   LOGIN — glossy aqua field & button
   ============================================================ */
body.aqua .login-pass {
  background: rgba(255,255,255,0.85);
  color: #111;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.4);
}
body.aqua .login-pass::placeholder { color: #888; }
body.aqua .login-arrow {
  background: linear-gradient(180deg, #fdfdfd, #c8c8c8);
  color: #333;
  border: 1px solid #999;
  box-shadow: inset 0 1px 0 #fff;
}
body.aqua .login-arrow:hover { background: linear-gradient(180deg, #ffffff, #d8d8d8); }

/* ============================================================
   GENERIC GLOSSY PUSH-BUTTON  (.aqua-btn helper)
   ============================================================ */
body.aqua .aqua-btn {
  background: linear-gradient(180deg, #ffffff 0%, #ededed 48%, #dcdcdc 52%, #f0f0f0 100%);
  border: 1px solid #9a9a9a;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.12);
  color: #1c1c1c;
}
body.aqua .aqua-btn.default {
  background: linear-gradient(180deg, #aacdf5 0%, #5a9be8 48%, #3f86e2 52%, #6fa9ee 100%);
  border-color: #2f6cc0; color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

/* Safari / Calendar / toolbar glass */
body.aqua .safari-toolbar,
body.aqua .finder-toolbar {
  background: linear-gradient(180deg, #f2f2f2, #d8d8d8);
  border-bottom: 1px solid #9a9a9a;
}
body.aqua .safari-nav-btn,
body.aqua .cal-nav button { color: #333; }