/* css/style.css - Final Enhanced Version */

/* --- Base Variables & Theme Setup --- */
:root {
    --font-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --transition-speed: 0.2s;
    --border-radius: 0.375rem; /* Bootstrap default */
    --focus-outline-width: 2px;
    --grid-gap: 2rem; /* Centralized gap control (30px) - Adjust as needed */
  
    /* Base dark theme values (Default Theme) */
    --app-bg-primary: #212529; /* BS Dark */
    --app-bg-secondary: #343a40; /* BS Gray 800 */
    --app-bg-tertiary: #495057; /* BS Gray 700 */
    --app-bg-hover: #5a6268;    /* BS Gray 600 Hover */
    --app-text-primary: #dee2e6; /* BS Gray 200 */
    --app-text-secondary: #adb5bd; /* BS Gray 500 */
    --app-text-muted: #868e96;   /* BS Gray 600 Muted (Slightly Lighter) */
    --app-border-color: #495057; /* BS Gray 700 */
    --app-accent-primary: #dc3545; /* BS Danger */
    --app-accent-primary-darker: #b02a37;
    --app-shadow-color: rgba(220, 53, 69, 0.08); /* More subtle shadow */
    --app-skeleton-bg: #495057;
    --app-skeleton-highlight: #6c757d;
    --app-favorite-color: #e55361; /* Lighter red for contrast */
    --app-focus-outline-color: rgba(220, 53, 69, 0.6); /* Red focus */
    --app-instruction-bg: #2c3034;
  }
  
  /* --- Global Reset & Base --- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; height: 100%; }
  body {
    margin: 0;
    font-family: var(--font-primary);
    background-color: var(--app-bg-primary);
    color: var(--app-text-primary);
    line-height: 1.6;
    font-size: 16px;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility; /* Slight performance/appearance boost */
  }
  
  a { color: var(--app-accent-primary); text-decoration: none; transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease; }
  a:hover, a:focus { color: var(--app-accent-primary-darker); opacity: 0.9; text-decoration: none; }
  button, select, input { font-family: inherit; font-size: inherit; }
  button { cursor: pointer; border: none; background: none; padding: 0; } /* Reset button defaults */
  h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.3; font-weight: 500; }
  
  /* Focus Styles - Using Bootstrap variables for consistency */
  *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-outline-width) var(--bs-focus-ring-color, var(--app-focus-outline-color)) !important;
  }
  *:focus { outline: none; } /* Remove default fuzzy outline */
  
  /* --- Main Layout --- */
  .tool-app-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ensure container takes full height */
    max-width: 1800px; /* Allow wider content */
    padding-top: 1rem; padding-bottom: 1rem; /* Base padding */
  }
  #tool-grid { flex-grow: 1; /* Allow grid content to push footer down */ }
  
  /* --- Header --- */
  .tool-app-header {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-border-color) !important;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    position: sticky; top: 0; z-index: 1030; /* Sticky header */
  }
  .back-to-main-site { color: var(--app-text-secondary); font-size: 0.9em; }
  .back-to-main-site:hover { color: var(--app-text-primary); }
  .app-title { color: var(--app-text-primary); font-weight: 500; }
  
  /* Header Form Controls */
  .form-control, .form-select, .input-group-text {
      background-color: var(--app-bg-tertiary); color: var(--app-text-primary);
      border-color: var(--app-border-color);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  }
  .form-control:focus, .form-select:focus, .input-group:focus-within .form-control {
      background-color: var(--app-bg-tertiary); color: var(--app-text-primary);
      border-color: var(--app-accent-primary);
      /* Focus shadow handled globally */
  }
  .form-control::placeholder { color: var(--app-text-muted); opacity: 0.8; }
  .input-group-text { border-right: 0; background-color: var(--app-bg-tertiary); color: var(--app-text-muted); }
  #tool-search-input { border-left: 0; }
  #tool-search-input:focus { box-shadow: none; }
  .input-group:focus-within .input-group-text,
  .input-group:focus-within .form-control { border-color: var(--app-accent-primary); }
  .input-group:focus-within { box-shadow: 0 0 0 var(--focus-outline-width) var(--app-focus-outline-color) !important; border-radius: var(--bs-border-radius); }
  
  .form-select { /* Arrow color */
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var(--app-text-secondary)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
  
  /* Header Buttons */
  .tool-toggles-container .btn {
      color: var(--app-text-secondary); border-color: var(--app-border-color);
      background-color: var(--app-bg-tertiary);
  }
  .tool-toggles-container .btn:hover,
  .tool-toggles-container .btn:focus-visible {
      color: var(--app-text-primary); background-color: var(--app-bg-hover);
      border-color: var(--app-text-secondary);
  }
  #favorites-toggle-btn.active, #favorites-toggle-btn.active:hover, #favorites-toggle-btn.active:focus {
      background-color: var(--app-accent-primary); border-color: var(--app-accent-primary); color: #fff;
  }
  #favorites-toggle-btn .bi-heart-fill { display: none; }
  #favorites-toggle-btn.active .bi-heart { display: none; }
  #favorites-toggle-btn.active .bi-heart-fill { display: inline-block; }
  
  /* --- Instructions Panel --- */
  .instructions-panel {
    background-color: var(--app-instruction-bg) !important; color: var(--app-text-secondary) !important;
    border-color: var(--app-border-color) !important; max-height: 0; overflow: hidden;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important;
    opacity: 0; visibility: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin-bottom 0.4s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.4s;
  }
  .instructions-panel.visible {
    max-height: 600px; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
    opacity: 1; visibility: visible;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin-bottom 0.4s ease-out, opacity 0.3s ease-out 0.1s, visibility 0s;
  }
  .instructions-panel:focus-visible { outline-offset: 3px; }
  .instructions-panel .alert-heading { color: var(--app-text-primary); border-bottom: 1px solid var(--app-border-color); padding-bottom: 0.5rem; margin-bottom: 1rem; font-weight: 500; }
  .instructions-panel strong { color: var(--app-text-primary); font-weight: 600; }
  .instructions-panel kbd { padding: .1rem .3rem; font-size: .8em; color: var(--app-text-primary); background-color: var(--app-bg-tertiary); border-radius: .2rem; border: 1px solid var(--app-border-color); font-family: var(--bs-font-monospace); }
  .instructions-panel .btn-close { filter: brightness(0) invert(75%); }
  .instructions-panel .btn-close:hover { filter: brightness(0) invert(95%); }
  
  /* --- Tool Grid Spacing --- */
  .tool-grid-row {
    /* Negative margin to counteract column padding on the edges */
    /* Ensures content aligns with container padding */
    margin-left: calc(-1 * var(--grid-gap) / 2);
    margin-right: calc(-1 * var(--grid-gap) / 2);
  }
  .tool-grid-col {
    /* Apply padding to create the visual gap */
    /* This padding is inside the Bootstrap column */
    padding-left: calc(var(--grid-gap) / 2);
    padding-right: calc(var(--grid-gap) / 2);
    /* Vertical gap created by margin */
    margin-bottom: var(--grid-gap);
  }
  
  /* --- Tool Card --- */
  .tool-card {
    background-color: var(--app-bg-secondary); border-color: var(--app-border-color);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
    position: relative; display: flex; flex-direction: column; /* Crucial for h-100 */
  }
  .tool-card:hover { transform: translateY(-6px); box-shadow: var(--bs-box-shadow-lg); border-color: var(--app-bg-tertiary); }
  .tool-card:focus-within { border-color: var(--app-focus-outline-color); box-shadow: 0 0 0 1px var(--app-focus-outline-color); }
  
  .tool-icon { filter: grayscale(10%) brightness(1.05) contrast(0.95); transition: filter var(--transition-speed) ease, transform var(--transition-speed) ease; max-height: 65px; object-fit: contain; }
  .tool-card:hover .tool-icon { transform: scale(1.05); filter: grayscale(0%) brightness(1.1); }
  .tool-icon.qr-icon-styling { filter: none !important; background-color: white; padding: 6px; border-radius: 4px; }
  
  .card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1rem 1rem 1.25rem 1rem; }
  .tool-title { color: var(--app-text-primary); font-weight: 500; font-size: 1.05rem; }
  .tool-description { color: var(--app-text-secondary); flex-grow: 1; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; }
  .tool-category { color: var(--app-text-muted); font-size: 0.75rem; margin-top: auto; text-transform: uppercase; letter-spacing: 0.5px; }
  
  /* Card Buttons */
  .button-wrapper { margin-top: 0.75rem; }

  .unlock-button:disabled { background-color: var(--app-bg-tertiary); border-color: var(--app-bg-tertiary); color: var(--app-text-muted); opacity: 0.65; }
  .open-button { /* Uses .btn-outline-secondary */ color: var(--app-text-secondary); border-color: var(--app-border-color); }
  .open-button:not(:disabled) { color: var(--app-text-primary); border-color: var(--app-border-color); }
  .open-button:not(:disabled):hover, .open-button:not(:disabled):focus { background-color: var(--app-bg-hover); color: var(--app-text-primary); border-color: var(--app-text-secondary); }
  .open-button:disabled { opacity: 0.5; }
  
  /* Favorite Button */
  .favorite-btn {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 36px; height: 36px; line-height: 1; /* Center icon */
    background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.5);
    color: var(--app-text-secondary); border: 1px solid transparent;
    opacity: 0.7; transition: all var(--transition-speed) ease;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .tool-card:hover .favorite-btn, .favorite-btn:focus-visible { opacity: 1; border-color: rgba(var(--bs-emphasis-color-rgb, 222, 226, 230), 0.2); }
  .favorite-btn:hover { background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.7); transform: scale(1.1); }
  /* Favorite Icon Visibility Toggle */
  .favorite-btn .icon-filled { display: none; }
  .favorite-btn .icon-outline { display: inline-block; }
  .tool-card.is-favorite .favorite-btn .icon-filled { display: inline-block; }
  .tool-card.is-favorite .favorite-btn .icon-outline { display: none; }
  /* Active/Favorited State Style */
  .favorite-btn.active, /* Legacy if JS sets it */
  .tool-card.is-favorite .favorite-btn {
      opacity: 1; background-color: rgba(var(--app-favorite-color-rgb, 229, 83, 97), 0.15);
      color: var(--app-favorite-color); border-color: rgba(var(--app-favorite-color-rgb, 229, 83, 97), 0.3);
  }
  .favorite-btn.active:hover, .favorite-btn.active:focus-visible,
  .tool-card.is-favorite .favorite-btn:hover, .tool-card.is-favorite .favorite-btn:focus-visible
  { background-color: rgba(var(--app-favorite-color-rgb, 229, 83, 97), 0.25); }
  
  
  /* --- Skeleton Loader --- */
  .tool-card.skeleton { border-color: var(--app-border-color); background-color: var(--app-bg-secondary); }
  .skeleton .placeholder { background-color: var(--app-skeleton-highlight); opacity: 0.5; }
  .skeleton-img.placeholder { width: 65px; height: 65px; }
  
  /* --- No Results --- */
  .no-results-message { background-color: var(--app-bg-secondary); border-color: var(--app-border-color) !important; color: var(--app-text-secondary); }
  #reset-filters-btn { color: var(--app-text-secondary); border-color: var(--app-border-color); }
  #reset-filters-btn:hover { color: var(--app-text-primary); background-color: var(--app-bg-hover); border-color: var(--app-text-secondary); }
  
  /* --- Footer --- */
  .tool-app-footer { border-top-color: var(--app-border-color); color: var(--app-text-muted); margin-top: auto; }
  .tool-app-footer a { color: var(--app-text-muted); }
  .tool-app-footer a:hover { color: var(--app-text-secondary); }
  
  /* --- Utility --- */

  
  /* --- Responsive Adjustments --- */
  @media (max-width: 768px) { .tool-app-header { padding: 15px; } .header-controls { flex-direction: column; align-items: stretch; } .tool-toggles-container { margin-top: 10px; justify-content: flex-end; } .theme-selector-wrapper { order: -1; margin-left: auto; width: auto; } .instructions-panel { padding: 20px; } .close-btn { top: 10px; right: 10px; } }
  @media (max-width: 576px) { body { font-size: 15px; } .tool-app-header { padding: 10px; } .app-title { font-size: 1.3rem; text-align: center; } .header-top-row { flex-direction: column; text-align: center; gap: 5px; margin-bottom: 15px;} .back-to-main-site { order: 1; margin-bottom: 5px;} .app-title { order: 2; } .theme-selector-wrapper { order: 3; width: auto; margin: 5px auto 0 auto; } .header-controls select, .header-controls button, .input-group .form-control, .input-group .input-group-text { font-size: 0.875rem; padding: 8px 10px; } .tool-card { padding: 15px; } .tool-icon { width: 55px; height: 55px; margin-bottom: 15px; } .tool-title { font-size: 1rem; } .tool-description { font-size: 0.85rem; min-height: 3.8em; } .tool-card .btn:not(.favorite-btn) { font-size: 0.9rem; padding: 10px 12px; } .no-results-message { padding: 25px 15px; } .no-results-message .lead { font-size: 1.1rem; } }
  
  /* --- Card Entrance Animation --- */
  .tool-card-enter { opacity: 0; transform: translateY(15px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
  .tool-card-enter-active { opacity: 1; transform: translateY(0); }
  
  /* --- Tippy.js Custom Theme --- */
  .tippy-box[data-theme~='custom-tooltip'] { background-color: var(--bs-tertiary-bg, var(--app-bg-tertiary)); color: var(--bs-body-color, var(--app-text-primary)); border: 1px solid var(--bs-border-color, var(--app-border-color)); border-radius: var(--bs-border-radius-sm, 0.25rem); font-size: 0.85rem; line-height: 1.5; padding: 0.5rem 0.75rem; box-shadow: var(--bs-box-shadow-sm); font-family: var(--font-primary); }
  .tippy-box[data-theme~='custom-tooltip'] .tippy-content { padding: 0; }
  .tippy-box[data-theme~='custom-tooltip'] strong { color: var(--bs-emphasis-color, var(--app-text-primary)); font-weight: 600; font-size: 1.05em; display: block; margin-bottom: 4px;}
  .tippy-box[data-theme~='custom-tooltip'] small { color: var(--bs-secondary-color, var(--app-text-secondary)); display: block; }
  .tippy-box[data-theme~='custom-tooltip'] em { color: var(--bs-tertiary-color, var(--app-text-muted)); font-style: italic; font-size: 0.9em; display: block; margin-top: 6px; }
  .tippy-arrow { color: var(--bs-tertiary-bg, var(--app-bg-tertiary)); }
  .tippy-box[data-theme~='custom-tooltip'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--bs-border-color, var(--app-border-color)); }
  .tippy-box[data-theme~='custom-tooltip'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--bs-border-color, var(--app-border-color)); }
  .tippy-box[data-theme~='custom-tooltip'][data-placement^='left'] > .tippy-arrow::before { border-left-color: var(--bs-border-color, var(--app-border-color)); }
  .tippy-box[data-theme~='custom-tooltip'][data-placement^='right'] > .tippy-arrow::before { border-right-color: var(--bs-border-color, var(--app-border-color)); }