/* public/styles.css */

/* --- FONT IMPORT --- */
/* Imports the Inter font family from Google Fonts for a modern UI feel. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* --- CSS CUSTOM PROPERTIES (VARIABLES) --- */
/* Defines global CSS variables for theming (dark/light) and layout consistency. */
:root {
  /* --- Figma-Inspired Dark Theme Colors (Core Palette) --- */
  /* Base colors inspired by Figma's dark interface, forming the dark theme. */
  --figma-bg-darkest: #1e1e1e; /* Very dark backgrounds, e.g., main app background */
  --figma-bg-dark: #252525; /* Dark backgrounds, e.g., sidebar, header */
  --figma-bg-medium: #2c2c2c; /* Medium dark, e.g., cards, modals */
  --figma-bg-light: #3a3a3a; /* Lighter dark, e.g., hover states */
  --figma-bg-lightest: #444444; /* Lightest dark, e.g., active states, some inputs */

  --figma-text-primary: #e0e0e0; /* Primary text color for dark theme */
  --figma-text-secondary: #a0a0a0; /* Secondary or muted text color */
  --figma-text-disabled: #666666; /* Text color for disabled elements */
  --figma-text-interactive-hover: #ffffff; /* Text color on hover for interactive elements */

  --figma-border-light: #333333; /* Light border or divider color */
  --figma-border-medium: #404040; /* Medium border color */
  --figma-divider: var(--figma-border-light); /* Default divider color, aliased for clarity */

  /* --- Primary Accent Color --- */
  /* Used for primary actions, highlights, and branding elements. */
  --primary-accent: #ff415b; /* Main accent color (vibrant pink/red) */
  --primary-accent-hover: color-mix(
    in srgb,
    var(--primary-accent) 85%,
    black
  ); /* Darker shade of accent for hover states */
  --primary-accent-text: #ffffff; /* Text color for use on primary accent backgrounds */
  --primary-accent-focus-ring: rgba(
    from var(--primary-accent) r g b / 0.3
  ); /* Focus ring color (semi-transparent accent) for accessibility */

  /* --- Semantic Color Variables (Default to Dark Theme) --- */
  /* These variables define colors by their purpose and adapt based on the active theme. */
  /* Background Colors */
  --bg-primary: var(--figma-bg-darkest); /* Overall page background */
  --bg-secondary: var(
    --figma-bg-darkest
  ); /* Secondary page background (often same as primary in dark theme) */
  --bg-sidebar: var(--figma-bg-dark); /* Sidebar background */
  --bg-header: var(--figma-bg-dark); /* Header background */
  --bg-card: var(--figma-bg-medium); /* Card background */
  --bg-modal: var(--figma-bg-medium); /* Modal background */
  --bg-input: var(--figma-bg-dark); /* Input field background */
  --bg-hover-light: var(
    --figma-bg-light
  ); /* Background for light hover states */
  --bg-active-light: var(
    --figma-bg-lightest
  ); /* Background for active/pressed states */

  /* Text Colors */
  --text-primary: var(--figma-text-primary); /* Main text color */
  --text-secondary: var(--figma-text-secondary); /* Muted or secondary text */
  --text-placeholder: var(
    --figma-text-secondary
  ); /* Placeholder text in input fields */
  --text-on-primary-accent: var(
    --primary-accent-text
  ); /* Text on accent-colored backgrounds */
  --text-button-primary: var(
    --primary-accent-text
  ); /* Text for primary buttons */
  --text-button-secondary: var(
    --figma-text-primary
  ); /* Text for secondary buttons */
  --text-link: var(--primary-accent); /* Link color */
  --text-toast: #ffffff; /* Text color for toast notifications (consistent across themes) */

  /* Border Colors */
  --border-color-light: var(--figma-border-light); /* General light borders */
  --border-color-medium: var(
    --figma-border-medium
  ); /* General medium borders */
  --border-color-input: var(
    --figma-border-medium
  ); /* Border for input fields */
  --border-color-primary-accent: var(
    --primary-accent
  ); /* Border for elements using accent color */

  /* Shadow Colors */
  --shadow-color-soft: rgba(0, 0, 0, 0.2); /* Soft shadows for subtle depth */
  --shadow-color-medium: rgba(0, 0, 0, 0.3); /* Medium intensity shadows */
  --shadow-color-hard: rgba(0, 0, 0, 0.4); /* Harder, more defined shadows */

  /* Specific Component Variables */
  --card-placeholder-default-bg: var(
    --figma-bg-light
  ); /* Background for card thumbnail placeholders */
  --card-placeholder-default-text: #1e1e1e; /* Text on card placeholders (forced dark for contrast) */

  /* Layout Dimensions */
  --header-height: 56px; /* Height of the main application header */
  --sidebar-width: 250px; /* Width of the sidebar */

  /* Typography and Spacing */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol"; /* Primary font stack */
  --border-radius-small: 4px; /* Small border radius for minor elements */
  --border-radius-medium: 6px; /* Standard border radius for buttons, inputs */
  --border-radius-large: 8px; /* Larger radius for modals, containers */
  --border-radius-card: 8px; /* Border radius for cards */

  /* Toast Notification Colors (Original/Fallback for Light Mode if not using themed versions) */
  /* These are kept as a reference or for potential direct use if not theming toasts. */
  --og-toast-default: #333;
  --og-toast-success: #28a745;
  --og-toast-error: #dc3545;
  --og-toast-info: #17a2b8;

  /* Themed Toast Background Colors (Defaults to Dark Mode versions) */
  --bg-toast-default: var(
    --figma-bg-lightest
  ); /* Default/info toast background */
  --bg-toast-success: #2f855a; /* Success toast background */
  --bg-toast-error: #c53030; /* Error toast background */
  --bg-toast-info: #2b6cb0; /* Info toast background (can be same as default) */
  
  --select-arrow-dark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A0A0A0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* --- LIGHT THEME OVERRIDES --- */
/* When the body does NOT have the .dark-mode class, these variables override the defaults. */
body:not(.dark-mode) {
  /* Background Colors - Light Theme */
  --bg-primary: #ffffff; /* White main background */
  --bg-secondary: #f7f7f7; /* Light gray secondary background */
  --bg-sidebar: #fdfdfd; /* Very light sidebar */
  --bg-header: #ffffff; /* White header */
  --bg-card: #ffffff; /* White cards */
  --bg-modal: #ffffff; /* White modals */
  --bg-input: #fdfdfd; /* Very light input background */
  --bg-hover-light: #f0f0f0; /* Light gray for hover states */
  --bg-active-light: #e9ecef; /* Slightly darker gray for active states */

  /* Text Colors - Light Theme */
  --text-primary: #1e1e1e; /* Dark gray/black primary text */
  --text-secondary: #525252; /* Medium gray secondary text */
  --text-placeholder: #7a7a7a; /* Lighter gray for placeholders */
  --text-button-secondary: var(
    --text-primary
  ); /* Secondary button text matches primary text */

  /* Border Colors - Light Theme */
  --border-color-light: #eaeaea; /* Very light borders */
  --border-color-medium: #d1d1d1; /* Light gray borders */
  --border-color-input: #dcdcdc; /* Border for inputs */
  --figma-divider: var(
    --border-color-light
  ); /* Dividers use light border color in light theme */

  /* Shadow Colors - Light Theme (Subtler shadows for a lighter feel) */
  --shadow-color-soft: rgba(0, 0, 0, 0.05);
  --shadow-color-medium: rgba(0, 0, 0, 0.08);
  --shadow-color-hard: rgba(0, 0, 0, 0.12);

  /* Specific Component Variables - Light Theme */
  --card-placeholder-default-bg: #e9ecef; /* Light gray placeholder background */
  /* --card-placeholder-default-text remains #1E1E1E for contrast on light background */

  /* Toast Notification Backgrounds - Light Theme (Using original fallback values for traditional toast colors) */
  --bg-toast-default: var(--og-toast-default);
  --bg-toast-success: var(--og-toast-success);
  --bg-toast-error: var(--og-toast-error);
  --bg-toast-info: var(--og-toast-info);
  
  --select-arrow-light-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23525252' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* --- GLOBAL STYLES & RESETS --- */
body {
  margin: 0;
  font-family: var(--font-family-sans); /* Use defined sans-serif font stack */
  background: var(--bg-primary); /* Apply themed primary background */
  color: var(--text-primary); /* Apply themed primary text color */
  overflow-x: hidden; /* Prevent horizontal scrollbars on body */
  font-size: 13px; /* Base font size for the application */
  line-height: 1.5; /* Base line height for readability */
  -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit browsers */
  -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth theme transitions */
}

/* Universal box-sizing for easier layout management. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Basic typography resets and styling. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em 0; /* Default bottom margin for headings */
  font-weight: 500; /* Medium font weight for headings */
}
h1 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.1rem;
  letter-spacing: -0.005em;
}
/* Specific style for section titles within the sidebar */
.sidebar-section-title {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 0 4px 0;
  margin-bottom: 8px;
  display: block;
}

p {
  margin: 0 0 1em 0;
} /* Default paragraph margin */
a {
  color: var(--text-link); /* Themed link color */
  text-decoration: none; /* Remove default underline */
}
a:hover {
  text-decoration: none; /* Ensure no underline on hover by default */
  color: color-mix(in srgb, var(--text-link) 80%, var(--text-primary)); /* Slightly desaturate link color on hover */
}

/* --- CUSTOM SCROLLBARS --- */
/* Subtle custom scrollbars for WebKit browsers (Chrome, Safari, Edge). */
::-webkit-scrollbar {
  width: 6px; /* Width of vertical scrollbar */
  height: 6px; /* Height of horizontal scrollbar */
}
::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}
::-webkit-scrollbar-thumb {
  background: var(--figma-bg-lightest); /* Themed scrollbar thumb */
  border-radius: 3px; /* Rounded thumb */
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--figma-bg-lightest) 70%,
    var(--text-primary)
  ); /* Darken thumb on hover */
}

/* --- FORM ELEMENTS --- */
/* Consistent styling for text inputs, textareas, and select elements. */
input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="password"],
textarea,
select {
  font-family: var(--font-family-sans);
  font-size: 0.875rem; /* 14px */
  padding: 7px 10px; /* Consistent padding */
  background-color: var(--bg-input); /* Themed background */
  color: var(--text-primary); /* Themed text color */
  border: 1px solid var(--border-color-input); /* Themed border */
  border-radius: var(--border-radius-medium);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* Smooth focus transition */
  width: 100%; /* Default to full width */
  line-height: 1.4; /* Consistent line height */
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--text-placeholder); /* Themed placeholder text */
  opacity: 1; /* Ensure placeholder color is fully visible (some browsers reduce opacity) */
}
input.input-error {
  border-color: var(--primary-accent) \!important; /* Use error color for border */
}
/* Focus state for form elements */
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none; /* Remove default browser outline */
  border-color: var(--primary-accent); /* Accent color border on focus */
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring); /* Accent color focus ring */
}
/* Custom styling for select dropdown arrows */
select {
  appearance: none; /* Remove default system appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Custom arrow (SVG for dark mode, fill color matches secondary text) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A0A0A0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center; /* Position arrow on the right */
  background-size: 0.8em; /* Size of the arrow icon */
  padding-right: 2rem; /* Add padding to prevent text from overlapping with arrow */
}
/* Custom select arrow for light mode (different fill color for arrow) */
body:not(.dark-mode) select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23525252' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
#onboarding-section {
    /* If it doesn't use .empty-state-container, add basic centering and padding */
    /* Example:
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed var(--border-color-medium);
    border-radius: var(--border-radius-large);
    margin: 20px;
    background-color: var(--figma-bg-medium);
    */
}
#onboarding-section h2 { /* If you use an h2 inside */
    margin-bottom: var(--spacing-unit, 8px);
}

