@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Quicksand:wght@400;500;600&display=swap");

:root {
  /* --- Font Families --- */
  --font-app: "Poppins", sans-serif;
  --font-landing: "Quicksand", sans-serif;
  --font-landing-headings: "Poppins", sans-serif;
  --font-family: "Poppins", sans-serif; /* Original name */

  /* --- Dark Theme Colors --- */
  --bg-main-dark: #2f2a40;
  --bg-content-dark: #3c364d;
  --bg-element-dark: #4b445e;
  --text-primary-dark: #eadff6;
  --text-secondary-dark: #a99fbe;
  --border-color-dark: #5e5674;
  --shadow-color-dark: rgba(0, 0, 0, 0.25);
  --accent-primary-text-dark: #ffffff; /* Text on primary buttons */
  --accent-secondary-text-dark: #2a315e; /* For Blue Accent */
  --accent-tertiary-text-dark: #6c4b2c; /* For Orange Accent */
  --accent-quaternary-text-dark: #30545a; /* For Teal Accent */
  --accent-quinary-text-dark: #6f5a23; /* For Yellow Accent */
  --accent-positive-text-dark: #1a6a4f; /* For Green Accent */
  --accent-purple-text-dark: #563d7c; /* For Purple Accent */
  --placeholder-bg-dark: var(--bg-element-dark);
  /* START: Redesign Dark Mode Variables (for dashboard elements) */
  --bg-element-transparent-dark: rgba(75, 68, 94, 0.5); /* Opacity 0.5 */
  /* END: Redesign Dark Mode Variables */

  /* --- Light Theme Colors --- */
  --bg-main-light: #f7f5fa;
  --bg-content-light: #ffffff;
  --bg-element-light: #f0eef5;
  --text-primary-light: #4a4160;
  --text-secondary-light: #827899;
  --border-color-light: #e6e0f0;
  --shadow-color-light: rgba(90, 80, 110, 0.1);
  --accent-primary-text-light: #ffffff; /* Text on primary buttons */
  --accent-secondary-text-light: #252e55; /* For Blue Accent */
  --accent-tertiary-text-light: #705230; /* For Orange Accent */
  --accent-quaternary-text-light: #2b4f55; /* For Teal Accent */
  --accent-quinary-text-light: #7a601a; /* For Yellow Accent */
  --accent-positive-text-light: #1f7a5c; /* For Green Accent */
  --accent-purple-text-light: #6a4fab; /* For Purple Accent */
  --placeholder-bg-light: var(--bg-element-light);
  /* START: Redesign Light Mode Variables (for dashboard elements) */
  --bg-element-transparent-light: rgba(234, 230, 241, 0.5); /* Opacity 0.5 */
  /* END: Redesign Light Mode Variables */

  /* --- Accent Colors (Consolidated & Named) --- */
  --accent-pink: #f2a9bf; /* Primary for Gradients, Links */
  --accent-pink-hover: #e895ae;
  --accent-blue: #a4b3e3; /* Secondary for Gradients, Links */
  --accent-purple: #b8a1f2; /* Tertiary Accent */
  --accent-teal: #b0e0e6; /* Info/Success Accent */
  --accent-yellow: #f7e8a9; /* Warning/On Hold Accent */
  --accent-orange: #f9cb9c; /* Alert/Error Accent */
  --accent-green: #a8e6cf; /* Positive/Income Accent */
  /* Original names mapping (can be removed later if desired) */
  --accent-primary: var(--accent-pink);
  --accent-primary-hover: var(--accent-pink-hover);
  --accent-secondary: var(--accent-blue);
  --accent-tertiary: var(--accent-orange);
  --accent-quaternary: var(--accent-teal);
  --accent-quinary: var(--accent-yellow);
  --accent-alert: var(--accent-orange);
  --accent-positive: var(--accent-green);
  --accent-negative: var(--accent-orange);

  /* --- Layout & Spacing --- */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --shadow-subtle: 0 2px 6px var(--shadow-color, var(--shadow-color-dark));
  --shadow-raised: 0 6px 15px var(--shadow-color, var(--shadow-color-dark));
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* --- Text Colors (Landing Page Base) --- */
  --text-dark-landing: #2a2a3c;
  --text-light-landing: #f7f7f7;
  --gray-medium-landing: #a0a0a0;

  /* --- Auth Variables (Dynamic) --- */
  --auth-bg-dark: var(--bg-main-dark);
  --auth-form-bg-dark: var(--bg-content-dark);
  --link-button-color-dark: var(--accent-blue);
  --auth-bg-light: linear-gradient(135deg, #f7f5fa 0%, #ffffff 100%);
  --auth-form-bg-light: #ffffff;
  --link-button-color-light: var(--accent-pink);
  --auth-bg: var(--auth-bg-dark);
  --auth-form-bg: var(--auth-form-bg-dark);
  --link-button-color: var(--link-button-color-dark);

  /* --- Default to Dark Theme Variables (App) --- */
  --bg-main: var(--bg-main-dark);
  --bg-content: var(--bg-content-dark);
  --bg-element: var(--bg-element-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --border-color: var(--border-color-dark);
  --shadow-color: var(--shadow-color-dark);
  --accent-primary-text: var(
    --accent-primary-text-dark
  ); /* Text on original primary buttons */
  --accent-secondary-text: var(--accent-secondary-text-dark);
  --accent-tertiary-text: var(--accent-tertiary-text-dark);
  --accent-quaternary-text: var(--accent-quaternary-text-dark);
  --accent-quinary-text: var(--accent-quinary-text-dark);
  --accent-positive-text: var(--accent-positive-text-dark);
  --accent-purple-text: var(--accent-purple-text-dark);
  --pond-bg-gradient: linear-gradient(
    0deg,
    color-mix(in srgb, var(--accent-primary) 8%, transparent) 0%,
    transparent 100%
  );
  --pond-ripple-border: color-mix(
    in srgb,
    var(--accent-primary) 25%,
    transparent
  );
  --pond-text-color: color-mix(in srgb, var(--accent-primary) 70%, transparent);
  --list-item-hover-bg: color-mix(
    in srgb,
    var(--bg-content, var(--bg-content-dark)) 95%,
    var(--text-secondary, var(--text-secondary-dark)) 5%
  );
  --button-secondary-hover-bg: color-mix(
    in srgb,
    var(--bg-element, var(--bg-element-dark)) 85%,
    var(--text-primary, var(--text-primary-dark)) 15%
  );
  --input-focus-bg: color-mix(
    in srgb,
    var(--bg-content, var(--bg-content-dark)) 95%,
    var(--accent-primary) 5%
  );
  --focus-ring-color: color-mix(
    in srgb,
    var(--accent-primary) 20%,
    transparent
  );
  --task-title-completed-color: var(--text-secondary-dark);
  --note-card-bg: var(--bg-element-dark);
  --note-card-border: var(--border-color-dark);
  --note-card-hover-border: color-mix(
    in srgb,
    var(--border-color-dark) 150%,
    white
  );
  --calendar-grid-bg: var(--border-color-dark);
  --calendar-day-bg: var(--bg-content-dark);
  --calendar-day-other-month-bg: transparent;
  --calendar-day-other-month-opacity: 0.6;
  --calendar-day-today-bg: color-mix(
    in srgb,
    var(--accent-primary) 8%,
    var(--bg-content-dark)
  );
  --calendar-day-today-border: var(--accent-primary);
  --activity-log-item-border: var(--border-color-dark);
  --draggable-handle-color: var(--text-secondary-dark);
  --stopwatch-bg: var(--bg-element-dark);
  --lightbox-bg: var(--bg-content-dark);
  --lightbox-text: var(--text-primary-dark);
  --lightbox-nav-bg: rgba(0, 0, 0, 0.5);
  --lightbox-nav-color: white;
  --client-popup-bg: var(--bg-content-dark);
  --client-popup-border: var(--border-color-dark);
  --ref-grid-item-bg: var(--bg-element-dark);
  --markdown-blockquote-border: var(--border-color-dark);
  --markdown-code-bg: var(--bg-element-dark);
  --markdown-code-text: var(--text-primary-dark);
  --markdown-hr-color: var(--border-color-dark);
  --placeholder-bg: var(--placeholder-bg-dark);
  /* START: Redesign Dark Mode Variable Mapping */
  --bg-element-transparent: var(--bg-element-transparent-dark);
  /* END: Redesign Dark Mode Variable Mapping */
}

body.light-theme {
  --bg-main: var(--bg-main-light);
  --bg-content: var(--bg-content-light);
  --bg-element: var(--bg-element-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --border-color: var(--border-color-light);
  --shadow-color: var(--shadow-color-light);
  --accent-primary-text: var(--accent-primary-text-light);
  --accent-secondary-text: var(--accent-secondary-text-light);
  --accent-tertiary-text: var(--accent-tertiary-text-light);
  --accent-quaternary-text: var(--accent-quaternary-text-light);
  --accent-quinary-text: var(--accent-quinary-text-light);
  --accent-positive-text: var(--accent-positive-text-light);
  --accent-purple-text: var(--accent-purple-text-light);
  --pond-bg-gradient: linear-gradient(
    0deg,
    rgba(242, 169, 191, 0.06),
    transparent
  );
  --pond-ripple-border: rgba(242, 169, 191, 0.4);
  --pond-text-color: rgba(242, 169, 191, 0.7);
  --list-item-hover-bg: #f8f6fb;
  --button-secondary-hover-bg: #e6e0f0;
  --input-focus-bg: #fdfcff;
  --focus-ring-color: color-mix(
    in srgb,
    var(--accent-primary) 20%,
    transparent
  );
  --task-title-completed-color: var(--text-secondary-light);
  --note-card-bg: var(--bg-element-light);
  --note-card-border: var(--border-color-light);
  --note-card-hover-border: color-mix(
    in srgb,
    var(--border-color-light) 150%,
    black 5%
  );
  --calendar-grid-bg: var(--border-color-light);
  --calendar-day-bg: var(--bg-content-light);
  --calendar-day-other-month-bg: transparent;
  --calendar-day-other-month-opacity: 0.6;
  --calendar-day-today-bg: color-mix(
    in srgb,
    var(--accent-primary) 8%,
    var(--bg-content-light)
  );
  --calendar-day-today-border: var(--accent-primary);
  --activity-log-item-border: var(--border-color-light);
  --draggable-handle-color: var(--text-secondary-light);
  --stopwatch-bg: var(--bg-element-light);
  --lightbox-bg: var(--bg-content-light);
  --lightbox-text: var(--text-primary-light);
  --lightbox-nav-bg: rgba(255, 255, 255, 0.6);
  --lightbox-nav-color: var(--text-primary-light);
  --client-popup-bg: var(--bg-content-light);
  --client-popup-border: var(--border-color-light);
  --ref-grid-item-bg: var(--bg-element-light);
  --markdown-blockquote-border: var(--border-color-light);
  --markdown-code-bg: var(--bg-element-light);
  --markdown-code-text: var(--text-primary-light);
  --markdown-hr-color: var(--border-color-light);
  --placeholder-bg: var(--placeholder-bg-light);
  /* Dynamic Auth Vars for Light Theme */
  --auth-bg: var(--auth-bg-light);
  --auth-form-bg: var(--auth-form-bg-light);
  --link-button-color: var(--link-button-color-light);
  /* START: Redesign Light Mode Variable Mapping */
  --bg-element-transparent: var(--bg-element-transparent-light);
  /* END: Redesign Light Mode Variable Mapping */
}

/* --- Global Styles --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
  font-family: var(--font-app); /* Default to app font */
  background-color: var(--bg-main);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 14px;
  line-height: 1.6;
  /* START: Added from Redesign for background pattern */
  background-image: radial-gradient(
    var(--border-color) 0.7px,
    transparent 0.7px
  );
  background-size: 14.5px 14.5px;
  /* END: Added from Redesign */
}

/* Styles specific to the App View body */
body.app-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Styles specific to the Landing Page body */
body.landing-page {
  font-family: var(--font-landing);
  color: var(--text-dark-landing);
  background-color: #f7f5fa;
  overflow-x: hidden;
  display: block;
  height: auto;
  background-image: none; /* Remove dot pattern from landing page */
}
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4 {
  font-family: var(--font-landing-headings);
  font-weight: 700;
  line-height: 1.2;
}
body.landing-page #app-container,
body.landing-page #auth-container,
body.landing-page footer.app-footer,
body.landing-page #theme-toggle,
body.landing-page #modal-overlay {
  display: none !important;
}

/* === ORIGINAL APP STYLES (BASE) === */

/* --- Layout --- */
#app-container {
  display: flex;
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;
}
/* --- START: SIDEBAR STYLES - UNTOUCHED AS REQUESTED --- */
#sidebar {
  width: 200px;
  flex-shrink: 0;
  background-color: var(--bg-content);
  /* border-right: 1px solid var(--border-color); */
  padding: 0 var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: width 0.3s ease;
  position: relative;
  z-index: 20;
  box-shadow: 0 3px 10px var(--shadow-color);
}
#sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  height: 65px;
  position: relative;
}
#sidebar-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
  flex-shrink: 0;
  overflow: hidden;
}
#sidebar-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#sidebar-title {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
}
#sidebar-nav,
#sidebar-nav-bottom {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sidebar-nav li button,
#sidebar-nav-bottom li button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 10px var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, background 0.2s ease; /* Added background transition */
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar-nav li button i,
#sidebar-nav-bottom li button i {
  width: 20px;
  text-align: center;
  font-size: 1.1em;
  color: inherit;
  flex-shrink: 0;
}
#sidebar-nav li button span,
#sidebar-nav-bottom li button span {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebar-nav li button:hover,
#sidebar-nav-bottom li button:hover {
  background-color: var(--bg-element);
  color: var(--text-primary);
}
#sidebar .spacer {
  flex-grow: 1;
}
#logout-button:hover {
  background-color: color-mix(
    in srgb,
    var(--accent-tertiary) 20%,
    var(--bg-element)
  );
  color: var(--accent-tertiary-text);
}
.sidebar-toggle-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, color 0.2s ease;
  margin-left: auto;
}
.sidebar-toggle-btn:hover {
  color: var(--text-primary);
}
#sidebar-toggle {
  position: absolute; /* Position absolutely within header */
  right: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, color 0.2s ease;
  z-index: 2; /* Ensure it's above the border */
}
#sidebar.collapsed {
  width: 60px;
}
#sidebar.collapsed #sidebar-title,
#sidebar.collapsed #sidebar-nav button span,
#sidebar.collapsed #sidebar-nav-bottom button span {
  display: none;
}
#sidebar.collapsed #sidebar-nav button,
#sidebar.collapsed #sidebar-nav-bottom button {
  justify-content: center;
  padding: 10px 0;
}
#sidebar.collapsed #sidebar-nav button i,
#sidebar.collapsed #sidebar-nav-bottom button i {
  margin-right: 0;
}
#sidebar.collapsed .sidebar-toggle-btn {
  transform: rotate(180deg);
}
#sidebar.collapsed #sidebar-header {
  justify-content: center;
  padding: var(--spacing-md) 0;
  border-bottom: none; /* Hide the divider when collapsed */
  margin-bottom: 40px; /* Adjust spacing as needed */
}
#sidebar.collapsed #sidebar-logo {
  margin: 0;
}
#sidebar.collapsed #sidebar-toggle {
  right: 50%;
  transform: translateX(50%) translateY(-50%) rotate(180deg);
  top: calc(65px + 10px); /* Position below the header */
}
#sidebar-toggle:hover {
  color: var(--text-primary);
}
#sidebar:not(.collapsed) #sidebar-header {
  padding-right: calc(
    var(--spacing-sm) + 24px
  ); /* Add space for toggle button */
}
/* --- END: SIDEBAR STYLES - UNTOUCHED AS REQUESTED --- */

#content-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background-color: var(--bg-main);
}

/* --- Global Search --- */
.global-search-bar {
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  flex-shrink: 0;
  height: 65px;
  padding: 0 var(--spacing-lg);
}
.global-search-bar i {
  font-size: 1.1em;
  color: var(--text-secondary);
}
.global-search-bar input[type="search"] {
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-sm) 0;
  margin: 0;
  font-size: 1em;
  outline: none;
  box-shadow: none;
  color: var(--text-primary);
  height: auto;
  margin-bottom: 0;
}
.global-search-bar input[type="search"]::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.global-search-bar input[type="search"]:focus {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* --- Main Content Area --- */
/* --- Main Content Area --- */
#main-view-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md) var(--spacing-xl) 0 var(--spacing-xl); /* Increased side padding from md to xl */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#main-view-area > *:not(footer.app-footer) {
  /* All direct children except footer */
  flex-shrink: 0; /* Prevent them from shrinking */
}
#main-view-area > .view.active {
  /* Ensure active view can grow */
  flex-grow: 1;
}
#main-view-area::-webkit-scrollbar {
  width: 8px;
}
#main-view-area::-webkit-scrollbar-track {
  background: transparent;
}
#main-view-area::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* --- Views --- */
.view {
  display: none;
  opacity: 0;
  animation: viewFadeIn 0.3s ease-out forwards;
}
.view.active {
  display: block;
  opacity: 1;
}
@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
}
.view-header h2 {
  font-weight: 600;
  font-size: 1.875em;
  margin: 0;
  color: var(--text-primary);
}
.view-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* --- Common Elements --- */
/* MODIFIED: Removed border from .content-section and .settings-group */
.content-section,
.settings-group {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-lg);
  background-color: var(--bg-content);
  /*border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}
/* MODIFIED: Removed border from .content-card and .dashboard-card (original) */
.content-card,
.dashboard-card {
  /* This is your original .dashboard-card, not the new one */
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  background-color: var(--bg-content);
  /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  box-shadow: var(--shadow-subtle);
}
h3 {
  font-weight: 600;
  font-size: 1.3em;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}
h4 {
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}
label {
  font-weight: 500;
  font-size: 0.9em;
  margin-bottom: var(--spacing-sm);
  display: block;
  color: var(--text-secondary);
}
input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  font-family: var(--font-app);
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
  background-color: var(--bg-element-transparent);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  outline: none;
}

/* --- START: Project Modal Cover Image Input Styling --- */
.cover-image-input-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.cover-image-input-group input[type="url"] {
  flex: 3;
  margin-bottom: 0;
  min-width: 0;
}
.cover-image-input-group button {
  flex: 1;
  margin-bottom: 0;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: var(--accent-primary-text);
  border: none;
  white-space: nowrap;
  padding: 10px 18px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.cover-image-input-group button:hover {
  background: linear-gradient(
    90deg,
    var(--accent-pink-hover) 0%,
    color-mix(in srgb, var(--accent-blue) 90%, black 10%) 100%
  );
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .cover-image-input-group {
    gap: var(--spacing-sm);
  }
  .cover-image-input-group input[type="url"] {
    flex: 2;
  }
  .cover-image-input-group button {
    padding: 10px 12px;
    font-size: 0.9em;
  }
}
/* --- END: Project Modal Cover Image Input Styling --- */

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-primary);
  background-color: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 10px 18px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s,
    background 0.2s ease;
  line-height: 1.2;
  font-family: var(--font-app);
}
button:active {
  transform: scale(0.98);
}
button i {
  font-size: 1em;
  line-height: 1;
}
button.primary {
  background-color: var(--accent-primary);
  color: var(--accent-primary-text);
} /* Base primary */
button.primary:hover {
  background-color: var(--accent-primary-hover);
}
button.secondary {
  background-color: var(--bg-element);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
button.secondary:hover {
  background-color: var(--button-secondary-hover-bg);
}
button.icon-only {
  padding: 10px;
  min-width: auto;
}
button.icon-only i {
  margin-right: 0;
  font-size: 1.1em;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-element) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color);
  box-shadow: none !important;
  transform: none !important;
}
button.primary:disabled {
  background-color: color-mix(
    in srgb,
    var(--accent-primary) 50%,
    var(--bg-element)
  ) !important;
  color: color-mix(
    in srgb,
    var(--accent-primary-text) 50%,
    var(--text-secondary)
  ) !important;
}

/* --- Tags --- */
.tag {
  font-size: 0.75em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 15px;
  line-height: 1.4;
  display: inline-block;
  border: 1px solid transparent;
}
.tag-type {
  background-color: color-mix(in srgb, var(--accent-blue) 20%, transparent);
  color: var(--accent-blue);
  border-color: color-mix(in srgb, var(--accent-blue) 50%, transparent);
}
.tag-status-inprogress {
  background-color: color-mix(in srgb, var(--accent-orange) 20%, transparent);
  color: var(--accent-orange);
  border-color: color-mix(in srgb, var(--accent-orange) 50%, transparent);
}
.tag-status-completed {
  background-color: color-mix(in srgb, var(--accent-green) 20%, transparent);
  color: var(--accent-green);
  border-color: color-mix(in srgb, var(--accent-green) 50%, transparent);
}
.tag-status-onhold {
  background-color: color-mix(in srgb, var(--accent-yellow) 20%, transparent);
  color: var(--accent-yellow);
  border-color: color-mix(in srgb, var(--accent-yellow) 50%, transparent);
}
.tag-status-other,
.tag-status-idea,
.tag-status-cancelled,
.tag-status-published {
  background-color: var(--bg-element);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

/* --- Item List View (Original - applies to clients, finances, etc.) --- */
.item-list-view ul {
  list-style: none;
  padding: 0;
}
.item-list-view > ul > .list-item,
#project-detail-view .list-item,
#project-detail-view .task-item,
#project-detail-view .milestone-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
  border-radius: 0;
  margin-bottom: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  background-color: transparent;
}
.item-list-view > ul > .list-item:last-child,
#project-detail-view .list-item:last-child,
#project-detail-view .task-item:last-child,
#project-detail-view .milestone-item:last-child {
  border-bottom: none;
}

.item-list-view > ul > .list-item:hover,
#project-detail-view .list-item:hover,
#project-detail-view .task-item:hover,
#project-detail-view .milestone-item:hover {
  background-color: var(--list-item-hover-bg);
  border-color: var(--border-color);
}

.list-item .item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--border-radius);
  background-color: var(--bg-element);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1em;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-top: 2px;
}
.list-item .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-item .item-icon i {
  font-size: 1.2em;
}
.list-item .item-icon.income {
  background-color: color-mix(in srgb, var(--accent-positive) 15%, transparent);
  border-color: var(--accent-positive);
  color: var(--accent-positive);
}
.list-item .item-icon.expense {
  background-color: color-mix(in srgb, var(--accent-negative) 15%, transparent);
  border-color: var(--accent-negative);
  color: var(--accent-negative);
}
.list-item .item-icon.note-icon {
  background-color: color-mix(in srgb, var(--accent-quinary) 15%, transparent);
  border-color: var(--accent-quinary);
  color: var(--accent-quinary);
}
.list-item .item-icon.ref-icon {
  background-color: color-mix(
    in srgb,
    var(--accent-secondary) 15%,
    transparent
  );
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
  cursor: pointer;
}
.list-item .item-content {
  flex-grow: 1;
  min-width: 0;
}
.list-item .item-title {
  font-weight: 500;
  font-size: 1em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.list-item .item-title.client-link,
.list-item .item-title.project-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}
.list-item .item-title.client-link:hover,
.list-item .item-title.project-link:hover {
  text-decoration-color: var(--accent-primary);
}
.list-item .item-subtitle {
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.list-item .item-note-content {
  font-size: 0.9em;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.list-item .item-note-content p:first-child {
  margin-top: 0;
}
.list-item .item-note-content p:last-child {
  margin-bottom: 0;
}
.list-item .item-meta {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  padding-left: var(--spacing-md);
}
.list-item .item-meta .amount {
  font-weight: 600;
  font-size: 1em;
  display: block;
}
.list-item .item-meta .amount.income {
  color: var(--accent-positive);
}
.list-item .item-meta .amount.expense {
  color: var(--accent-negative);
}
.list-item .item-meta .date,
.list-item .item-meta time {
  font-size: 0.8em;
  margin-top: 2px;
  color: var(--text-secondary);
}
.list-item .item-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-left: var(--spacing-md);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-top: 2px;
}
.list-item:hover .item-actions {
  opacity: 1;
}
.list-item.task-item .item-actions {
  opacity: 1;
}
.list-item .item-actions button {
  font-size: 0.85em;
  padding: 6px 8px;
  background-color: var(--bg-element);
}
.list-item .item-actions button:hover {
  background-color: var(--button-secondary-hover-bg);
}
.list-item .item-actions button i {
  margin-right: 0;
  font-size: 0.9em;
}

/* --- Project Notes List Styling --- */
#project-notes-list .list-item {
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#project-notes-list .list-item:hover {
  background-color: var(--list-item-hover-bg);
  transform: translateX(4px);
}

#project-notes-list .list-item .item-content {
  flex-grow: 1;
  cursor: pointer;
}

#project-notes-list .list-item .item-note-content {
  cursor: pointer;
  color: var(--text-primary);
}

#project-notes-list .list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

#project-notes-list .list-item:hover::before {
  background-color: var(--accent-primary);
}

