/**
 * ai-prompter - Main Stylesheet
 * Complete styling for dashboard and prompting interface
 * 
 * This stylesheet contains all visual styling for the ai-prompter application,
 * including theme variables, components, interactive elements, and utility classes.
 * It supports both light and dark themes via CSS variables and media queries.
 * 
 * @author @maurosicard
 * @version 1.1.0
 */

/*==============================================================================
  TABLE OF CONTENTS:
  
  1. Theme Variables & Root Settings
     1.1 Light Theme Variables
     1.2 Dark Theme Variables
  
  2. Base & Typography
     2.1 Body & Global Settings
     2.2 Typography
  
  3. Layout Components
     3.1 Cards
     3.2 Grid & Containers
     3.3 Headers & Footers
  
  4. Dashboard Elements
     4.1 Dashboard Cards
     4.2 Icons & Icon Containers
  
  5. Interactive Elements
     5.1 Buttons
     5.2 Navigation Items
  
  6. Form Elements
     6.1 Inputs & Textareas
     6.2 Selects & Dropdowns
     6.3 Checkboxes & Radio Buttons
     6.4 Toggle Switches
     6.5 Range Sliders
     6.6 Form Structure & Sections
  
  7. Result & Output Displays
     7.1 Result Cards
     7.2 Prompt Displays
     7.3 Token Counters
  
  8. Notification System
     8.1 Notification Container
     8.2 Notification Types
     8.3 Notification Animations
  
  9. Utility Classes
     9.1 Text Utilities
     9.2 Layout Utilities
     9.3 Color Utilities
  
  10. Animations & Transitions
      10.1 Keyframes
      10.2 Transition Effects
  
  11. Media Queries & Responsive Design
      11.1 Dark Mode Overrides
      11.2 Screen Size Adjustments
  
  12. Scroll & Selection Styling
      12.1 Scrollbar Styling
      12.2 Selection Styling
==============================================================================*/

/*==============================================================================
  1. THEME VARIABLES & ROOT SETTINGS
==============================================================================*/