/* Settings Modal */
#settings-modal .modal-content {
    max-width: 700px; /* Make settings modal a bit wider */
}
.settings-section {
    margin-bottom: calc(var(--spacing-unit, 8px) * 2.5); /* Existing or adjusted */
    padding-bottom: calc(var(--spacing-unit, 8px) * 2); /* Existing or adjusted */
    border-bottom: 1px solid var(--figma-divider, #333333);
}
.settings-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 20;
}
.settings-section h3 {
    font-size: 1.2rem; /* Adjust as per your theme */
    margin-bottom: calc(var(--spacing-unit, 8px) * 1.5);
    font-weight: 600;
}
.settings-section h4 { /* For sub-headings like "Add New..." */
    font-size: 1rem;
    margin-top: calc(var(--spacing-unit, 8px) * 2);
    margin-bottom: calc(var(--spacing-unit, 8px) * 1.25);
    font-weight: 500;
}
.settings-section p {
    margin-bottom: calc(var(--spacing-unit, 8px) * 0.5);
    line-height: 1.5;
}
.settings-section small:not(.form-error-message) { /* Helper text under inputs */
    font-size: 0.8em;
    display: block;
    margin-top: calc(var(--spacing-unit, 8px) * 0.5);
    line-height: 1.4;
    color: var(--text-secondary, #a0a0a0);
}

/* Configured Teams List in Settings Modal */
#configured-teams-list .manage-list-loading { /* Reuse if you have this class */
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: var(--text-secondary, #a0a0a0);
}
.settings-team-list { /* The UL for team connections */
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-unit, 8px);
}
/* Using .manage-list-item class for consistency */
.settings-team-list .manage-list-item {
    /* Ensure you have .manage-list-item styles defined, or copy from previous CSS I sent */
    /* Example (if not already defined): */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacing-unit, 8px) * 1.25) 0;
    border-bottom: 1px solid var(--figma-divider, #333333);
}
.settings-team-list .manage-list-item:last-child {
    border-bottom: none;
}
.settings-team-list .manage-list-item-name {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Stack name and team ID */
    gap: calc(var(--spacing-unit, 8px) * 0.25);
}
.settings-team-list .item-name-text { /* The friendly connection name */
    font-weight: 500;
}
.settings-team-list .item-detail-text { /* For showing Figma Team ID */
    font-size: 0.8em;
    color: var(--text-secondary, #a0a0a0);
}
.settings-team-list .active-indicator {
    font-size: 0.75em;
    color: var(--text-success, #52C41A); /* Use your theme's success color */
    font-weight: bold;
    margin-left: var(--spacing-unit, 8px);
    background-color: color-mix(in srgb, var(--text-success, #52C41A) 15%, transparent);
    padding: 2px 6px;
    border-radius: var(--border-radius-small, 4px);
    align-self: center;
}
body:not(.dark-mode) .settings-team-list .active-indicator {
    color: var(--primary-accent-text, #FFFFFF); /* Ensure contrast */
    background-color: var(--text-success, #52C41A);
}
.settings-team-list .manage-list-item-actions {
    /* Ensure you have .manage-list-item-actions styles or copy from previous */
    /* Example: */
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit, 8px) * 0.75);
    flex-shrink: 0;
}
.settings-team-list .manage-list-item-actions .btn.small-btn {
    font-size: 0.75rem; /* Or your existing small button size */
}

.ag-custom-popup-editor .input-error {
    border-color: var(--danger-color) \!important;  /* Indicate error with red border */
}

.ag-custom-popup-editor .form-error-message {
    color: var(--danger-color) \!important;   /*  Red error message text */
    font-size: 0.8em;
    display: block;
    margin-top: 3px;
}
/* Add Team Configuration Form */
#add-team-config-form {
    margin-top: calc(var(--spacing-unit, 8px) * 2);
    padding: calc(var(--spacing-unit, 8px) * 2.5);
    border: 1px solid var(--border-color-medium, #404040);
    border-radius: var(--border-radius-large, 8px);
    background-color: color-mix(in srgb, var(--bg-modal, #2c2c2c) 95%, var(--figma-bg-darkest, #1e1e1e));
}
body:not(.dark-mode) #add-team-config-form {
    background-color: color-mix(in srgb, var(--bg-modal, #FFFFFF) 95%, var(--figma-bg-light, #F0F0F0));
}
#add-team-config-form .form-group {
    margin-bottom: calc(var(--spacing-unit, 8px) * 1.75);
}
#add-team-config-form button[type="submit"] {
    margin-top: var(--spacing-unit, 8px);
    width: 100%; /* Make add button full width within its form section */
}


/* Sidebar Active Team Selector */
#active-team-select {
    width: 100%;
    margin-bottom: calc(var(--spacing-unit, 8px) * 2); /* More space below it */
}
#active-team-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-input); /* Keep consistent with other disabled inputs */
}
/* --- BUTTONS --- */
/* Base button styling. */
.btn {
  font-family: var(--font-family-sans);
  font-size: 0.8125rem; /* ~13px, slightly smaller than base form font size */
  font-weight: 500; /* Medium weight for button text */
  padding: 7px 12px; /* Default padding */
  border-radius: var(--border-radius-medium);
  border: 1px solid transparent; /* Transparent border by default, colors set by variants */
  cursor: pointer;
  display: inline-flex; /* Allows alignment of icon and text */
  align-items: center; /* Vertically align icon and text */
  justify-content: center; /* Center content horizontally */
  gap: 6px; /* Space between icon (if any) and text */
  text-decoration: none; /* Remove underline from link-styled buttons */
  white-space: nowrap; /* Prevent text wrapping in buttons */
  transition: background-color 0.1s ease, color 0.1s ease,
    border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease; /* Smooth transitions for interactions */
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px); /* Subtle lift effect on hover */
}
.btn:active:not(:disabled) {
  transform: translateY(0px); /* Reset lift on active/pressed state */
}
.btn:focus-visible {
  /* Custom focus style for accessibility, visible on keyboard navigation */
  outline: none;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--primary-accent) 50%, transparent); /* Softer focus ring using accent color */
}
.btn svg {
  width: 15px; /* Default icon size in buttons */
  height: 15px;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Primary Button Style (e.g., Save, Sync, main call-to-action) */
.btn.primary-btn {
  background-color: var(--primary-accent);
  color: var(--text-on-primary-accent); /* Text color for on-accent background */
  border-color: var(--primary-accent);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.btn.primary-btn:hover:not(:disabled) {
  background-color: var(--primary-accent-hover); /* Darker accent on hover */
  border-color: var(--primary-accent-hover);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}
.btn.primary-btn:disabled {
  background-color: var(--figma-bg-light); /* Muted background for disabled state */
  color: var(--figma-text-disabled); /* Disabled text color */
  border-color: var(--figma-bg-light);
  cursor: not-allowed; /* Indicate non-interactive state */
  box-shadow: none; /* Remove shadow on disabled */
  transform: none; /* Remove hover/active transforms */
}

/* Secondary Button Style (e.g., Load More, Add Link, less prominent actions) */
.btn.secondary-btn {
  background-color: var(--bg-active-light); /* Uses themed active background for base */
  color: var(--text-button-secondary); /* Themed secondary button text */
  border-color: var(--bg-active-light); /* Match border to background */
}
.btn.secondary-btn:hover:not(:disabled) {
  background-color: var(--bg-hover-light); /* Lighter hover background */
  border-color: var(--bg-hover-light);
  color: var(--text-primary); /* Primary text color on hover for emphasis */
}
.btn.secondary-btn:disabled {
  background-color: var(--figma-bg-dark); /* More muted disabled state */
  color: var(--figma-text-disabled);
  border-color: var(--figma-border-light);
  cursor: not-allowed;
  transform: none;
}

/* Tertiary/Icon Button Style (e.g., Cancel, Edit icon on card, minimal visual weight) */
.btn.tertiary-btn,
.btn.icon-btn { /* Icon-btn often shares tertiary styling */
  background-color: transparent; /* No background */
  color: var(--text-secondary); /* Secondary text color for subtlety */
  border-color: transparent; /* No border */
}
.btn.tertiary-btn:hover:not(:disabled),
.btn.icon-btn:hover:not(:disabled) {
  background-color: var(--bg-active-light); /* Subtle background on hover for affordance */
  color: var(--text-primary); /* Primary text color on hover */
}
.btn.tertiary-btn:disabled,
.btn.icon-btn:disabled {
  color: var(--figma-text-disabled); /* Disabled text color */
  background-color: transparent; /* Ensure no background when disabled */
  cursor: not-allowed;
  transform: none;
}

/* Specific styles for icon-only buttons */
.btn.icon-btn {
  color: var(--primary-accent); /* Often uses accent color for icon for visibility */
  padding: 6px; /* Tighter padding for icon buttons */
  min-width: 32px; /* Ensure a decent tap/click target size */
  min-height: 32px;
}
.btn.icon-btn svg {
  color: currentColor; /* Icon color inherits from button's text color by default */
  width: 18px; /* Slightly larger icon for icon-only buttons */
  height: 18px;
}
.btn.icon-btn.btn-loading {
  position: relative;
  /* Ensure original icon is hidden */
}
.btn.icon-btn.btn-loading svg { /* Hide the original SVG icon */
  visibility: hidden;
}

.btn.icon-btn.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px; /* Adjust size for small icon button */
  height: 14px;
  margin-top: -7px; 
  margin-left: -7px;
  border: 2px solid var(--primary-accent-focus-ring); /* Or your themed spinner colors */
  border-top-color: var(--primary-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Light mode spinner for icon buttons if needed */
body:not(.dark-mode) .btn.icon-btn.btn-loading::after {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--text-primary); 
}

/* Small Button Modifier */
.btn.small-btn {
  padding: 5px 8px; /* Reduced padding */
  font-size: 0.75rem; /* 12px, smaller font */
}
.btn.small-btn svg {
  width: 14px; /* Smaller icon for small buttons */
  height: 14px;
}

/* Full Width Button Modifier */
.btn.full-width-btn {
  width: 100%; /* Makes button span the full width of its container */
}

/* --- TAG INPUT COMPONENT --- */
/* Styles for the custom tag input field, typically used in modals like Edit File. */
.tag-input-field-container {
  position: relative; /* For positioning suggestions dropdown */
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius-medium);
  padding: 5px; /* Inner padding for pills and input */
  display: flex;
  flex-wrap: wrap; /* Allow pills to wrap to new lines */
  align-items: center;
  gap: 5px; /* Gap between pills and input element */
  margin-bottom: 5px; /* Space before any elements below it (e.g., "Create New Tag" button) */
  background-color: var(--bg-input);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tag-input-field-container:focus-within { /* Style container when text input inside is focused */
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring);
}
/* Container for displaying selected tag pills within the input area */
.selected-tags-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* Gap between individual pills */
}
/* Style for individual tag pills inside the input field */
.selected-tags-pills-container .tag-pill {
  padding: 3px 8px; /* Smaller padding for pills inside input */
  font-size: 0.8em; /* Relative to parent, makes text smaller */
  background-color: var(--primary-accent);
  color: var(--text-on-primary-accent);
  border-color: var(--primary-accent);
  border-radius: var(--border-radius-small); /* Slightly smaller radius for these pills */
  display: inline-flex; /* To align text and remove icon */
  align-items: center;
  cursor: default; /* Pills themselves are not clickable, the remove icon is */
}
/* 'x' icon to remove a tag pill from the input */
.selected-tags-pills-container .tag-pill .remove-filter-x {
  margin-left: 5px;
  font-size: 1.1em; /* Slightly larger 'x' */
  opacity: 0.8;
  line-height: 1; /* Ensure consistent vertical alignment */
  cursor: pointer; /* Indicates 'x' is clickable */
}
.selected-tags-pills-container .tag-pill:hover .remove-filter-x {
  opacity: 1; /* Full opacity on hover of the pill */
}
/* Actual text input for typing new tags */
#edit-file-tag-input { /* ID used for specific instance in Edit File modal */
  flex-grow: 1; /* Takes up remaining space in the container */
  border: none; /* No border, container has it */
  outline: none; /* No outline, container handles focus style */
  padding: 5px; /* Padding for the text input itself */
  font-size: 0.875rem; /* Match standard input font size */
  min-width: 150px; /* Minimum width to ensure usability */
  background-color: transparent; /* Blends with the container background */
  color: var(--text-primary);
}
#edit-file-tag-input:focus {
  box-shadow: none; /* Remove default focus shadow as container handles it */
}
/* Dropdown for tag suggestions */
#edit-file-tag-suggestions {
  position: absolute; /* Positioned relative to a container established by JS */
  background-color: var(--figma-bg-lightest); /* Darker background for dropdown */
  border: 1px solid var(--figma-border-medium);
  border-radius: var(--border-radius-medium);
  z-index: 100; /* Ensures dropdown is above other modal content */
  max-height: 150px; /* Limit height and enable scroll */
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  box-sizing: border-box; /* Include padding and border in width/height */
  width: 100%; /* Typically set by JS to match input width */
}
#edit-file-tag-suggestions.hidden {
  display: none !important;
}
/* Individual suggestion item in the dropdown */
#edit-file-tag-suggestions div {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--figma-divider); /* Separator line */
}
#edit-file-tag-suggestions div:last-child {
  border-bottom: none; /* Remove border from last item */
}
#edit-file-tag-suggestions div:hover {
  background-color: var(--figma-bg-light); /* Hover state for suggestion */
}
/* Highlight for keyboard navigation (if implemented) */
#edit-file-tag-suggestions div.suggestion-highlighted {
  background-color: var(--primary-accent);
  color: var(--text-on-primary-accent);
}
/* Style for "Create new tag: ..." suggestion */
#edit-file-tag-suggestions .suggestion-create-new {
  font-style: italic;
  color: var(--text-secondary);
}
#edit-file-tag-suggestions .suggestion-create-new:hover {
  background-color: var(--primary-accent) !important;
  color: var(--text-on-primary-accent) !important;
}
#edit-file-tag-suggestions .suggestion-create-new strong {
  font-weight: 600; /* Emphasize the tag name part */
  color: var(--text-primary); /* Use primary text color for the tag name */
}
#edit-file-tag-suggestions .suggestion-create-new:hover strong {
  color: var(--text-on-primary-accent); /* Ensure contrast on hover */
}