/* --- Projects View --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

/* === Project Card Redesign (Grid View) === */
.project-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-lg);
  background-color: var(--bg-content);
  /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-subtle);
  position: relative;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-raised);
}
.project-card-cover {
  height: 160px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-element);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #ffffff;
}
.project-card-initials {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.project-card.no-cover-image .project-card-initials {
  opacity: 1;
}
.project-card.no-cover-image .project-card-cover {
  background-image: none !important;
  background: linear-gradient(
    135deg,
    var(--bg-element),
    color-mix(in srgb, var(--bg-element) 80%, var(--text-secondary) 20%)
  );
  color: var(--text-primary);
}
.project-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 2;
  transition: background-color 0.3s ease;
  opacity: 1;
  pointer-events: none;
  display: block;
}
body.light-theme .project-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  opacity: 0.9;
}
.project-card.no-cover-image .project-card-overlay {
  display: none;
}
.project-card-cover-content {
  position: relative;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  z-index: 3;
  margin-top: auto;
  color: inherit;
}
.project-card-cover-content .project-title {
  font-weight: 600;
  font-size: 1.1em;
  word-break: break-word;
  margin-bottom: var(--spacing-xs);
}
.project-card:not(.no-cover-image) .project-card-cover-content .project-title {
  text-shadow: 1px 1px 3px rgb(0, 0, 0);
}
.project-card-tags-id-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}
.project-card-cover-content .project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  flex-grow: 1;
}
.project-card-cover-content .project-id {
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: var(--border-radius);
  flex-shrink: 0;
  white-space: nowrap;
}
.project-card:not(.no-cover-image) .project-card-cover-content .project-id {
  background-color: rgba(0, 0, 0, 0.85);
  color: rgba(255, 255, 255, 0.9);
}
body.light-theme
  .project-card:not(.no-cover-image)
  .project-card-cover-content
  .project-id {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--text-secondary-light);
}
.project-card.no-cover-image .project-card-cover-content .project-id {
  background-color: var(--bg-element);
  color: var(--text-secondary);
}
.project-card-cover-content .tag {
  font-size: 0.7em;
  padding: 2px 8px;
  border-radius: 10px;
  opacity: 0.95;
  border: 1px solid transparent;
  color: #fff;
}
.project-card.no-cover-image .project-card-cover-content .tag {
  opacity: 1;
}
.project-card-cover-content .tag-type {
  background-color: color-mix(in srgb, var(--accent-blue) 100%, transparent);
  color: var(--accent-secondary-text);
  border-color: color-mix(in srgb, var(--accent-blue) 60%, transparent);
}
.project-card-cover-content .tag-status-inprogress {
  background-color: color-mix(in srgb, var(--accent-orange) 100%, transparent);
  color: var(--accent-tertiary-text);
  border-color: color-mix(in srgb, var(--accent-orange) 60%, transparent);
}
.project-card-cover-content .tag-status-completed {
  background-color: color-mix(in srgb, var(--accent-green) 100%, transparent);
  color: var(--accent-positive-text, #1a6a4f);
  border-color: color-mix(in srgb, var(--accent-green) 60%, transparent);
}
.project-card-cover-content .tag-status-onhold {
  background-color: color-mix(in srgb, var(--accent-yellow) 100%, transparent);
  color: var(--accent-quinary-text);
  border-color: color-mix(in srgb, var(--accent-yellow) 60%, transparent);
}
.project-card-cover-content .tag-status-other,
.project-card-cover-content .tag-status-idea,
.project-card-cover-content .tag-status-cancelled,
.project-card-cover-content .tag-status-published {
  background-color: color-mix(in srgb, var(--text-secondary) 100%, transparent);
  color: var(--accent-secondary-text);
  border-color: color-mix(in srgb, var(--text-secondary) 50%, transparent);
}
.project-card-cover-content .goal-tag {
  background-color: color-mix(in srgb, var(--accent-purple) 100%, transparent);
  color: var(--accent-purple-text, #563d7c);
  border-color: color-mix(in srgb, var(--accent-purple) 60%, transparent);
}
.project-card:not(.no-cover-image) .project-card-cover-content .tag {
  opacity: 1;
  /*color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);*/
}
body.light-theme
  .project-card:not(.no-cover-image)
  .project-card-cover-content
  .tag {
  /* color: #eee;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); */
}
.project-card-info {
  padding: var(--spacing-md);
  padding-top: var(--spacing-sm);
  margin-top: auto;
}
.project-card.no-cover-image .project-card-info {
  padding-top: var(--spacing-md);
}
.project-card-info .progress-bar {
  height: 8px;
  width: 100%;
  background-color: var(--bg-element);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}
.project-card-info .progress-actions-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  margin-top: auto;
}
.project-card-info .progress-text {
  font-size: 0.8em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1;
}
.project-card .card-actions {
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.project-card:hover .card-actions {
  opacity: 1;
}
.project-card .card-actions button {
  font-size: 0.8em;
  padding: 4px 6px;
  background-color: var(--bg-element);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  flex-grow: 0;
}
.project-card .card-actions button:hover {
  background-color: var(--button-secondary-hover-bg);
}
@media (max-width: 768px) {
  .project-card .card-actions {
    opacity: 1;
    position: static;
    background: none;
    padding: 0;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .project-card-info .progress-actions-wrapper {
    margin-top: 0;
    position: relative;
    align-items: center;
    min-height: 28px;
  }
}
/* === End Project Card Redesign (Info Section) === */

/* === Project List Item Thumbnail Enhancement === */
.item-list-view .list-item .project-list-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
  font-size: 1.5em;
}
/* === End Project List Item Enhancement === */

/* --- Progress Bar Gradient --- */
.progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* --- Dashboard View (Original styles for reference, some are superseded by new dashboard styles) --- */
.dashboard-section h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.dashboard-section h3 i {
  font-size: 0.9em;
}
#dashboard-view .dashboard-section:has(#dashboard-deadlines-list) h3 i {
  color: var(--accent-yellow);
}
#dashboard-view .dashboard-section:has(#dashboard-activity-list) h3 i {
  color: var(--accent-blue);
}
#dashboard-view .dashboard-section:has(#dashboard-notes-grid) h3 i {
  color: var(--accent-purple);
}
.two-column-layout {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}
.column-main {
  flex: 2;
  min-width: 300px;
}
.column-sidebar {
  flex: 1;
  min-width: 250px;
}
#dashboard-deadlines-list .list-item .project-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}
#dashboard-deadlines-list .list-item .project-link:hover {
  text-decoration-color: var(--accent-primary);
}

/* --- Notes View --- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}
/* Original .note-card for Notes Tab - UNTOUCHED */
.note-card {
  background-color: var(--note-card-bg);
  /* border: 1px solid var(--note-card-border); */ /* REMOVED BORDER */
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  min-height: 150px;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-subtle); /* ADDED shadow */
}
.note-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
  border-color: var(--note-card-hover-border);
}
.note-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.note-card-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  border: 1px solid transparent;
  background-color: color-mix(in srgb, var(--accent-quinary) 15%, transparent);
  border-color: var(--accent-quinary);
  color: var(--accent-quinary);
}
.note-card-icon .fa-bolt {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.note-card-icon .fa-cube {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  background-color: color-mix(
    in srgb,
    var(--accent-secondary) 15%,
    transparent
  );
}
.note-card-title {
  font-weight: 600;
  font-size: 1.05em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.note-card-content { /* Used in the main Notes view */
  font-size: 0.9em;
  line-height: 1.5; /* Line height for calculations */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Clamp to 4 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-height should align with 4 lines */
  min-height: calc(1.5em * 4); /* Corrected calculation for 4 lines */
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  white-space: normal; /* Default, but ensure it's not pre-wrap if causing issues */
  /* flex-grow: 1; -- REMOVED as it's not strictly necessary for truncation and might interfere */
}
.note-card-content p:first-child {
  margin-top: 0;
}
.note-card-content p:last-child {
  margin-bottom: 0;
}

/* NEW CLASS: For simple 2-line truncation in dashboard recent notes */
.note-card-content-simple { /* Used in Dashboard Recent Notes */
  font-size: 0.75rem; /* Matches dashboard .sticky-note .note-content */
  line-height: 1.4;   /* Matches dashboard .sticky-note .note-content */
  opacity: 0.9;       /* Matches dashboard .sticky-note .note-content */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.4em * 2); /* Adjust min-height for 2 lines */
  /* Ensure it doesn't conflict with specific sticky-note content styles if nested */
}
.note-card-meta {
  font-size: 0.8em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-sm);
  margin-top: auto;
  color: var(--text-secondary);
}
.note-card-meta .project-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
  color: var(--text-secondary);
}
.note-card-meta .project-link:hover {
  text-decoration-color: var(--accent-primary);
  color: var(--text-primary);
}
.note-card-actions {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: var(--note-card-bg);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-subtle);
  z-index: 2;
}
.note-card:hover .note-card-actions {
  opacity: 1;
}
.note-card-actions button {
  font-size: 0.8em;
  padding: 4px 6px;
}

/* --- Project Detail View --- */
#project-detail-view .back-button {
  margin-bottom: var(--spacing-md);
}

/* === Project Detail Banner === */
.project-detail-banner {
  position: relative;
  min-height: 220px;
  background-color: var(--bg-element);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-lg);
  color: #ffffff;
  overflow: hidden;
}
.project-detail-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 1;
  pointer-events: none;
}
body.light-theme .project-detail-banner-overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
}
.project-detail-banner.no-cover-image {
  background-image: none !important;
  background: linear-gradient(135deg, var(--bg-content), var(--bg-element));
  color: var(--text-primary);
}
.project-detail-banner.no-cover-image .project-detail-banner-overlay {
  display: none;
}
.project-detail-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: var(--spacing-md);
}
.project-detail-banner.no-cover-image .project-detail-banner-content {
  align-items: flex-end;
}
.project-detail-banner .banner-title-code {
  flex-grow: 1;
  min-width: 0;
}
.project-detail-banner h2 {
  font-size: 2.2em;
  font-weight: 700;
  margin: 0 0 5px 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  word-break: break-word;
  color: inherit;
}
.project-detail-banner:not(.no-cover-image) h2 {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.project-detail-banner.no-cover-image h2 {
  text-shadow: none;
}
body.light-theme .project-detail-banner:not(.no-cover-image) h2 {
  color: var(--text-primary-light);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.project-detail-banner h2 i {
  font-size: 0.8em;
  opacity: 0.8;
}
.project-detail-banner .project-id {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1;
}
.project-detail-banner:not(.no-cover-image) .project-id {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
}
.project-detail-banner.no-cover-image .project-id {
  background-color: var(--bg-element);
  color: var(--text-secondary);
}
.project-detail-banner .detail-action-buttons {
  /**position: absolute;**/
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 3;
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.project-detail-banner .detail-action-buttons button {
  width: 32px;
  height: 32px;
  font-size: 0.9em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.project-detail-banner:not(.no-cover-image) .detail-action-buttons button {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.project-detail-banner:not(.no-cover-image)
  .detail-action-buttons
  button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}
.project-detail-banner.no-cover-image .detail-action-buttons button {
  background-color: var(--bg-element);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  backdrop-filter: none;
}
.project-detail-banner.no-cover-image .detail-action-buttons button:hover {
  background-color: var(--button-secondary-hover-bg);
}
body.light-theme
  .project-detail-banner:not(.no-cover-image)
  .detail-action-buttons
  button {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-primary-light);
}
body.light-theme
  .project-detail-banner:not(.no-cover-image)
  .detail-action-buttons
  button:hover {
  background-color: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.3);
}
@media (min-width: 769px) {
  .project-detail-banner:hover .detail-action-buttons {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .project-detail-banner .detail-action-buttons {
    opacity: 1;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  .project-detail-banner {
    padding-bottom: calc(var(--spacing-lg) + 30px);
  }
}
#project-detail-view .detail-header-wrapper {
  padding-top: var(--spacing-sm);
  border-bottom: none;
  margin-bottom: var(--spacing-lg);
  padding-bottom: 0;
}
.detail-meta {
  margin-bottom: var(--spacing-lg);
  font-size: 0.85em;
  gap: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .detail-meta {
    flex-direction: row;
    gap: var(--spacing-md);
  }
}
.read-more-btn {
  background: none;
  border: none;
  color: var(--accent-primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
  display: block;
  margin-top: var(--spacing-sm);
}
.read-more-btn:hover {
  text-decoration-color: currentColor;
}
.detail-progress {
  margin-top: var(--spacing-md);
  max-width: 400px;
  display: block;
}
.detail-progress .progress-bar {
  height: 10px;
  width: 100%;
  background-color: var(--bg-element);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}
.detail-progress .progress-text {
  font-size: 0.8em;
  color: var(--text-secondary);
}
/* === End Project Detail Banner === */

.detail-tabs {
  display: flex;
  gap: 1px;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.detail-tab {
  padding: 12px var(--spacing-md);
  cursor: pointer;
  background-color: var(--bg-element);
  color: var(--text-secondary);
  flex-grow: 1;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    border-width 0.2s;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.95em;
}
.detail-tab:hover {
  background-color: color-mix(
    in srgb,
    var(--bg-element) 80%,
    var(--text-primary) 20%
  );
  color: var(--text-primary);
}
.detail-tab.active {
  background-color: var(--bg-content);
  color: var(--accent-primary);
  font-weight: 600;
  border-bottom-color: var(--accent-primary);
  border-bottom-width: 4px;
}
.detail-tab i {
  margin-right: var(--spacing-sm);
}
.detail-tab-content {
  display: none;
  padding: var(--spacing-lg) 0 0 0;
  animation: viewFadeIn 0.3s ease-out forwards;
}
.detail-tab-content.active {
  display: block;
}
.detail-tab-content h3 {
  margin-bottom: var(--spacing-lg);
}

.detail-tab-content .detail-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}
.detail-tab-content .detail-tab-header h3 {
  margin-bottom: 0;
}
.detail-tab-content .detail-tab-header > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-left: auto;
  align-items: center;
}
.detail-tab-content .detail-tab-header .view-actions,
.detail-tab-content .detail-tab-header .button-group {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* --- Task List --- */

/* Styles for the actual item being dragged (the fallback element) */
.sortable-drag {
  opacity: 0.9 !important;
  background-color: var(--bg-element) !important;
  box-shadow: var(--shadow-raised) !important;
  /* Add width if the dragged element isn't sized correctly */
  /* Example: width: 90%; /* Or a fixed pixel value */
}

/* Styles for the original item in the list while dragging (optional, often not needed) */
.sortable-chosen {
  /* If original item is too visible, uncomment: */
  /* opacity: 0.2; */
}

/* Styles for the ghost (the placeholder where the item will drop) */
.sortable-ghost {
  opacity: 0.4;
  background: var(--bg-element);
  border: 2px dashed var(--accent-primary);
}

/*
   Ensures the fallback (dragged) element is positioned correctly
   relative to the cursor/finger and is above other content.
*/
body.sortable-fallback-dragging .sortable-fallback {
  position: fixed !important;
  left: 0; /* Updated by SortableJS */
  top: 0; /* Updated by SortableJS */
  z-index: 9999 !important;
  pointer-events: none !important;
  /* If width is an issue for the dragged item, you might set it here too
       or in .sortable-drag */
}

.task-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
}
#project-detail-view .task-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}
.task-item-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}
#project-detail-view .task-item:last-child {
  border-bottom: none;
}
.task-item .item-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.task-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.task-item .item-title {
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.2s, text-decoration 0.2s;
  cursor: text;
  flex-grow: 1;
}
.task-item input[type="checkbox"]:checked + .item-title {
  text-decoration: line-through;
  color: var(--task-title-completed-color);
  opacity: 0.7;
}
.task-item .drag-handle {
  cursor: grab;
  color: var(--draggable-handle-color);
  margin-right: var(--spacing-sm);
  opacity: 0.6;
  transition: opacity 0.2s;
  align-self: center;
}
.task-item:hover .drag-handle {
  opacity: 1;
}
.task-item .item-actions {
  margin-left: auto;
  align-self: center;
}
.subtask-list {
  list-style: none;
  padding: var(--spacing-sm) 0 0 0;
  margin-left: calc(16px + var(--spacing-sm) + var(--spacing-md));
  margin-top: var(--spacing-sm);
}
.subtask-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: 0.9em;
}
.subtask-item .item-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  gap: var(--spacing-sm);
}
.subtask-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.subtask-item .item-title {
  font-size: 0.95em;
}
.subtask-item input[type="checkbox"]:checked + .item-title {
  text-decoration: line-through;
  color: var(--task-title-completed-color);
  opacity: 0.7;
}
.subtask-item .item-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  margin-left: auto;
  opacity: 1;
  align-items: center;
}
.subtask-item .item-actions button {
  font-size: 0.8em;
  padding: 3px 5px;
}
.sortable-ghost {
  opacity: 0.4;
  background: var(--bg-element);
}

/* --- Inline Editing Styles --- */
.list-item .item-name-display,
.subtask-item .item-name-display {
  display: inline-block;
  flex-grow: 1;
  min-width: 0;
  vertical-align: middle;
  line-height: inherit;
}
.list-item .item-name-input,
.list-item .save-inline-btn,
.list-item .cancel-inline-btn,
.subtask-item .item-name-input,
.subtask-item .save-inline-btn,
.subtask-item .cancel-inline-btn {
  display: none;
}
.list-item.editing .item-name-display,
.subtask-item.editing .item-name-display {
  display: none !important;
}
.list-item.editing .item-name-input,
.subtask-item.editing .item-name-input {
  display: inline-block !important;
  flex-grow: 1;
}
.list-item.editing .save-inline-btn,
.list-item.editing .cancel-inline-btn,
.subtask-item.editing .save-inline-btn,
.subtask-item.editing .cancel-inline-btn {
  display: inline-flex !important;
}
.list-item.editing .edit-inline-btn,
.list-item.editing .delete-inline-btn,
.subtask-item.editing .edit-inline-btn,
.subtask-item.editing .delete-inline-btn {
  display: none !important;
}
.list-item .item-name-input,
.subtask-item .item-name-input {
  padding: 2px 6px;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--text-primary);
  background-color: var(--bg-element);
  border: 1px solid var(--accent-primary);
  border-radius: var(--border-radius);
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-color);
  height: auto;
  line-height: inherit;
  min-width: 100px;
  vertical-align: middle;
}
.edit-inline-btn,
.save-inline-btn,
.cancel-inline-btn {
  padding: 4px 6px;
  font-size: 0.8em;
}
.save-inline-btn {
  color: var(--accent-positive);
  border-color: var(--accent-positive);
}
.save-inline-btn:hover {
  background-color: color-mix(
    in srgb,
    var(--accent-positive) 10%,
    var(--button-secondary-hover-bg)
  );
}
.cancel-inline-btn {
  color: var(--accent-negative);
  border-color: var(--accent-negative);
}
.cancel-inline-btn:hover {
  background-color: color-mix(
    in srgb,
    var(--accent-negative) 10%,
    var(--button-secondary-hover-bg)
  );
}
.list-item.editing .item-actions,
.subtask-item.editing .item-actions {
  opacity: 1 !important;
}
.settings-management-list li {
  display: flex;
  align-items: center;
}
.settings-management-list li > .item-name-display,
.settings-management-list li > .item-name-input {
  flex-grow: 1;
  min-width: 0;
  margin-right: var(--spacing-sm);
}
.subtask-item .item-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
}
.subtask-item .item-content .item-name-display,
.subtask-item .item-content .item-name-input {
  flex-grow: 1;
  min-width: 0;
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}
.subtask-item .item-content label.item-title {
  display: inline-block;
  vertical-align: middle;
}

/* --- Stopwatch --- */
#stopwatch-section {
  background-color: var(--stopwatch-bg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
}
#stopwatch-display {
  font-size: 3em;
  font-weight: 600;
  font-family: monospace;
  color: var(--text-primary);
}
#stopwatch-controls button {
  min-width: 100px;
}

/* --- Growth View & Goal Detail --- */
.goal-card {
  background-color: var(
    --bg-content
  ); /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-subtle); /* ADDED shadow */
}
.goal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
  border-color: var(--note-card-hover-border);
}
.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.goal-card-title {
  font-weight: 600;
  font-size: 1.2em;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}
.goal-card-status {
  font-size: 0.8em;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  background-color: var(--bg-element);
  color: var(--text-secondary);
  white-space: nowrap;
}
.goal-card-status.active {
  background-color: color-mix(in srgb, var(--accent-blue) 25%, transparent);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
}
.goal-card-status.achieved {
  background-color: color-mix(in srgb, var(--accent-green) 25%, transparent);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}
.goal-card-status.paused {
  background-color: color-mix(in srgb, var(--accent-yellow) 25%, transparent);
  color: var(--accent-yellow);
  border: 1px solid var(--accent-yellow);
}
.goal-card-progress {
  font-size: 0.9em;
  color: var(--text-secondary);
}
.goal-card-description {
  font-size: 0.9em;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#goals-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}
#goal-detail-view .back-button {
  margin-bottom: var(--spacing-md);
}
.goal-detail-header {
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.goal-detail-header h2 {
  margin-bottom: 0;
  font-size: 1.9em;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-primary);
  flex-grow: 1;
}
.goal-detail-header .edit-goal-btn {
  flex-shrink: 0;
  margin-top: 4px;
}
.goal-detail-meta {
  margin-bottom: var(--spacing-lg);
  font-size: 0.85em;
  gap: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--text-secondary);
}
.goal-detail-description {
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
  font-size: 0.95em;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.milestones-list {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}
#project-detail-view .milestone-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
}
.milestone-item:last-child {
  border-bottom: none;
}
.milestone-item-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.milestone-item-content {
  flex-grow: 1;
}
.milestone-item-title {
  font-weight: 500;
  font-size: 1.05em;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}
.milestone-item-status {
  font-size: 0.8em;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  background-color: var(--bg-element);
  color: var(--text-secondary);
  display: inline-block;
  margin-right: var(--spacing-sm);
}
.milestone-item-status.notstarted {
}
.milestone-item-status.inprogress {
  background-color: color-mix(in srgb, var(--accent-orange) 25%, transparent);
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
}
.milestone-item-status.completed {
  background-color: color-mix(in srgb, var(--accent-green) 25%, transparent);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}
.milestone-item-resource {
  font-size: 0.85em;
  color: var(--text-secondary);
}
.milestone-item-resource a {
  color: var(--accent-primary);
  text-decoration: none;
}
.milestone-item-resource a:hover {
  text-decoration: underline;
}
.milestone-item-notes {
  font-size: 0.9em;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 2px solid var(--border-color);
}
.milestone-item-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  margin-left: var(--spacing-md);
  align-self: center;
}
.milestone-item-actions button {
  font-size: 0.85em;
  padding: 6px 8px;
  background-color: var(--bg-element);
}
.milestone-item-actions button:hover {
  background-color: var(--button-secondary-hover-bg);
}
.milestone-item-actions button i {
  margin-right: 0;
  font-size: 0.9em;
}
#resources-list-container ul {
  list-style: none;
  padding: 0;
}
#resources-list-container .list-item .item-icon {
  font-size: 1.2em;
}
#resources-list-container .list-item .item-subtitle a {
  color: var(--accent-primary);
  text-decoration: none;
}
#resources-list-container .list-item .item-subtitle a:hover {
  text-decoration: underline;
}
#resources-list-container .list-item .item-tags {
  font-size: 0.8em;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}
#resources-list-container .list-item .item-tags .tag {
  font-size: 0.9em;
  background-color: var(--bg-element);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  margin-right: var(--spacing-xs);
}

/* --- Calendar View --- */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}
.calendar-header h3 {
  margin: 0;
  font-size: 1.4em;
  color: var(--text-primary);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--calendar-grid-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-top: var(--spacing-md);
}
.calendar-day-header {
  text-align: center;
  font-weight: 600;
  padding: 8px 5px;
  background-color: var(--bg-element);
  font-size: 0.8em;
  color: var(--text-secondary);
}
.calendar-day {
  min-height: 100px;
  padding: var(--spacing-sm);
  background-color: var(--calendar-day-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease;
  font-size: 0.85em;
}
.calendar-day.other-month {
  background-color: var(--calendar-day-other-month-bg);
  opacity: var(--calendar-day-other-month-opacity);
}
.calendar-day .day-number {
  display: block;
  text-align: right;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--text-secondary);
}
.calendar-day.today {
  background-color: var(--calendar-day-today-bg);
  border: 1px solid var(--calendar-day-today-border);
  position: relative;
  margin: -1px;
}
.calendar-day.today .day-number {
  color: var(--accent-primary);
  font-weight: 700;
}
.calendar-events {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.calendar-event {
  font-size: 0.9em;
  padding: 2px 5px;
  border-radius: var(--border-radius);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.event-deadline {
  background-color: var(--accent-orange);
  color: var(--accent-tertiary-text);
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.modal-content {
  background-color: var(--bg-content);
  padding: var(--spacing-lg);
  border-radius: var(
    --border-radius-lg
  ); /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  box-shadow: var(--shadow-raised);
  width: 90%;
  max-width: 500px;
  transform: scale(0.95);
  transition: transform 0.25s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-overlay.active .modal-content {
  transform: scale(1);
}
.modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}
.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.4em;
  font-weight: 600;
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 5px;
}
.modal-body {
  flex-grow: 1;
  margin-bottom: var(--spacing-lg);
  overflow-y: auto;
  padding-right: 5px;
  margin-right: -5px;
}
.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-lg);
}

/* --- Settings View --- */
.settings-group h3 {
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.settings-group h3 i {
  color: var(--text-secondary);
  font-size: 0.9em;
}
.settings-group label {
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.settings-group p {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}
.settings-group p strong {
  color: var(--accent-alert);
}
.settings-group input[readonly] {
  background-color: var(--bg-element);
  opacity: 0.7;
  cursor: default;
}
.settings-group .button-group {
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.settings-management-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--bg-element);
}
.settings-management-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}
.settings-management-list li:last-child {
  border-bottom: none;
}
.settings-management-list .item-actions {
  opacity: 1;
  margin-left: var(--spacing-md);
}
.settings-management-list .item-actions button {
  font-size: 0.8em;
  padding: 4px 6px;
}

