/* UI Palette CSS Variables - Generated by Ulflow Color Toolkit */

/* Light Theme */
:root { /* Or use a specific class like .theme-light */
    --primary-text: #1A6F00;
    --primary-fill: #6BBD4F;
    --on-primary-fill: #003500;
    --primary-surface: #9EF283;
    --on-primary-surface: #1A6F00;
    --secondary-text: #006C6A;
    --secondary-fill: #00C0BC;
    --on-secondary-fill: #003332;
    --secondary-surface: #13F7F1;
    --on-secondary-surface: #006C6A;
    --error-text: #9C3F2B;
    --error-fill: #CE6C57;
    --on-error-fill: #3E0000;
    --error-surface: #FFC9B9;
    --on-error-surface: #8C301D;
    --warning-text: #665E00;
    --warning-fill: #B4AA00;
    --on-warning-fill: #2F2B00;
    --warning-surface: #E7DD4C;
    --on-warning-surface: #665E00;
    --success-text: #006826;
    --success-fill: #009B42;
    --on-success-fill: #001901;
    --success-surface: #00FA7E;
    --on-success-surface: #006826;
    --emphasic-text: #006A69;
    --emphasic-fill: #00DAD7;
    --on-emphasic-fill: #004C4B;
    --emphasic-surface: #2BFFFC;
    --on-emphasic-surface: #006A69;
    --info-text: #0061A1;
    --info-fill: #00AFFF;
    --on-info-fill: #002C53;
    --info-surface: #A4E0FF;
    --on-info-surface: #00538C;
    --magical-text: #9B39A0;
    --magical-fill: #DD78E1;
    --on-magical-fill: #4B0050;
    --magical-surface: #FFDAFF;
    --on-magical-surface: #9B39A0;
    --text-color: #060806;
    --label-color: #5A5C59;
    --outline-color: #5A5C59;
  }
  
  /* Dark Theme */
  body[data-theme="dark"] { /* Or use a specific class like .theme-dark */
    --primary-text: #9EF283;
    --primary-fill: #6BBD4F;
    --on-primary-fill: #003500;
    --primary-surface: #1A6F00;
    --on-primary-surface: #9EF283;
    --secondary-text: #13F7F1;
    --secondary-fill: #00C0BC;
    --on-secondary-fill: #003332;
    --secondary-surface: #006C6A;
    --on-secondary-surface: #13F7F1;
    --error-text: #FFC9B9;
    --error-fill: #CE6C57;
    --on-error-fill: #3E0000;
    --error-surface: #9C3F2B;
    --on-error-surface: #FFD7CB;
    --warning-text: #E7DD4C;
    --warning-fill: #B4AA00;
    --on-warning-fill: #2F2B00;
    --warning-surface: #665E00;
    --on-warning-surface: #E7DD4C;
    --success-text: #00FA7E;
    --success-fill: #009B42;
    --on-success-fill: #001901;
    --success-surface: #006826;
    --on-success-surface: #00FA7E;
    --emphasic-text: #02F5F2;
    --emphasic-fill: #00DAD7;
    --on-emphasic-fill: #004C4B;
    --emphasic-surface: #006A69;
    --on-emphasic-surface: #02F5F2;
    --info-text: #A4E0FF;
    --info-fill: #00AFFF;
    --on-info-fill: #002C53;
    --info-surface: #0061A1;
    --on-info-surface: #B9E9FF;
    --magical-text: #FFC9FF;
    --magical-fill: #DD78E1;
    --on-magical-fill: #4B0050;
    --magical-surface: #8B2890;
    --on-magical-surface: #FFC9FF;
    --text-color: #F3F7F2;
    --label-color: #DFE3DE;
    --outline-color: #DFE3DE;
  }
  
  .subtitle  {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--on-magical-fill) !important;
  }
  .ul-layout {
    display: flex;
    min-height: 100vh;
  }

  .ul-sidebar {
    width: 220px;
    background: var(--sidebar-bg, #1f2937);
    color: #fff;
    padding: 1.25rem;
  }

  .ul-sidebar_section + .ul-sidebar_section {
    margin-top: 1.5rem;
  }

  .ul-sidebar_title {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.5rem;
  }

  .ul-sidebar_link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s;
  }

  .ul-sidebar_link:hover,
  .ul-sidebar_link--active {
    background: var(--link-active, #3b82f6);
  }

  .ul-main {
    flex: 1;
    padding: 2.5rem;
  }

  .ul-main_header {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .ul-cards {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  .ul-card {
    flex: 1 1 200px;
    background: var(--card-bg, #d1fae5);
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }

  .ul-card_title {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #047857;
  }

  .ul-card_value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #064e3b;
  }

  @media (max-width: 768px) {
    .ul-layout {
      flex-direction: column;
    }

    .ul-sidebar {
      width: 100%;
    }

    .ul-cards {
      flex-direction: column;
    }
  }