/* --- APP LAYOUT --- */
.app-wrapper {
  display: flex; /* Enables flexbox layout for sidebar and main content */
  min-height: 100vh; /* Ensures wrapper takes at least full viewport height */
  position: relative; /* For potential absolute positioning of children */
  overflow-x: hidden; /* Prevents horizontal scroll on the app wrapper */
}

/* Header Styles */
.app-header {
  display: flex;
  align-items: center; /* Vertically align items within the header */
  justify-content: space-between; /* Space out left and right groups of items */
  position: fixed; /* Fixed at the top of the viewport */
  top: 0;
  left: 0; /* Initially full width, adjusted for desktop in media queries */
  right: 0;
  height: var(--header-height); /* Defined header height */
  background-color: var(--bg-header); /* Themed background */
  border-bottom: 1px solid var(--border-color-light); /* Bottom border for separation */
  padding: 0 12px; /* Horizontal padding */
  z-index: 1020; /* High z-index to be above sidebar content but below modals */
}
.header-left, /* Container for items on the left side of the header */
.header-right { /* Container for items on the right side of the header */
  display: flex;
  align-items: center;
  gap: 8px; /* Space between items in these groups */
}
.app-header-logo {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between logo icon and title */
  color: var(--text-primary); /* Themed text color for logo/title */
  text-decoration: none; /* Remove underline if logo is a link */
}
.app-header-logo svg {
  flex-shrink: 0; /* Prevent logo SVG from shrinking */
}
.app-header-title {
  font-size: 1rem; /* 16px */
  font-weight: 600; /* Bold title */
  white-space: nowrap; /* Prevent title from wrapping */
  margin: 0; /* Remove default margin if it's a heading element */
}

/* Mobile Menu Toggle Icon States (Menu vs Close) */
/* Controls visibility of menu/close icons based on sidebar state */
.app-header #menu-toggle-btn .icon-close {
  display: none !important; /* Close icon hidden by default */
}
.app-header #menu-toggle-btn .icon-menu {
  display: inline-block !important; /* Menu icon visible by default */
}
body.sidebar-mobile-open .app-header #menu-toggle-btn .icon-menu {
  display: none !important; /* Hide menu icon when sidebar is open on mobile */
}
body.sidebar-mobile-open .app-header #menu-toggle-btn .icon-close {
  display: inline-block !important; /* Show close icon when sidebar is open on mobile */
}

/* Sidebar Styles */
.sidebar {
  width: var(--sidebar-width); /* Defined sidebar width */
  background-color: var(--bg-sidebar); /* Themed background */
  display: flex;
  flex-direction: column; /* Stack content vertically (main content wrapper, footer) */
  position: fixed; /* Fixed position */
  top: 0;
  left: 0;
  height: 100vh; /* Full viewport height */
  z-index: 1000; /* Below header overlay on mobile, managed for desktop visibility */
  border-right: 1px solid var(--border-color-light); /* Right border for separation */
  transition: transform 0.25s ease-in-out; /* Smooth slide-in/out for mobile */
}
/* Wrapper for the main scrollable content and actions within the sidebar.
   This allows a separate footer (.sidebar-footer) to be fixed at the bottom of .sidebar. */
.sidebar-main-content-wrapper {
  flex-grow: 1; /* Takes up available vertical space in .sidebar before .sidebar-footer */
  display: flex;
  flex-direction: column; /* Stacks .sidebar-sticky-content and .sidebar-actions */
  overflow: hidden; /* Prevents scrollbars on this wrapper, child .sidebar-sticky-content handles scrolling */
}
/* Scrollable area within the sidebar */
.sidebar-sticky-content {
  padding: 16px; /* Internal padding for the scrollable content itself */
  overflow-y: auto; /* Enable vertical scrolling for this section */
  flex-grow: 1; /* Takes available space within .sidebar-main-content-wrapper */
}
/* Search input specific styles within sidebar */
.search-section .search-input-wrapper {
  position: relative; /* For positioning search icon */
}
.search-section .search-icon {
  /* Search icon inside input field */
  position: absolute;
  left: 10px; /* Position from left edge of wrapper */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  color: var(--text-placeholder); /* Placeholder text color for icon */
  width: 15px;
  height: 15px;
  pointer-events: none; /* Icon is not interactive */
}
.search-section #search {
  padding-left: 32px; /* Add padding to input to make space for the icon */
}

/* Labels for filter sections (e.g., "Tags", "Category") in the sidebar */
.sidebar-label {
  font-size: 0.8125rem; /* ~13px */
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px; /* Space below label */
  display: flex;
  align-items: center; /* Align icon with text */
  gap: 6px; /* Space between icon and text */
}
.sidebar-label svg {
  flex-shrink: 0; /* Prevent icon shrinking */
  width: 14px;
  height: 14px;
}
/* Styling for subsections within the sidebar */
.sidebar-subsection {
  padding bottom: 15px;
  margin-bottom: 16px; /* Space between subsections */
  border-bottom: 1px solid var(--border-color-light)
#333333
;
}
.sidebar-subsection:last-child {
  margin-bottom: 0; /* Remove margin from last subsection */
}

/* Styling for filter sections (tags, category) in the sidebar */
.sidebar .filter-section {
  background-color: transparent; /* No distinct background for filter sections */
  padding: 0; /* No extra padding */
  margin-bottom: 0; /* Managed by .sidebar-subsection or other layout */
  border-radius: 0; /* No border radius */
  box-shadow: none; /* No shadow */
  position: static; /* Default positioning */
  width: auto; /* Default width */
  border-bottom: 1px solid var(--border-color-light); /* Separator line below filter section */
  padding-bottom: 15px; /* Space below content before border */
}
.sidebar .filter-section .filter-header {
  margin-bottom: 8px; /* Space below filter header (label) */
}
/* Container for available filter items (e.g., clickable tags) */
.sidebar .filter-section .available-items-container {
  max-height: 130px; /* Limit height and enable scroll if many items */
  padding: 5px 0; /* Vertical padding */
  margin-bottom: 8px; /* Space below available items */
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  gap: 6px; /* Space between items */
}
/* Container for selected/active filter pills */
.sidebar .filter-section .active-filters-container {
  border-top: 1px dashed var(--border-color-medium); /* Dashed line above active filters */
  padding-top: 8px; /* Space above active filters */
  margin-top: 8px; /* Space below available items container */
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Space between active filter pills */
}
.active-filters-container.hidden {
  display: none !important; /* Hide if no active filters */
}

/* Buttons at the bottom of the scrollable area in sidebar (Manage Tags/Categories) */
.sidebar-actions {
  padding: 8px 16px 16px 16px; /* Padding around the action buttons area */
  flex-shrink: 0; /* Prevent shrinking */
  margin-top: 20px; /* Pushes this section to the bottom of .sidebar-main-content-wrapper */
  border: 1px dashed var(--border-color-medium);
  border-radius: 8px;
}
.sidebar-actions .btn {
  font-size: 0.8125rem; /* ~13px */
  text-align: left;
}

/* Shared style for full-width sidebar buttons (Manage buttons, Sync button) */
.manage-btn,
.sidebar-footer .full-width-btn:not(#sync-btn) { /* MODIFIED: Exclude #sync-btn here */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align icon and text left by default for these */
  padding: 9px 12px;
  font-size: 0.9em;
  font-weight: 500;
  gap: 8px;
  margin-bottom: 8px;
}

.manage-btn .btn-text,
.sidebar-footer .full-width-btn:not(#sync-btn) .btn-text { /* MODIFIED: Exclude #sync-btn here */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Corrected from just "flex-grow: 1;" to include text overflow handling */
  flex-grow: 1;
}

.manage-btn svg,
.sidebar-footer .full-width-btn:not(#sync-btn) svg { /* MODIFIED: Exclude #sync-btn here */
  flex-shrink: 0;
}