/* --- Theme Toggle Button --- */
/*#theme-toggle {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background: var(--bg-element);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  font-size: 1.2em;
  box-shadow: var(--shadow-raised);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
#theme-toggle:hover {
  color: var(--text-primary);
  background-color: var(--button-secondary-hover-bg);
  transform: scale(1.1);
}*/

/* --- BasicLightbox --- */
.basicLightbox {
  z-index: 1010;
}
.basicLightbox__placeholder {
  background: var(--lightbox-bg) !important;
  color: var(--lightbox-text) !important;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto; /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  box-shadow: var(--shadow-raised);
}
.basicLightbox__placeholder:has(> .project-popup-lightbox-content) {
  /*background: transparent !important; /* Remove background */
  /*padding: 0 !important; /* Remove padding from the placeholder itself if content handles it */
  box-shadow: none !important; /* Remove shadow from placeholder if content has its own */
  /* If your .project-popup-lightbox-content or its children provide their own rounded corners,
     you might not need to override border-radius here. */
}
.basicLightbox__placeholder img {
  max-width: 100%;
  max-height: calc(90vh - 100px);
  display: block;
  margin: 0 auto;
}
.basicLightbox__placeholder iframe {
  width: 100%;
  height: calc(90vh - 60px);
  border: none;
}
.basicLightbox__placeholder h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}
.basicLightbox__placeholder p {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}
.basicLightbox__placeholder a {
  color: var(--accent-primary);
}
.basicLightbox__placeholder small {
  color: var(--text-secondary);
}
.basicLightbox__close-button {
  background: rgba(0, 0, 0, 0.3) !important;
  color: white !important;
}
.lightbox-gallery-content {
  position: relative;
}
.basicLightbox__placeholder .lightbox-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  z-index: 10;
  line-height: 1;
  padding: 0;
  gap: 0;
  font-weight: normal;
}
.basicLightbox__placeholder .lightbox-gallery-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 1);
}
.basicLightbox__placeholder .lightbox-gallery-prev {
  left: var(--spacing-md);
}
.basicLightbox__placeholder .lightbox-gallery-next {
  right: var(--spacing-md);
}
body.light-theme .basicLightbox__placeholder .lightbox-gallery-nav {
  background: rgba(255, 255, 255, 0.4);
  color: rgba(0, 0, 0, 0.6);
}
body.light-theme .basicLightbox__placeholder .lightbox-gallery-nav:hover {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.9);
}
.lightbox-gallery-image-container {
  text-align: center;
}
.lightbox-gallery-description {
  margin-top: var(--spacing-md);
  text-align: center;
  font-size: 0.9em;
  color: var(--text-secondary);
}

/* --- Popups --- */
.client-popup-content,
.project-popup-content {
  padding: var(--spacing-lg);
  background-color: var(--client-popup-bg);
  border-radius: var(
    --border-radius
  ); /* border: 1px solid var(--client-popup-border); */ /* REMOVED BORDER */
  max-width: 450px;
  box-shadow: var(--shadow-raised); /* ADDED shadow */
}
.client-popup-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.client-popup-pfp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--bg-element);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.5em;
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
.client-popup-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.client-popup-info h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.4em;
}
.client-popup-info p {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-secondary);
}
.client-popup-section {
  margin-bottom: var(--spacing-lg);
}
.client-popup-section h4 {
  font-size: 1.1em;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}
.client-popup-section p {
  font-size: 0.95em;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.client-popup-section ul {
  list-style: none;
  padding: 0;
}
.client-popup-section li {
  font-size: 0.9em;
  margin-bottom: var(--spacing-xs);
}
.client-popup-section li a {
  color: var(--accent-primary);
  text-decoration: none;
}
.client-popup-section li a:hover {
  text-decoration: underline;
}
.project-popup-header {
  margin-bottom: var(--spacing-md);
}
.project-popup-header h3 {
  font-size: 1.4em;
  margin-bottom: var(--spacing-xs);
}
.project-popup-meta {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}
.project-popup-meta span {
  margin-right: var(--spacing-md);
}
.project-popup-actions {
  text-align: right;
  margin-top: var(--spacing-lg);
}

/* --- AI Suggestions --- */
#ai-suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}
#ai-suggestions-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}
#ai-suggestions-list li:last-child {
  border-bottom: none;
}
#ai-suggestions-list input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent-primary);
}
#ai-suggestions-list label {
  margin: 0;
  font-weight: normal;
  color: var(--text-primary);
  flex-grow: 1;
  cursor: pointer;
}

/* --- Markdown --- */
.markdown-content blockquote {
  border-left: 3px solid var(--markdown-blockquote-border);
  padding-left: var(--spacing-md);
  margin: var(--spacing-md) 0;
  color: var(--text-secondary);
  font-style: italic;
}
.markdown-content code {
  background-color: var(--markdown-code-bg);
  color: var(--markdown-code-text);
  padding: 2px 5px;
  border-radius: var(--border-radius);
  font-size: 0.9em;
  font-family: monospace;
}
.markdown-content pre {
  background-color: var(--markdown-code-bg);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin: var(--spacing-md) 0;
}
.markdown-content pre code {
  background-color: transparent;
  padding: 0;
}
.markdown-content ul,
.markdown-content ol {
  padding-left: var(--spacing-lg);
  margin: var(--spacing-sm) 0;
}
.markdown-content li {
  margin-bottom: var(--spacing-xs);
}
.markdown-content hr {
  border: none;
  border-top: 1px solid var(--markdown-hr-color);
  margin: var(--spacing-lg) 0;
}
.markdown-content a {
  color: var(--accent-primary);
  text-decoration: none;
}
.markdown-content a:hover {
  text-decoration: underline;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  line-height: 1.3;
}
.markdown-content h1 {
  font-size: 1.6em;
}
.markdown-content h2 {
  font-size: 1.4em;
}
.markdown-content h3 {
  font-size: 1.2em;
}
.markdown-content h4 {
  font-size: 1.1em;
}
.markdown-content p {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

/* --- Reference Gallery --- */
.reference-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-lg);
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-md);
}
.reference-gallery-item {
  background-color: var(--ref-grid-item-bg);
  border-radius: var(
    --border-radius
  ); /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow-subtle); /* ADDED shadow */
}
.reference-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}
.reference-icon-container {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reference-icon-container .item-icon {
  font-size: 2.5em;
  margin: 0;
  border-radius: var(--border-radius);
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
}
.reference-icon-container .item-icon i {
  line-height: 1;
}
.reference-image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.reference-thumbnail-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.reference-gallery-item:hover .reference-thumbnail-img {
  transform: scale(1.05);
}
.reference-gallery-item .item-content {
  padding: var(--spacing-sm);
  text-align: left;
  flex-grow: 1;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reference-gallery-item .item-title {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-gallery-item .item-subtitle {
  font-size: 0.8em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-gallery-item .item-actions {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  display: flex;
  gap: var(--spacing-xs);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: var(--border-radius);
  padding: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.reference-gallery-item:hover .item-actions {
  opacity: 1;
}
.reference-gallery-item .item-actions button,
.reference-gallery-item .item-actions a {
  font-size: 0.8em;
  padding: 4px 6px;
  background-color: var(--bg-element);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.reference-gallery-item .item-actions button:hover,
.reference-gallery-item .item-actions a:hover {
  background-color: var(--button-secondary-hover-bg);
}
.reference-gallery-item .item-actions i {
  margin-right: 0;
  font-size: 0.9em;
}
.reference-gallery-grid:empty {
  display: block;
}
.reference-gallery-grid:not(:empty) + .placeholder-text {
  display: none;
}
.reference-gallery-grid:empty + .placeholder-text {
  display: block;
  grid-column: 1 / -1;
  text-align: center;
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  padding: 10px 15px;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: var(--shadow-subtle);
  align-items: center;
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
  height: 60px;
}
.mobile-sidebar-toggle-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  color: var(--text-secondary);
  padding: 8px;
  cursor: pointer;
  z-index: 20;
}
.mobile-sidebar-toggle-btn:active,
.mobile-sidebar-toggle-btn:focus {
  outline: none;
  color: var(--text-primary);
}
.mobile-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}
.mobile-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.mobile-logo span {
  font-weight: 600;
  font-size: 1.3em;
  color: var(--text-primary);
}
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* === END: ORIGINAL APP STYLES === */

/* === START: LANDING PAGE STYLES === */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
header.landing-header {
  background-color: var(--bg-content-light);
  box-shadow: 0 2px 20px rgba(47, 42, 64, 0.1);
  position: fixed;
  width: 100%;
  z-index: 100;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
header.landing-header .logo img {
  height: 45px;
  width: 45px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-text {
  font-family: var(--font-landing-headings);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--text-primary-light);
  letter-spacing: -0.5px;
}
.logo-text span {
  color: var(--accent-pink);
  position: relative;
}
.logo-text span::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  border-radius: 3px;
}
nav.landing-nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
  align-items: center;
  margin: 0;
  padding: 0;
}
nav.landing-nav a {
  text-decoration: none;
  color: var(--text-primary-light);
  font-weight: 600;
  transition: all 0.3s;
  position: relative;
  font-family: var(--font-app);
}
nav.landing-nav a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-pink);
  transition: width 0.3s;
}
nav.landing-nav a:hover::after {
  width: 100%;
}
.nav-cta {
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: white !important;
  padding: 10px 25px;
  border-radius: 30px;
  transition: all 0.3s;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(242, 169, 191, 0.3);
  text-decoration: none;
  display: inline-block;
  border: none;
  font-family: var(--font-app);
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(242, 169, 191, 0.4);
}
.nav-cta::after {
  display: none;
}
.hero {
  padding: 180px 0 100px;
  background: linear-gradient(135deg, #f7f5fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/4625073/watercolor-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  z-index: 0;
}
.hero-content {
  display: flex;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 1;
}
.hero-text {
  flex: 1;
}
.hero-image {
  flex: 1.1;
  display: flex;
  justify-content: center;
  position: relative;
}
.hero-image::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent-pink);
  border-radius: 15px;
  z-index: -1;
  opacity: 0.5;
}
.hero-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 25px 50px rgba(47, 42, 64, 0.15);
  transform: rotate(-2deg);
  transition: transform 0.5s;
  border: 1px solid var(--border-color-light);
}
.hero-image:hover img {
  transform: rotate(0deg);
}
.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 25px;
  color: var(--text-primary-light);
  line-height: 1.1;
}
.hero h1 span {
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}
.hero p {
  font-size: 1.3rem;
  margin-bottom: 35px;
  color: var(--text-secondary-light);
  max-width: 600px;
  font-weight: 500;
  font-family: var(--font-landing);
}
.cta-button {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: white;
  padding: 15px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(242, 169, 191, 0.4);
  position: relative;
  overflow: hidden;
  font-family: var(--font-app);
}
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(242, 169, 191, 0.5);
}
.cta-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-blue) 0%,
    var(--accent-purple) 100%
  );
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.cta-button:hover::after {
  opacity: 1;
}
.cta-button span {
  position: relative;
  z-index: 2;
}
.hero-cta-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.hero-cta-note {
  font-size: 0.9rem;
  color: var(--text-secondary-light);
  max-width: 200px;
  font-family: var(--font-landing);
}
.problem-solution {
  padding: 100px 0;
  background-color: var(--bg-element-light);
  position: relative;
}
.problem-solution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/4625073/dots-bg.png");
  background-size: 300px;
  opacity: 0.03;
  z-index: 0;
}
.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}
.section-header h2 {
  font-size: 2.8rem;
  color: var(--text-primary-light);
  margin-bottom: 20px;
}
.section-header h2 span {
  position: relative;
}
.section-header h2 span::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: rgba(242, 169, 191, 0.3);
  z-index: -1;
  border-radius: 3px;
}
.section-header p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-secondary-light);
  font-size: 1.1rem;
  font-family: var(--font-landing);
}
.ps-container {
  display: flex;
  gap: 40px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.problem,
.solution {
  flex: 1;
  padding: 40px;
  border-radius: 15px;
  transition: transform 0.3s;
}
.problem:hover,
.solution:hover {
  transform: translateY(-5px);
}
.problem {
  background-color: var(--bg-content-light);
  border-left: 8px solid var(--accent-pink);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}
.solution {
  background: linear-gradient(
    135deg,
    var(--bg-main-dark) 0%,
    var(--bg-content-dark) 100%
  );
  color: var(--text-light-landing);
  border-left: 8px solid var(--accent-blue);
  box-shadow: 0 5px 30px rgba(47, 42, 64, 0.2);
}
.problem h3,
.solution h3 {
  font-size: 1.8rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.problem h3 {
  color: var(--text-primary-light);
}
.solution h3 {
  color: var(--text-light-landing);
}
.problem ul,
.solution ul {
  list-style: none;
}
.problem li,
.solution li {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
  font-size: 1.1rem;
  font-family: var(--font-landing);
}
.problem li::before,
.solution li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.problem li::before {
  background-color: var(--accent-pink);
  opacity: 0.3;
}
.solution li::before {
  background-color: var(--accent-blue);
  opacity: 0.5;
}
.features {
  padding: 100px 0;
  background-color: var(--bg-main-light);
  position: relative;
  overflow: hidden;
}
.features::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(164, 179, 227, 0.1) 0%,
    rgba(164, 179, 227, 0) 70%
  );
  z-index: 0;
}
.features .section-header h2 span::after {
  background-color: rgba(164, 179, 227, 0.3);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}
.feature-card {
  background-color: white;
  border-radius: 15px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s; /* border: 1px solid var(--border-color-light); */ /* REMOVED BORDER */
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  transition: height 0.3s;
}
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-card:hover::after {
  height: 10px;
}
.feature-icon {
  font-size: 2.8rem;
  margin-bottom: 25px;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary-light);
}
.feature-card p {
  color: var(--text-secondary-light);
  font-family: var(--font-landing);
}
.for-artists {
  padding: 100px 0;
  background-color: var(--bg-element-light);
  position: relative;
}
.for-artists::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/4625073/squiggles-bg.png");
  background-size: 400px;
  opacity: 0.03;
  z-index: 0;
}
.for-artists .section-header h2 span::after {
  background-color: rgba(184, 161, 242, 0.3);
}
.artist-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}
.artist-type {
  background-color: white;
  padding: 15px 30px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s; /* border: 1px solid var(--border-color-light); */ /* REMOVED BORDER */
  color: var(--text-primary-light);
  font-family: var(--font-app);
  font-size: 1rem;
}
.artist-type:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background: linear-gradient(90deg, var(--bg-main-light) 0%, white 100%);
}
.artist-type i {
  font-size: 1.3rem;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.beta {
  padding: 100px 0;
  background: linear-gradient(
    135deg,
    var(--bg-main-dark) 0%,
    var(--bg-content-dark) 100%
  );
  color: var(--text-light-landing);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.beta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(242, 169, 191, 0.08) 0%,
    rgba(242, 169, 191, 0) 70%
  );
  z-index: 0;
}
.beta .container {
  position: relative;
  z-index: 1;
}
.beta h2 {
  color: white;
  margin-bottom: 25px;
  font-size: 2.8rem;
}
.beta h2 span {
  position: relative;
}
.beta h2 span::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: rgba(164, 179, 227, 0.3);
  z-index: -1;
  border-radius: 3px;
}
.beta p {
  max-width: 700px;
  margin: 0 auto 35px;
  font-size: 1.2rem;
  font-family: var(--font-landing);
}
.beta-features {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  flex-wrap: wrap;
}
.beta-feature {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 25px;
  border-radius: 15px;
  max-width: 250px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
  text-align: center;
}
.beta-feature:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.beta-feature i {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--accent-pink);
  display: block;
}
.beta-feature h3 {
  margin-bottom: 10px;
  color: white;
  font-size: 1.2rem;
}
.beta-feature p {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 0;
  font-family: var(--font-landing);
}
.cta-section {
  padding: 80px 0;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/4625073/sparkles-bg.png");
  background-size: 300px;
  opacity: 0.1;
  z-index: 0;
}
.cta-container {
  position: relative;
  z-index: 1;
}
.cta-section h2 {
  color: white;
  margin-bottom: 20px;
  font-size: 2.8rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cta-section p {
  max-width: 600px;
  margin: 0 auto 30px;
  color: white;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: var(--font-landing);
}
.cta-button.white {
  background: white;
  color: var(--text-primary-light);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.cta-button.white:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.cta-button.white::after {
  background: rgba(255, 255, 255, 0.8);
}
footer.landing-footer {
  background-color: var(--bg-main-dark);
  color: var(--text-light-landing);
  padding: 70px 0 30px;
  position: relative;
}
footer.landing-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/4625073/dots-bg-light.png");
  background-size: 300px;
  opacity: 0.03;
  z-index: 0;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
  z-index: 1;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-logo {
  flex: 1;
  min-width: 250px;
}
.footer-logo .logo-text {
  color: white;
}
.footer-logo p {
  margin-top: 20px;
  max-width: 300px;
  opacity: 0.7;
  font-family: var(--font-landing);
}
.social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.3s;
  text-decoration: none;
}
.social-links a:hover {
  background-color: var(--accent-pink);
  transform: translateY(-3px);
}
.footer-links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.footer-links h4 {
  margin-bottom: 20px;
  color: white;
  font-size: 1.1rem;
  font-family: var(--font-landing-headings);
}
.footer-links ul {
  list-style: none;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 0.95rem;
  font-family: var(--font-app);
}
.footer-links a:hover {
  color: white;
  padding-left: 5px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}
.floating {
  position: absolute;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}
.floating-1 {
  top: 20%;
  left: 5%;
  animation: float 6s ease-in-out infinite;
}
.floating-2 {
  bottom: 15%;
  right: 8%;
  animation: float 8s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes float {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(5px, -15px) rotate(5deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

/* Landing Page Responsive */
@media (max-width: 1200px) {
  body.landing-page .hero h1 {
    font-size: 3rem;
  }
}
@media (max-width: 992px) {
  body.landing-page .hero-content {
    flex-direction: column;
    text-align: center;
  }
  body.landing-page .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.landing-page .hero-image {
    margin-top: 50px;
  }
  body.landing-page .hero-image::before {
    top: -15px;
    right: -15px;
  }
  body.landing-page .ps-container {
    flex-direction: column;
  }
  body.landing-page .problem,
  body.landing-page .solution {
    width: 100%;
  }
  body.landing-page .hero-cta-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  body.landing-page .secondary-button {
    margin-left: 0;
  }
  body.landing-page .hero-cta-note {
    max-width: 100%;
    text-align: center;
    margin-top: 15px;
  }
}
@media (max-width: 768px) {
  body.landing-page .hero h1 {
    font-size: 2.5rem;
  }
  body.landing-page .hero p {
    font-size: 1.1rem;
  }
  body.landing-page .section-header h2 {
    font-size: 2.2rem;
  }
  body.landing-page .beta h2,
  body.landing-page .cta-section h2 {
    font-size: 2.2rem;
  }
  nav.landing-nav ul {
    gap: 15px;
  }
  .nav-cta {
    padding: 8px 20px;
  }
  .feature-card {
    padding: 30px 25px;
  }
}
@media (max-width: 576px) {
  body.landing-page .header-container {
    flex-direction: column;
    gap: 20px;
  }
  nav.landing-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  body.landing-page .hero {
    padding-top: 200px;
    padding-bottom: 80px;
  }
  body.landing-page .hero h1 {
    font-size: 2.2rem;
  }
  body.landing-page .section-header h2 {
    font-size: 1.8rem;
  }
  body.landing-page .beta h2,
  body.landing-page .cta-section h2 {
    font-size: 1.8rem;
  }
  body.landing-page .problem,
  body.landing-page .solution {
    padding: 30px;
  }
  .footer-links {
    gap: 30px;
    width: 100%;
  }
  .footer-links > div {
    min-width: calc(50% - 15px);
  }
}
/* === END: LANDING PAGE STYLES === */

/* --- Settings View Enhancements --- */
.required-indicator {
  color: var(--accent-tertiary);
  margin-left: 4px;
  font-weight: bold;
}
.profile-toggle-section {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  text-align: left;
}
.link-button {
  background: none;
  border: none;
  color: var(--accent-secondary);
  cursor: pointer;
  padding: 0;
  font-size: 0.9em;
  text-decoration: underline;
}
.link-button i {
  margin-right: 5px;
  transition: transform 0.2s ease-in-out;
}
.link-button.expanded i {
  transform: rotate(180deg);
}
.form-divider {
  border: none;
  border-top: 1px solid var(--border-color); /* Use var(--border-color) for theme adaptability */
  margin: var(--spacing-lg) 0;
}
#profile-basic-info .form-grid,
#profile-additional-info .form-grid {
  display: grid;
  gap: var(--spacing-md) var(--spacing-lg);
  grid-template-columns: 1fr;
}
#profile-basic-info .form-grid .form-span-2,
#profile-additional-info .form-grid .form-span-2 {
}

@media (min-width: 769px) {
  #profile-basic-info .form-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  #profile-basic-info .form-grid .form-span-2 {
    grid-column: span 1;
  }
  #profile-additional-info .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #profile-additional-info .form-grid .form-span-2 {
    grid-column: span 2;
  }
}
.data-management-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}
.status-message {
  font-size: 0.9em;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  display: none;
}
.status-message.success {
  background-color: color-mix(
    in srgb,
    var(--accent-secondary) 15%,
    transparent
  );
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary-text); /* Adjusted for better contrast */
  display: block;
}
body.dark-theme .status-message.success {
  color: var(--accent-secondary-text-dark);
}
.status-message.error {
  background-color: color-mix(in srgb, var(--accent-tertiary) 15%, transparent);
  border: 1px solid var(--accent-tertiary);
  color: var(--accent-tertiary-text); /* Adjusted */
  display: block;
}
body.dark-theme .status-message.error {
  color: var(--accent-tertiary-text-dark);
}
.status-message.info {
  background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary); /* Adjusted */
  display: block;
}
.warning-text {
  color: var(--accent-tertiary);
  font-size: 0.9em;
  border: 1px solid var(--accent-tertiary);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
}
.warning-text i {
  margin-right: var(--spacing-xs);
}

