/**
 * Copyright 2025 Armando Sori
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Import media.css for responsive variables */
@import url("./media.css");

/* Ensure global CSS layer order is declared BEFORE any layer rules in this file.
   This guarantees @layer overrides in css-layers.css will take precedence over
   @layer components here, even if load order varies on certain pages. */
@layer reset, tokens, base, layout, components, utilities, overrides;

@layer components {
  /**
 * Settings Menu Component Styles
 * Professional settings dropdown with toggle controls
 * Enhanced with media.css responsive integration
 * 
 * Dependencies:
 * - media.css (must be loaded first for responsive variables)
 * - Uses --font-scale, --container-padding, --touch-target-min
 * - Responsive across all device types (mobile-xs to desktop-4k)
 */

  .nav-item-dropdown {
    position: relative;
  }

  .settings-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: calc(320px * var(--font-scale, 1));
    /* Increase inner padding for better breathing room */
    padding: calc(var(--container-padding, 16px) * 1.25);
    background: var(--theme-bg-secondary, var(--theme-bg-primary, #fff));
    border: 1px solid var(--theme-border, #e0e0e0);
    border-radius: calc(8px * var(--font-scale, 1));
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
    z-index: var(--z-dropdown);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    max-height: calc(400px * var(--font-scale, 1));
    overflow-y: auto;
  }

  /* Increase selector specificity so this padding wins over
     generic .dropdown-menu rules in shared-navigation.css,
     regardless of bundle/load order differences between dev/preview. */
  .dropdown-menu.settings-menu {
    padding: calc(var(--container-padding, 16px) * 1.25);
  }

  /* Force-visible states aligned with shared-navigation.css override system */
  .settings-menu.force-visible,
  .settings-menu.open,
  .settings-menu.js-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .settings-section {
    margin-bottom: calc(12px * var(--font-scale, 1));
  }

  .settings-section:last-child {
    margin-bottom: 0;
  }

  .settings-title {
    font-size: calc(0.9rem * var(--font-scale, 1));
    font-weight: 600;
    color: var(--theme-text-primary, #333);
    margin: 0 0 calc(12px * var(--font-scale, 1));
    padding-bottom: calc(8px * var(--font-scale, 1));
    border-bottom: 1px solid var(--theme-border, #e0e0e0);
  }

  .settings-item {
    margin-bottom: calc(12px * var(--font-scale, 1));
  }

  .settings-item:last-child {
    margin-bottom: 0;
  }

  .settings-toggle {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--font-scale, 1));
    cursor: pointer;
    padding: calc(8px * var(--font-scale, 1)) 0;
    transition: opacity 0.2s ease;
    user-select: none;
    position: relative;
    min-height: var(--touch-target-min, 44px); /* Responsive touch target */
  }

  .settings-toggle * {
    pointer-events: none;
  }

  .settings-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: auto;
  }

  .settings-toggle:hover {
    opacity: 0.8;
  }

  .toggle-slider {
    position: relative;
    width: calc(44px * var(--font-scale, 1));
    height: calc(24px * var(--font-scale, 1));
    background: #e0e0e0;
    border-radius: calc(24px * var(--font-scale, 1));
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    min-width: var(--touch-target-min, 44px); /* Ensure touch target */
  }

  .toggle-slider::before {
    content: "";
    position: absolute;
    top: calc(2px * var(--font-scale, 1));
    left: calc(2px * var(--font-scale, 1));
    width: calc(20px * var(--font-scale, 1));
    height: calc(20px * var(--font-scale, 1));
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }

  /* checked state rules are defined later (after dark-mode overrides) */

  .toggle-label {
    font-size: calc(0.9rem * var(--font-scale, 1));
    color: var(--theme-text-primary, #333);
    font-weight: 500;
  }

  .settings-select-label {
    font-size: calc(0.9rem * var(--font-scale, 1));
    color: var(--theme-text-primary, #333);
    font-weight: 500;
    margin-bottom: calc(6px * var(--font-scale, 1));
    display: block;
  }

  .settings-select {
    width: 100%;
    padding: calc(8px * var(--font-scale, 1)) calc(12px * var(--font-scale, 1));
    border: 1px solid var(--theme-border, #e0e0e0);
    border-radius: calc(4px * var(--font-scale, 1));
    background: var(--theme-bg-primary, #fff);
    font-size: calc(0.9rem * var(--font-scale, 1));
    color: var(--theme-text-primary, #333);
    cursor: pointer;
    transition: border-color 0.2s ease;
    min-height: var(--touch-target-min, 44px); /* Responsive touch target */
  }

  .settings-select:focus {
    outline: none;
    border-color: var(--color-primary, #1a73e8);
    box-shadow: 0 0 0 2px rgb(26 115 232 / 20%);
  }

  .settings-select:hover {
    border-color: var(--theme-border-hover, #ccc);
  }

  .settings-note {
    margin-top: calc(4px * var(--font-scale, 1));
    padding: calc(4px * var(--font-scale, 1)) calc(8px * var(--font-scale, 1));
    background: rgb(26 115 232 / 10%);
    border-radius: calc(4px * var(--font-scale, 1));
    border-left: calc(3px * var(--font-scale, 1)) solid #1a73e8;
  }

  .settings-note small {
    color: var(--color-primary, #1a73e8);
    font-weight: 500;
  }

  /* Disabled states are placed after dark-mode section to satisfy specificity ordering */
  .settings-toggle.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .settings-toggle.disabled:hover {
    opacity: 0.5;
  }

  /* ===== RESPONSIVE DESIGN WITH MEDIA.CSS INTEGRATION ===== */

  /* Mobile devices (using media.css variables) - Aligned with media.css breakpoints */
  @media only screen and (width <= 428px) {
    .settings-menu {
      min-width: calc(260px * var(--font-scale, 1));
      padding: var(--container-padding, 14px);
      max-height: calc(300px * var(--font-scale, 1));
    }

    .settings-title {
      font-size: calc(0.85rem * var(--font-scale, 1));
    }

    .toggle-label,
    .settings-select-label {
      font-size: calc(0.85rem * var(--font-scale, 1));
    }

    .toggle-slider {
      width: calc(40px * var(--font-scale, 1));
      height: calc(22px * var(--font-scale, 1));
      min-width: var(
        --touch-target-min,
        44px
      ); /* Ensure touch target on mobile */
    }

    .toggle-slider::before {
      width: calc(18px * var(--font-scale, 1));
      height: calc(18px * var(--font-scale, 1));
    }

    .settings-toggle input[type="checkbox"]:checked + .toggle-slider::before {
      transform: translateX(calc(18px * var(--font-scale, 1)));
    }
  }

  /* Tablet devices - Aligned with media.css */
  @media only screen and (width >= 768px) and (width <= 1024px) {
    .settings-menu {
      min-width: calc(340px * var(--font-scale, 1));
      padding: var(--container-padding, 20px);
    }
  }

  /* Laptop and desktop devices - Aligned with media.css */
  @media only screen and (width >= 1280px) {
    .settings-menu {
      min-width: calc(360px * var(--font-scale, 1));
      padding: var(--container-padding, 24px);
    }
  }

  /* Checked state (base) */
  .settings-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: #1a73e8;
  }

  .settings-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(calc(20px * var(--font-scale, 1)));
  }

  /* ===== Settings Notifications (migrated from JS inline styles) ===== */
  @keyframes settings-slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes settings-slide-out {
    from {
      transform: translateX(0);
      opacity: 1;
    }

    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  .settings-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--theme-accent-primary);
    color: var(--theme-text-on-accent);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--theme-shadow-medium);
    z-index: var(--z-toast, 1070);
    animation: settings-slide-in 0.3s var(--ease-out);
    max-width: 320px;
  }

  .settings-notification.closing {
    animation: settings-slide-out 0.3s var(--ease-in);
  }

  .settings-notification .notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .settings-notification .notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    line-height: 1;
  }

  .settings-notification .notification-close:hover {
    opacity: 0.85;
  }
} /* End @layer components */