/* Manage button specific styles (inherits flex-start from above) */
.manage-btn {
  background: var(--bg-input);
  color: var(--primary-accent);
  border: 1px solid var(--primary-accent);
}
.manage-btn:hover {
  background: var(--primary-accent);
  color: var(--text-on-primary-accent);
}

/* Sidebar Footer (Sync button, message, progress bar)
   This is a direct child of .sidebar, positioned after .sidebar-main-content-wrapper */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--figma-divider); /* Separator line */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  flex-shrink: 0; /* Prevent footer from shrinking */
  background-color: var(--bg-sidebar); /* Ensure consistent background */
}
/* Sync status message text */
.sidebar-footer #sync-message {
  font-size: 0.75rem; /* 12px */
  color: var(--text-secondary);
  margin-top: 6px; /* Space above message if progress bar is visible */
  text-align: center;
  white-space: normal;  /* Allow text to wrap to new lines */
  word-break: break-word; /* Break long words if necessary to prevent overflow */
  overflow-wrap: break-word; /* Preferred alternative to word-break */
  
  /* Remove any fixed height or overflow:hidden that might cause truncation */
  height: auto;         /* Allow height to grow with content */
  overflow: visible;    /* Ensure content is not clipped */
  text-overflow: clip;
  width: 100%; /* Ensure it can be centered properly */
}
/* Sync button styling */
.sidebar-footer #sync-btn { /* ID for specific sync button */
  background: var(--primary-accent); /* Primary accent background */
  color: var(--text-on-primary-accent); /* Text for on-accent */
  border: none; /* No border */
  /* Uses .full-width-btn for shared layout properties like width, flex alignment */
}

/* Sync Progress Bar Styles */
.progress-bar-container {
  width: 100%;
  max-width: 200px; /* Limit width for aesthetics */
  height: 8px; /* Slim progress bar */
  background-color: var(--figma-bg-light); /* Themed background for track */
  border-radius: 4px; /* Rounded corners */
  overflow: hidden; /* Clip progress bar fill */
  margin-top: 8px; /* Space above progress bar (below sync button) */
  margin-bottom: 4px; /* Space below progress bar (above sync message) */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Inner shadow for depth */
}
.progress-bar-container.hidden {
  display: none; /* Hide when not active */
}
.progress-bar { /* The fill of the progress bar */
  width: 0%; /* Initial width, updated by JS */
  height: 100%;
  background-color: var(--primary-accent); /* Accent color for fill */
  border-radius: 4px; /* Match container rounding */
  transition: width 0.4s ease-out; /* Smooth width transition for progress */
  /* Animated stripes for visual activity indication */
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px; /* Size of the stripe pattern */
  animation: progress-bar-stripes 1s linear infinite; /* Stripe animation */
}
@keyframes progress-bar-stripes {
  /* Animation for moving stripes */
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
/* Progress bar theming for light mode */
body:not(.dark-mode) .progress-bar-container {
  background-color: var(--border-color-light); /* Lighter track in light mode */
}
body:not(.dark-mode) .progress-bar {
  /* Darker stripes for better visibility on light accent color */
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 75%,
    transparent 75%,
    transparent
  );
}

/* Main Content Area (where cards are displayed) */
.main-content-area {
  flex-grow: 1; /* Takes remaining space in .app-wrapper */
  padding-top: var(--header-height); /* Space for the fixed header */
  transition: margin-left 0.25s ease-in-out; /* Adjust margin when sidebar opens/closes on desktop */
  display: flex; /* To allow .main-content to grow */
  flex-direction: column;
  overflow-y: auto; /* Allow content area itself to scroll if its content exceeds viewport height */
  height: 100vh; /* Ensure it can scroll independently if needed, relative to app-wrapper's min-height */
}
.main-content {
  /* Inner wrapper for content padding and max-width constraints */
  max-width: 1400px; /* Max width for content */
  margin: 0 auto; /* Center content horizontally */
  padding: 20px; /* Padding around the content */
  width: 100%; /* Take full width of parent .main-content-area */
  flex-grow: 1; /* Allow this inner wrapper to grow if .main-content-area is taller */
}
/* Grid for displaying file cards */
.cards {
  display: grid;
  /* Responsive columns: fills with columns between 240px and 1fr wide */
  grid-template-columns: repeat(
    auto-fill,
    minmax(240px, 1fr)
  );
  gap: 18px; /* Space between cards */
  padding: 25px; /* Padding around the grid container */
}
/* "Load More" button styling */
#load-more.load-more { /* Specificity for a load more button */
  margin: 20px auto; /* Center button horizontally */
  display: block; /* Make it a block element for auto margins to work */
}
body:not(.dark-mode) .btn.secondary-btn.load-more {
  background-color: var(--bg-active-light); /* e.g., #e9ecef - should be slightly darker than normal hover for secondary buttons in light mode */
  color: var(--text-primary); /* Or whatever your desired hover text color is */
  border-color: var(--border-color-medium); /* Optional: slightly darker border on hover */
}
body:not(.dark-mode) .btn.secondary-btn.load-more:hover:not(:disabled) {
  background-color: var(--bg-active-light); /* e.g., #e9ecef - should be slightly darker than normal hover for secondary buttons in light mode */
  color: var(--text-primary); /* Or whatever your desired hover text color is */
  border-color: var(--border-color-medium); /* Optional: slightly darker border on hover */
}

/* Spinner for loading state on light mode button */
body:not(.dark-mode) .btn.secondary-btn.load-more.btn-loading::after {
  background-color: var(--bg-active-light);
  border-color: rgba(0, 0, 0, 0.2); /* Lighter track for spinner */
  border-top-color: var(--text-primary); /* Darker spinner animation part for contrast */
}
/* --- CARD STYLES --- */
.card {
  background: var(--bg-card); /* Themed card background */
  border-radius: var(--border-radius-card); /* Rounded corners for card */
  border: 1px solid var(--border-color-input); /* Default border, matches input */
  display: flex;
  flex-direction: column; /* Stack thumbnail and content vertically */
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease, border-color 0.15s ease; /* Smooth transitions for interactions */
}
body:not(.dark-mode) .card {
  border-color: var(--border-color-light); /* Lighter border for cards in light mode */
}
.card:hover {
  transform: translateY(-2px); /* Lift effect on hover */
  box-shadow: 0 4px 12px var(--shadow-color-medium); /* Enhanced shadow on hover */
  border-color: var(
    --figma-border-medium
  ); /* Slightly darker border on hover (dark mode specific due to variable context) */
}
body:not(.dark-mode) .card:hover {
  border-color: var(--border-color-medium); /* Ensure hover border consistent in light mode */
}


/* Card Thumbnail Area */
.card-thumb-link {
  /* Link wrapping the thumbnail image */
  display: block;
  text-decoration: none;
  color: inherit; /* Inherit text color (though not typical for image links) */
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0; /* Rounded top corners matching card */
}
.card-thumb-container {
  /* Container for thumbnail image and placeholder text/spinner */
  position: relative; /* For absolute positioning of image and placeholder */
  width: 100%;
  padding-top: 60%; /* Aspect ratio for thumbnail (e.g., 5:3). Height is 60% of width. */
  background-color: var(--figma-bg-light); /* Fallback background if image/placeholder fails */
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0; /* Match link rounding */
  overflow: hidden; /* Clip image/placeholder to rounded corners */
  border-bottom: 1px solid var(--border-color-input); /* Separator line below thumbnail area */
}
body:not(.dark-mode) .card-thumb-container {
  background-color: var(--bg-active-light);
  border-bottom-color: var(--border-color-light); /* Lighter separator in light mode */
}
.card-thumb {
  /* Actual thumbnail image */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the area, cropping if necessary to maintain aspect ratio */
  transition: transform 0.2s ease; /* Zoom effect on hover */
}
.thumbnail-error-text {
    /* Style for your error messages, e.g., */
    color: var(--text-secondary);
    font-size: 0.8em;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Fill the thumbCont */
}
.card-thumb.hidden-thumb {
  /* Used to hide the img element while loading or if there's an error, allowing placeholder to show */
  position: absolute; /* Still part of layout for structure but not visible */
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none; /* Not interactive */
}
.card-thumb-link:hover .card-thumb:not(.hidden-thumb) {
  transform: scale(1.05); /* Zoom image slightly on hover of the link */
}

/* Thumbnail Text Placeholder (shown when image is loading or unavailable) */
.card-thumb-text-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px; /* Padding inside placeholder */
  box-sizing: border-box; /* Include padding in width/height */
  font-weight: 600; /* Bold text for placeholder */
  line-height: 1.3;
  overflow: hidden; /* Prevent text overflow */
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0; /* Match container rounding */
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* Smooth transitions */
  opacity: 1; /* Visible by default, script hides if image loads successfully */
  background-color: var(--card-placeholder-default-bg); /* Themed placeholder background */
  color: var(
    --card-placeholder-default-text
  ) !important; /* Ensure text is readable (forced dark for contrast) */
}
.card-thumb-text-placeholder.hidden-placeholder {
  opacity: 0; /* Hide placeholder when image is loaded */
  pointer-events: none; /* Make non-interactive when hidden */
}
.card-thumb-text-placeholder .placeholder-filename-text {
  display: block; /* Ensure it takes its own line */
  font-weight: 600; /* Main placeholder text (e.g., filename) */
  margin-bottom: 4px; /* Space below filename */
  word-break: break-word; /* Allow long filenames to wrap */
}
.card-thumb-text-placeholder .placeholder-status-container {
  /* Container for status text and loader */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* Space between status text and loader icon */
  margin-top: 2px; /* Small space above status line */
}
.card-thumb-text-placeholder .placeholder-status-text {
  font-size: 0.5em; /* Very small text for status like "LOADING" or "ERROR" */
  opacity: 0.6; /* Muted appearance for status text */
}

/* Spinner for thumbnail loading state, shown over placeholder or image area */
.thumbnail-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center spinner */
  width: 24px;
  height: 24px;
  z-index: 5; /* Above placeholder, potentially below image if it loads over */
}
.thumbnail-spinner::after {
  /* The actual spinning element */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--primary-accent-focus-ring); /* Lighter part of spinner track */
  border-top-color: var(--primary-accent); /* Darker, prominent part that "moves" */
  border-radius: 50%; /* Circular spinner */
  animation: spin 0.7s linear infinite; /* Re-use global spin animation */
}
body:not(.dark-mode) .thumbnail-spinner::after {
  /* Spinner colors for light mode */
  border: 3px solid rgba(0, 0, 0, 0.2); /* Lighter track */
  border-top-color: var(--text-primary); /* Darker moving part */
}

/* Card Content Area (below thumbnail) */
.card-content {
  padding: 12px; /* Padding for content within the card */
  flex-grow: 1; /* Allows content to take available space if card height is fixed or constrained */
  display: flex;
  flex-direction: column; /* Stack content items vertically */
}
.card-title-row {
  display: flex;
  justify-content: space-between; /* Title on left, edit button on right */
  align-items: flex-start; /* Align items to the top of the row */
  margin-bottom: 4px; /* Space below title row */
}
.card-info-item {
  display: flex;
  flex-wrap: wrap; /* Allow label and content to wrap if needed on small cards */
  align-items: flex-start; /* Align label and content to the top */
  gap: 4px 8px; /* Small gap between label and content, and among items if they wrap */
  font-size: 0.6rem; /* Slightly smaller text for meta info */
  line-height: 1.4;
}
.card-info-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.6rem;
  flex-shrink: 0; /* Prevent label from shrinking */
}