/* === START: MERGED GRID/LIST VIEW STYLES === */
.view-mode-grid .projects-grid,
.view-mode-grid #goals-list-container,
.view-mode-grid .notes-grid {
  display: grid;
}
.view-mode-grid #projects-list-container,
.view-mode-grid #goals-list-view-container,
.view-mode-grid #notes-list-view-container {
  display: none !important;
}
.view-mode-list .projects-grid,
.view-mode-list #goals-list-container,
.view-mode-list .notes-grid {
  display: none !important;
}
.view-mode-list #projects-list-container,
.view-mode-list #goals-list-view-container,
.view-mode-list #notes-list-view-container {
  display: block !important;
  margin-top: var(--spacing-lg);
}
.item-list-view {
}
#projects-list-container .item-list,
#goals-list-view-container .item-list,
#notes-list-view-container .item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
#projects-list-container .list-item,
#goals-list-view-container .list-item,
#notes-list-view-container .list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease; /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  border-radius: var(--border-radius);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
  box-shadow: var(--shadow-subtle); /* ADDED shadow */
}
#projects-list-container .list-item:nth-child(odd),
#goals-list-view-container .list-item:nth-child(odd),
#notes-list-view-container .list-item:nth-child(odd) {
  background-color: var(--bg-content);
}
#projects-list-container .list-item:nth-child(even),
#goals-list-view-container .list-item:nth-child(even),
#notes-list-view-container .list-item:nth-child(even) {
  background-color: var(--bg-element);
}
#projects-list-container .list-item:hover,
#goals-list-view-container .list-item:hover,
#notes-list-view-container .list-item:hover {
  background-color: var(--list-item-hover-bg);
  border-color: var(--note-card-hover-border);
}
.item-list-view .list-item .item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bg-main);
  font-size: 1.1em;
  color: var(--text-secondary);
}
.item-list-view .list-item .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.item-list-view .list-item .project-list-thumbnail {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
  background-color: var(--bg-main);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text-secondary);
}
.item-list-view .list-item .item-content {
  flex-grow: 1;
  min-width: 0;
}
.item-list-view .list-item .item-title {
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-list-view .list-item .item-subtitle,
.item-list-view .list-item .item-meta-info {
  font-size: 0.85em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.item-list-view .list-item .item-meta-info .tag {
  font-size: 0.9em;
  padding: 1px 5px;
}
.item-list-view .list-item .item-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: auto;
}
.item-list-view .list-item:hover .item-actions {
  opacity: 1;
}
.item-list-view .list-item .item-actions .icon-only {
  padding: 5px;
  font-size: 0.9em;
}
.view-controls {
  position: relative;
  display: flex;
  /*flex-direction: column;*/
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.view-controls .view-controls-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}
.view-controls .view-controls-main input[type="search"] {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 300px;
  margin-bottom: 0;
  width: auto;
}
.view-controls .controls-right-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}
.view-controls .filter-sort-controls {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: nowrap;
  align-items: center;
}
.view-controls .filter-sort-controls select {
  width: auto;
  max-width: 180px;
  margin-bottom: 0;
}
.view-controls .view-toggle {
  display: inline-flex;
  gap: 1px;
  background-color: var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.view-controls .view-toggle .view-toggle-btn {
  padding: 8px 10px;
  border-radius: 0;
  border: none;
  background-color: var(--bg-element);
  color: var(--text-secondary);
}
.view-controls .view-toggle .view-toggle-btn:hover {
  background-color: var(--button-secondary-hover-bg);
  color: var(--text-primary);
}
.view-controls .view-toggle .view-toggle-btn.active {
  background-color: var(--accent-primary);
  color: var(--accent-primary-text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.view-controls .view-toggle .view-toggle-btn.active:hover {
  background-color: var(--accent-primary-hover);
}
.view-controls .mobile-view-toggles {
  display: none;
}
@media (max-width: 768px) {
  .view-controls .view-controls-main {
    flex-direction: row;
  }
  .view-controls .view-controls-main input[type="search"] {
    order: 2;
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  .view-controls .controls-right-group {
    order: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }
  .view-controls .filter-sort-controls {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    z-index: 20;
    box-shadow: var(--shadow-subtle);
  }
  .view-controls .filter-sort-controls.filters-visible {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .view-controls .filter-sort-controls select {
    width: 100%;
    margin: 0;
  }
  .view-controls .mobile-view-toggles {
    display: flex;
  }
}
@media (min-width: 769px) {
  .view-controls .mobile-view-toggles {
    display: none;
  }
  .view-controls .controls-right-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
  }
  .view-controls .filter-sort-controls {
    display: flex;
    position: static;
    padding: 0;
    border: none;
    background: none;
    gap: var(--spacing-sm);
  }
  .view-controls .filter-sort-controls select {
    width: auto;
    max-width: 180px;
    margin: 0;
  }
}
/* === END: MERGED GRID/LIST VIEW STYLES === */

/* === START: AUTHENTICATION SCREEN STYLES === */
#auth-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--auth-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--spacing-lg);
  background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 15px 15px;
}
#auth-container * {
  font-family: var(--font-app) !important;
}
.auth-form-wrapper {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
#auth-container .auth-form {
  background-color: var(--auth-form-bg);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
  box-shadow: var(--shadow-raised);
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--spacing-lg);
}
#auth-container #auth-logo {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}
#auth-container #auth-logo-image {
  width: 72px;
  height: 72px;
  margin-bottom: var(--spacing-md);
  border-radius: 15%;
  padding: 5px;
}
#auth-container #auth-logo h2 {
  margin-top: 0;
  margin-bottom: 5px;
  color: var(--text-primary);
  font-size: 1.6em;
  font-weight: 600;
}
#auth-container .auth-tagline {
  font-size: 1em;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-lg) 0;
  font-weight: 400;
}
#auth-container label {
  margin-top: var(--spacing-sm);
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text-secondary);
  display: block;
}
#auth-container input[type="text"],
#auth-container input[type="search"],
#auth-container input[type="url"],
#auth-container input[type="email"],
#auth-container input[type="password"],
#auth-container input[type="date"],
#auth-container input[type="number"] {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: 0.95em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
  background-color: var(--bg-element);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  outline: none;
}
#auth-container input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
#auth-container input:focus {
  border-color: var(--accent-pink);
  background-color: var(--bg-content);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-pink) 30%, transparent);
}
#auth-container .auth-form button.primary {
  width: 100%;
  margin-top: var(--spacing-md);
  padding: 12px 18px;
  font-size: 1em;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  border: none;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s;
  border-radius: var(--border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  line-height: 1.2;
}
#auth-container .auth-form button.primary:hover {
  background: linear-gradient(
    90deg,
    var(--accent-pink-hover) 0%,
    color-mix(in srgb, var(--accent-blue) 90%, black 10%) 100%
  );
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
#auth-container .auth-form button.primary:disabled {
  background: var(--bg-element) !important;
  color: var(--text-secondary);
  box-shadow: none;
  transform: none;
  opacity: 0.5;
  cursor: not-allowed;
}
#auth-container .auth-error-message,
#auth-container .auth-message {
  font-size: 0.9em;
  margin-top: var(--spacing-md);
  text-align: center;
  font-weight: 500;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
}
#auth-container .auth-error-message {
  color: var(--accent-alert);
  background-color: color-mix(in srgb, var(--accent-alert) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-alert) 30%, transparent);
}
#auth-container .auth-message {
  color: var(--accent-positive);
  background-color: color-mix(in srgb, var(--accent-positive) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-positive) 30%, transparent);
}
body.light-theme #auth-container .auth-error-message {
  background-color: color-mix(in srgb, var(--accent-alert) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-alert) 40%, transparent);
}
body.light-theme #auth-container .auth-message {
  background-color: color-mix(in srgb, var(--accent-positive) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-positive) 40%, transparent);
}
#auth-container .auth-link-group {
  text-align: center;
  margin-top: var(--spacing-lg);
  font-size: 0.9em;
  color: var(--text-secondary);
}
#auth-container .auth-link-group.centered {
  text-align: center;
}
#auth-container button.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--link-button-color);
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  transition: text-decoration-color 0.2s ease;
  font-family: var(--font-app);
}
#auth-container button.link-button:hover {
  text-decoration-color: currentColor;
}
#auth-container .auth-info-text {
  font-size: 0.9em;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}
#auth-container .auth-footer-link {
  margin-top: 0;
  text-align: center;
  font-size: 0.85em;
}
#auth-container .auth-footer-link a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
#auth-container .auth-footer-link a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
/* === END: AUTHENTICATION SCREEN STYLES === */

/* === START: APP SPECIFIC GRADIENTS & FIXES === */
#app-container button.primary:not(.button-gradient) {
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  border: none;
}
#app-container button.primary:not(.button-gradient):hover {
  background: linear-gradient(
    90deg,
    var(--accent-pink-hover) 0%,
    color-mix(in srgb, var(--accent-blue) 90%, black 10%) 100%
  );
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
#app-container button.primary:disabled {
  background: var(--bg-element) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.5;
  cursor: not-allowed;
  border: 1px solid var(--border-color);
}
#sidebar-nav li button.active,
#sidebar-nav-bottom li button.active {
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#sidebar-nav li button.active:hover,
#sidebar-nav-bottom li button.active:hover {
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: #ffffff;
}
/* === END: APP SPECIFIC GRADIENTS & FIXES === */

/* === START: ArtPond New Dashboard Design Styles === */
#dashboard-banner-area.cover-image-area {
  height: 120px;
  /* Default image removed, will be set by JS or if no-cover is present */
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-lg);
  position: relative;
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 12px var(--shadow-color);
  overflow: hidden;
}
#dashboard-banner-area.cover-image-area #dashboard-banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 0.4s ease-in-out, opacity 0.4s ease-in-out;
  opacity: 1;
}
#dashboard-banner-area.cover-image-area.no-cover #dashboard-banner-image {
  background-image: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8d2F0ZXJsaWx5fGVufDB8fDB8fHww&auto=format&fit=crop&w=1200&q=60"); /* Fallback image */
  opacity: 1 !important;
}
#dashboard-banner-area.cover-image-area #dashboard-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
  transition: background 0.3s ease;
}
body.light-theme
  #dashboard-banner-area.cover-image-area
  #dashboard-banner-overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.35) 100%
  );
}
#dashboard-banner-area.cover-image-area.no-cover #dashboard-banner-overlay {
  background: transparent;
}
#dashboard-banner-area.cover-image-area #dashboard-banner-edit-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 0.375rem;
  cursor: pointer;
  border: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
#dashboard-banner-area.cover-image-area:hover #dashboard-banner-edit-btn,
#dashboard-banner-area.cover-image-area.no-cover #dashboard-banner-edit-btn {
  opacity: 1;
}
#dashboard-banner-area.cover-image-area #dashboard-banner-edit-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
#dashboard-banner-area.cover-image-area #dashboard-banner-edit-btn i {
  font-size: 0.85em;
  line-height: 1;
}
@media (max-width: 768px) {
  /* #dashboard-banner-area.cover-image-area #dashboard-banner-edit-btn span { display: none; } */
}

.dashboard-header-main {
  margin-bottom: 1.5rem;
}
.dashboard-header-content {
  display: flex;
  flex-direction: column;
}
.dashboard-title-wrapper {
  width: 100%;
}
.dashboard-title-wrapper h1#welcome-message.dashboard-welcome {
  /* Target existing ID with new class */
  font-family: var(--font-app);
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--text-primary);
  font-weight: 600;
  margin: 0;
  position: relative; /* This can help if z-index on children is not working as expected */
  z-index: 1; /* Ensure the h1 itself is in a known stacking context layer */
}
.dashboard-subtitle-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}
.dashboard-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 66.666667%;
}
/* START: Brushstroke style from redesign */
/* Update the brushstroke styles */
.brushstroke {
  position: relative;
  display: inline-block;
  z-index: 0; /* Add this to ensure proper stacking */
}

.brushstroke::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 25%;
  bottom: 15%;
  background-color: var(--accent-pink); /* Changed to use accent color */
  opacity: 0.3;
  border-radius: 40% 20% / 30% 50%;
  z-index: -1;
  transform: rotate(-2deg);
}

.brushstroke > span {
  position: relative;
  z-index: 1;
  color: inherit; /* Ensure text color is inherited */
}
/* END: Brushstroke style */

/* MODIFIED: .artpond-dashboard-card (replaces old .dashboard-card for new widgets) */
.artpond-dashboard-card {
  background-color: var(--bg-content);
  padding: 1.25rem;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 3px 10px var(--shadow-color);
  position: relative;
  transition: box-shadow 0.3s, background-color 0.3s;
  /* border: 1px solid var(--border-color); */ /* REMOVED BORDER */
}
/* START: Gradient Button from redesign */
.button-gradient {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  border-radius: var(--border-radius);
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  padding: 10px 18px;
  font-size: 0.95em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  line-height: 1.2;
  cursor: pointer;
}
.button-gradient:hover {
  background: linear-gradient(
    90deg,
    var(--accent-pink-hover) 0%,
    color-mix(in srgb, var(--accent-blue) 90%, black 10%) 100%
  );
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.button-gradient:active {
  transform: scale(0.98);
}
.button-gradient i {
  font-size: 1em;
  line-height: 1;
}
/* END: Gradient Button */

.new-project-btn-mobile {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  width: auto;
  flex-shrink: 0;
  max-width: 45%;
}
.new-project-btn-mobile i {
  font-size: 0.85em;
  margin-right: 0.25rem;
}
.new-project-btn-mobile span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.new-project-btn-desktop {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.625rem 1.25rem;
  display: none;
  align-items: center;
  margin-top: 1rem;
}
.new-project-btn-desktop > * + * {
  margin-left: 0.5rem;
}

/* START: Stats Container from redesign */
.stats-container {
  /* This is #dashboard-stats-container in HTML */
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.stats-container > .artpond-dashboard-card {
  /* Target children directly */
  padding: 0.75rem;
}
.stats-container .stat-card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stats-container .stat-label-group {
  order: 2;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-container .stat-label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.7rem;
}
.stats-container .stat-value-group {
  order: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.stats-container .stat-value {
  font-family: var(--font-app);
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-right: 0;
}
.stats-container .stat-value.accent-secondary {
  color: var(--accent-blue);
}
.stats-container .stat-value.accent-primary {
  color: var(--accent-pink);
}
.stats-container .stat-tag {
  font-size: 0.65rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-weight: 600;
  margin-left: 0.25rem;
}
.stats-container .stat-tag.on-track-tag {
  background-color: var(--accent-teal);
  color: var(--accent-quaternary-text);
}
body.dark-theme .stats-container .stat-tag.on-track-tag {
  color: var(--accent-quaternary-text-dark);
}
.stats-container .stat-tag.mobile-only {
  display: inline-block;
}
.stats-container .stat-tag.desktop-only {
  display: none;
}
.stats-container .stat-value-styled {
  font-family: var(--font-app);
  font-size: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}
.stats-container .stat-value-styled.income {
  color: var(--accent-positive-text);
  background-color: var(--accent-green);
}
body.dark-theme .stats-container .stat-value-styled.income {
  color: var(--accent-positive-text-dark);
}
.stats-container .stat-value-styled.expense {
  color: var(--accent-primary-text);
  background-color: var(--accent-pink);
}
body.dark-theme .stats-container .stat-value-styled.expense {
  color: var(--accent-primary-text-dark);
}
/* END: Stats Container */

/* START: Quick Capture Widget from redesign */
.quick-capture-widget {
  margin-bottom: 1.5rem;
}
.quick-capture-widget .widget-title {
  font-family: var(--font-app);
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.quick-capture-widget .widget-title .widget-header-icon {
  /* General icon styling */
  margin-right: 0.5rem;
  transform: rotate(-2deg);
  font-size: 0.9em;
}
.quick-capture-widget .widget-title .fa-bolt.widget-header-icon {
  /* Specific for bolt */
  color: var(--accent-pink);
  transform: rotate(3deg);
}
/* MODIFIED: Quick Capture input field (was textarea, now input type="text") */
.quick-capture-widget input#dash-quick-capture-text.input-field {
  width: 100%;
  padding: 0.625rem; /* Approx 10px */
  font-size: 0.875rem; /* Approx 14px */
  line-height: 1.25rem; /* Approx 20px */
  background-color: var(--bg-element);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s,
    box-shadow 0.2s;
  border-radius: var(--border-radius);
  outline: none;
  margin-bottom: 0; /* Reset from general input */
  height: auto; /* Let padding define height */
}
.quick-capture-widget input#dash-quick-capture-text.input-field::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.quick-capture-widget input#dash-quick-capture-text.input-field:focus {
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--accent-primary) 20%, transparent);
  border-color: var(--accent-primary);
  background-color: var(--input-focus-bg);
}
.quick-capture-widget button#dash-quick-capture-save-btn.save-note-btn {
  /* Inherits .button-gradient */
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.375rem 0.75rem;
  /* float: right; */ /* REMOVED float right to match redesign's left alignment */
}
/* END: Quick Capture Widget */

/* START: Main Widgets Grid from redesign */
.main-widgets-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.artpond-dashboard-widget .widget-title {
  font-family: var(--font-app);
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.artpond-dashboard-widget .widget-header-icon {
  margin-right: 0.1rem;
  transform: rotate(-2deg);
  font-size: 0.9em;
}
.artpond-dashboard-widget .widget-title .fa-calendar-check.widget-header-icon {
  color: var(--accent-orange);
}
.artpond-dashboard-widget .widget-title .fa-clock.widget-header-icon {
  color: var(--accent-teal);
}
.artpond-dashboard-widget .widget-title .fa-lightbulb.widget-header-icon {
  color: var(--accent-purple);
}
.artpond-dashboard-widget .widget-title .fa-history.widget-header-icon {
  color: var(--accent-blue);
  transform: rotate(4deg);
}
.artpond-dashboard-widget .widget-title .fa-magic.widget-header-icon {
  color: var(--accent-pink);
}
/* END: Main Widgets Grid */

/* START: Deadlines Widget from redesign */
.deadlines-widget .widget-item-list {
  /* This is #dashboard-deadlines-list */
  list-style: none;
  padding: 0;
  /* MODIFIED: Background color with opacity */
  background-color: var(--bg-element-transparent);
  border-radius: var(--border-radius);
  padding: 0.5rem; /* Added padding for inner items */
  /*box-shadow: inset 0 1px 2px 0 var(--shadow-color); /* Softer inset shadow */
}
.deadlines-widget .widget-item-list > .widget-item + .widget-item {
  margin-top: 0.75rem;
} /* For new structure */
.deadlines-widget .widget-item-list > .list-item + .list-item {
  margin-top: 0.75rem;
} /* For existing structure */

.deadlines-widget .widget-item {
  /* New structure for deadline items */
  padding: 0.5rem;
  background-color: var(--bg-element); /* Solid background for item itself */
  border-radius: var(--border-radius);
  /*box-shadow: 0 1px 3px var(--shadow-color); /* Subtle shadow for items */
}
.deadlines-widget .item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.deadlines-widget .item-info .item-title {
  font-family: var(--font-app);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0;
}
.deadlines-widget .item-info .item-subtitle {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.deadlines-widget .item-status-tag {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
  background-color: var(--accent-blue);
  color: var(--accent-secondary-text);
  white-space: nowrap;
}
body.dark-theme .deadlines-widget .item-status-tag {
  color: var(--accent-secondary-text-dark);
}
.deadlines-widget .item-progress-section {
  margin-top: 0.5rem;
}
.deadlines-widget .progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.deadlines-widget .progress-bar-bg {
  width: 100%;
  background-color: var(--bg-main);
  border-radius: 9999px;
  height: 0.5rem;
  overflow: hidden;
}
/* .deadlines-widget .progress-fill is styled globally */
.deadlines-widget .item-due-date-section {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  align-items: center;
}
.deadlines-widget .item-due-date-section .due-date-text {
  color: var(--text-secondary);
}
.deadlines-widget .item-due-date-section .due-date-value {
  font-weight: 600;
  color: var(--accent-alert);
}
.deadlines-widget .view-all-link-wrapper,
.schedule-widget .view-all-link-wrapper,
.recent-notes-widget .view-all-link-wrapper {
  margin-top: 0.75rem;
  text-align: right;
}
.deadlines-widget .view-all-link,
.schedule-widget .view-all-link,
.recent-notes-widget .view-all-link {
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}
.deadlines-widget .view-all-link:hover,
.schedule-widget .view-all-link:hover,
.recent-notes-widget .view-all-link:hover {
  text-decoration: underline;
}
.deadlines-widget .view-all-link i,
.schedule-widget .view-all-link i,
.recent-notes-widget .view-all-link i {
  font-size: 0.85em;
  margin-left: 0.25rem;
}
/* END: Deadlines Widget */

/* START: Schedule Widget from redesign */
.schedule-widget .widget-item-list {
  /* This is #dashboard-schedule-list */
  padding: 0.5rem;
  background-color: var(--bg-element-transparent); /* MODIFIED: Opacity */
  border-radius: var(--border-radius);
  /*box-shadow: inset 0 1px 2px 0 var(--shadow-color);*/
  list-style: none;
}
.schedule-widget .widget-item-list > .schedule-item + .schedule-item {
  margin-top: 0.75rem;
} /* For new structure */
.schedule-widget .schedule-item {
  display: flex;
}
.schedule-widget .item-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
  width: 4rem;
  padding-top: 0.125rem;
  flex-shrink: 0;
}
.schedule-widget .item-details {
  flex-grow: 1;
  padding-left: 0.5rem;
  border-left-width: 2px;
  border-left-style: solid;
}
.schedule-widget .item-details.event-type-1 {
  border-color: var(--accent-teal);
}
.schedule-widget .item-details.event-type-2 {
  border-color: var(--accent-pink);
}
.schedule-widget .item-title {
  /*font-weight: 600;*/
  font-size: 0.875rem;
  color: var(--text-primary);
}
.schedule-widget .item-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
/* END: Schedule Widget */

/* START: Recent Notes Widget from redesign */
.recent-notes-widget .notes-grid-container {
  /* This is #dashboard-notes-grid */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
/* New .sticky-note styles for dashboard */
.recent-notes-widget .sticky-note {
  position: relative;
  box-shadow: 2px 3px 8px var(--shadow-color);
  border-radius: var(--border-radius);
  min-width: 100px;
  transition: box-shadow 0.3s, background-color 0.3s, transform 0.2s,
    border-color 0.2s;
  padding: 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.recent-notes-widget .sticky-note:hover {
  box-shadow: 4px 6px 12px var(--shadow-color);
  transform: translateY(-2px);
  border-color: var(--accent-primary);
}
.recent-notes-widget .sticky-peach {
  background-color: var(--accent-orange);
  color: var(--accent-tertiary-text);
}
body.dark-theme .recent-notes-widget .sticky-peach {
  color: var(--accent-tertiary-text-dark);
}
.recent-notes-widget .sticky-rose {
  background-color: var(--accent-pink); /*color: var(--accent-primary-text);*/
}
body.dark-theme .recent-notes-widget .sticky-rose {
  color: var(--accent-primary-text-dark);
}
.recent-notes-widget .sticky-blue {
  background-color: var(--accent-blue);
  color: var(--accent-secondary-text);
}
body.dark-theme .recent-notes-widget .sticky-blue {
  color: var(--accent-secondary-text-dark);
}
.recent-notes-widget .sticky-aqua {
  background-color: var(--accent-teal);
  color: var(--accent-quaternary-text);
}
body.dark-theme .recent-notes-widget .sticky-aqua {
  color: var(--accent-quaternary-text-dark);
}

.recent-notes-widget .sticky-note .note-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-notes-widget .sticky-note .note-content {
  font-size: 0.75rem;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
}
button#dashboard-view-all-notes-btn.view-all-link-button {
  display: block;
  width: auto;
  margin-left: auto;
  margin-top: 0.75rem;
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
button#dashboard-view-all-notes-btn.view-all-link-button:hover {
  text-decoration: underline;
}
button#dashboard-view-all-notes-btn.view-all-link-button i {
  font-size: 0.85em;
  margin-left: 0.25rem;
}
/* END: Recent Notes Widget */

/* START: Activity Widget from redesign */
.activity-widget .widget-item-list {
  /* This is #dashboard-activity-list */
  font-size: 0.75rem;
  padding: 0.5rem;
  background-color: var(--bg-element-transparent); /* MODIFIED: Opacity */
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 2px 0 var(--shadow-color);
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
}
.activity-widget .widget-item-list > .activity-item + .activity-item {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  opacity: 0.7;
}
.activity-widget .widget-item-list li {
  padding: 0;
  border-bottom: none;
} /* Override general .list-item */
.activity-widget .activity-item .item-text {
  font-weight: 500;
  color: var(--text-primary);
}
.activity-widget .activity-item .item-text-secondary {
  color: var(--text-secondary);
}
.activity-widget .activity-item .item-timestamp {
  font-size: 0.9em;
  color: var(--text-secondary);
  opacity: 0.8;
  display: block;
  margin-top: 2px;
}
/* END: Activity Widget */

/* START: Creative Board Widget from redesign */
.creative-board-widget {
  margin-top: 1.5rem;
  padding: 1.25rem; /* Reduced padding */
}
.creative-board-widget .widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.creative-board-widget .widget-title {
  margin-bottom: 0;
}
.creative-board-widget .placeholder-area {
  border-width: 2px;
  border-style: dashed;
  min-height: 150px; /* Reduced min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* Reduced padding */
  border-radius: var(--border-radius);
  background-color: var(--bg-element-transparent); /* MODIFIED: Opacity */
  border-color: var(--accent-blue);
  text-align: center;
}
.creative-board-widget .placeholder-content {
  color: var(--text-secondary);
}
.creative-board-widget .placeholder-icon {
  font-size: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem; /* var(--spacing-sm) = 8px */
  opacity: 0.5;
}
.creative-board-widget .placeholder-title {
  font-family: var(--font-app);
  font-size: 1rem;
  margin-bottom: 0.25rem; /* var(--spacing-xs) = 4px */
  color: var(--text-primary);
  font-weight: 500;
}
.creative-board-widget .placeholder-text {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.75rem;
  margin-bottom: 0.75rem; /* ADDED: var(--spacing-md / 2) approx = 8px, or use var(--spacing-sm) */
}
.creative-board-widget .customize-btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}
.creative-board-widget .customize-btn i {
  font-size: 0.85em;
  margin-right: 0.25rem;
}
/* END: Creative Board Widget */

/* START: App Footer from redesign (non-sticky) */
/* Update the app footer styles */
footer.app-footer {
  background-color: var(--bg-element);
  color: var(--text-secondary);
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  width: calc(100% + (var(--spacing-xl) * 2)); /* Match new padding */
  margin-left: calc(var(--spacing-xl) * -1);
  margin-right: calc(var(--spacing-xl) * -1);
  flex-shrink: 0;
}
footer.app-footer a {
  transition: color 0.2s;
  color: var(--accent-primary);
  text-decoration: none;
}
footer.app-footer a:hover {
  text-decoration: underline;
  color: var(--accent-primary-hover);
}
/* END: App Footer */