:root {
    /* 1.1 Light Theme Variables */
    
    /* Color palette */
    --bg-color: #f9fafb;               /* Main background color */
    --text-color: #111827;             /* Primary text color */
    --card-bg: white;                  /* Card and component background */
    --border-color: #e5e7eb;           /* Border and divider color */
    
    /* Icon colors */
    --icon-bg: #f3f4f6;                /* Icon background */
    --icon-hover-bg: #f1f5f9;          /* Icon hover state */
    
    /* Text colors */
    --muted-color: #6b7280;            /* Secondary and muted text */
    
    /* Interactive states */
    --hover-bg: rgba(0, 0, 0, 0.05);   /* Hover state background */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow color for elevation */
    --highlight-color: #9ca3af;        /* Highlight accents */
    --focus-color: #2563eb;            /* Focus state indicator */
    
    /* Brand colors */
    --primary-color: #2563eb;          /* Primary brand color */
    --primary-hover: #1d4ed8;          /* Primary color hover state */
    
    /* Feedback colors */
    --success-color: #10b981;          /* Success state */
    --warning-color: #f59e0b;          /* Warning state */
    --error-color: #ef4444;            /* Error state */
    
    /* Disabled states */
    --disabled-bg: #f3f4f6;            /* Disabled element background */
    --disabled-text: #9ca3af;          /* Disabled text color */
  }
  
  /* 1.2 Dark Theme Variables */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Color palette - dark mode */
      --bg-color: #1a1a1a;             /* Main background in dark mode */
      --text-color: #f3f4f6;           /* Text color in dark mode */
      --card-bg: #252525;              /* Card backgrounds in dark mode */
      --border-color: #353535;         /* Borders in dark mode */
      
      /* Icon colors - dark mode */
      --icon-bg: #333333;              /* Icon background in dark mode */
      --icon-hover-bg: #353535;        /* Icon hover in dark mode */
      
      /* Text colors - dark mode */
      --muted-color: #d1d5db;          /* Lighter gray for better readability */
      
      /* Interactive states - dark mode */
      --hover-bg: rgba(255, 255, 255, 0.05); /* Hover state in dark mode */
      --shadow-color: rgba(0, 0, 0, 0.3);    /* Shadows in dark mode */
      --highlight-color: #6b7280;      /* Highlights in dark mode */
      --focus-color: #3b82f6;          /* Focus indicators in dark mode */
      
      /* Brand colors - dark mode */
      --primary-color: #3b82f6;        /* Adjusted primary for dark mode */
      --primary-hover: #60a5fa;        /* Adjusted hover state for dark mode */
      
      /* Feedback colors - dark mode */
      --success-color: #34d399;        /* Success in dark mode */
      --warning-color: #fbbf24;        /* Warning in dark mode */
      --error-color: #f87171;          /* Error in dark mode */
      
      /* Disabled states - dark mode */
      --disabled-bg: #374151;          /* Disabled elements in dark mode */
      --disabled-text: #9ca3af;        /* Disabled text in dark mode */
    }
  }
  
  /*==============================================================================
    2. BASE & TYPOGRAPHY
  ==============================================================================*/
  
  /* 2.1 Body & Global Settings */
  body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* 2.2 Typography */
  /* Font-family settings for code blocks and monospace text */
  .prompt-text, 
  .prompt-title, 
  .token-count {
    font-family: 'Source Code Pro', monospace;
  }
  
  /*==============================================================================
    3. LAYOUT COMPONENTS
  ==============================================================================*/
  
  /* 3.1 Cards - Base card styling used across application */
  .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--card-bg);
  }
  
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
  }
  
  /* 3.2 Grid & Containers */
  /* Common container styles applied to full-width elements */
  .bg-card {
    background-color: var(--card-bg);
  }
  
  .border-thin {
    border-bottom: 1px solid var(--border-color);
  }
  
  .border-color {
    border-color: var(--border-color);
  }
  
  /* 3.3 Headers & Footers */
  /* Header styling with border bottom */
  header {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
  }
  
  .header-logo-link {
    color: inherit;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.2s;
  }
  .header-logo-link:hover {
    opacity: 1;
    text-decoration: none;
  }
  
  /*==============================================================================
    4. DASHBOARD ELEMENTS
  ==============================================================================*/
  
  /* 4.1 Dashboard Cards */
  /* Top border highlight effect for cards */

  
  
  
  /* Card content area */
  .card-content {
    flex: 1;
  }
  
  /* Card link styling */
  .card-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    padding: 16px;
  }
  
  /* Focus styles for card links */
  .card-link:focus {
    outline: none;
  }
  
  .card-link:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }
  
  /* 4.2 Icons & Icon Containers */
  .icon-container {
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    width: 46px;
    background-color: var(--icon-bg);
    border-radius: 8px;
    margin-right: 16px;
  }
  
  .icon-svg {
    height: 22px;
    width: 22px;
    color: var(--text-color);
  }
  .icon-container.logo-generator {
    background-color: #ffeff4;
  }

    .icon-svg.logo-generator {
    color:   #ff3367;
  }


  .card:hover .icon-container {
    transform: scale(1.05);
    background-color: var(--icon-hover-bg);
  }

  .card:hover .icon-container.logo-generator  {
  
    background-color: #ff3367 !important;
  }

  .card:hover .icon-svg.logo-generator {
 
    color: #ffeff4 !important;
  }
  


  .icon-container.based-on-image {
    background-color: #e1ebff;
  }

    .icon-svg.based-on-image {
    color:   #4b85ff;
  }


  .card:hover .icon-container.based-on-image  {
  
    background-color: #4b85ff !important;
  }

  .card:hover .icon-svg.based-on-image {
 
    color: #e1ebff !important;
  }

  



  .icon-container.images-for-batch {
    background-color: #def7f1;
  }

    .icon-svg.images-for-batch {
    color:   #3dba71;
  }


  .card:hover .icon-container.images-for-batch  {
  
    background-color: #3dba71 !important;
  }

  .card:hover .icon-svg.images-for-batch {
 
    color: #def7f1 !important;
  }







  .icon-container.batch-images-csv {
    background-color: #F8FFD4;
  }

    .icon-svg.batch-images-csv {
    color:   #74AB26;
  }


  .card:hover .icon-container.batch-images-csv  {
  
    background-color: #74AB26 !important;
  }

  .card:hover .icon-svg.batch-images-csv {
 
    color: #F8FFD4 !important;
  }



  .icon-container.wireframe-generator {
    background-color: #EBE9FF;
  }

    .icon-svg.wireframe-generator {
    color:   #766CFF;
  }


  .card:hover .icon-container.wireframe-generator  {
  
    background-color: #766CFF !important;
  }

  .card:hover .icon-svg.wireframe-generator {
 
    color: #EBE9FF !important;
  }








  .icon-container.wireframe-to-hf {
    background-color: #FFE7D3;
  }

    .icon-svg.wireframe-to-hf {
    color:   #F75B30;
  }


  .card:hover .icon-container.wireframe-to-hf  {
  
    background-color: #F75B30 !important;
  }

  .card:hover .icon-svg.wireframe-to-hf {
 
    color:#FFE7D3;

  }
  





  .icon-container.image-extractor {
    background-color: #D3EBFF;
  }

    .icon-svg.image-extractor {
    color:   #47ACFF;
  }


  .card:hover .icon-container.image-extractor  {
  
    background-color: #47ACFF !important;
  }

  .card:hover .icon-svg.image-extractor {
 
    color:#D3EBFF;

  }


  
  /*==============================================================================
    5. INTERACTIVE ELEMENTS
  ==============================================================================*/
  
  /* 5.1 Buttons */
  /* Logout button styling */
  .logout-btn {
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
  }
  
  .logout-btn:hover {
    background-color: var(--hover-bg);
  }
  
  /* General button styles for forms and actions */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    border: 1px solid transparent;
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    color: white;
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
  }
  
  .btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
  }
  
  .btn-outline:hover {
    background-color: var(--hover-bg);
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  /* Copy button for results */
  .copy-btn {
    color: var(--muted-color);
    transition: all 0.15s ease;
  }
  
  .copy-btn:hover {
    color: var(--text-color);
  }
  
  /* 5.2 Navigation Items */
  /* Text utility used throughout the app */
  .text-muted {
    color: var(--muted-color);
  }
  
  /*==============================================================================
    6. FORM ELEMENTS
  ==============================================================================*/
  
  /* 6.1 Inputs & Textareas */
  .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-color);
  }
  
  .form-hint {
    font-size: 0.75rem;
    color: var(--muted-color);
    margin-top: 0.25rem;
  }
  
  .form-error {
    font-size: 0.75rem;
    color: var(--error-color);
    margin-top: 0.25rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--icon-bg);
    color: var(--text-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  .form-input.error,
  .form-select.error,
  .form-textarea.error {
    border-color: var(--error-color);
  }
  
  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled {
    background-color: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
  }
  
  /* 6.3 Checkboxes & Radio Buttons */
  .form-checkbox,
  .form-radio {
    appearance: none;
    padding: 0;
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    margin-right: 0.5rem;
  }
  
  .form-checkbox {
    border-radius: 0.25rem;
  }
  
  .form-radio {
    border-radius: 9999px;
  }
  
  .form-checkbox:checked,
  .form-radio:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }
  
  .form-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }
  
  .form-checkbox:focus,
  .form-radio:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  /* 6.4 Toggle Switches */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin-right: 0.5rem;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 34px;
  }
  
  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--card-bg);
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .toggle-slider {
    background-color: var(--primary-color);
  }
  
  input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  input:checked + .toggle-slider:before {
    transform: translateX(16px);
  }
  
  /* 6.5 Range Sliders */
  .form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--border-color);
    outline: none;
  }
  
  .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
  }
  
  .form-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
  }
  
  .form-range:focus {
    outline: none;
  }
  
  .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--focus-color);
  }
  
  /* 6.6 Form Structure & Sections */
  .form-section {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--card-bg);
  }
  
  .form-section-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  /*==============================================================================
    7. RESULT & OUTPUT DISPLAYS
  ==============================================================================*/
  
  /* 7.1 Result Cards */
  .result-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  /* Remove hover effect from result cards */
  .result-card:hover {
    box-shadow: none;
  }
  
  /* 7.2 Prompt Displays */
  .result-card .prompt-title {
    color: var(--muted-color);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  
  .result-card .prompt-text {
    color: var(--muted-color);
    font-size: 0.75rem;
    line-height: 1.25rem;
    background-color: var(--disabled-bg);
    border-radius: 0.375rem;
    padding: 0.75rem;
    display: block;
  }
  
  /* 7.3 Token Counters */
  .result-card .token-count {
    color: var(--muted-color);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /*==============================================================================
    8. NOTIFICATION SYSTEM
  ==============================================================================*/
  
  /* 8.1 Notification Container */
  /* Fixed container for all notification items */
  #notification-container {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none; /* Allow clicking through the container but not notifications */
  }
  
  /* 8.2 Notification Types */
  /* Different notification types with color coding */
  .notification-icon-info {
    color: var(--focus-color, #3b82f6); /* blue */
  }
  .notification-icon-success {
    color: #10b981; /* green */
  }
  .notification-icon-warning {
    color: #f59e0b; /* yellow */
  }
  .notification-icon-error {
    color: #ef4444; /* red */
  }
  
  /* Dark mode adjustments for notification icons */
  @media (prefers-color-scheme: dark) {
    .notification-icon-info {
      color: var(--focus-color, #60a5fa); /* lighter blue for dark mode */
    }
    .notification-icon-success {
      color: #34d399; /* lighter green for dark mode */
    }
    .notification-icon-warning {
      color: #fbbf24; /* lighter yellow for dark mode */
    }
    .notification-icon-error {
      color: #f87171; /* lighter red for dark mode */
    }
  }
  
  /* Notification item styling */
  .notification {
    background-color: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    width: 18rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto; /* Make notifications clickable */
    overflow: hidden;
    transform: translateX(100%); /* Start off-screen */
    opacity: 0;
  }
  
  /* 8.3 Notification Animations */
  /* Notification in visible state */
  .notification.notification-visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Animation for ripple effect */
  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  /*==============================================================================
    10. ANIMATIONS & TRANSITIONS
  ==============================================================================*/
  
  /* 10.1 Keyframes */
  /* Animation for ripple effect on buttons */
  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  /* 10.2 Transition Effects */
  /* Common transitions for interactive elements */
  .transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: ease;
    transition-duration: 0.3s;
  }
  
  /*==============================================================================
    12. SCROLL & SELECTION STYLING
  ==============================================================================*/
  
  /* 12.1 Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: var(--muted-color);
    border-radius: 9999px;
    border: 2px solid var(--bg-color);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--highlight-color);
  }