.card-date,
.card-category {
  color: var(--text-primary);
  margin: 0; /* Reset default paragraph/span margins */
}

.card-title-link { /* Link wrapping the card title */
  flex-grow: 1; /* Allow title link to take available space */
  overflow: hidden; /* Prevent long titles from breaking layout */
  margin-right: 8px; /* Space between title and edit button */
}
.card-title {
  font-size: 0.875rem; /* 14px */
  font-weight: 500; /* Medium weight for title */
  line-height: 1.3;
  color: var(--text-primary); /* Themed text color */
  overflow: hidden; /* Hide overflowed text */
  text-overflow: ellipsis; /* Show ellipsis for long titles */
  white-space: nowrap; /* Prevent title from wrapping to multiple lines */
}
/* Edit button on card, shown on card hover */
.card-edit-btn.edit-btn { /* .edit-btn class for common edit button styling */
  padding: 4px; /* Small padding for icon button */
  color: var(--text-secondary); /* Muted color by default */
  opacity: 0; /* Hidden by default, shown on card hover */
  transition: opacity 0.15s ease;
  flex-shrink: 0; /* Prevent button from shrinking if title is long */
}
.card:hover .card-edit-btn.edit-btn {
  opacity: 0.7; /* Show button on card hover with slight transparency */
}
.card-edit-btn.edit-btn:hover {
  opacity: 1; /* Full opacity on button hover */
  background-color: var(--figma-bg-light); /* Subtle background on hover */
  color: var(--text-interactive-hover); /* Brighter text on hover */
}
.card-actions {
  display: none;
} /* Placeholder for potential future actions on card, not currently used */

.card-date {
  font-size: 0.75rem; /* 12px */
  color: var(--text-secondary); /* Muted color for date */
  margin-bottom: 8px; /* Space below date */
}
.card-meta-row {
  margin-bottom: 8px;
} /* Wrapper for metadata like category */
.card-category-wrapper {
  display: flex;
  align-items: center;
  gap: 4px; /* Space between label and category name */
}
.card-category-label {
  display: inline-block;
  font-size: 0.7rem; /* ~11px, very small */
  color: var(--text-secondary);
}
.card-category {
  font-size: 0.75rem; /* 12px */
  color: var(--text-primary);
  font-weight: 500; /* Medium weight for category name */
}
.card-tags-wrapper{
  margin-top: 8px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap; /* Allow tags to wrap */
  gap: 4px; /* Space between tag pills */
  margin-bottom: 8px; /* Space below tags section */
}
.card-tags.hidden {
  display: none !important; /* Hide if no tags */
}
.card-tags span {
  /* Individual tag pill on card */
  font-size: 0.7rem; /* ~11px */
  background-color: var(--bg-active-light); /* Themed background for tag pill */
  color: var(--text-secondary); /* Muted text for tag pill */
  padding: 2px 6px; /* Small padding for tag pills */
  border-radius: var(--border-radius-small); /* Small rounding */
}
/* Text like "+2 more" for truncated tags or links */
.more-tags-indicator,
.more-links-indicator {
  font-size: 0.7rem; /* ~11px */
  color: var(--text-secondary);
  margin-left: 4px; /* Space to the left if shown after other items */
}
/* Container for links section at the bottom of the card */

.card-links-wrapper {
  display: flex; /* Use flex for children, or just block for <a> tags */
  flex-direction: column; /* Stack links vertically */
  gap: 3px; /* Small gap between link items */
  
  max-height: 10em;
  overflow-y: auto; /* Add vertical scrollbar if content exceeds max-height */
  
  /* Add a little padding on the right if scrollbar appears, to prevent text overlap */
  /* This can be tricky cross-browser, sometimes a small padding-right on the <a> tags themselves is better */
  padding-right: 5px; /* For the scrollbar track */
  margin-top: auto; /* Push links section to the bottom of .card-content flex container */
  padding-top: 8px; /* Space above links section */
  border-top: 1px solid var(--figma-divider); /* Separator line */
}
.card-links-title {
  font-size: 0.7rem; /* ~11px */
  color: var(--text-secondary);
  margin-bottom: 4px; /* Space below links title */
  font-weight: 500; /* Medium weight for title */
}
.card-links a { /* Individual link style */
  font-size: 0.75rem; /* 12px */
  color: var(--text-link); 
  padding: 1px 0; 
  display: block; /* Each link on its own line */
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  text-decoration: none; /* Already in global 'a' but good to reinforce */
}
.card-links a:hover {
  text-decoration: underline; 
  color: color-mix(in srgb, var(--text-link) 80%, var(--text-primary));
}

/* --- LOGIN PAGE --- */
.login-page-wrapper {
  display: flex;
  align-items: center; /* Center login form vertically */
  justify-content: center; /* Center login form horizontally */
  min-height: 100vh; /* Full viewport height */
  padding: 20px; /* Padding around the login area */
  background-color: var(--bg-primary); /* Themed page background */
}
.login-container {
  text-align: center; /* Center text content within the container */
  padding: 30px 40px; /* Padding inside login box */
  background: var(--bg-card); /* Use card background for login box */
  border-radius: var(--border-radius-large); /* Large rounding for container */
  box-shadow: 0 4px 15px var(--shadow-color-medium); /* Shadow for depth */
  max-width: 400px; /* Max width for login box */
  width: 100%; /* Responsive width */
}
.login-app-icon {
  margin-bottom: 20px; /* Space below app icon/logo */
  /* SVG or img styling for app icon can be added here */
}
.login-title {
  font-size: 1.8rem; /* Large title text */
  color: var(--text-primary);
  margin-bottom: 8px; /* Space below title */
  font-weight: 600; /* Bold title */
}
.login-subtitle {
  font-size: 0.9rem; /* Smaller subtitle text */
  color: var(--text-secondary);
  margin-bottom: 24px; /* Space below subtitle, before button */
}
.figma-login-btn { /* Style for a Figma-specific login button */
  font-size: 0.9rem;
  padding: 10px 20px; /* Generous padding for primary action */
  width: 100%; /* Full width button */
  /* Typically would be .btn.primary-btn */
}
.login-footer-note {
  font-size: 0.75rem; /* Small text for footer notes/links */
  color: var(--text-secondary);
  margin-top: 16px; /* Space above footer note */
}

/* --- MODALS --- */
.modal {
  /* Modal backdrop/overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65); /* Semi-transparent backdrop for focus */
  display: flex;
  align-items: center; /* Vertically center modal content */
  justify-content: center; /* Horizontally center modal content */
  z-index: 1050; /* High z-index to appear above other content */
  opacity: 1; /* Initial state for visible */
  visibility: visible;
  transition: opacity 0.2s ease-out, visibility 0s linear 0s; /* Fade-in transition */
}
.modal.hidden {
  /* Styles for hidden modal (triggered by adding .hidden class) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Prevent interaction when hidden */
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s; /* Fade-out transition with delay for visibility */
}
.modal-content {
  /* Actual modal dialog box */
  position: relative; /* For potential absolute positioning of children like close button */
  background: var(--bg-modal); /* Themed modal background */
  color: var(--text-primary); /* Themed text color */
  padding: 24px; /* Padding inside modal */
  border-radius: var(--border-radius-large); /* Rounded corners */
  width: 90%; /* Responsive width */
  max-width: 480px; /* Default max width for smaller modals */
  box-shadow: 0 5px 20px var(--shadow-color-hard); /* Prominent shadow for modal */
  transform: scale(1) translateY(0); /* Initial state for entry animation */
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out; /* Entry/exit animation */
  max-height: 80vh; /* Prevent modal from being too tall for viewport */
  overflow-y: auto; /* Allow content to scroll if it exceeds max-height */
}
.modal.hidden .modal-content {
  /* Animation state when modal is being hidden */
  transform: scale(0.95) translateY(10px); /* Slight scale down and move up */
  opacity: 0;
}
/* Larger max-width for specific modals (manage tags/categories) */
#manage-tags-modal .modal-content,
#manage-cats-modal .modal-content {
  max-width: 550px;
}

.modal-content h2 { /* Default h2 style within modal */
  font-size: 1.2rem; /* Larger heading for modal title */
  margin-bottom: 20px; /* Space below title */
  text-align: left; /* Align title to left */
  font-weight: 600; /* Bold title */
}
/* For modal headers with title on left and action button (e.g., "Add New") on right */
.modal-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically align title and button */
  margin-bottom: 20px; /* Space below header */
}
.modal-header-flex h2 {
  margin-bottom: 0; /* Remove bottom margin from h2 inside flex header as parent handles it */
}

/* Form elements within modals */
.form-group {
  margin-bottom: 16px; /* Space between form groups */
}
.form-group label {
  font-size: 0.8125rem; /* ~13px */
  font-weight: 500; /* Medium weight for labels */
  color: var(--text-secondary); /* Muted label color */
  margin-bottom: 6px; /* Space below label, above input */
  display: block; /* Ensure label takes full width */
}
/* Button used within a form group, e.g., "+ New Category" button below a select input */
.form-group-action-btn {
  margin-top: 8px; /* Space above button, below input */
}

/* Readonly input style */
.readonly-input {
  background-color: var(--figma-bg-darkest) !important; /* Force darker background */
  color: var(--text-secondary) !important; /* Muted text */
  cursor: default; /* Indicate not editable */
}
body:not(.dark-mode) .readonly-input {
  background-color: #f0f0f0 !important; /* Light theme readonly background */
}
/*  Add error class and message styling to public/spreadsheet-editor.css */
.spreadsheet-link-editor-popover .link-entry .input-error {
  border-color: var(--primary-accent) \!important; /* Highlight the border */
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring) \!important;
}

.spreadsheet-link-editor-popover .link-entry .form-error-message {
  color: var(--primary-accent);
  font-size: 0.75em;
  margin-top: 2px;
  display: block; /* Ensure it takes its own line */
}
/* Links section in Edit File Modal */
#edit-links > div { /* Style the container for each link entry row */
  display: grid;
  grid-template-columns: 2fr 1fr auto; /* 2 parts for URL, 1 for label, auto for button */
  align-items: center; /* Vertically center content in each grid row */
  gap: 5px; /* Space between columns */
  margin-bottom: 5px; /* Space between each link entry row */
}

/* Extra Styles for the added elements to better fit the grid container*/
#edit-links > div > input { /*General Input Style within Links*/
  margin-bottom: 0px !important; /*Important tag to overwrite any conflicting code*/
}

#edit-links input[name="link-url"] {
  flex-grow: 2; /* URL input takes more space */
  margin-bottom: 0; /* Remove default input margin */
}
#edit-links input[name="link-label"] {
  flex-grow: 1; /* Label input takes less space than URL */
  margin-bottom: 0;
}
/* Button to remove a link entry in the modal */
#edit-links .remove-link-btn {
  padding: 4px 8px; /* Small padding for 'x' or icon button */
  background-color: var(--bg-hover-light); /* Subtle background */
  border: 1px solid var(--border-color-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  line-height: 1; /* Ensure consistent height */
  font-size: 1.1em; /* Slightly larger if using text 'x' */
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0; /* Prevent button from shrinking */
}
#edit-links .remove-link-btn:hover {
  background-color: var(--bg-active-light); /* Darker background on hover */
  color: var(--text-primary); /* Primary text color on hover */
}