/* --- Responsive Styles for New Dashboard Components --- */
@media (min-width: 1024px) {
  #dashboard-banner-area.cover-image-area {
    height: 180px;
    margin-bottom: 1.5rem;
  }
  #dashboard-banner-area.cover-image-area #dashboard-banner-edit-btn {
    top: 1rem;
    right: 1rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
  }
  .dashboard-header-main {
    margin-bottom: 2rem;
  }
  .dashboard-header-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .dashboard-title-wrapper {
    width: auto;
  }
  .dashboard-title-wrapper h1#welcome-message.dashboard-welcome {
    font-size: 3rem;
    line-height: 1;
  }
  .dashboard-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    width: auto;
  }
  .new-project-btn-mobile {
    display: none;
  }
  .new-project-btn-desktop {
    display: flex;
    margin-top: 0;
  }

  .stats-container {
    margin-bottom: 2rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .stats-container > .artpond-dashboard-card {
    padding: 1.25rem;
  }
  .stats-container .stat-card-content {
    align-items: flex-start;
    text-align: left;
  }
  .stats-container .stat-label-group {
    order: 1;
    margin-top: 0;
    margin-bottom: 0.25rem;
    justify-content: flex-start;
  }
  .stats-container .stat-label {
    font-size: 0.875rem;
  }
  .stats-container .stat-value-group {
    order: 2;
    justify-content: flex-start;
  }
  .stats-container .stat-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-right: 0.5rem;
  }
  .stats-container .stat-tag {
    font-size: 0.75rem;
  }
  .stats-container .stat-tag.mobile-only {
    display: none;
  }
  .stats-container .stat-tag.desktop-only {
    display: inline-block;
  }
  .stats-container .stat-value-styled {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .quick-capture-widget {
    margin-bottom: 2rem;
  }
  .quick-capture-widget .widget-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 0.75rem;
  }
  .quick-capture-widget input#dash-quick-capture-text.input-field {
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-family: var(--font-app);
  }
  .quick-capture-widget button#dash-quick-capture-save-btn.save-note-btn {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
  }

  .main-widgets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .artpond-dashboard-widget .widget-title {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0.75rem;
  }

  .deadlines-widget .widget-item-list > .widget-item + .widget-item,
  .deadlines-widget .widget-item-list > .list-item + .list-item {
    margin-top: 1rem;
  }
  .deadlines-widget .widget-item,
  .deadlines-widget .list-item {
    padding: 0.75rem;
  }
  .deadlines-widget .item-info .item-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .deadlines-widget .item-info .item-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .deadlines-widget .item-status-tag {
    padding: 0.25rem 0.75rem;
  }
  .deadlines-widget .item-progress-section {
    margin-top: 1rem;
  }
  .deadlines-widget .progress-bar-bg {
    height: 0.625rem;
  }
  .deadlines-widget .item-due-date-section {
    margin-top: 1rem;
    font-size: 0.875rem;
  }
  .deadlines-widget .view-all-link-wrapper {
    margin-top: 1rem;
  }
  .deadlines-widget .view-all-link {
    font-size: 0.875rem;
  }
  button#dashboard-view-all-notes-btn.view-all-link-button {
    font-size: 0.875rem;
  }

  .schedule-widget .widget-item-list {
    padding: 0.75rem;
  }
  .schedule-widget .widget-item-list > .schedule-item + .schedule-item {
    margin-top: 1rem;
  }
  .schedule-widget .item-time {
    font-size: 0.875rem;
    width: 5rem;
  }
  .schedule-widget .item-details {
    padding-left: 1rem;
  }
  .schedule-widget .item-title {
    font-size: 1rem;
  }
  .schedule-widget .item-subtitle {
    font-size: 0.875rem;
  }
  .schedule-widget .view-all-link-wrapper {
    margin-top: 1.25rem;
  }
  .schedule-widget .view-all-link {
    font-size: 0.875rem;
  }

  .recent-notes-widget .notes-grid-container {
    gap: 1.5rem;
  }
  .recent-notes-widget .sticky-note {
    padding: 1rem;
  }
  .recent-notes-widget .sticky-note .note-title {
    font-size: 1rem;
  }
  .recent-notes-widget .sticky-note .note-content {
    font-size: 0.875rem;
  }
  .recent-notes-widget .view-all-link-wrapper {
    margin-top: 1rem;
  }

  .activity-widget .widget-item-list {
    font-size: 0.875rem;
    padding: 0.75rem;
  }
  .activity-widget .widget-item-list > .activity-item + .activity-item {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .creative-board-widget {
    margin-top: 2rem;
    padding: 1.5rem; /* Reduced padding */
  }
  .creative-board-widget .widget-header {
    margin-bottom: 1rem;
  }
  .creative-board-widget .placeholder-area {
    min-height: 200px;
    padding: 1.5rem;
  }
  .creative-board-widget .placeholder-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
  }
  .creative-board-widget .placeholder-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  .creative-board-widget .placeholder-text {
    font-size: 0.875rem;
  }
  .creative-board-widget .customize-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
  footer.app-footer {
    padding: 1rem 1.5rem;
  }
}
/* === END: ArtPond New Dashboard Design Styles === */

/* --- Utilities --- */
.placeholder-text {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  font-size: 0.9em;
}
.hidden {
  display: none !important;
}
hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--spacing-lg) 0;
}
.loading-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
  vertical-align: text-bottom;
  margin-left: var(--spacing-sm);
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}
.placeholder-card {
  background-color: var(--placeholder-bg);
  min-height: 80px;
  border-radius: var(--border-radius);
  opacity: 0.5;
}

/* === START: APP RESPONSIVE STYLES === */
@media (max-width: 768px) {
  body.app-view #app-container {
    flex-direction: column;
    height: 100vh;
  }
  /* --- START: SIDEBAR MOBILE STYLES - UNTOUCHED AS REQUESTED --- */
  body.app-view #sidebar {
    position: fixed;
    left: -250px;
    top: 0;
    bottom: 0;
    width: 250px;
    max-width: 75vw;
    transition: left 0.3s ease, transform 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    height: 100%;
  }
  body.app-view #sidebar.mobile-visible {
    left: 0;
    transform: translateX(0);
  }
  body.app-view .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  body.app-view .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  body.app-view #sidebar {
    width: 250px !important;
  }
  body.app-view #sidebar #sidebar-title,
  body.app-view #sidebar #sidebar-nav button span,
  body.app-view #sidebar #sidebar-nav-bottom button span {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
  }
  body.app-view #sidebar #sidebar-nav button,
  body.app-view #sidebar #sidebar-nav-bottom button {
    justify-content: flex-start !important;
    padding: 10px var(--spacing-sm) !important;
  }
  body.app-view #sidebar #sidebar-nav button i,
  body.app-view #sidebar #sidebar-nav-bottom button i {
    margin-right: var(--spacing-sm) !important;
  }
  body.app-view #sidebar #sidebar-header {
    justify-content: flex-start !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  body.app-view #sidebar #sidebar-logo {
    margin: 0 !important;
  }
  body.app-view #sidebar-toggle {
    display: none !important;
  }
  /* --- END: SIDEBAR MOBILE STYLES - UNTOUCHED AS REQUESTED --- */

  body.app-view .mobile-nav {
    display: flex;
  }
  body.app-view #content-area {
    width: 100%;
    padding: 0;
    flex-grow: 1;
    overflow-y: hidden;
  }
  body.app-view .global-search-bar {
    display: none;
  }
  body.app-view #main-view-area {
    padding: calc(60px + var(--spacing-md)) var(--spacing-md) 0
      var(--spacing-md); /* Increased from sm to md */
  }
  .view-header {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
  }
  .mobile-nav {
    height: 60px;
    padding: 0 var(--spacing-md);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    background-color: var(--bg-content);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
  }
  /* MODIFIED: Footer non-sticky for mobile */
  body.app-view footer.app-footer {
    width: calc(100% + (var(--spacing-md) * 2)); /* Match new mobile padding */
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
    padding: 0.75rem;
  }
  body.app-view .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .mobile-view-toggles {
    display: flex !important;
    align-items: center;
    order: 2;
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
  }
  .view-controls .view-controls-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-sm) !important;
    margin-top: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
  .view-controls .view-controls-main input[type="search"] {
    flex-grow: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    order: 1;
  }
  .controls-right-group {
    display: contents;
  }
  .view-controls .view-controls-main .view-toggle {
    order: 3;
    margin-left: 0;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
  }
  .mobile-view-toggles button,
  .view-controls .view-controls-main .view-toggle button {
    margin-bottom: 0 !important;
  }
  .view-controls > .filter-sort-controls {
    display: none;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: var(--spacing-md) !important;
    gap: var(--spacing-sm) !important;
    order: 4;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    padding: var(--spacing-md);
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    box-shadow: var(--shadow-subtle);
  }
  .view-controls > .filter-sort-controls.filters-visible {
    display: flex !important;
  }
  .view-controls > .filter-sort-controls select {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
  }
  .view-controls > .filter-sort-controls .view-toggle {
    display: none !important;
  }
  #project-detail-view .list-item .item-actions,
  #project-detail-view .task-item .item-actions,
  #project-detail-view .milestone-item .item-actions {
    position: static;
    transform: none;
    opacity: 1;
    background: none;
    box-shadow: none;
    padding: 0;
    gap: var(--spacing-sm);
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  #projects-list-container .list-item .item-actions,
  #goals-list-view-container .list-item .item-actions,
  #notes-list-view-container .list-item .item-actions,
  #clients-view .item-list-view > ul > .list-item .item-actions,
  #finances-view .item-list-view > ul > .list-item .item-actions {
    position: absolute !important;
    top: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
    gap: var(--spacing-xs) !important;
    z-index: 2 !important;
    margin-left: 0 !important;
    align-self: initial !important;
  }
  #projects-list-container .list-item,
  #goals-list-view-container .list-item,
  #notes-list-view-container .list-item,
  #clients-view .item-list-view > ul > .list-item,
  #finances-view .item-list-view > ul > .list-item {
    padding-right: calc(var(--spacing-sm) + 65px) !important;
    position: relative !important;
  }
  #project-detail-view .list-item,
  #project-detail-view .task-item-main,
  #project-detail-view .milestone-item-main {
    padding-right: 0 !important;
    position: static !important;
  }
  .project-card .card-actions {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    opacity: 1;
    background: none;
    padding: 0;
    gap: var(--spacing-xs);
    z-index: 2;
    display: flex;
  }
  .project-card .card-actions button {
    padding: 4px 6px;
    font-size: 0.8em;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
  }
  /*.note-card { padding-top: calc(var(--spacing-md) + 28px); }*/
  .note-card .note-card-actions {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    opacity: 1;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    z-index: 2;
    display: flex;
    gap: var(--spacing-xs);
  }
  .note-card .note-card-actions button {
    font-size: 0.8em;
    padding: 4px 6px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
  }
  .task-item-main {
    padding-left: 0;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .task-item .item-actions {
  }
  .task-item .item-content {
    padding-right: 0;
    min-width: 0;
  }
  .task-item .drag-handle {
    display: flex;
  }
  .subtask-list {
    margin-left: calc(18px + var(--spacing-sm));
    padding-left: 0;
    margin-top: var(--spacing-sm);
    list-style: none;
  }
  .subtask-item {
    gap: var(--spacing-sm);
    padding-left: 0;
    align-items: center;
    display: flex;
    padding: var(--spacing-xs) 0;
    font-size: 0.9em;
    position: relative;
  }
  .subtask-item .item-actions {
    opacity: 1 !important;
    display: flex !important;
    gap: var(--spacing-xs) !important;
    align-items: center;
    position: static !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .subtask-item:not(.editing) .edit-inline-btn,
  .subtask-item:not(.editing) .delete-inline-btn {
    display: inline-flex !important;
  }
  .subtask-item:not(.editing) .save-inline-btn,
  .subtask-item:not(.editing) .cancel-inline-btn {
    display: none !important;
  }
  .subtask-item.editing .edit-inline-btn,
  .subtask-item.editing .delete-inline-btn {
    display: none !important;
  }
  .subtask-item.editing .save-inline-btn,
  .subtask-item.editing .cancel-inline-btn {
    display: inline-flex !important;
  }
  #project-detail-view .project-detail-banner {
    min-height: 180px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  #project-detail-view .project-detail-banner h2 {
    font-size: 1.6em;
  }
  #project-detail-view .project-detail-banner .project-id {
    font-size: 0.8em;
  }
  #project-detail-view .project-detail-banner .detail-action-buttons button {
    width: 36px;
    height: 36px;
  }
  #project-detail-view .detail-header-wrapper {
    padding-top: var(--spacing-md);
  }
  .detail-meta {
    flex-direction: row;
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }
  .detail-tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    scrollbar-width: none;
    background-color: transparent;
    gap: 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .detail-tabs::-webkit-scrollbar {
    display: none;
  }
  .detail-tab {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 10px var(--spacing-md);
    font-size: 0.9em;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
    color: var(--text-primary);
  }
  .detail-tab.active {
    background-color: var(--bg-content);
    border-bottom: 1px solid var(--bg-content);
    z-index: 2;
    color: var(--accent-primary);
    font-weight: 600;
  }
  .detail-tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.2s ease;
  }
  .detail-tab.active::after {
    background-color: var(--accent-primary);
  }
  .detail-tab-content-area {
    border-top: none;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-top: 0;
    background-color: var(--bg-content);
  }
  .detail-tab-content {
    padding: 0;
  }
  .detail-tab-content .detail-tab-header {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 5px;
  }
  .detail-tab-content .detail-tab-header::-webkit-scrollbar {
    display: none;
  }
  .detail-tab-content .detail-tab-header h3 {
    font-size: 1.2em;
    flex-shrink: 1;
    white-space: nowrap;
  }
  .detail-tab-content .detail-tab-header > div {
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .detail-tab-content .detail-tab-header button {
    padding: 6px 12px;
    font-size: 0.9em;
    white-space: nowrap;
  }
  .detail-tab-content .detail-tab-header button.icon-only {
    padding: 6px;
  }
}
/* === END: APP RESPONSIVE STYLES === */

@media (min-width: 769px) {
  #sidebar.collapsed #sidebar-header {
    border-bottom: none;
  }
}

/* style.css */

/* style.css */

/* === START: Project Detail Redesign Styles === */

/* Main card that holds content below the banner */
#project-detail-view #project-detail-content .project-detail-main-card {
  background-color: var(
    --bg-content
  ); /* MODIFIED: Lighter background from redesign */
  border: 1px solid var(--border-color);
  box-shadow: 0 5px 15px var(--shadow-color);
  border-radius: 0.75rem; /* 12px */
  margin-top: 1rem; /* Spacing around the card (from redesign) */
  padding: 1rem; /* Inner padding (from redesign) */
  /* margin-top: var(--spacing-lg); REMOVED: Replaced by card margin */
}

/* Adjust banner margin if needed, to avoid double margin with the card */
#project-detail-view .project-detail-banner {
  margin-bottom: 0; /* Let the card's margin-top handle spacing */
  margin-top: 1rem; /* Match card margin */
}

/* Back to Projects Button - hover color from redesign */
#project-detail-view .back-button:hover {
  background-color: var(--accent-tertiary); /* From .button-secondary:hover */
  color: var(--accent-tertiary-text); /* From .button-secondary:hover */
}

/* Metadata pills styling - MODIFIED to match redesign */
#project-detail-view .project-detail-main-card .detail-meta {
  display: grid; /* From .meta-info-grid */
  grid-template-columns: repeat(
    auto-fit,
    minmax(140px, 1fr)
  ); /* From .meta-info-grid */
  gap: 0.75rem; /* From .meta-info-grid */
  margin-bottom: 1rem; /* From .meta-info-grid */
  font-size: 0.8rem; /* From .meta-info-grid */
  /* color: var(--text-secondary); REMOVED - handled by children */
}

#project-detail-view .project-detail-main-card .detail-meta .meta-item {
  display: flex; /* From .meta-item */
  align-items: center; /* From .meta-item */
  background-color: var(--bg-element-transparent); /* From .meta-item */
  padding: 0.35rem 0.5rem; /* From .meta-item */
  border-radius: 0.375rem; /* From .meta-item (6px) */
  /* font-size: 0.85em; REMOVED - parent sets font-size */
  /* color: var(--text-secondary); REMOVED - handled by children */
}

#project-detail-view .project-detail-main-card .detail-meta .meta-item i {
  margin-right: 0.4rem; /* From .meta-item i */
  color: var(--accent-secondary); /* From .meta-item i */
  width: 1em; /* From .meta-item i */
}

#project-detail-view .project-detail-main-card .detail-meta .meta-item .label {
  /* NEW class for label part */
  color: var(--text-secondary); /* From .meta-item .label */
  margin-right: 0.25rem; /* From .meta-item .label */
}

#project-detail-view
  .project-detail-main-card
  .detail-meta
  .meta-item
  .meta-value {
  /* Existing class */
  color: var(--text-primary); /* From .meta-item .value */
  font-weight: 500; /* From .meta-item .value */
  margin-left: 0; /* Reset from previous, label adds margin */
}

/* === START: Updated Project Detail Description & Read More CSS === */
#project-detail-view .project-detail-main-card .detail-description {
  /* Base styles from your redesign */
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(
    --spacing-lg
  ); /* Keep this for spacing below description */

  /* Styles for content flow and word wrapping */
  /*white-space: pre-wrap; /* If you want to preserve whitespace like in Markdown */
  word-break: break-word;

  /* Remove old transition if it was specifically for max-height truncation */
  /* transition: none; */ /* Or remove the transition property entirely */
}

#project-detail-view .project-detail-main-card .detail-description.truncated {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp is set by JavaScript (element.style.webkitLineClamp = maxLines) */
}

#project-detail-view
  .project-detail-main-card
  .detail-description:not(.truncated) {
  -webkit-line-clamp: unset; /* Or 'initial' or 'none' depending on desired revert */
  display: block; /* Or 'inline-block' if that was its original state without -webkit-box */
}

/* Styles for the .read-more-btn (ensure it's visible and styled correctly) */
/* These styles might already exist and be fine, but verify */
#project-detail-view .project-detail-main-card .read-more-btn {
  background: none;
  border: none;
  color: var(--accent-primary); /* From your original .read-more-btn */
  cursor: pointer;
  padding: 0;
  font-size: 0.9em; /* From your original .read-more-btn */
  font-weight: 600; /* From your original .read-more-btn */
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
  display: block; /* Ensures it takes its own line */
  margin-top: var(--spacing-sm); /* Space above the button */
}

#project-detail-view .project-detail-main-card .read-more-btn:hover {
  text-decoration-color: currentColor; /* From your original .read-more-btn:hover */
}
/* === END: Updated Project Detail Description & Read More CSS === */

/* Progress bar adjustments */
#project-detail-view .project-detail-main-card .detail-progress {
  /* display: flex; align-items: center; gap: var(--spacing-md); -- Removed, redesign has text below */
  margin-top: 1rem; /* From .progress-bar-container */
  margin-bottom: 1.5rem; /* From .progress-bar-container */
}

#project-detail-view .project-detail-main-card .detail-progress .progress-bar {
  /* flex-grow: 1; -- Removed */
  height: 0.75rem; /* From .progress-bar-bg (12px) */
  background-color: var(--bg-element);
  border-radius: 0.5rem; /* From .progress-bar-bg (8px) */
  overflow: hidden;
  margin-bottom: 0.25rem; /* Space for text below */
}

#project-detail-view .project-detail-main-card .detail-progress .progress-fill {
  background-image: linear-gradient(
    to right,
    var(--accent-primary),
    var(--accent-secondary)
  ); /* From .progress-bar-fill */
  height: 100%;
  border-radius: 0.5rem; /* Ensure fill also has radius */
}

#project-detail-view .project-detail-main-card .detail-progress .progress-text {
  font-size: 0.75rem; /* From .progress-text */
  color: var(--text-secondary); /* From .progress-text */
  text-align: right; /* From .progress-text */
  margin-top: 0.25rem; /* From .progress-text */
}

/* Tabs styling */
#project-detail-view .project-detail-main-card .detail-tabs {
  display: flex;
  overflow-x: auto; /* From .tabs-container */
  border-bottom: 2px solid var(--border-color); /* From .tabs-container */
  margin-bottom: 1rem; /* From .tabs-container */
  gap: 0.5rem; /* From .tabs-container */
  padding: 0 0.25rem; /* From .tabs-container */
  /* background-color: transparent; -- Already transparent */
  /* border-radius: 0; -- Already default */
  /* overflow: visible; -- Changed to auto for scroll */
}

#project-detail-view .project-detail-main-card .detail-tab {
  padding: 0.65rem 0.75rem; /* From .tab-button */
  font-size: 0.85rem; /* From .tab-button */
  font-weight: 500; /* From .tab-button */
  color: var(--text-secondary); /* From .tab-button */
  background-color: transparent; /* From .tab-button */
  border: none; /* From .tab-button */
  border-bottom: 3px solid transparent; /* From .tab-button */
  white-space: nowrap; /* From .tab-button */
  cursor: pointer; /* From .tab-button */
  transition: color background-color 0.2s, color 0.2s, border-color 0.2s,
    border-width 0.2s;
  margin-bottom: -2px; /* Overlap container's border by 2px (border-bottom of tabs is 2px) */
}

#project-detail-view .project-detail-main-card .detail-tab:hover {
  color: var(--text-primary); /* From .tab-button:hover */
  /* background-color: transparent; -- Already transparent */
}

#project-detail-view .project-detail-main-card .detail-tab.active {
  background-color: var(--bg-element-transparent);
  color: var(--accent-primary);
  font-weight: 600;
  border-bottom-color: var(--accent-primary);
  border-bottom-width: 4px;
}
#project-detail-view .project-detail-main-card .detail-tab i {
  margin-right: 0.35rem; /* From .tab-button i */
}

/* Tab content area */
#project-detail-view .project-detail-main-card .detail-tab-content-area {
  /* border: none; -- Already set */
  padding: 0; /* Padding will be on .detail-tab-content.active */
  /* margin-top: 0; -- Already set */
  /* background-color: transparent; -- Already set */
  /* border-radius: 0; -- Already set */
}
#project-detail-view .project-detail-main-card .detail-tab-content.active {
  padding-top: 0; /* MODIFIED: .tab-content in redesign has py-2, so minimal top padding is ok */
  /* Or use 1rem if more space is desired before task header */
}

/* Task list header buttons */
#project-detail-view .project-detail-main-card .tasks-header {
  display: flex; /* From .task-section-header */
  justify-content: space-between; /* From .task-section-header */
  align-items: center; /* From .task-section-header */
  margin-bottom: 0.75rem; /* From .task-section-header */
}
#project-detail-view .project-detail-main-card .tasks-header h3 {
  font-size: 1.1rem; /* From .task-section-header h3 */
  font-weight: 600; /* From .task-section-header h3 */
  color: var(--text-primary); /* From .task-section-header h3 */
  margin: 0; /* From .task-section-header h3 */
}
#project-detail-view .project-detail-main-card .tasks-header .detail-tab-header > div, /* Target existing structure */
#project-detail-view .project-detail-main-card .tasks-header .task-actions {
  /* Target redesign structure */
  display: flex;
  gap: 0.375rem; /* space-x-1.5 -> 0.375rem * 1.5 = 0.5625rem, adjust if needed to var(--spacing-sm) */
  /* The redesign uses space-x-1.5 which is small. Using var(--spacing-sm) (8px) */
  gap: var(--spacing-sm);
}

#project-detail-view .project-detail-main-card .tasks-header button {
  /* General style for buttons in this header */
  font-size: 0.8rem; /* From .task-actions button */
  padding: 0.4rem 0.8rem; /* From .task-actions button */
  border-radius: 0.375rem; /* From .task-actions button (6px) */
  display: inline-flex; /* From .task-actions button */
  align-items: center; /* From .task-actions button */
  gap: 0.25rem; /* From .task-actions button */
}

#project-detail-view .project-detail-main-card .tasks-header button.primary {
  /* Gradient is already applied by global .button-gradient or existing .primary */
}
/* AI Suggestions Button - MODIFIED to be secondary */
#project-detail-view
  .project-detail-main-card
  .tasks-header
  button.secondary#ai-task-generator-btn {
  background-color: var(--bg-element); /* From .button-secondary */
  color: var(--text-primary); /* From .button-secondary */
  border: 1px solid var(--border-color); /* From .button-secondary */
  box-shadow: none; /* Explicitly remove shadow if .secondary had it */
}
#project-detail-view
  .project-detail-main-card
  .tasks-header
  button.secondary#ai-task-generator-btn:hover {
  background-color: var(--accent-tertiary); /* From .button-secondary:hover */
  color: var(--accent-tertiary-text); /* From .button-secondary:hover */
  transform: none; /* Explicitly remove transform if .secondary:hover had it */
  box-shadow: none;
}

/* Task item text styling - REVERTED to original colors */
#project-detail-view .project-detail-main-card .task-item .item-title {
  /* color: var(--accent-pink); -- REMOVED: Revert to original */
  /* opacity: 0.9; -- REMOVED: Revert to original */
  color: var(--text-primary); /* Original color */
}
#project-detail-view
  .project-detail-main-card
  .task-item
  input[type="checkbox"]:checked
  + .item-title {
  /* color: var(--text-secondary-dark); -- Original */
  /* opacity: 0.7; -- Original */
  /* text-decoration: line-through; -- Original */
  text-decoration-color: var(
    --strikethrough-color
  ); /* From redesign if you want custom strikethrough color */
  /* Otherwise, browser default is fine for text-decoration: line-through */
}

#project-detail-view .project-detail-main-card .task-item .item-actions button,
#project-detail-view .project-detail-main-card .task-item .drag-handle {
  color: var(
    --text-secondary
  ); /* Original color was var(--text-primary), but redesign icons are darker like text-secondary */
  /* Matched to redesign .task-item-actions button color */
}
#project-detail-view
  .project-detail-main-card
  .task-item
  input[type="checkbox"] {
  accent-color: var(
    --accent-primary
  ); /* Pink checkmark (this is a good modern property) */
  /* If full custom checkbox is desired, more complex CSS is needed, matching redesign's style */
}

/* === END: Project Detail Redesign Styles === */

/* --- Clients View Redesign --- */
.client-search-container {
  /* Inherits from .content-section: background, padding, border-radius, box-shadow */
  /* margin-bottom is applied inline in app.html */
}

.client-search-container input[type="search"]#client-search-input {
  /* Styles applied inline in app.html (max-width: 100%; margin-bottom: 0;) */
}

.client-cards-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* Adjust minmax as needed */
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
}

.client-card {
  background-color: var(--bg-content);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-subtle);
  /* border: 1px solid var(--border-color); */ /* Uncomment if cards need a border */
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative; /* For positioning item-actions */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.client-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}

.client-card .item-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 1.4em;
  border-radius: 50%; /* Make the span itself circular */

  /* Flexbox for centering content (initials) */
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center; /* Fallback for text alignment */
  overflow: hidden; /* CRUCIAL: Prevents large images from breaking out */
  font-weight: 600; /* Bolder initials */
  background-color: var(--bg-element); /* Default background */
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Styles for the icon when it displays initials (no PFP or PFP failed) */
.client-card .item-icon.item-icon-initials {
  background-color: color-mix(
    in srgb,
    var(--bg-element) 75%,
    var(--text-secondary) 25%
  );
  color: var(--text-primary);
}