.modal-actions {
  /* Container for modal action buttons (e.g., Save, Cancel) */
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  gap: 10px; /* Space between buttons */
  margin-top: 24px; /* Space above action buttons */
}

/* List container in Manage Tags/Categories modals */
#manage-tags-list-container,
#manage-cats-list-container {
  border: 1px solid var(--figma-divider); /* Border around the list */
  border-radius: var(--border-radius-medium); /* Rounded corners for list container */
  padding: 0; /* No padding, items will have their own */
  max-height: 300px; /* Limit height and enable scroll */
  overflow-y: auto; /* Enable vertical scroll */
  margin-bottom: 15px; /* Space below list */
}
.manage-list-item {
  /* Individual item in the manage list (tag or category) */
  padding: 10px 12px; /* Padding within each item */
  border-bottom: 1px solid var(--figma-divider); /* Separator line between items */
  display: flex;
  justify-content: space-between; /* Name on left, actions on right */
  align-items: center; /* Vertically align item content */
}
.manage-list-item:last-child {
  border-bottom: none; /* Remove border from last item */
}
.manage-list-item-name {
  flex-grow: 1; /* Allow name to take available space */
  margin-right: 10px; /* Space between name and actions */
  display: flex;
  align-items: center; /* Align text and file count */
}
.manage-list-item-name .item-name-text {
  font-size: 0.875rem; /* 14px */
  color: var(--text-primary);
}
.manage-list-item-name .item-file-count {
  /* File count next to tag/category name */
  font-size: 0.75rem; /* 12px */
  color: var(--text-secondary); /* Muted color for count */
  margin-left: 8px; /* Space to the left of count */
  white-space: nowrap; /* Prevent count from wrapping */
  background-color: var(--figma-bg-dark); /* Subtle background for count badge */
  padding: 1px 5px;
  border-radius: var(--border-radius-small);
}
body:not(.dark-mode) .manage-list-item-name .item-file-count {
    background-color: var(--bg-hover-light);
    color: var(--text-secondary);
}
.manage-list-item-actions {
  display: flex;
  gap: 8px; /* Space between action buttons (edit, delete) */
}
/* Tertiary buttons used for edit/delete in manage lists */
.manage-list-item-actions .btn.tertiary-btn {
  color: var(--text-secondary); /* Muted color for actions */
  padding: 4px 6px; /* Smaller padding for these icon buttons */
}
.manage-list-item-actions .btn.tertiary-btn:hover {
  color: var(--text-interactive-hover); /* Brighter text on hover */
  background-color: var(--figma-bg-light); /* Subtle background on hover */
}
/* Specific styling for delete buttons in manage lists for emphasis */
.manage-list-item-actions .delete-tag-from-list-btn, /* Class for delete tag button */
.manage-list-item-actions .delete-cat-from-list-btn { /* Class for delete category button */
  color: var(--primary-accent) !important; /* Use accent color for delete action */
}
.manage-list-item-actions .delete-tag-from-list-btn:hover,
.manage-list-item-actions .delete-cat-from-list-btn:hover {
  background-color: color-mix(
    in srgb,
    var(--primary-accent) 15%,
    transparent
  ) !important; /* Very subtle accent background on hover */
  color: color-mix(in srgb, var(--primary-accent) 80%, white) !important; /* Slightly brighter accent on hover */
}
/* Placeholder text when list is loading or empty */
.manage-list-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-style: italic;
}

/* --- UTILITY CLASSES --- */
.hidden {
  display: none !important;
} /* Utility to completely hide elements */

/* Toast Notification Container */
#toast-container {
  position: fixed;
  bottom: 20px; /* Position at bottom of viewport */
  right: 20px; /* Position at right of viewport */
  z-index: 9999; /* Highest z-index to appear above all other content */
  display: flex;
  flex-direction: column-reverse; /* New toasts appear on top of existing ones */
  gap: 10px; /* Space between toasts */
}
.toast {
  /* Individual toast message */
  background-color: var(--bg-toast-default); /* Themed default background */
  color: var(--text-toast); /* Consistent text color for toasts */
  padding: 10px 16px; /* Padding within toast */
  border-radius: var(--border-radius-medium); /* Rounded corners */
  box-shadow: 0 2px 10px var(--shadow-color-medium); /* Shadow for depth */
  opacity: 0; /* Initial state for entry animation */
  transform: scale(0.95) translateY(10px); /* Initial position for entry animation */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out,
    background-color 0.2s ease; /* Smooth transitions */
  font-size: 0.875rem; /* 14px */
  word-break: break-word; /* Allow long messages to wrap */
  min-width: 280px; /* Minimum width for toast */
  max-width: 380px; /* Maximum width for toast */
}
.toast.show {
  opacity: 1; /* Visible state */
  transform: scale(1) translateY(0); /* Final position for entry animation */
}
/* Toast types for different messages, changing background color */
.toast.success {
  background-color: var(--bg-toast-success);
}
.toast.error {
  background-color: var(--bg-toast-error);
}
.toast.info {
  background-color: var(--bg-toast-info);
}

/* Global Loading Indicator (Fullscreen Spinner) */
#loading-indicator {
  display: none; /* Hidden by default */
}
#loading-indicator.loading {
  /* Styles when active (e.g., initial app load, major async operation) */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(
    in srgb,
    var(--bg-primary) 80%,
    transparent
  ); /* Semi-transparent overlay using primary background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Above modals */
}
#loading-indicator.loading::after {
  /* The spinner element */
  content: "";
  width: 32px;
  height: 32px;
  border: 4px solid var(--primary-accent); /* Accent color for spinner */
  border-top-color: transparent; /* Creates the "C" shape for spinning effect */
  border-radius: 50%; /* Circular spinner */
  animation: spin 0.7s linear infinite; /* Re-use global spin animation */
}
@keyframes spin { /* Defines the spinner rotation animation */
  to {
    transform: rotate(360deg);
  }
}

/* Mobile Sidebar Overlay (dims main content when sidebar is open on mobile) */
.sidebar-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
  z-index: 999; /* Below sidebar (1000/1010), above main content */
  opacity: 0; /* Initial state for transition */
  transition: opacity 0.2s ease-in-out; /* Smooth fade-in/out */
}
body.sidebar-mobile-open .sidebar-overlay {
  display: block; /* Show overlay when sidebar is open on mobile */
  opacity: 1; /* Full opacity */
}

/* Accessibility: Visually Hidden Class */
/* Hides content visually but keeps it accessible to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap; /* Added for robustness with some screen readers */
}

/* --- RESPONSIVE STYLES --- */

/* Desktop and Larger (993px and up) */
/* Adjusts layout for a persistent sidebar and a header positioned next to the sidebar. */
@media (min-width: 993px) {
    .app-header #menu-toggle-btn {
        display: none !important; /* Hide mobile menu toggle button */
    }
    .app-header {
        left: var(--sidebar-width); /* Shift header to start after the sidebar */
        /* Optional: border-left: 1px solid var(--border-color-light); if sidebar has right border and visual separation is desired */
    }
    .sidebar {
        transform: translateX(0) !important; /* Ensure sidebar is always visible */
        padding-top: 0; /* Sidebar is full height from the top; header does not overlay it */
        z-index: 1010; /* Ensure sidebar is above main content if any overlap, but header can be higher if needed */
    }
    /* Content within the sidebar's main scrollable area starts from the top of the sidebar.
       No additional header offset padding is needed here as the app header is shifted. */
    .sidebar-main-content-wrapper {
        padding-top: 0;
    }
    .main-content-area {
        margin-left: var(--sidebar-width); /* Main content area accommodates the persistent sidebar */
        /* padding-top: var(--header-height); Main content still needs padding for the app header, which is fixed above it. */
    }
}

/* Tablet and Mobile Layout (992px and down) */
/* Sidebar becomes toggleable, header is full-width. */
@media (max-width: 992px) {
  .app-header {
    left: 0; /* Header is full width */
    border-left: none; /* No left border needed */
    box-shadow: 0 1px 3px var(--shadow-color-soft); /* Add subtle shadow to header on mobile */
  }
  .app-header #menu-toggle-btn {
    display: inline-flex !important; /* Show mobile menu toggle button */
  }
  .app-header .app-header-title {
    display: block; /* Ensure title is visible if space allows */
  }
  .sidebar {
    transform: translateX(-100%); /* Sidebar hidden off-screen by default */
    padding-top: var(--header-height); /* Sidebar content starts below the fixed full-width header */
    z-index: 1010; /* High z-index to overlay content when open */
  }
  /* The .sidebar itself has padding-top for the header, so its direct children
     like .sidebar-main-content-wrapper do not need further header-related padding. */
  .sidebar-main-content-wrapper {
    padding-top: 0;
  }
  /* The scrollable content within the sidebar needs its own internal padding,
     but not an additional offset for the header (already handled by .sidebar's padding-top). */
  .sidebar-sticky-content {
    padding-top: 16px; /* Default top padding for content inside scrollable area */
    /* Other paddings (left, right, bottom) are already set in its base style */
  }
  body.sidebar-mobile-open .sidebar {
    transform: translateX(0%); /* Slide sidebar in when open */
  }
  .main-content-area {
    margin-left: 0; /* Main content takes full width as sidebar is overlay or hidden */
    /* padding-top: var(--header-height); Already set in base style, remains correct */
    width: 100%;
  }
}

/* Smaller Tablet / Large Phone Adjustments (768px and down) */
/* Further refinements for smaller screens. */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Slightly smaller min card width */
    gap: 12px; /* Reduced gap between cards */
    padding: 15px; /* Reduced padding around card grid */
  }
  .main-content-area .main-content {
    padding: 15px; /* Reduced padding for main content area */
  }
  .modal-content {
    max-width: calc(100vw - 30px); /* Modal takes more screen width, with small margins */
    padding: 20px; /* Reduced modal padding */
  }
  .app-header-title {
    font-size: 0.9rem; /* Slightly smaller header title */
  }
}

/* Small Phone Adjustments (480px and down) */
/* Optimizations for very small screens. */
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr; /* Single column for cards */
    padding: 10px; /* Minimal padding for card grid */
  }
  body {
    font-size: 12px; /* Slightly smaller base font size */
  }
  .btn {
    padding: 6px 10px; /* Smaller button padding */
    font-size: 0.75rem; /* Smaller button font size */
  }
  .btn svg {
    width: 14px; /* Smaller icons in buttons */
    height: 14px;
  }
  .sidebar {
    width: min(var(--sidebar-width), 260px); /* Limit sidebar width, ensuring it's not too wide */
    /* padding-top: var(--header-height); Inherited from max-width: 992px, still correct */
  }
  .sidebar-sticky-content {
    padding: 12px; /* Consistent 12px padding on all sides for scrollable content */
    /* padding-top: 12px; is sufficient as .sidebar handles header offset.
       The previous `calc(var(--header-height) + 12px)` was causing double padding. */
  }
  .app-header {
    padding: 0 10px; /* Reduced header padding */
  }
  .app-header .btn.icon-btn svg {
    width: 18px; /* Ensure mobile menu toggle icon is adequately sized */
    height: 18px;
  }
  .main-content-area .main-content {
    padding: 10px; /* Minimal padding for main content */
  }
  .card-title {
    font-size: 0.8125rem; /* Smaller card titles */
  }
  /* Further reduce font sizes for metadata on small cards to save space */
  .card-date,
  .card-category,
  .card-tags span,
  .card-links a,
  .card-links-title,
  .card-category-label {
    font-size: 0.6875rem; /* ~11px, very small */
  }
  .app-header-title {
    display: none; /* Hide title on very small screens to save space for logo/actions */
  }
  .app-header-logo {
    margin-right: auto; /* Push other header items (e.g., logout button) to the right */
  }
  #manage-tags-list-container,
  #manage-cats-list-container {
    max-height: 250px; /* Reduce max height of lists in modals on small screens */
  }
}

/* --- MISCELLANEOUS UI STYLES --- */
/* Empty State (when no files are found or data is empty) */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px; /* Generous padding */
  color: var(--text-secondary); /* Muted text color for base */
  min-height: 300px; /* Ensure it takes some vertical space */
}
.empty-state-container.hidden {
  display: none !important;
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px; /* Space below icon */
  color: var(--text-placeholder); /* Use placeholder color for icon */
  /* SVG or font icon styling here */
}
.empty-state-text {
  font-size: 1.1rem; /* Prominent message text */
  color: var(--text-primary); /* Primary text color for main message */
  margin-bottom: 8px; /* Space below main text */
  font-weight: 500; /* Medium weight */
}
.empty-state-suggestion {
  font-size: 0.9rem; /* Smaller text for suggestions or actions */
}
.empty-state-suggestion .btn {
  margin-left: 5px; /* Space for an inline button within the suggestion text */
}

/* Form Error Messages */
.form-error-message {
  display: block; /* Ensure it takes its own line */
  color: var(--primary-accent); /* Accent color for error messages (often red/pink) */
  font-size: 0.8em; /* Smaller font size for error text */
  margin-top: 4px; /* Space above error message, below input */
  min-height: 1.2em; /* Reserve space to prevent layout shifts when message appears/disappears */
}
/* Input field styling when in an error state */
input.input-error,
select.input-error,
textarea.input-error { /* Added textarea */
  border-color: var(--primary-accent) !important; /* Error border color */
}
/* Focus state for input fields in an error state */
input:focus.input-error,
select:focus.input-error,
textarea:focus.input-error { /* Added textarea */
  border-color: var(--primary-accent) !important; /* Retain error border color on focus */
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring) !important; /* Error focus ring */
}

/* Button Loading/Working States */
.btn-loading {
  /* General loading state for buttons (spinner replaces text/icon) */
  position: relative; /* For positioning spinner */
  color: transparent !important; /* Hide original button text by making it transparent */
  pointer-events: none; /* Prevent clicks while loading */
}
.btn-loading > svg {
  visibility: hidden; /* Hide original SVG icon if present */
}
.btn-loading::after {
  /* Spinner element */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px; /* Size of spinner */
  height: 16px;
  margin-top: -8px; /* Center spinner */
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.5); /* Default spinner color (light track for primary button text) */
  border-top-color: #fff; /* Moving part of spinner (white for primary button text) */
  border-radius: 50%;
  animation: spin 0.6s linear infinite; /* Re-use global spin animation */
}
/* Spinner color for non-primary buttons (adapts to their text color) */
.btn.secondary-btn.btn-loading::after,
.btn.tertiary-btn.btn-loading::after,
/* .add-btn.btn-loading::after, /* Assuming .add-btn would be a .secondary-btn or .tertiary-btn */
.btn.small-btn.btn-loading::after,
/* .cancel-btn.btn-loading::after, /* Assuming .cancel-btn would be a .secondary-btn or .tertiary-btn */
.manage-btn.btn-loading::after {
  border-color: color-mix(in srgb, var(--text-primary) 50%, transparent); /* Track color based on primary text */
  border-top-color: var(--text-primary); /* Moving part color based on primary text */
}
/* Ensure all direct children (text, original icon) are hidden, except the ::after pseudo-element spinner */
.btn-loading > *:not(::after) {
  visibility: hidden;
}

/* Simpler working state, e.g., for icon buttons just showing activity without replacing icon */
.btn-working {
  opacity: 0.7; /* Reduce opacity to indicate activity */
  pointer-events: none; /* Prevent interaction during working state */
}

/* Filter Section (Tags/Categories in Sidebar) */
.filter-section .filter-header label { /* Label for the filter section (e.g., "Tags") */
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.875rem; /* 14px */
  margin-bottom: 0; /* No margin, spacing handled by parent or other elements */
}
/* Container for clickable filter items (e.g., available tags) */
.available-items-container.sidebar-available-items, /* Specific class for sidebar context */
.filter-section .available-items-container { /* General class for filter sections */
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  gap: 6px; /* Space between filter items */
  max-height: 130px; /* Limit height and enable scroll if many items */
  overflow-y: auto; /* Enable vertical scroll */
  padding: 8px 0; /* Vertical padding around items */
}
/* General Tag Pill style (used in filters and selected tags display in sidebar) */
.tag-pill {
  background-color: var(--bg-active-light); /* Themed background for unselected pill */
  color: var(--text-secondary); /* Muted text for unselected pill */
  padding: 5px 10px; /* Padding within pill */
  border-radius: var(--border-radius-medium); /* Rounded corners */
  font-size: 0.8125rem; /* ~13px */
  cursor: pointer; /* Indicate clickable */
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease; /* Smooth transitions */
  border: 1px solid var(--border-color-medium); /* Subtle border */
  user-select: none; /* Prevent text selection on click */
  display: inline-flex; /* Align text and potential icons */
  align-items: center;
}
/* Individual Tag Pill */
.tag-pill-readonly {
    background-color: var(--bg-input);
    color: var(--text-secondary);
    padding: 3px 7px; /* Slightly more padding */
    border-radius: var(--border-radius-small);
    margin: 2px; /* Consistent margin */
    display: inline-block;
    font-size: 0.85em; /* Ensure this is not too large */
    white-space: nowrap;
    border: 1px solid var(--border-color-input);
    line-height: 1.2; /* Control line height within the pill */
    max-width: 100%; /* Prevent super long pills from breaking layout if they somehow don't wrap container */
    overflow: hidden;
    text-overflow: ellipsis;
}
.tag-pill:hover {
  background-color: var(--bg-hover-light); /* Lighter background on hover */
  box-shadow: 0 1px 2px var(--shadow-color-soft); /* Subtle shadow on hover */
}
.tag-pill.selected {
  /* Style for selected filter tags */
  background-color: var(--primary-accent); /* Accent background for selected state */
  color: var(--text-on-primary-accent); /* Text color for on-accent */
  border-color: var(--primary-accent); /* Accent border */
  font-weight: 500; /* Slightly bolder text for selected item */
}

/* Active (selected) filter pills display area in sidebar */
.active-filters-container.sidebar-active-filters, /* Specific class for sidebar */
.filter-section .active-filters-container { /* General class */
  margin-top: 10px; /* Space above active filters area */
  padding-top: 10px; /* Space below separator line */
  border-top: 1px solid var(--figma-divider); /* Separator line */
  min-height: 20px; /* Reserve space even if empty initially to prevent layout jumps */
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Space between active filter pills */
  transition: border-color 0.3s ease; /* Smooth transition for border */
}
/* Hide border and padding if no active filters */
.active-filters-container.sidebar-active-filters:empty,
.filter-section .active-filters-container:empty {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  min-height: 0; /* Collapse fully if empty */
}
/* 'x' remove button on active filter pills in the sidebar filter section */
.filter-section .active-filters-container .tag-pill .remove-filter-x {
  margin-left: 6px; /* Space between pill text and 'x' */
  font-size: 1.1em; /* Slightly larger 'x' */
  line-height: 1; /* Ensure consistent vertical alignment */
  opacity: 0.7; /* Muted 'x' by default */
  cursor: pointer; /* Indicate 'x' is clickable */
}
.filter-section .active-filters-container .tag-pill:hover .remove-filter-x {
  opacity: 1; /* Full opacity 'x' on pill hover */
}

/* Thumbnail Dots Loader Animation (for placeholder status text like "Loading...") */
.thumbnail-dots-loader {
  display: inline-flex; /* Align dots horizontally */
  align-items: center; /* Vertically align dots */
}
.thumbnail-dots-loader span {
  /* Individual dot */
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px; /* Space between dots */
  background-color: currentColor; /* Use parent's text color (e.g., placeholder status text color) */
  border-radius: 50%; /* Circular dots */
  opacity: 0.3; /* Initial muted opacity */
  animation: dots-bounce 1.4s infinite ease-in-out both; /* Bouncing animation */
}
/* Animation delay for each dot to create a wave effect */
.thumbnail-dots-loader span:nth-child(1) {
  animation-delay: -0.32s;
}
.thumbnail-dots-loader span:nth-child(2) {
  animation-delay: -0.16s;
}
/* Dot 3 (if present) will have animation-delay: 0s (default) */
@keyframes dots-bounce {
  /* Bouncing animation for dots */
  0%,
  80%,
  100% {
    transform: scale(0.8); /* Smaller, less opaque state */
    opacity: 0.3;
  }
  40% {
    transform: scale(1); /* Larger, fully opaque state (peak of bounce) */
    opacity: 1;
  }
}

.settings-team-list-item {
    display: flex;
    flex-direction: column; /* Stack main info and PAT form vertically */
    gap: 8px; /* Space between main info and PAT form when visible */
}
.settings-team-list-item-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure it takes full width of li */
}

.update-pat-form-container {
    display: flex;
    flex-direction: column; /* Stack input, actions, error vertically */
    gap: 8px;
    padding: 10px;
    background-color: var(--figma-bg-dark); /* Slightly different from card for nesting */
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-medium);
    margin-top: 5px; /* Space from the list item content above */
}
body:not(.dark-mode) .update-pat-form-container {
    background-color: var(--bg-secondary); /* Light theme background */
}

.update-pat-form-container .new-pat-input {
    margin-bottom: 0; /* Remove default margin if any from global input styles */
}

.update-pat-form-container .pat-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right */
}

.update-pat-form-container.hidden {
    display: none !important;
}