/* Styles for the actual image tag if it loads successfully */
.client-card .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.client-card .item-content {
  flex-grow: 1;
  min-width: 0;
}

.client-card .item-title {
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.client-card .item-subtitle {
  font-size: 0.9em;
  color: var(--text-secondary);
  word-break: break-all;
}

.client-card .item-actions {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: var(--bg-content);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-subtle);
}

.client-card:hover .item-actions {
  opacity: 1;
}

.client-card .item-actions button {
  font-size: 0.8em;
  padding: 5px 7px;
}

.client-cards-grid .placeholder-text {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-lg) 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* === Client Detail Popup Redesign (Tabs) === */
.basicLightbox__placeholder .client-detail-popup-redesign {
  margin: calc(var(--spacing-lg) * -1); /* Counteract parent padding */
  /*margin-right: calc(var(--spacing-lg) * -1 + 8px); /* Account for scrollbar */
  width: calc(100% + var(--spacing-lg) * 2 - 8px); /* Expand to fill parent */
  max-width: 650px; /* Adjust as needed */
  width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  color: var(--text-primary); /* Ensure text color is from theme */
}

.client-detail-popup-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  flex-shrink: 0;
}

.client-detail-popup-header .client-pfp-popup {
  width: 60px;
  height: 60px;
  font-size: 1.8em; /* For initials */
  /* Other .item-icon styles are inherited or can be added if needed */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-element); /* Fallback BG */
  border: 1px solid var(--border-color);
}
.client-detail-popup-header .client-pfp-popup.item-icon-initials {
  background-color: color-mix(
    in srgb,
    var(--bg-element) 75%,
    var(--text-secondary) 25%
  );
  color: var(--text-primary);
}
.client-detail-popup-header .client-pfp-popup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.client-detail-popup-info-main {
  flex-grow: 1;
}

.client-detail-popup-info-main h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.6em;
  font-weight: 600;
  color: var(--text-primary);
}

.client-detail-popup-info-main p {
  margin: 0;
  font-size: 0.95em;
  color: var(--text-secondary);
}

.client-detail-popup-close-btn {
  background: none;
  border: none;
  font-size: 1.8em; /* Make it larger */
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 var(--spacing-xs); /* Small padding for easier click */
  line-height: 1;
  align-self: flex-start; /* Align to top of header */
}
.client-detail-popup-close-btn:hover {
  color: var(--text-primary);
}

.client-detail-popup-tabs {
  display: flex;
  gap: 1px; /* Create thin lines between tabs */
  padding: 0 var(--spacing-md); /* Side padding for the tab bar */
  border-bottom: 2px solid var(--border-color);
  flex-shrink: 0;
  overflow-x: auto; /* Allow horizontal scrolling if many tabs */
  scrollbar-width: thin;
}

.client-detail-popup-tab {
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  background-color: transparent; /* Tabs are transparent over tab bar bg */
  color: var(--text-secondary);
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  font-size: 0.95em;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.client-detail-popup-tab:hover {
  color: var(--text-primary);
}

.client-detail-popup-tab.active {
  color: var(--accent-primary);
  font-weight: 600;
  border-bottom-color: var(--accent-primary);
  background-color: var(--bg-element-transparent);
}

.client-detail-popup-tab-content-area {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex-grow: 1; /* Allow content to take remaining space and scroll */
}

.client-detail-popup-tab-content {
  display: none;
  animation: viewFadeIn 0.3s ease-out forwards; /* Reuse existing animation */
}

.client-detail-popup-tab-content.active {
  display: block;
}

.client-detail-popup-tab-content h4 {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}
.client-detail-popup-tab-content .placeholder-text {
  padding: var(--spacing-lg) 0;
}

/* Overview Tab Specific */
.client-detail-overview-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column for now, can be 1fr 1fr for wider modals */
  gap: var(--spacing-sm) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.overview-item {
  font-size: 0.95em;
}
.overview-label {
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: var(--spacing-sm);
}
.overview-value {
  color: var(--text-primary);
}
.client-detail-popup-actions {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  gap: var(--spacing-md);
}
.client-detail-popup-actions button {
  /* Uses global button styles */
}
.client-detail-popup-actions button.alert {
  /* For delete button */
  /*color: var(--accent-primary-text); /* Assuming white/light text on negative */
}
.client-detail-popup-actions button.alert:hover {
  background-color: color-mix(in srgb, var(--accent-negative) 85%, black 15%);
}

/* Projects and Billing Tab Lists */
.client-detail-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.client-detail-item-list .list-item {
  display: flex;
  align-items: center; /* Vertically align items in the row */
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0; /* More compact padding for lists in popups */
  border-bottom: 1px solid var(--border-color);
}
.client-detail-item-list .list-item:last-child {
  border-bottom: none;
}
.client-detail-item-list .item-icon {
  /* For project icon, transaction icon */
  width: 32px; /* Smaller icons in lists */
  height: 32px;
  font-size: 1em;
  flex-shrink: 0;
  border-radius: var(--border-radius);
  background-color: var(--bg-element);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-detail-item-list .item-icon.income {
  background-color: color-mix(in srgb, var(--accent-positive) 15%, transparent);
  border-color: var(--accent-positive);
  color: var(--accent-positive);
}
.client-detail-item-list .item-icon.expense {
  background-color: color-mix(in srgb, var(--accent-negative) 15%, transparent);
  border-color: var(--accent-negative);
  color: var(--accent-negative);
}

.client-detail-item-list .item-content .item-title.popup-project-link {
  cursor: pointer;
  text-decoration: none;
  color: var(--accent-primary);
  font-weight: 500;
}
.client-detail-item-list .item-content .item-title.popup-project-link:hover {
  text-decoration: underline;
}
.client-detail-item-list .item-content .item-title {
  font-weight: 500;
  font-size: 1em;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.client-detail-item-list .item-content .item-subtitle {
  font-size: 0.85em;
  color: var(--text-secondary);
}
.client-detail-item-list .item-meta {
  /* For project status tag or transaction amount/date */
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.client-detail-item-list .item-meta .tag {
  /* Project status */
  font-size: 0.8em;
  padding: 3px 8px;
}
.client-detail-item-list .item-meta .amount {
  /* Transaction amount */
  font-weight: 600;
  font-size: 1em;
  display: block;
}
.client-detail-item-list .item-meta .amount.income {
  color: var(--accent-positive);
}
.client-detail-item-list .item-meta .amount.expense {
  color: var(--accent-negative);
}
.client-detail-item-list .item-meta .date {
  /* Transaction date */
  font-size: 0.8em;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

/* Markdown content within Notes tab */
.client-detail-popup-tab-content .markdown-content {
  font-size: 0.95em;
  line-height: 1.6;
}
.client-detail-popup-tab-content .markdown-content p:first-child {
  margin-top: 0;
}
.client-detail-popup-tab-content .markdown-content p:last-child {
  margin-bottom: 0;
}

/* --- Finances View Redesign --- */
#finances-view #finance-summary-grid {
  display: grid;
  /* MOBILE FIRST: Default to 2x2 grid */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md); /* Smaller gap for mobile */
  margin-bottom: var(
    --spacing-lg
  ); /* Reduced margin for mobile if needed, or keep consistent */
}

#finances-view #finance-summary-grid .dashboard-card {
  background-color: var(--bg-content);
  padding: var(--spacing-md); /* Adjust padding for mobile */
  text-align: left;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-subtle);
}

#finances-view #finance-summary-grid .dashboard-card .value {
  /* MOBILE FONT SIZE for stats values */
  font-size: 1.6em; /* Smaller for 2x2 mobile layout */
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  line-height: 1.2;
}
#finances-view #finance-summary-grid .dashboard-card .value.positive {
  color: var(--accent-positive);
}
#finances-view #finance-summary-grid .dashboard-card .value.negative {
  color: var(--accent-negative);
}
#finances-view #finance-summary-grid .dashboard-card .label {
  /* MOBILE FONT SIZE for stats labels */
  font-size: 0.85em; /* Smaller for 2x2 mobile layout */
  color: var(--text-secondary);
  line-height: 1.3; /* Ensure good line height for smaller text */
}
#finances-view
  #finance-summary-grid
  .dashboard-card
  .label
  .outstanding-subtext {
  font-size: 0.9em; /* Relative to its parent label */
  color: var(--text-secondary);
  opacity: 0.8;
  display: block;
  margin-top: 2px; /* Small margin for subtext */
}

#finances-view #finance-summary-grid.content-section {
  /* Be more specific if needed */
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* Finance Tabs Container (styles from previous response, unchanged here) */
#finance-tabs-container {
  background-color: var(--bg-content);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-subtle);
  padding-top: 0;
}

.finance-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
  padding: 0 var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.finance-tabs::-webkit-scrollbar {
  display: none;
}

.finance-tab {
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1em;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: -1px;
}
.finance-tab i {
  font-size: 1em;
}
.finance-tab:hover {
  color: var(--text-primary);
}
.finance-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.finance-tab-content {
  display: none;
  animation: viewFadeIn 0.3s ease-out forwards;
}
.finance-tab-content.active {
  display: block;
}

/* Transaction Log Specific Styling (styles from previous response, unchanged here) */
#finance-tab-transaction-log .detail-tab-header h3 {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-primary);
}
#finance-tab-transaction-log #transaction-search-input {
  max-width: 100%;
  margin-bottom: var(--spacing-lg);
  background-color: var(--bg-element);
}
#finance-tab-transaction-log #transaction-list-container.item-list-view {
  margin-top: 0;
  padding: 0;
  list-style: none;
}
.transaction-list-item-redesign {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  /* background-color: var(--bg-element); */
  /* border-radius: var(--border-radius); */
  padding: var(--spacing-md);
  /* margin-bottom: var(--spacing-md); */
  /* box-shadow: var(--shadow-subtle); */
  border-bottom: 1px solid var(--border-color);
}
.transaction-list-item-redesign:last-child {
  margin-bottom: 0;
}
.transaction-icon-col .item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
}
.transaction-icon-col .item-icon.income {
  background-color: color-mix(in srgb, var(--accent-positive) 20%, transparent);
  color: var(--accent-positive);
  border: 1px solid color-mix(in srgb, var(--accent-positive) 40%, transparent);
}
.transaction-icon-col .item-icon.expense {
  background-color: color-mix(in srgb, var(--accent-negative) 20%, transparent);
  color: var(--accent-negative);
  border: 1px solid color-mix(in srgb, var(--accent-negative) 40%, transparent);
}
.transaction-details-col {
  flex-grow: 1;
  min-width: 0;
}
.transaction-details-col .item-title {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-details-col .item-subtitle {
  font-size: 0.85em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-details-col .item-subtitle .project-link {
  color: var(--accent-secondary);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}
.transaction-details-col .item-subtitle .project-link:hover {
  text-decoration: underline;
}
.transaction-amount-col {
  text-align: right;
  flex-shrink: 0;
  margin-left: var(--spacing-md);
}
.transaction-amount-col .amount {
  font-weight: 600;
  font-size: 1.05em;
  display: block;
}
.transaction-amount-col .amount.income {
  color: var(--accent-positive);
}
.transaction-amount-col .amount.expense {
  color: var(--accent-negative);
}
.transaction-amount-col .date {
  font-size: 0.8em;
  color: var(--text-secondary);
  display: block;
  margin-top: var(--spacing-xs);
}
.transaction-actions-col {
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.transaction-list-item-redesign:hover .transaction-actions-col {
  opacity: 1;
}
.transaction-actions-col .edit-transaction-btn,
.transaction-actions-col .delete-transaction-btn {
  padding: 6px 8px;
  font-size: 0.85em;
  /* Add any other styles from the original delete-transaction-btn rule if needed */
}

/* Mobile-specific adjustments */
/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .transaction-list-item-redesign {
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  .transaction-list-item-redesign.expanded {
    flex-wrap: wrap;
    background-color: color-mix(in srgb, var(--bg-element) 60%, transparent);
    border-radius: var(--border-radius);
  }
  
  .transaction-list-item-redesign:active {
    background-color: color-mix(in srgb, var(--bg-element) 40%, transparent);
  }
  
  /* Collapsed state: single row */
  .transaction-icon-col {
    flex-shrink: 0;
  }
  
  .transaction-details-col {
    flex: 1;
    min-width: 0;
  }
  
  .transaction-details-col .item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
  }
  
  .transaction-details-col .item-subtitle {
    display: none;
  }
  
  /* Expanded state: show all details */
  .transaction-list-item-redesign.expanded .transaction-details-col .item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-bottom: var(--spacing-xs);
  }
  
  .transaction-list-item-redesign.expanded .transaction-details-col .item-subtitle {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.8em;
  }
  
  .transaction-amount-col {
    flex-shrink: 0;
    margin-left: auto;
  }
  
  .transaction-list-item-redesign.expanded .transaction-amount-col {
    flex-basis: 100%;
    text-align: left;
    margin-left: 52px;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  }
  
  .transaction-actions-col {
    display: none;
    opacity: 1;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }
  
  .transaction-list-item-redesign.expanded .transaction-actions-col {
    display: flex;
    flex-basis: 100%;
    justify-content: flex-end;
    margin-left: 0;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  }
  
  .transaction-actions-col .edit-transaction-btn,
  .transaction-actions-col .delete-transaction-btn {
    padding: 6px 8px;
    font-size: 0.85em;
  }
}

/* Styles for Invoice Placeholder (styles from previous response, unchanged here) */
#finance-tab-invoices .detail-tab-header h3,
#finance-tab-charts .detail-tab-header h3 {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-primary);
}
.invoice-placeholder {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--text-secondary);
  background-color: var(--bg-element);
  border-radius: var(--border-radius-lg);
  margin-top: var(--spacing-sm);
}
.invoice-placeholder i.fas.fa-file-invoice {
  font-size: 3.5em;
  margin-bottom: var(--spacing-lg);
  opacity: 0.6;
  color: var(--accent-secondary);
}
.invoice-placeholder p {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.invoice-placeholder small {
  font-size: 0.95em;
}

/* Styles for Charts Placeholder (ensure canvas is sized) */
.chart-placeholder-item .chart-area {
  min-height: 220px; /* Keep your min-height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-color); /* Keep or remove as desired */
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  background-color: var(--bg-content); /* Keep or remove as desired */
  position: relative; /* For canvas positioning */
}

.chart-placeholder-item .chart-area canvas {
  /* Make canvas take up available space within its container */
  max-width: 100%;
  max-height: 350px; /* Or adjust as needed for your layout */
  display: block; /* Remove extra space below canvas */
}

/* Hide the placeholder text if a canvas is present and likely being used by Chart.js */
.chart-placeholder-item .chart-area canvas + .chart-js-placeholder-text {
  display: none;
}

/* If canvas is not there, show the placeholder text */
.chart-placeholder-item
  .chart-area:not(:has(canvas))
  .chart-js-placeholder-text {
  display: block;
}
.chart-placeholder-item .chart-area:not(:has(canvas)) i {
  /* If you re-add icons */
  font-size: 2.5em;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
  color: var(--accent-primary);
  display: block; /* Ensure icon is displayed if canvas is missing */
}

/* Optional: Style for chart tooltips to match theme (Chart.js has options too) */
.chartjs-tooltip {
  background: var(--bg-element);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  opacity: 0.9;
  pointer-events: none; /* Important */
  transition: opacity 0.15s ease;
}
.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--spacing-sm);
}

/* --- Responsive adjustments for Finance Stats Grid --- */
@media (min-width: 769px) {
  /* Or your preferred breakpoint for larger screens */
  #finances-view #finance-summary-grid {
    grid-template-columns: repeat(4, 1fr); /* Switch to 4 columns */
    gap: var(--spacing-lg); /* Restore larger gap */
    margin-bottom: var(--spacing-xl); /* Restore larger margin */
  }
  #finances-view #finance-summary-grid .dashboard-card {
    padding: var(--spacing-lg); /* Restore larger padding */
  }
  #finances-view #finance-summary-grid .dashboard-card .value {
    font-size: 2.2em; /* Restore larger font size for values */
  }
  #finances-view #finance-summary-grid .dashboard-card .label {
    font-size: 0.95em; /* Restore larger font size for labels */
  }
  .charts-placeholder-grid {
    grid-template-columns: repeat(2, 1fr); /* Charts side-by-side */
  }
  .finance-tab-content-area {
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  }
}

/* --- Finance Chart Tab Redesign --- */
#finance-tab-charts .detail-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: var(--spacing-md);
}

.time-range-filter {
  display: flex;
  gap: var(--spacing-xs);
  background-color: var(--bg-element);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.time-range-filter button {
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.85em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.time-range-filter button:hover {
  background-color: var(--button-secondary-hover-bg);
  color: var(--text-primary);
}

.time-range-filter button.active {
  background-color: var(--accent-primary);
  color: var(--accent-primary-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.time-range-filter button.active:hover {
  background-color: var(--accent-primary-hover);
}

.charts-grid-container {
  /* Was .charts-placeholder-grid */
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* Responsive columns */
  gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
  /* For larger screens, enforce 2x2 */
  .charts-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.chart-item-container {
  /* Was .chart-placeholder-item */
  background-color: var(--bg-content); /* Match existing card style */
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
}

.chart-item-container h4 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.chart-item-container .chart-area {
  flex-grow: 1; /* Allow chart area to take available space */
  min-height: 250px; /* Ensure a decent minimum height */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* For canvas absolute positioning if needed, or direct sizing */
  background-color: var(
    --bg-element-transparent
  ); /* Subtle background for the chart drawing area */
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

.chart-item-container .chart-area canvas {
  max-width: 100%;
  max-height: 100%; /* Ensure canvas doesn't overflow its container */
  display: block;
}

.chart-item-container .chart-area .chart-js-placeholder-text,
.chart-item-container .chart-area .placeholder-text {
  /* Target both potential placeholder classes */
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

/* Hide placeholder if canvas is present and likely to be drawn on */
.chart-item-container .chart-area canvas + .chart-js-placeholder-text,
.chart-item-container .chart-area canvas + .placeholder-text {
  display: none;
}
.chart-item-container .chart-area:not(:has(canvas)) .chart-js-placeholder-text,
.chart-item-container .chart-area:not(:has(canvas)) .placeholder-text {
  display: block;
}

/* === START: Redesigned Note Card Styles for Notes View === */

/* Base .note-card style (ensure it doesn't set a conflicting color itself) */
.note-card {
  /* ... keep existing .note-card styles like padding, border-radius, shadow ... */
  /* This is the default style if no color class is applied */
  background-color: var(--bg-element);
  color: var(--text-primary);
}

/* New, specific color theme classes for note cards */
.note-card.note-color-blue {
  background-color: var(--accent-blue);
  color: var(--accent-secondary-text-dark); /* Dark text for contrast on light blue bg */
}
body.light-theme .note-card.note-color-blue {
  color: var(--accent-secondary-text-light); /* Lighter text for light theme */
}

.note-card.note-color-pink {
  background-color: var(--accent-pink);
  color: var(--accent-primary-text-dark);
}
body.light-theme .note-card.note-color-pink {
  color: var(--accent-primary-text-light);
}

.note-card.note-color-purple {
  background-color: var(--accent-purple);
  color: var(--accent-purple-text-dark);
}
body.light-theme .note-card.note-color-purple {
  /**color: var(--accent-purple-text-light);**/
}

.note-card.note-color-orange {
  background-color: var(--accent-orange);
  color: var(--accent-tertiary-text-dark);
}
body.light-theme .note-card.note-color-orange {
  color: var(--accent-tertiary-text-light);
}


/* Styling for children elements to inherit the card's primary text color */
.note-card .note-card-header .note-card-icon,
.note-card .note-card-header .note-card-icon .fas,
.note-card .note-card-header .note-card-title,
.note-card .note-card-content,
.note-card .note-card-meta,
.note-card .note-card-meta span,
.note-card .note-card-meta .project-link,
.note-card .markdown-content *,
.note-card .markdown-content p,
.note-card .markdown-content li,
.note-card .markdown-content strong,
.note-card .markdown-content em,
.note-card .markdown-content blockquote,
.note-card .markdown-content h1,
.note-card .markdown-content h2,
.note-card .markdown-content h3,
.note-card .markdown-content h4,
.note-card .markdown-content h5,
.note-card .markdown-content h6 {
  color: inherit;
}

/* Special handling for links within markdown */
.note-card .markdown-content a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.note-card .markdown-content a:hover {
  opacity: 1;
}

/* Styling for the icon wrapper in the note card header */
.note-card-header .note-card-icon {
  background-color: transparent !important;
  border: none !important;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-sm);
}

/* Styling for the <i> tag (FontAwesome icon) itself */
.note-card-header .note-card-icon .fas {
  font-size: 1.1em;
  line-height: 1;
}
/* === END: Redesigned Note Card Styles for Notes View === */

/* Ensure the action buttons (edit/delete) remain visually consistent and accessible */
/* Their existing styling should largely work, but confirm contrast against new backgrounds */
.note-card .note-card-actions button {
  /* Example: If buttons become hard to see on some backgrounds, adjust them slightly */
  /* background-color: rgba(0,0,0,0.1);
    color: currentColor;
    border: 1px solid rgba(0,0,0,0.2); */
  /* Keep original styling as per request - these are just considerations */
}
.note-card .note-card-actions button:hover {
  /* Ensure hover state is also clear */
  /* background-color: rgba(0,0,0,0.2); */
}

/* === END: Redesigned Note Card Styles for Notes View === */

/* style.css */
.calendar-main-area {
    display: flex;
    gap: var(--spacing-lg);
    flex-grow: 1;
    /*overflow: hidden; /* Important for flex children */
    /*height: calc(100% - 60px - var(--spacing-md));*/ /* Adjust 60px if view-header height changes */
}
.calendar-grid-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-content); /* Give it a background */
    padding: var(--spacing-sm); /* Padding around the calendar */
}
#calendar-grid-container {
    flex-grow: 1;
}
/* FullCalendar specific overrides (use browser inspector to find selectors) */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: var(--spacing-md) !important;
    padding: 0 var(--spacing-xs);
}
.fc .fc-toolbar-title {
    font-size: 1.4em !important;
    color: var(--text-primary);
}
.fc .fc-button {
    background-color: var(--bg-element) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    text-transform: capitalize;
}
.fc .fc-button:hover {
    background-color: var(--button-secondary-hover-bg) !important;
}
.fc .fc-button-primary.fc-button-active {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary-text) !important;
}
.fc-daygrid-day.fc-day-today { /* Today's date */
    background-color: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
}
.fc-daygrid-day.selected-day {
    background-color: color-mix(in srgb, var(--accent-blue) 20%, transparent) !important;
    box-shadow: inset 0 0 0 2px var(--accent-blue);
}

#events-panel {
    width: 320px;
    flex-shrink: 0;
    background-color: var(--bg-content);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-subtle);
    overflow-y: auto;
    border: 1px solid var(--border-color);
}
#events-panel-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}
.panel-event-item {
    display: flex;
    align-items: flex-start; /* Align items to the top if content wraps */
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
    background-color: var(--bg-element);
    cursor: pointer;
    transition: background-color 0.2s;
}
.panel-event-item:hover {
    background-color: var(--list-item-hover-bg);
}
.panel-event-color-bar {
    width: 4px;
    align-self: stretch; /* Make bar full height of item */
    border-radius: 2px;
    flex-shrink: 0;
}
.panel-event-details {
    flex-grow: 1;
}
.panel-event-title {
    font-weight: 600;
    display: block;
    color: var(--text-primary);
}
.panel-event-time, .panel-event-subtitle {
    font-size: 0.85em;
    color: var(--text-secondary);
    display: block;
}
.panel-event-item .edit-panel-event-btn .delete-panel-event-btn {
    margin-left: auto;
    padding: 5px;
    font-size: 0.9em;
    flex-shrink: 0;
}

/* Mobile adjustments for events panel */
@media (max-width: 992px) { /* Same breakpoint as POC */
    .calendar-main-area {
        flex-direction: column;
        height: auto; /* Allow it to grow */
    }
    .calendar-grid-wrapper {
         min-height: 400px; /* Ensure calendar has some height on mobile */
    }
    #events-panel {
        width: 100%;
        margin-top: var(--spacing-lg);
        max-height: 40vh; /* Limit height and allow scroll */
    }
     /* For mobile dot display - very basic example, FullCalendar's dayMaxEvents is better */
    .fc-daygrid-day-events { /* Container for events in a day cell */
        /* display: flex;
        justify-content: center;
        align-items: center;
        min-height: 20px; Prevent collapsing */
    }
    .fc-daygrid-event-harness { /* Each event wrapper */
        /* display: none;  Hide the default event bar */
    }
    .fc-daygrid-day-frame.has-events::after { /* Add this class via JS */
        /* content: '•';
        font-size: 2em;
        color: var(--accent-primary);
        display: block;
        text-align: center; */
    }
}

/* --- Invoices Tab Specific Styles --- */

/* Header: "Invoices" title and "Create Invoice" button on one line */
#finance-tab-invoices > .detail-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0; /* Resetting from inline style for consistency */
  margin-bottom: var(--spacing-lg);
  /*border-bottom: 1px solid var(--border-color);*/
  padding-bottom: var(--spacing-md);
}

#finance-tab-invoices > .detail-tab-header h3 {
  margin-bottom: 0;
  font-size: 1.3em; /* Matching other tab headers */
  font-weight: 600;
  color: var(--text-primary);
}

/* Ensure the create invoice button has the gradient and correct styling */
#finance-tab-invoices #create-invoice-btn-tab {
  /* These should ideally come from a shared .button-gradient class or .primary if it's a gradient */
  background: linear-gradient(
    90deg,
    var(--accent-pink) 0%,
    var(--accent-blue) 100%
  );
  color: #ffffff; /* Ensure text is white */
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  /* Inherit other button styles like padding, font-size, border-radius, etc.
     If using a specific class like .button-gradient, ensure it's applied in JS */
}
#finance-tab-invoices #create-invoice-btn-tab:hover {
   background: linear-gradient(
    90deg,
    var(--accent-pink-hover) 0%,
    color-mix(in srgb, var(--accent-blue) 90%, black 10%) 100%
  );
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
   transform: translateY(-1px);
}


/* Controls: Search and Filter on the same line, ALIGNED LEFT */
#finance-tab-invoices .invoice-list-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  justify-content: flex-start; /* Align items to the start (left) */
}

#finance-tab-invoices #invoice-search-input {
  flex-grow: 0;
  width: auto;
  min-width: 250px;
  max-width: 350px;
  margin-bottom: 0;
  /* Using default input styling defined globally */
}

#finance-tab-invoices #invoice-status-filter {
  flex-grow: 0;
  width: auto;
  min-width: 180px;
  margin-bottom: 0;
  /* Using default select styling defined globally */
}

/* Invoice Table Container - This will be the distinct block */
#invoice-list-table-container {
  overflow-x: auto;
  background-color: var(--bg-element);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-subtle);
  /*padding: var(--spacing-xs);*/
  border: 1px solid var(--border-color);
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
}

/* Table Header Row */
.invoice-table thead tr {
  /* Dark Theme: bg-content is darker than bg-element */
  background-color: var(--bg-content);
}
body.light-theme .invoice-table thead tr {
    /* Light Theme: Use a mix to get slightly darker than table bg */
    background-color: color-mix(in srgb, var(--bg-element-light) 90%, var(--text-secondary-light) 10%);
}


.invoice-table th {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--text-primary); /* Header text primary for contrast */
  /*font-size: 0.825em;*/
  text-transform: none;
  letter-spacing: 0.25px;
  white-space: nowrap;
}

/* Table Data Rows */
.invoice-table tbody tr {
  background-color: transparent; /* Will show --bg-element from container */
  transition: background-color 0.15s ease-out;
}

.invoice-table tbody tr:hover {
  background-color: var(--list-item-hover-bg);
}

.invoice-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  color: var(--text-primary);
}
.invoice-table tbody tr:last-child td {
    border-bottom: none;
}


.invoice-table td[data-label="Amount"] {
  font-weight: 500;
  /* color: var(--text-primary); Already set for td */
}

/* Invoice Action Buttons - Icon Only */
.invoice-actions-cell {
  text-align: right;
}

.invoice-actions-cell button.icon-only {
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--spacing-xs);
  margin-left: var(--spacing-xs);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.1s ease;
  font-size: 1em; /* Base icon size */
}

.invoice-actions-cell button.icon-only:hover {
  color: var(--accent-primary);
  transform: scale(1.1);
  background-color: transparent;
}
.invoice-actions-cell button.icon-only:active {
  transform: scale(0.95);
}


/* Status Tags in Table */
.invoice-table .tag-invoice-status {
  font-size: 0.75em;
  padding: 5px 12px;
  border-radius: 15px;
  color: var(--accent-primary-text); /* White text for better contrast on colored tags */
  font-weight: 500;
  text-transform: capitalize;
  display: inline-block; /* Ensure proper sizing */
  line-height: 1.4;
}

.tag-invoice-status.draft {
    background-color: var(--text-secondary); /* Grey for draft */
    /* For dark theme, text-secondary is light, so ensure text is dark for this specific tag */
    color: var(--bg-content);
}
body.light-theme .tag-invoice-status.draft {
    color: var(--bg-content-light); /* Lighter text for light theme draft on grey */
}

.tag-invoice-status.sent { background-color: var(--accent-blue); }
.tag-invoice-status.paid { background-color: var(--accent-green); }
.tag-invoice-status.overdue { background-color: var(--accent-orange); }
.tag-invoice-status.cancelled { background-color: var(--accent-alert); }


/* Responsive Table for Invoices */
@media (max-width: 900px) {
  #invoice-list-table-container {
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .invoice-table thead { display: none; }
  .invoice-table tbody, .invoice-table tr, .invoice-table td { display: block; width: 100%; }
  .invoice-table tr { 
    margin-bottom: var(--spacing-md); 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md); /* Increased padding for cards */
    background-color: var(--bg-content);
    box-shadow: var(--shadow-subtle);
  }
  .invoice-table td { 
    text-align: right; 
    padding-left: 45%; 
    position: relative; 
    border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 50%, transparent);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    white-space: normal;
  }
  .invoice-table td:last-child { border-bottom: none; }
  .invoice-table td::before { 
    content: attr(data-label); 
    position: absolute; 
    left: var(--spacing-md); 
    width: calc(45% - var(--spacing-lg)); /* Adjust for padding */
    text-align: left; 
    font-weight: 600;
    color: var(--text-secondary); 
    white-space: nowrap;
    font-size: 0.8em;
  }
  .invoice-actions-cell { text-align: right !important; padding-top: var(--spacing-md); }
  .invoice-actions-cell::before { display: none; }

  #finance-tab-invoices .invoice-list-controls {
    flex-direction: column;
    align-items: stretch;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
  }
  #finance-tab-invoices #invoice-search-input,
  #finance-tab-invoices #invoice-status-filter {
    max-width: 100%;
    min-width: 100%;
  }
}

/* --- Invoice Modal Specific Width --- */
.modal-content.modal-content-wide-invoice {
  max-width: 750px; /* Adjust as needed, desired mockup looks wider */
  /* You might also want to adjust max-height if content becomes very tall */
  /* max-height: 95vh; */
}

/* --- Invoice Form Layout Adjustments --- */
/* Ensure the root of your invoice form HTML has this ID if you use it in JS */
#invoice-form-modal-content .form-grid.two-columns {
  /* This class is already used in your getInvoiceFormHtml for client/project etc. */
  /* No change needed here if it's already display: grid; gap: ...; */
}

/* Line Items Container & Individual Items */
#invoice-line-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm); /* Space before "Add Item" button */
}

.invoice-line-item {
  display: grid;
  /* Adjust grid columns to match the desired mockup: Description, Qty, Unit Price, Amount, Remove Btn */
  grid-template-columns: 1fr 70px 100px 100px auto; /* Adjust widths as needed */
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-xs) 0; /* Minimal vertical padding */
  /* border-bottom: 1px solid var(--border-color); remove if too busy */
}
/*
.invoice-line-item:last-child {
  border-bottom: none;
}
*/

.invoice-line-item input[type="text"],
.invoice-line-item input[type="number"] {
  margin-bottom: 0; /* Remove default bottom margin from inputs within line items */
  font-size: 0.85em; /* Slightly smaller font for line items */
  padding: 8px 10px; /* Adjust padding for compactness */
}

.invoice-line-item .line-item-description {
  /* Takes up 1fr (first column) */
}
.invoice-line-item .line-item-quantity,
.invoice-line-item .line-item-unit-price,
.invoice-line-item .line-item-amount {
  text-align: right; /* Align numeric inputs to the right */
}
.invoice-line-item .line-item-amount {
  background-color: var(--bg-main); /* Differentiate readonly field */
  border-style: dashed; /* Optional: further differentiate */
  color: var(--text-secondary);
}

.invoice-line-item .remove-line-item-btn {
  padding: 6px; /* Make remove button a bit smaller */
  background-color: transparent;
  border: none;
  color: var(--accent-negative);
}
.invoice-line-item .remove-line-item-btn:hover {
  background-color: color-mix(in srgb, var(--accent-negative) 15%, transparent);
}


/* "Add Item" Button - Match your existing primary/secondary button styles as needed */
#add-invoice-line-item-btn {
  /* Retains secondary style from your JS, this is fine */
  /* You can add margin if needed, e.g., margin-top: var(--spacing-sm); */
}

/* Totals Summary Section - Align to the right as per mockup */
#invoice-totals-summary {
  margin-top: var(--spacing-lg); /* More space above totals */
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: grid; /* Use grid for better alignment */
  grid-template-columns: auto auto; /* Label column, Value column */
  justify-content: end; /* Align grid to the right of its container */
  gap: var(--spacing-xs) var(--spacing-md); /* Row gap, Column gap */
  font-size: 0.9em;
}

#invoice-totals-summary > div { /* Each row (label-value pair) */
  display: contents; /* Makes children direct grid items */
}
#invoice-totals-summary > div > *:nth-child(odd) { /* Labels */
  text-align: right;
  color: var(--text-secondary);
  padding-right: var(--spacing-sm);
}
#invoice-totals-summary > div > *:nth-child(even) { /* Values */
  text-align: right;
  font-weight: 500;
}

#invoice-totals-summary input#invoice-tax-rate {
  width: 70px; /* Specific width for tax rate input */
  margin-bottom: 0;
  padding: 6px 8px;
  font-size: 0.9em;
  text-align: right;
}

#invoice-totals-summary div[style*="font-weight: bold"] span { /* Targeting the Total Amount span */
  font-size: 1.2em; /* Make total larger */
  color: var(--text-primary);
}

/* Styling for Labels within the modal to match mockup more closely */
#invoice-form-modal-content label {
  font-size: 0.85em; /* Slightly smaller labels */
  font-weight: 500; /* Less bold */
  margin-bottom: var(--spacing-xs); /* Tighter spacing */
}

/* Markdown helper text */
#invoice-form-modal-content small,
#modal-client-notes + small { /* Target client notes markdown helper too */
  font-size: 0.8em;
  color: var(--text-secondary);
  display: block;
  margin-top: -var(--spacing-sm); /* Pull it up a bit */
  margin-bottom: var(--spacing-md); /* Space before next element */
}

.invoice-popup-outer.modal-content-wide-invoice {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-lg);
}

/* --- FAB Area Container --- */


/* --- Quick Add FAB --- */
#quick-add-fab-wrapper {
    position: fixed;
    bottom: 25px; /* Adjust as needed */
    right: 25px;  /* Adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 990; /* Ensure it's above content, but below modals */
}

#quick-add-fab-main {
    background-color: var(--accent-primary); /* Or your primary FAB color */
    color: var(--accent-primary-text);
    border: none;
    border-radius: 50%;
    width: 52px;   /* Standard FAB size */
    height: 52px;
    font-size: 1.5em;
    box-shadow: var(--shadow-raised);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 2; /* Above action list initially */
}

#quick-add-fab-main:hover {
    background-color: var(--accent-primary-hover); /* Darker shade on hover */
}

#quick-add-fab-main i {
    transition: transform 0.3s ease;
}

#quick-add-fab-wrapper.active #quick-add-fab-main i {
    transform: rotate(45deg); /* Plus to X animation */
}

#quick-add-fab-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 65px; /* Position above the main FAB */
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align items to the right */
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.9);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
    z-index: 1;
}

#quick-add-fab-wrapper.active #quick-add-fab-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s, 0s, 0s; /* visibility transition */
}

#quick-add-fab-actions li {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Push button to the right */
}


#quick-add-fab-actions button {
    background-color: var(--bg-content); /* Darker circle for sub-action */
    color: var(--text-primary);          /* Icon color */
    border: 1px solid var(--border-color);
    border-radius: 50%;                  /* Ensures it's a circle */
    width: 48px;                         /* Desired size for sub-action FABs */
    height: 48px;                        /* Make width and height equal */
    font-size: 1.2em;                    /* Adjust icon size if needed */
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    display: flex;                       /* For centering icon */
    align-items: center;                 /* Vertically center icon */
    justify-content: center;             /* Horizontally center icon */
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 0;                          /* Remove padding if icon is centered with flex */
}

#quick-add-fab-actions button:hover {
    background-color: var(--button-secondary-hover-bg);
    transform: scale(1.1);
}

#quick-add-fab-actions button i {
    line-height: 1; /* Helps with precise centering for Font Awesome icons */
    margin: 0; /* Reset any margins on the icon */
}

/* Stagger animation for sub-actions */
#quick-add-fab-wrapper.active #quick-add-fab-actions li {
    opacity: 0; /* Start hidden for stagger */
    transform: translateY(10px); /* Start slightly down for stagger */
    animation: fabActionFadeIn 0.3s ease forwards;
}

#quick-add-fab-wrapper.active #quick-add-fab-actions li:nth-child(1) { animation-delay: 0.05s; }
#quick-add-fab-wrapper.active #quick-add-fab-actions li:nth-child(2) { animation-delay: 0.1s; }
#quick-add-fab-wrapper.active #quick-add-fab-actions li:nth-child(3) { animation-delay: 0.15s; }
#quick-add-fab-wrapper.active #quick-add-fab-actions li:nth-child(4) { animation-delay: 0.2s; }
#quick-add-fab-wrapper.active #quick-add-fab-actions li:nth-child(5) { animation-delay: 0.25s; }


@keyframes fabActionFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* For Task List Items in Project Detail View */
#project-detail-view .task-item { 
    transition: background-color 0.15s ease-out; 
}

#project-detail-view .task-item:hover {
    background-color: var(--list-item-hover-bg);
}

/* For task items - target item-actions within task-item-main */
#project-detail-view .task-item .task-item-main .item-actions {
    opacity: 0; 
    transition: opacity 0.2s ease;
}

/* Show buttons when hovering over task-item */
#project-detail-view .task-item:hover .task-item-main .item-actions {
    opacity: 1;
}

/* You might want to apply similar logic to subtasks if they also have far-right actions */
#project-detail-view .subtask-item:hover {
    background-color: color-mix(in srgb, var(--list-item-hover-bg) 90%, var(--bg-element) 80%); /* Slightly different for subtasks */
}

/* For Subtask Items - Make hover only affect current row's buttons */
#project-detail-view .subtask-item .item-actions {
    opacity: 0; /* Hide by default on desktop */
    transition: opacity 0.2s ease;
}

/* Only show buttons for currently hovered subtask */
#project-detail-view .subtask-item:hover > .item-actions {
    opacity: 1;
}

/* Keep mobile behavior unchanged */
@media (max-width: 768px) {
    #project-detail-view .task-item .item-actions,
    #project-detail-view .subtask-item .item-actions {
        opacity: 1 !important; /* Force visibility on mobile */
        position: static;
        transform: none;
        background: none;
        box-shadow: none;
        padding: 0;
        gap: var(--spacing-sm);
        margin-left: auto;
        align-self: center;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
}
      

/* --- Help & Guide View --- */
#help-guide-view { 
    flex-direction: column; /* View header is on top of the layout */
    height: 100%;
    overflow: hidden;
}
 #help-guide-view.active {
  display: flex; /* Ensures the flex context for .help-guide-layout */
    /* height: 100%; Let flex-grow handle height allocation within main-view-area */
 }

#help-guide-view .view-header {
    flex-shrink: 0; 
}
#help-guide-view .view-header h2 {
    display: flex; 
    align-items: center;
    gap: var(--spacing-sm);
}
#help-guide-view .view-header h2 i {
    font-size: 0.9em; 
    opacity: 0.8;
}

#help-guide-view .help-guide-view-actions {
    margin-left: auto; 
}

#help-search-input { 
    max-width: 300px; 
    margin-bottom: 0; 
    background-color: var(--bg-element); 
    border: 1px solid var(--border-color);
    padding: 8px 12px; /* Consistent padding */
}
body.light-theme #help-search-input {
     background-color: var(--bg-main-light);
     border: 1px solid var(--border-color-light);
}


#help-guide-view .help-guide-layout { 
    display: flex;
    gap: var(--spacing-lg);
    flex-grow: 1; 
    overflow: hidden; 
}

#help-topics-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--bg-content); 
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius-lg); 
    overflow-y: auto;
    height: 100%; 
}
body.light-theme #help-topics-sidebar {
    background-color: var(--bg-element-light); 
}

#help-topics-sidebar h4 {
    font-size: 1.05em; 
    /*font-weight: 500; */
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary); 
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color); 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

#help-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#help-topics-list li {
    margin-bottom: 2px; 
}

#help-topics-list .help-topic-btn {
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    gap: var(--spacing-sm); 
    width: 100%;
    padding: 10px var(--spacing-sm);
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-weight: 300;
    text-align: left; 
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9rem; 
}
#help-topics-list .help-topic-btn i.topic-icon {
    width: 16px; 
    text-align: center;
    opacity: 0.7;
    color: var(--text-secondary); 
    flex-shrink: 0; 
    margin-right: 0; 
}

#help-topics-list .help-topic-btn:hover {
    background-color: var(--bg-element);
    color: var(--text-primary);
}
#help-topics-list .help-topic-btn:hover i.topic-icon {
    opacity: 1;
    color: var(--text-primary);
}

#help-topics-list .help-topic-btn.active {
    background-color: var(--accent-primary); 
    color: var(--accent-primary-text-dark); 
    font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 
}
body.light-theme #help-topics-list .help-topic-btn.active {
    color: var(--accent-primary-text-light);
}

#help-topics-list .help-topic-btn.active i.topic-icon {
    opacity: 1;
    color: var(--accent-primary-text-dark); 
}
body.light-theme #help-topics-list .help-topic-btn.active i.topic-icon {
    color: var(--accent-primary-text-light);
}

#help-topics-list .help-submenu {
    list-style: none;
    padding-left: var(--spacing-sm); 
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    border-left: 2px solid var(--border-color); 
    margin-left: calc(var(--spacing-sm) + 8px); 
    display: none; 
}
#help-topics-list .has-submenu.active + .help-submenu {
    display: block; 
}
#help-topics-list .help-submenu .help-topic-btn {
    font-size: 0.85rem; 
    padding: 8px var(--spacing-sm);
}
#help-topics-list .help-submenu .help-topic-btn i.topic-icon {
    opacity: 0.6; 
}
#help-topics-list .help-submenu .help-topic-btn.active i.topic-icon {
    opacity: 1; 
}


#help-topics-list .has-submenu::after { 
    content: '▸';
    margin-left: auto; 
    opacity: 0.6;
    transition: transform 0.2s ease-in-out;
    padding-left: var(--spacing-sm); 
}
#help-topics-list .has-submenu.active::after {
    transform: rotate(90deg);
}


#help-article-container {
    flex-grow: 1;
    padding: var(--spacing-lg); 
    overflow-y: auto;
    background-color: var(--bg-element-transparent); 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius-lg); 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}
body.light-theme #help-article-container {
    background-color: var(--bg-content-light); 
}

#help-article-container .help-article-header-internal { 
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color); 
    flex-shrink: 0; 
}
#help-article-container #help-article-title { 
    font-size: 1.7em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex; 
    align-items: center;
    gap: var(--spacing-md);
}
#help-article-container #help-article-title i.article-header-icon { 
    font-size: 1em; 
    opacity: 0.8;
    color: var(--accent-secondary); 
}


#help-search-results { 
    background-color: var(--bg-main); 
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg); 
    flex-shrink: 0; 
}
body.light-theme #help-search-results {
    background-color: var(--bg-content-light);
}
#help-search-results .search-result-item {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: background-color 0.2s;
}
#help-search-results .search-result-item:hover {
    background-color: var(--bg-element);
}
#help-search-results .search-result-item h5 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.1em;
    color: var(--accent-primary);
}
#help-search-results .search-result-item p {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin:0;
}

#help-article-content { 
    line-height: 1.7;
    font-size: 0.95em; 
    flex-grow: 1; 
    overflow-y: auto; 
}
#help-article-content.content-loading {
    opacity: 0;
    transition: opacity 0.2s ease-out;
   transform: translateY(30px) scale(0.97); 
}
#help-article-content.visible { /* New class to control visibility */
    opacity: 1;
    transform: translateY(0) scale(1); 
 }

#help-article-content hr { 
    border: none;
    border-top: 1px dashed var(--border-color); 
    /*margin: var(--spacing-xl) 0;*/
}
#help-article-content > hr:nth-child(3) {
  margin-top: 8px;
}
#help-article-content > h3:nth-child(2) {
  margin-bottom: 12px;
  margin-top: 25px;
}

#help-article-content h1, 
#help-article-content h2, 
#help-article-content h3, 
#help-article-content h4 {
    color: var(--text-primary);
    margin-top: 2em; 
    margin-bottom: 1em;
    line-height: 1.3;
    font-weight: 600;
}
#help-article-content h1 { font-size: 1.8em; }
#help-article-content h2 { 
    font-size: 1.5em; 
    padding-bottom: 0.4em; 
    border-bottom: 1px dashed var(--border-color); 
}
#help-article-content h3 { font-size: 1.6em; font-weight: 600; } 
#help-article-content h4 { font-size: 1.15em; font-weight: 500; color: var(--text-secondary); } 

#help-article-content p { margin-bottom: 1.2em; } 
#help-article-content ul, #help-article-content ol { margin-bottom: 1.2em; padding-left: 1.8em; }
#help-article-content li { margin-bottom: 0.6em; }
#help-article-content a { color: var(--accent-primary); text-decoration: none; }
#help-article-content a:hover { text-decoration: underline; }
#help-article-content code {
    background-color: var(--bg-element);
    padding: 0.2em 0.5em; 
    border-radius: var(--border-radius);
    font-size: 0.85em; 
    border: 1px solid var(--border-color);
    color: var(--text-primary); 
}
#help-article-content pre { 
    background-color: var(--bg-element);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}
#help-article-content pre code { border: none; background-color: transparent; padding: 0; font-size: 0.85em;}
#help-article-content blockquote {
    border-left: 3px solid var(--accent-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-md);
    background-color: var(--bg-element-transparent); 
    color: var(--text-secondary);
    font-style: italic;
}


/* --- Custom Tooltip Styling (Refined - More Elegant) --- */
.help-tooltip {
    display: flex;
    align-items: flex-start; 
    gap: var(--spacing-sm); 
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
    border-left-width: 3px; 
    border-left-style: solid;
}

.help-tooltip i {
    font-size: 1.1em; 
    margin-top: 2px;  
    flex-shrink: 0;
    width: 18px; 
    text-align: center;
}

.help-tooltip .tooltip-content {
    flex-grow: 1;
    font-size: 0.9em; 
    line-height: 1.6;
}
.help-tooltip .tooltip-content strong { 
    font-weight: 600; 
    display: inline; 
    margin-right: 0.3em;
}
.help-tooltip .tooltip-content p { 
    margin-bottom: 0;
    display: inline; 
}
.help-tooltip .tooltip-content code {
    font-size: 0.95em; 
    background-color: color-mix(in srgb, var(--border-color) 15%, transparent); 
    border: none;
    padding: 0.15em 0.3em;
}


/* Tip Box (Elegant Version) */
.help-tooltip.tip {
    background-color: color-mix(in srgb, var(--accent-blue) 5%, transparent); 
    border-left-color: var(--accent-blue);
    color: var(--text-primary); 
}
.help-tooltip.tip i {
    color: var(--accent-blue);
}
.help-tooltip.tip strong {
    color: var(--accent-blue);
}
body.dark-theme .help-tooltip.tip {
    background-color: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-element-dark) 95%);
}
body.light-theme .help-tooltip.tip {
    background-color: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-content-light) 98%);
}


/* Note Box (Elegant Version) */
.help-tooltip.note {
    background-color: color-mix(in srgb, var(--accent-orange) 5%, transparent); 
    border-left-color: var(--accent-orange);
    color: var(--text-primary);
}
.help-tooltip.note i {
    color: var(--accent-orange);
}
.help-tooltip.note strong {
    color: var(--accent-orange);
}
body.dark-theme .help-tooltip.note {
    background-color: color-mix(in srgb, var(--accent-orange) 8%, var(--bg-element-dark) 95%);
}
body.light-theme .help-tooltip.note {
    background-color: color-mix(in srgb, var(--accent-orange) 10%, var(--bg-content-light) 98%);
}


@media (max-width: 768px) {
    #help-guide-view .view-header {
        /* Default mobile view header styling applies */
    }
    #help-guide-view .help-guide-view-actions {
        flex-grow: 1; 
    }
    #help-search-input {
        width: 100%; 
        max-width: 100%;
    }
#help-guide-view {
        display: none;
    }

    #help-guide-view.active {
        display: flex; /* Keep flex display when active */
    }
    
    /* Ensure other views properly hide when not active */
    .view:not(.active) {
        display: none !important; /* Force hide inactive views */
    }
    /* Adjust layout container */
    #help-guide-view .help-guide-layout {
        flex-direction: column;
        flex: 1;
        min-height: 0; /* Important for nested scrolling to work */
        position: relative; /* For absolute positioning of sidebar if needed */
    }
    /* Adjust sidebar for mobile */
    #help-topics-sidebar {
	width: 100%;
	max-height: 35vh;
	/* border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; */
	border: 1px solid var(--border-color);
	/* border-bottom: none; */
	overflow-y: auto;
	position: relative;
	z-index: 2;
	background-color: var(--bg-content);
	flex-shrink: 0;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out, border-width 0.3s ease-out;
}
    #help-article-container {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	/* border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); */
	border: 1px solid var(--border-color);
	/* border-top: none; */
	background-color: var(--bg-main);
	position: relative;
	z-index: 1;
}
    
    #help-article-container .help-article-header-internal {
        /* Mobile adjustments for internal article header if needed */
    }
    #help-article-container #help-article-title {
        font-size: 1.5em; 
    }
}

/* Add this to your style.css, preferably near other mobile or help-guide styles */
.mobile-only-flex { /* Utility class to show button only on mobile */
    display: none;
}