/* Optional: If main actions were hidden, ensure they show up again correctly */
.settings-team-list-item .manage-list-item-actions {
    display: flex; /* Ensure it's flex if not already consistently styled */
    align-items: center;
    gap: calc(var(--spacing-unit, 8px) * 0.75);
    flex-shrink: 0;
}
/* New Danger Zone Styling for Delete Account */
.delete-account-danger-zone {
    margin-top: calc(var(--spacing-unit, 8px) * 3); /* More space above it */
  margin-bottom: calc(var(--spacing-unit, 8px) * 3);
    padding: calc(var(--spacing-unit, 8px) * 2.5);
    border: 2px solid var(--danger-color, #FF4D4F); /* More prominent border */
    border-radius: var(--border-radius-large);
    background-color: color-mix(in srgb, var(--danger-color, #FF4D4F) 8%, transparent); /* Subtle bg tint */
}
body:not(.dark-mode) .delete-account-danger-zone {
    background-color: color-mix(in srgb, var(--danger-color, #FF4D4F) 10%, #fff 90%);
}

.delete-account-danger-zone .danger-zone-title {
    color: var(--danger-color, #FF4D4F);
    font-size: 1.2rem; /* Make it a bit larger */
    margin-bottom: calc(var(--spacing-unit, 8px) * 1.5);
}

.delete-account-danger-zone .danger-zone-warning {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit, 8px) * 2);
    color: var(--text-secondary);
}
body:not(.dark-mode) .delete-account-danger-zone .danger-zone-warning {
    color: var(--text-primary); /* Ensure readability */
}


.delete-account-danger-zone #delete-account-init-btn.btn.danger-btn {
    /* Styles for the initial "Delete My Account" button */
    font-weight: 600; /* Make it bolder */
    /* The full-width-btn class should handle width */
}


.delete-account-danger-zone .confirm-deletion-section {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--danger-color, #FF4D4F) 50%, transparent);
    border-radius: var(--border-radius-medium);
    /* background-color: color-mix(in srgb, var(--danger-color, #FF4D4F) 5%, var(--bg-modal, #2c2c2c) 95%); Retain from prev step if liked*/
}

.delete-account-danger-zone .confirm-deletion-section h4 {
    /* color: var(--danger-color, #FF4D4F); Retain from prev step if liked */
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.delete-account-danger-zone .confirm-deletion-section p {
    margin-bottom: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.delete-account-danger-zone #delete-confirm-handle-input {
    margin-bottom: 10px; 
}

.delete-account-danger-zone .delete-confirm-actions {
    display: flex;
    flex-direction: column; /* Stack buttons vertically for more space and less accidental clicks */
    gap: 10px;
    margin-top: 15px;
}
.delete-account-danger-zone .delete-confirm-actions .btn {
    width: 100%; /* Make confirmation buttons full width within their container */
}

.delete-account-danger-zone .delete-confirm-actions #delete-account-confirm-final-btn.btn.danger-btn {
    font-weight: bold; /* Extra emphasis on the final delete button */
}

body:not(.dark-mode) .danger-zone .btn.danger-btn:disabled {
    background-color: #e0e0e0 !important;
    color: #a0a0a0 !important;
    border-color: #e0e0e0 !important;
}
.account-actions-logout-section .btn#logout-btn-settings {
    /* Make logout more standard if it was small before */
    font-size: 0.875rem; /* Adjust to your standard button size */
    padding: 8px 15px;  /* Adjust */
}
body:not(.dark-mode) .btn.danger-btn.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: rgba(0, 0, 0, 0.6);
}

.card-links-pills-wrapper .card-links-title {
  margin-bottom: 4px; /* Space between title and pills */
  font-size: 0.8rem;  /* Match other info labels */
  width: 100%; /* Make title take full width */
}
.card-links-pills-wrapper .card-links-title.hidden {
    display: none;
}

.card-links-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  width: 100%; /* Ensure it takes available width for wrapping */
}
.card-links-pills-container.hidden {
    display: none;
}

.card-link-pill { /* Your existing pill styles are good, ensure they match var(--text-link) etc. */
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.75em; /* Can be same as card-info-item or slightly smaller */
  font-weight: 500;
  color: var(--text-link);
  background-color: var(--bg-code);
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius-medium);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.card-link-pill:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover-light);
  border-color: var(--primary-accent);
}

/* Ensure card-tags spans also have consistent styling if not already */
.card-tags span {
  background-color: var(--bg-input); /* Or your tag background */
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: var(--border-radius-small);
  margin: 2px; /* From previous version, good for spacing */
  display: inline-block;
  font-size: 0.75em;
  white-space: nowrap;
  border: 1px solid var(--border-color-input);
}
body:not(.dark-mode) .card-tags span { /* Example for light mode tag pill */
  background-color: var(--bg-hover-light);
  border-color: var(--border-color-light);
}

/* --- Date Range Filter Styles (Simplified - Rely on Browser Default Icon) --- */
.date-filter-section .sidebar-subsection {
  margin-bottom: 10px; 
}
.date-filter-section .sidebar-subsection:last-child {
  margin-bottom: 0;
}

.sidebar-date-input {
  width: 100%; 
  padding: 8px 10px;
  font-size: 0.875rem; 
  font-family: inherit; 
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color-input);
  border-radius: var(--border-radius-medium);
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* Remove appearance:none if it was added */
  /* -webkit-appearance: none; 
  -moz-appearance: none;   
  appearance: none;        */
  color-scheme: light; /* Default for picker UI */
}

.sidebar-date-input:focus {
  outline: none;
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring);
}

/* Allow browser default picker indicator to show */
/* Remove or comment out any aggressive ::-webkit-calendar-picker-indicator { display: none !important; } rules */
.sidebar-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7; /* You can still try to subtly style the default one if you wish */
  /* filter: ...; */ /* Remove custom filters if they were causing issues */
}
.sidebar-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}


/* Dark Mode specific overrides for date input */
body.dark-mode .sidebar-date-input {
  background-color: var(--figma-bg-input, #3a3a3a); 
  color: var(--figma-text-primary, #e0e0e0);
  border-color: var(--figma-border-light, #555);
  color-scheme: dark; /* Important hint for the calendar popup UI */
}

/* For dark mode, if the default WebKit icon is dark, you might still try a *simple* invert */
/* Test this carefully. If it breaks the picker, remove it. */
body.dark-mode .sidebar-date-input::-webkit-calendar-picker-indicator {
   filter: invert(1) brightness(0.9); /* Attempt to make a dark icon light */
   opacity: 0.8;
}
/* If the above filter causes issues, remove it entirely for dark mode too,
   and accept the browser's default rendering for the icon. */


body.dark-mode .sidebar-date-input::placeholder { 
    color: var(--text-secondary-dark-placeholder, #888);
}


.date-filter-actions {
  margin-top: 8px; 
  display: flex;
  gap: 8px; 
}
.date-filter-actions .btn { flex: 1 1 auto; }


/* General styling for filter popups (applies to both light and dark unless overridden) */
.ag-theme-quartz .ag-filter-wrapper,
.ag-theme-quartz-dark .ag-filter-wrapper {
  /* The main popup container for the filter */
  background-color: var(--ag-background-color, var(--bg-modal)); /* Use AG Grid's var, fallback to your modal bg */
  border: 1px solid var(--ag-secondary-border-color, var(--border-color-medium));
  border-radius: var(--ag-border-radius, var(--border-radius-medium));
  box-shadow: 0 4px 12px var(--shadow-color-medium); /* Your app's shadow */
}

.ag-theme-quartz .ag-filter-header-container,
.ag-theme-quartz-dark .ag-filter-header-container {
  /* Header of the filter (e.g., where "Contains" dropdown is) */
  /* AG Grid themes usually handle this well, but you can override if needed */
  /* border-bottom: 1px solid var(--ag-secondary-border-color, var(--border-color-light)); */
}

.ag-theme-quartz .ag-filter-body-wrapper,
.ag-theme-quartz-dark .ag-filter-body-wrapper {
  /* Body of the filter (where the input field is) */
  padding: var(--ag-spacing-sm, 8px) var(--ag-spacing-md, 12px); /* AG Grid variables for padding */
}

/* Styling for the input field within the filter */
.ag-theme-quartz .ag-filter-filter,
.ag-theme-quartz-dark .ag-filter-filter {
  width: 100%;
  padding: var(--ag-input-padding-y, 6px) var(--ag-input-padding-x, 8px);
  font-family: inherit; /* Your app's font */
  font-size: var(--ag-font-size, 0.875rem); /* Match AG Grid or your app's input font size */
  background-color: var(--ag-input-background-color, var(--bg-input));
  color: var(--ag-data-color, var(--text-primary));
  border: 1px solid var(--ag-input-border-color, var(--border-color-input));
  border-radius: var(--ag-border-radius, var(--border-radius-small)); /* Smaller radius for inner inputs */
  box-sizing: border-box;
}
.ag-theme-quartz .ag-filter-filter:focus,
.ag-theme-quartz-dark .ag-filter-filter:focus {
  border-color: var(--ag-input-focus-border-color, var(--primary-accent));
  box-shadow: 0 0 0 var(--ag-focus-ring-width, 2px) var(--ag-input-focus-box-shadow-color, var(--primary-accent-focus-ring));
  outline: none;
}


/* Styling for the select dropdown (e.g., "Contains", "Equals") in the filter */
.ag-theme-quartz .ag-select .ag-picker-field-wrapper,
.ag-theme-quartz-dark .ag-select .ag-picker-field-wrapper {
  background-color: var(--ag-input-background-color, var(--bg-input));
  border: 1px solid var(--ag-input-border-color, var(--border-color-input));
  border-radius: var(--ag-border-radius, var(--border-radius-small));
}
.ag-theme-quartz .ag-select .ag-picker-field-display,
.ag-theme-quartz-dark .ag-select .ag-picker-field-display {
  color: var(--ag-data-color, var(--text-primary));
  padding: var(--ag-input-padding-y, 6px) var(--ag-input-padding-x, 8px);
}
/* Arrow icon in the select */
.ag-theme-quartz .ag-select .ag-picker-field-icon,
.ag-theme-quartz-dark .ag-select .ag-picker-field-icon {
  color: var(--ag-icon-color, var(--text-secondary));
}


/* --- Dark Mode Specific Overrides for Filters --- */
/* Many of these might already be handled well by ag-theme-quartz-dark if its variables
   are aligned with your application's dark theme variables.
   These overrides are if you need more specific control. */

body.dark-mode .ag-theme-quartz-dark .ag-filter-wrapper {
  /* Example: If your modal background is different from AG Grid's default dark */
  background-color: var(--bg-modal); /* Your app's dark modal background */
  border-color: var(--border-color-medium); /* Your app's dark border */
  color: var(--text-primary); /* Your app's dark text color for the popup */
}

body.dark-mode .ag-theme-quartz-dark .ag-filter-body-wrapper {
    /* background-color: var(--bg-secondary); If you want a slightly different bg for the body */
}

body.dark-mode .ag-theme-quartz-dark .ag-filter-filter {
  background-color: var(--bg-input); /* Your app's dark input background */
  color: var(--text-primary);       /* Your app's dark input text color */
  border-color: var(--border-color-input); /* Your app's dark input border */
}
body.dark-mode .ag-theme-quartz-dark .ag-filter-filter::placeholder {
  color: var(--text-secondary); /* Your app's dark placeholder color */
}
body.dark-mode .ag-theme-quartz-dark .ag-filter-filter:focus {
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px var(--primary-accent-focus-ring);
}


body.dark-mode .ag-theme-quartz-dark .ag-select .ag-picker-field-wrapper {
  background-color: var(--bg-input);
  border-color: var(--border-color-input);
}
body.dark-mode .ag-theme-quartz-dark .ag-select .ag-picker-field-display {
  color: var(--text-primary);
}
body.dark-mode .ag-theme-quartz-dark .ag-select .ag-picker-field-icon {
  color: var(--text-secondary); /* Ensure dropdown arrow is visible */
}

/* Styling for the dropdown list items when the select is open */
/* This list appears in the ag-popup-child element */
.ag-theme-quartz-dark .ag-list /* Or more specific: .ag-select-list */ {
  background-color: var(--bg-card); /* Your dropdown/card background */
  border-color: var(--border-color-medium);
}
.ag-theme-quartz-dark .ag-list-item {
  color: var(--text-primary);
  padding: var(--ag-list-item-padding-y, 6px) var(--ag-list-item-padding-x, 10px);
}
.ag-theme-quartz-dark .ag-list-item.ag-active-item /* Hovered/focused item */ {
  background-color: var(--bg-hover-light); /* Your hover background */
}