/* Styles for the mobile ToC toggle button and sidebar behavior */
@media (max-width: 768px) {
    #help-guide-view .help-guide-view-actions .mobile-only-flex {
        display: inline-flex; /* Show on mobile */
        order: -1; /* Place it before the search bar if desired */
        margin-right: var(--spacing-sm);
    }

    /* When sidebar is collapsed */
    #help-topics-sidebar.collapsed {
        max-height: 0;
        padding: 0;
        border: none;
        overflow: hidden;
    }
    /* Ensure proper spacing when sidebar is collapsed */
    #help-topics-sidebar.collapsed + #help-article-container {
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-color);
        flex: 1;
    }
    /* Optional: if the header border is inside the sidebar */
    #help-topics-sidebar.collapsed h4 {
        display: none; /* Hide header when collapsed */
    }
}

/*----Skeletons----*/

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    opacity: 0.7;
    background-color: var(--bg-element); /* Use theme variable */
    border-radius: var(--border-radius);
}

.skeleton-text {
    width: 100%;
    height: 0.8em;
    margin-bottom: 0.5em;
}
.skeleton-text:last-child {
    margin-bottom: 0;
}
.skeleton-title {
    width: 60%;
    height: 1.2em;
    margin-bottom: 0.8em;
}
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-card {
    padding: var(--spacing-md);
    background-color: var(--bg-content);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-subtle);
    margin-bottom: var(--spacing-lg);
}

@keyframes skeleton-loading {
    0% {
        background-color: var(--bg-element);
    }
    100% {
        background-color: color-mix(in srgb, var(--bg-element) 70%, var(--border-color) 30%);
    }
}

/* Specific Skeleton for Dashboard Stats */
.stat-card-skeleton .stat-value-skeleton {
    width: 50px; height: 1.8rem; margin: 0 auto 0.25rem auto;
    background-color: var(--bg-element); border-radius: 4px;
}
.stat-card-skeleton .stat-label-skeleton {
    width: 80px; height: 0.7rem; margin: 0 auto;
    background-color: var(--bg-element); border-radius: 4px;
}

/* Skeleton for Widget Items (like deadlines, schedule) */
.widget-item-skeleton {
    background-color: var(--bg-element-transparent);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.widget-item-skeleton .skeleton-text { height: 0.7em; margin-bottom: 0.4em; }
.widget-item-skeleton .skeleton-title-sm { width: 70%; height: 1em; margin-bottom: 0.5em; }

/* Skeleton for Sticky Notes */
.sticky-note-skeleton {
    background-color: var(--bg-element);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    height: 100px; /* Approx height of a sticky note */
}

/* --- Note View Popup Redesign --- */
.basicLightbox__placeholder .note-popup-container {
    background-color: var(--bg-content); /* Default for dark theme */
    color: var(--text-primary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-raised);
    max-width: 680px; /* Increased slightly for a bit more space */
    min-width: 320px; /* Ensure it doesn't get too crushed on small lightboxes */
    width: 90vw; /* Responsive width */
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* Centering if lightbox placeholder is wider */
    max-height: 85vh; /* Ensure it's scrollable if content is very long */
    overflow: hidden; /* We'll make internal parts scrollable */
}

body.light-theme .basicLightbox__placeholder .note-popup-container {
	background-color: var(--bg-content);
	color: var(--text-primary-light);
	/* border: 1px solid #f0e68c; */
}

.note-popup-header {
    display: flex;
    align-items: center; /* Vertically align title and its actions */
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    flex-shrink: 0; /* Header should not shrink */
}

.note-title-wrapper {
    flex-grow: 1;
    min-width: 0; /* Allow title to shrink if actions take space */
}

.note-title-display {
    font-size: 1.7em; /* Prominent title */
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 8px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    cursor: pointer;
    display: block;
    min-height: 1.5em;
    word-break: break-word; /* Allow long titles to wrap */
}
body.light-theme .note-title-display {
    color: var(--text-primary-light);
}

.note-title-display:hover {
    background-color: var(--bg-element);
}
.note-title-wrapper:hover .note-title-display::after {
    content: " (click to edit title)";
    font-size: 0.6em;
    font-style: italic;
    font-weight: normal;
    color: var(--text-secondary);
    margin-left: 8px;
    vertical-align: middle;
}


.note-title-edit {
    font-size: 1.7em;
    font-weight: 600;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius);
    background-color: var(--bg-element);
    color: var(--text-primary);
    box-sizing: border-box;
}
body.light-theme .note-title-edit {
    background-color: var(--bg-element-light);
    color: var(--text-primary-light);
}

.note-title-actions,
.note-content-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}
.note-title-actions {
    flex-shrink: 0;
}

.note-popup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm); /* Consistent gap for all items */
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md); /* Space before separator */
    padding-left: 8px; /* Align with title padding */
    flex-shrink: 0;
}
body.light-theme .note-popup-meta {
    color: var(--text-secondary-light);
}

.note-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px; /* Slightly larger padding for tags */
    border-radius: 15px; /* Pill shape */
    background-color: var(--bg-element-transparent);
    border: 1px solid var(--border-color);
}
body.light-theme .note-meta-item {
    background-color: rgba(0,0,0,0.05); /* Subtle dark background for tags on light sticky */
    border-color: rgba(0,0,0,0.1);
}
.note-meta-item i {
    opacity: 0.7;
}

.note-meta-item.project-tag { /* Special styling for project link */
    background-color: var(--accent-secondary);
    color: var(--accent-secondary-text); /* Text color for blue accent */
    border-color: var(--accent-secondary);
}
body.dark-theme .note-meta-item.project-tag {
    color: var(--accent-secondary-text-dark);
}
body.light-theme .note-meta-item.project-tag {
    color: var(--accent-secondary-text-light);
}
.note-meta-item.project-tag:hover {
    filter: brightness(110%);
}

.note-meta-item.project-link {
    cursor: pointer;
    text-decoration: none; /* Remove underline, looks like a tag */
}


.note-popup-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 var(--spacing-md) 0;
    flex-shrink: 0;
}
body.light-theme .note-popup-separator {
    border-top-color: rgba(0,0,0,0.1);
}

.note-content-wrapper {
    flex-grow: 1; /* Allow content to take available space */
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    cursor: default; /* Default cursor, edit hint implies clickability */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Make the content wrapper scrollable if its content overflows */
    min-height: 100px; /* Ensure some minimum height */
}

/* Add hover state to wrapper only when NOT editing content */
.note-content-wrapper:not(.editing-content):hover {
    background-color: var(--bg-element);
}
.note-content-wrapper:not(.editing-content) .note-content-display:hover::after {
    content: " (click to edit content)";
    font-size: 0.7em;
    font-style: italic;
    color: var(--text-secondary);
    position: absolute;
    bottom: var(--spacing-xs);
    right: var(--spacing-xs);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
    background-color: var(--button-secondary-hover-bg); /* Subtle background */
    padding: 2px 6px;
    border-radius: var(--border-radius);
    pointer-events: none; /* Prevent hint from capturing clicks */
}
.note-content-wrapper:not(.editing-content):hover .note-content-display:hover::after {
    opacity: 1;
}


.note-content-display.markdown-content {
    min-height: 50px;
    padding: var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6; /* Default from markdown-content */
    cursor: pointer; /* Make the display div itself clickable */
    color: var(--text-primary); /* Ensure it inherits */
}
body.light-theme .note-content-display.markdown-content {
    color: var(--text-primary-light);
}

.note-content-edit { /* Textarea */
    width: 100%;
    box-sizing: border-box;
    min-height: 150px;
    font-family: var(--font-app);
    font-size: 0.95em;
    line-height: 1.6;
    padding: var(--spacing-sm);
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius);
    background-color: var(--bg-element);
    color: var(--text-primary);
    resize: vertical;
    display: block;
    flex-grow: 1; /* Allow textarea to grow if wrapper is flex */
}
body.light-theme .note-content-edit {
    background-color: var(--bg-element-light);
    color: var(--text-primary-light);
}


.note-content-actions {
    margin-top: var(--spacing-sm);
    justify-content: flex-end;
    flex-shrink: 0;
}

.markdown-support-hint {
    font-size: 0.8em;
    color: var(--text-secondary);
    display: block;
    margin-top: var(--spacing-xs);
    text-align: right;
    flex-shrink: 0;
}
body.light-theme .markdown-support-hint {
    color: var(--text-secondary-light);
}

.note-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-lg); /* More space above footer */
    flex-shrink: 0;
}
body.light-theme .note-popup-footer {
    border-top-color: rgba(0,0,0,0.1);
}

.note-popup-footer button#popup-delete-note-btn {
    margin-right: auto;
    background-color: var(--accent-alert); /* Use alert color for delete */
    color: var(--accent-primary-text); /* Or specific alert text color */
}
body.dark-theme .note-popup-footer button#popup-delete-note-btn {
     color: var(--accent-tertiary-text-dark); /* Matching alert tag text for dark */
}
body.light-theme .note-popup-footer button#popup-delete-note-btn {
     color: var(--accent-tertiary-text-light); /* Matching alert tag text for light */
}
.note-popup-footer button#popup-delete-note-btn:hover {
    background-color: color-mix(in srgb, var(--accent-alert) 85%, black 15%);
}

/* Save/Cancel Inline Buttons */
.note-title-actions button,
.note-content-actions button {
    padding: 6px 10px; /* Slightly smaller */
    font-size: 0.9em;
}
.note-title-actions button.icon-only {
    padding: 6px;
}

/* Helper for hidden elements */
.hidden { display: none !important; }

/* Make the placeholder transparent ONLY for note popups */
.basicLightbox--note-popup .basicLightbox__placeholder {
    background: transparent !important; /* Override default placeholder background */
    border: none !important;          /* Override default placeholder border */
    padding: 0 !important;            /* Remove padding if note-popup-container handles it */
                                      /* (but keep if note-popup-container needs centering) */
    /* If your .note-popup-container is centered using margin: auto and has max-width,
       you might still want some padding on the placeholder for small screens,
       or ensure the placeholder takes full width/height for the overlay effect */
    display: flex; /* Helps in centering the .note-popup-container if it has margin: auto */
    align-items: center;
    justify-content: center;
}


.basicLightbox__placeholder .note-popup-container {
    background-color: var(--bg-content); /* Default for dark theme */
    color: var(--text-primary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-raised);
    max-width: 680px;
    min-width: 320px;
    width: 90vw;
    display: flex;
    flex-direction: column;
    /* margin: 0 auto; <<<< If placeholder has display:flex, no need for margin:auto here */
                       /* If placeholder has padding:0, note-popup-container will touch edges */
                       /* To center within a padding:0 placeholder, make note-popup-container use margin:auto */
                       /* For now, let's assume the display:flex on placeholder is enough with width: 90vw */
    max-height: 85vh;
    overflow: hidden;
}

/* --- EasyMDE Customizations --- */
.note-content-wrapper .EasyMDEContainer {
    /* Container that EasyMDE creates around the textarea */
    border: 1px solid var(--accent-primary); /* Match your textarea's edit border */
    border-radius: var(--border-radius);
    background-color: var(--bg-element); /* Match your textarea's edit bg */
    width: 100% !important; /* Override potential inline styles from EasyMDE */
    box-sizing: border-box;
}
body.light-theme .note-content-wrapper .EasyMDEContainer {
    background-color: var(--bg-element-light);
}


.note-content-wrapper .CodeMirror {
    /* CodeMirror is the actual editor part */
    background-color: transparent !important; /* Make it transparent to see EasyMDEContainer bg */
    color: var(--text-primary);
    border-radius: 0 0 var(--border-radius) var(--border-radius); /* Round bottom corners */
    font-family: var(--font-app);
    font-size: 0.95em;
    line-height: 1.6;
    min-height: 120px; /* Ensure a minimum height for the editor area */
    max-height: 350px; /* Prevent it from growing too large, matching maxHeight option */
    height: auto; /* Allow it to grow within constraints */
    padding: var(--spacing-sm); /* Add padding inside CodeMirror */
}
body.light-theme .note-content-wrapper .CodeMirror {
    color: var(--text-primary-light);
}


.note-content-wrapper .editor-toolbar {
    background-color: var(--bg-main); /* Use a slightly different bg for toolbar */
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* Round top corners */
    opacity: 1 !important; /* Override EasyMDE's default opacity */
    padding: 4px; /* Tighter padding for toolbar */
}
body.light-theme .note-content-wrapper .editor-toolbar {
    background-color: var(--bg-main-light);
    border-bottom-color: var(--border-color-light);
}

.note-content-wrapper .editor-toolbar button {
    color: var(--text-secondary) !important; /* Toolbar button icon color */
    border: 1px solid transparent !important; /* Remove default borders */
    padding: 5px !important; /* Adjust padding */
    margin: 2px !important;
    min-width: auto !important;
}
body.light-theme .note-content-wrapper .editor-toolbar button {
     color: var(--text-secondary-light) !important;
}

.note-content-wrapper .editor-toolbar button:hover,
.note-content-wrapper .editor-toolbar button.active {
    background-color: var(--bg-element) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
body.light-theme .note-content-wrapper .editor-toolbar button:hover,
body.light-theme .note-content-wrapper .editor-toolbar button.active {
    background-color: var(--bg-element-light) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-primary-light) !important;
}

.note-content-wrapper .editor-preview,
.note-content-wrapper .editor-preview-side {
    background-color: var(--bg-main); /* Match toolbar bg for consistency */
    color: var(--text-primary);
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color); /* Separator if toolbar is above */
}
body.light-theme .note-content-wrapper .editor-preview,
body.light-theme .note-content-wrapper .editor-preview-side {
    background-color: var(--bg-main-light);
    color: var(--text-primary-light);
    border-top-color: var(--border-color-light);
}

/* Adjust fullscreen mode */
.EasyMDEContainer.fullscreen {
    z-index: 1051 !important; /* Ensure it's above BasicLightbox overlay (usually 1010) */
}
.editor-toolbar.fullscreen {
    /* Fixed position or other adjustments might be needed if it breaks layout */
}

/* Hide the original textarea when EasyMDE is active */
.note-content-wrapper textarea.note-content-edit.hidden.mde-inited {
     /* EasyMDE applies its own class, this can be an additional check */
     /* but primarily rely on hiding it via JS when MDE is init'd */
    display: none !important;
}


.input-error { border: 1.5px solid var(--accent-alert, #e74c3c) !important; }

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;           /* Space between buttons and text */
  margin: 2rem 0 0 0;    /* Top margin to separate from grid/list, adjust as needed */
  padding-bottom: 2rem;  /* Optional: space below pagination */
}

.pagination-controls button {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
  border: none;
  border-radius: 6px;
  padding: 0.5em 1.2em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  opacity: 1;
}

.pagination-controls button:disabled {
  background: var(--bg-element);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-controls span {
  font-size: 1em;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- Global Timer Widget --- */
#global-timer-widget {
  position: fixed;
  /* Switched from bottom to top for easier drag calculation */
  top: calc(100vh - 85px); /* Approximates original position */
  left: 25px;
  background-color: var(--bg-content);
  color: var(--text-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  z-index: 980;
  transition: opacity 0.3s ease, transform 0.1s ease; /* Adjusted transition for smoother dragging */
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  cursor: grab; /* Add grab cursor to indicate it's draggable */
}

/* Add a new rule for the "grabbing" state */
#global-timer-widget.dragging {
  cursor: grabbing;
  transition: none; /* Disable transitions while dragging for responsiveness */
}

#global-timer-widget:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.timer-widget-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9em;
}

.timer-widget-info i {
  color: var(--accent-primary);
}

#global-timer-project-name {
  font-weight: 500;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#global-timer-display {
  font-family: monospace;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--bg-element);
  padding: 4px 10px;
  border-radius: var(--border-radius);
}

.timer-widget-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  border-left: 1px solid var(--border-color);
  padding-left: var(--spacing-md);
}

.timer-widget-controls button.icon-only {
  background-color: var(--bg-element);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.8em;
  border: 1px solid var(--border-color);
}
.timer-widget-controls button.icon-only:hover {
  background-color: var(--button-secondary-hover-bg);
  color: var(--text-primary);
}
.timer-widget-controls #global-timer-stop-btn:hover {
    background-color: var(--accent-negative);
    color: var(--accent-tertiary-text);
}


.widget-close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--bg-element);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
}

.widget-close-btn:hover {
  transform: scale(1.1);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  #global-timer-widget {
    left: 15px;
    right: 15px;
    bottom: 15px;
    width: auto;
    justify-content: space-between;
  }
  #global-timer-project-name {
    max-width: 100px;
  }
}

/* === TIME LOG STYLES === */

/* Analysis Grid - 2 Column Layout */
.timelog-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Left Column - Stats List */
.timelog-stats-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timelog-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-element);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.timelog-stat-item span {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.timelog-stat-item strong {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: auto;
}

/* Right Column - Chart/Categories */
.timelog-chart-bars {
    background-color: var(--bg-element);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
}

.timelog-chart-bars h4 {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin-bottom: var(--spacing-md);
    margin-top: 0;
}

.timelog-category-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.timelog-category-bar:last-child {
    margin-bottom: 0;
}

.timelog-category-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.timelog-category-bar-labels span:first-child {
    color: var(--text-primary);
    font-weight: 500;
}

.timelog-category-bar-labels span:last-child {
    color: var(--text-secondary);
}

/* Main Controls - Timer Section */
.timelog-main-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-element);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

#stopwatch-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-grow: 1;
}

#stopwatch-display {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 3em;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
}

#stopwatch-controls {
    display: flex;
    gap: var(--spacing-sm);
}

#stopwatch-controls button {
    margin-bottom: 0;
}

/* List Header */
.timelog-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.timelog-list-header h3 {
    margin: 0;
    font-size: 1.1em;
}

.timelog-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.timelog-controls span {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.timelog-controls select {
    margin-bottom: 0;
    min-width: 140px;
}

/* Date Grouping */
.timelog-date-group {
    margin-bottom: var(--spacing-lg);
}

.timelog-date-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-element);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.timelog-date-group-header h3 {
    margin: 0;
    font-size: 1em;
    color: var(--text-primary);
}

.timelog-date-group-header span {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.timelog-date-group-items {
    background-color: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
}

/* Individual Log Items */
.timelog-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.timelog-list-item:last-child {
    border-bottom: none;
}

.timelog-list-item:hover {
    background-color: var(--list-item-hover-bg, rgba(128, 128, 128, 0.05));
}

.timelog-list-item .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-element);
    color: var(--accent-secondary);
    flex-shrink: 0;
}

.timelog-list-item .item-content {
    flex-grow: 1;
    min-width: 0;
}

.timelog-list-item .item-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.timelog-list-item .item-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.timelog-list-item .item-actions {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.timelog-list-item:hover .item-actions {
    opacity: 1;
}

/* Responsive */
@media (max-width: 1024px) {
    .timelog-analysis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .timelog-main-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #stopwatch-section {
        flex-direction: column;
    }

    .timelog-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .timelog-controls {
        width: 100%;
        flex-direction: column;
    }

    .timelog-controls select {
        width: 100%;
    }

    .timelog-list-item {
        flex-wrap: wrap;
    }

    .timelog-list-item .item-actions {
        opacity: 1;
        width: 100%;
        margin-top: var(--spacing-sm);
        justify-content: flex-end;
    }
}

/* Time Analysis Collapsible Styles */
.timelog-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    user-select: none;
}

.timelog-analysis-header h3 {
    margin: 0;
    flex: 1;
}

.timelog-analysis-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    font-size: 1.1em;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timelog-analysis-toggle:hover {
    color: var(--text-primary);
}

.timelog-analysis-collapsed {
    padding: var(--spacing-md);
    background-color: var(--bg-element-transparent);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.timelog-stats-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
}

.timelog-analysis-expanded {
    animation: fadeIn 0.3s ease;
    padding-bottom: var(--spacing-md);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Ensure the grid layout works well */
.timelog-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .timelog-analysis-grid {
        grid-template-columns: 1fr;
    }
    
    .timelog-stats-compact {
        grid-template-columns: 1fr;
    }
}

/* --- Timelog Layout: Top Row (2 Cols) + Bottom (Full Width) --- */
.timelog-main-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.timelog-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.timelog-entries-section {
    display: flex;
    flex-direction: column;
}

.timelog-column {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-element-transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    min-height: 300px;
}

.timelog-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.timelog-column-header h3 {
    margin: 0;
    font-size: 1.1em; /* Match other tab headers */
    font-weight: 600;
    color: var(--text-primary);
}

/* Analysis Column */
.timelog-analysis-column {
    flex-grow: 1;
}

.timelog-analysis-collapsed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timelog-analysis-expanded {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Timer Column */
.timelog-timer-column {
    flex-grow: 1;
}

.timelog-stopwatch-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex: 1;
}

/* Entries Section */
.timelog-entries-section {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    background-color: var(--bg-element-transparent);
}

.timelog-entries-section .timelog-column-header h3 {
    font-size: 1.1em; /* Match other tab headers */
}

/* Controls row - Sort dropdown and Add button on same line */
.timelog-entries-section .timelog-controls-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.timelog-entries-section .timelog-controls-row .timelog-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.timelog-entries-section .timelog-controls-row .timelog-controls select {
    margin-bottom: 0;
    min-width: 140px;
    max-width: 180px;
    flex: 0 0 auto;
}

.timelog-entries-section .timelog-controls-row .add-time-log-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.timelog-entries-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 500px;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.timelog-entries-list::-webkit-scrollbar {
    width: 6px;
}

.timelog-entries-list::-webkit-scrollbar-track {
    background: transparent;
}

.timelog-entries-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.timelog-entries-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Stat items */
.timelog-stats-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timelog-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-content);
    border-radius: calc(var(--border-radius) / 2);
}

.timelog-stat-item span {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.timelog-stat-item strong {
    font-size: 1em;
    color: var(--text-primary);
}

/* Date groups */
.timelog-date-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.timelog-date-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-content);
    border-radius: calc(var(--border-radius) / 2);
    margin-bottom: var(--spacing-xs);
}

.timelog-date-group-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Category bars */
.timelog-category-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.timelog-category-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 1024px) {
    .timelog-top-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .timelog-column {
        min-height: 250px;
    }

    .timelog-entries-list {
        max-height: 400px;
    }

    .timelog-entries-section .timelog-controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .timelog-entries-section .timelog-controls-row .timelog-controls {
        flex-direction: column;
    }

    .timelog-entries-section .timelog-controls-row .timelog-controls select,
    .timelog-entries-section .timelog-controls-row .add-time-log-btn {
        width: 100%;
        max-width: 100%;
    }
}

/* Inside style.css */

/* Inside style.css */

/* --- Find and REPLACE your existing .auth-divider rule --- */
.auth-divider {
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically center the text */
    text-align: center;
    margin: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: 0.8em;
    font-weight: 500;
}

/* --- Find and REPLACE your existing .auth-divider::before/after rules --- */
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1; /* This makes the lines grow to fill available space */
    border-bottom: 1px solid var(--border-color);
}

.auth-divider:not(:empty)::before {
    margin-right: .5em; /* Space between line and text */
}

.auth-divider:not(:empty)::after {
    margin-left: .5em; /* Space between text and line */
}


/* --- Find and REPLACE your existing #google-login-button rules --- */
#google-login-button {
    display: flex; /* Use flexbox to center content WITHIN the button */
    align-items: center;
    justify-content: center; /* Center the SVG and text */
    width: 100%; /* Ensure it takes full width of the form */
    margin: 0 auto; /* Center the button itself (optional, as width is 100%) */
    background-color: #ffffff !important;
    color: #444444 !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

body.dark-theme #google-login-button {
    background-color: var(--bg-element) !important;
    color: var(--text-primary) !important;
}

#google-login-button:hover {
    background-color: #f5f5f5 !important;
}

body.dark-theme #google-login-button:hover {
    background-color: var(--button-secondary-hover-bg) !important;
}

/* Make sure the SVG inside the button is styled correctly */
#google-login-button svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* --- Onboarding Widget Styles --- */
.onboarding-widget {
    background: linear-gradient(135deg, var(--bg-content) 0%, var(--bg-element) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--accent-primary); /* Highlight border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    animation: slideDown 0.5s ease-out;
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.onboarding-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.onboarding-progress-container {
    background-color: var(--bg-main);
    height: 8px;
    border-radius: 4px;
    width: 100%;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-pink) 0%, var(--accent-blue) 100%);
    transition: width 0.5s ease-in-out;
    width: 0%;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.onboarding-step {
    background-color: var(--bg-element-transparent);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    opacity: 0.7;
}

.onboarding-step.completed {
    background-color: color-mix(in srgb, var(--accent-green) 10%, var(--bg-element));
    border-color: var(--accent-green);
    opacity: 1;
}

.onboarding-step i.step-icon {
    font-size: 1.2em;
    color: var(--text-secondary);
}

.onboarding-step.completed i.step-icon {
    color: var(--accent-green);
}

.onboarding-step-text {
    font-size: 0.9rem;
    font-weight: 500;
}

.onboarding-step.completed .onboarding-step-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.close-onboarding-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
}
.close-onboarding-btn:hover { color: var(--text-primary); }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Onboarding Skip Button --- */
.onboarding-skip-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto; /* Push to right if in header flex */
}
.onboarding-skip-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* --- Rich Empty States --- */
.empty-state-container {
    grid-column: 1 / -1; /* Span full width in grid layouts */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    background-color: var(--bg-element-transparent);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    min-height: 300px;
    margin-top: var(--spacing-md);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 350px;
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}