/* ============================================================
   10-COMPONENT-STANDARDS
   Canonical visual standards for all shared UI components.
   Decisions made: 2026-04-05

   HOW TO USE:
   - Page-specific CSS should match these values unless there
     is a documented reason to deviate.
   - When building new components, reference these tokens first.
   - Do not override these in page CSS without a clear reason.

   STATUS (April 2026):
   - 16 .std-* utility classes below are defined but currently
     unused — they represent a superseded design system draft.
     The app adopted .fm-* naming for structural classes instead.
   - 3 .std-* classes ARE actively used in templates:
     .std-label, .std-muted, .std-card
   - CSS custom property tokens (:root block) are widely used
     throughout the codebase and must not be removed.
   ============================================================ */

@layer standards {

  /* ── Component tokens ─────────────────────────────────── */
  :root {

    /* Border radius */
    --comp-radius:        5px;    /* standard component radius */
    --comp-radius-sm:     3px;    /* tight/dense components */
    --comp-radius-lg:     8px;    /* cards, modals, large panels */
    --comp-radius-pill:   20px;   /* badges, pills, tags */

    /* Save bars */
    --save-bar-bg:        var(--clr-berry-700);
    --save-bar-border:    1px solid var(--white-a14);
    --save-bar-radius:    6px;
    --save-bar-padding:   10px 16px;
    --save-bar-gap:       8px;

    /* Form inputs */
    --input-bg:           var(--white-a04);
    --input-border:       1px solid var(--white-a12);
    --input-border-focus: 1px solid rgba(var(--clr-berry-400-rgb), 0.5);
    --input-radius:       5px;
    --input-padding:      7px 10px;
    --input-font-size:    var(--fs-md);
    --input-color:        var(--white-a85);

    /* Buttons — primary (berry tinted) */
    --btn-primary-border: 1px solid rgba(var(--clr-berry-400-rgb), 0.40);
    --btn-primary-color:  var(--clr-berry-200);
    --btn-primary-radius: var(--comp-radius);

    /* Buttons — secondary (outline berry) */
    --btn-secondary-border: 0.5px solid rgba(var(--clr-berry-400-rgb), 0.30);
    --btn-secondary-color:  var(--clr-berry-300);
    --btn-secondary-radius: var(--comp-radius);

    /* Buttons — danger (ghost style) */
    --btn-danger-color:       var(--clr-danger);
    --btn-danger-hover-bg:    rgba(var(--clr-danger-rgb), 0.12);
    --btn-danger-radius:      var(--comp-radius);

    /* Tab bars */
    --tab-bar-bg:         var(--clr-berry-700);
    --tab-active-bg:      var(--clr-berry-500);
    --tab-active-color:   var(--clr-white);
    --tab-inactive-color: var(--white-a50);

    /* Modal headers */
    --modal-header-bg:    var(--clr-berry-400);
    --modal-header-color: var(--clr-white);

    /* Status badges (outlined pill) */
    --badge-radius:       var(--comp-radius-pill);

    /* Pill tags (filled round) */
    --pill-radius:        var(--comp-radius-pill);

    /* Accordion headers */
    --acc-header-bg:      var(--clr-berry-700);
    --acc-header-radius:  4px;
    --acc-header-padding: 8px 12px;
    --acc-header-color:   var(--clr-white);
    --acc-header-font:    var(--fs-base);
    --acc-header-weight:  600;

    /* Cards */
    --card-bg:            var(--clr-berry-900);
    --card-border:        1px solid rgba(var(--clr-berry-400-rgb), 0.30);
    --card-radius:        var(--comp-radius-lg);
    --card-padding:       12px;

    /* Dropdown menus */
    --dropdown-bg:        var(--clr-berry-800);
    --dropdown-border:    1px solid var(--white-a14);
    --dropdown-radius:    6px;
    --dropdown-item-color:var(--white-a75);
    --dropdown-item-hover:var(--white-a08);

    /* Section labels */
    --label-font:         var(--fs-xs);
    --label-weight:       700;
    --label-transform:    uppercase;
    --label-spacing:      0.5px;
    --label-color:        var(--white-a40);

    /* Muted / secondary text */
    --text-muted:         var(--white-a40);

    /* Links */
    --link-color:         var(--clr-berry-300);
    --link-decoration:    none;
    --link-hover-color:   var(--clr-berry-200);

    /* Row hover / selected */
    --row-hover-bg:       rgba(var(--clr-berry-300-rgb), 0.08);
    --row-hover-border:   2px solid var(--clr-berry-300);
    --row-hover-color:    var(--clr-berry-200);
    --row-selected-bg:    rgba(var(--clr-berry-300-rgb), 0.12);

    /* Table headers */
    --th-bg:              var(--clr-berry-700);
    --th-color:           var(--white-a50);
    --th-padding:         8px 12px;
    --th-font-size:       var(--fs-base);
    --th-font-weight:     700;
    --th-transform:       uppercase;
    --th-letter-spacing:  0.4px;
    --th-border-bottom:   1px solid var(--white-a14);

    /* Table rows */
    --tr-height:          32px;
    --tr-border:          0.5px solid var(--white-a06);
    --tr-font-size:       var(--fs-base);
    --tr-color:           var(--white-a75);

    /* Table cells */
    --td-padding:         4px 8px;
    --td-font-size:       var(--fs-base);
    --td-color:           var(--white-a75);

    /* Card headers */
    --card-header-bg:         transparent;
    --card-header-border:     1px solid var(--white-a08);
    --card-header-padding:    10px 14px;
    --card-header-font-size:  var(--fs-xs);
    --card-header-weight:     700;
    --card-header-transform:  uppercase;
    --card-header-spacing:    0.5px;
    --card-header-color:      var(--white-a40);

    /* Checkboxes */
    --checkbox-accent:    var(--clr-berry-400);
    --checkbox-size:      14px;

    /* Drop zones */
    --dropzone-border:    2px dashed rgba(var(--clr-berry-400-rgb), 0.40);
    --dropzone-bg:        rgba(var(--clr-berry-400-rgb), 0.04);
    --dropzone-radius:    var(--comp-radius);
    --dropzone-color:     var(--white-a40);

    /* Block dividers */
    --divider-border:     1px solid rgba(var(--clr-berry-400-rgb), 0.20);

    /* Placeholders */
    --placeholder-color:        var(--text-placeholder);
    --placeholder-color-berry:  rgba(var(--clr-berry-400-rgb), 0.40);

    /* Tiles */
    --tile-bg:            var(--clr-berry-700);
    --tile-radius:        var(--comp-radius);
    --tile-border:        none;

    /* Left panel trees */
    --tree-active-bg:     rgba(var(--clr-berry-300-rgb), 0.08);
    --tree-active-border: 2px solid var(--clr-berry-300);
    --tree-active-color:  var(--clr-berry-200);
    --tree-inactive-color:var(--white-a50);
    --tree-parent-color:  var(--white-a75);
    --tree-parent-weight: 600;

    /* Calendar event pills */
    --cal-pill-radius:    3px;
    --cal-pill-padding:   3px 8px;
    --cal-pill-font:      10px;

    /* Tab pills */

    /* Focus rings */
    --focus-outline:        none;
    --focus-border:         var(--clr-berry-400);
    --focus-shadow:         0 0 0 2px rgba(var(--clr-berry-400-rgb), 0.15);

    /* Initials circles */
    --initials-size:        28px;
    --initials-size-sm:     22px;
    --initials-size-md:     36px;
    --initials-size-lg:     44px;
    --initials-font:        10px;
    --initials-font-sm:     9px;
    --initials-font-md:     12px;
    --initials-font-lg:     14px;
    --initials-weight:      700;
    --initials-radius:      50%;

    /* Progress bars */
    --progress-height:      2px;
    --progress-radius:      20px;
    --progress-track-bg:    var(--white-a08);
    --progress-transition:  width 0.3s ease;

    /* Toolbars */
    --toolbar-padding:      8px 12px;
    --toolbar-gap:          6px;
    --toolbar-border:       1px solid var(--white-a06);

    /* Sticky headers */
    --sticky-bg:            var(--clr-berry-900);
    --sticky-border:        1px solid var(--white-a08);
    --sticky-z:             var(--z-sticky);

    /* Breadcrumbs */
    --breadcrumb-gap:       6px;
    --breadcrumb-font:      11px;
    --breadcrumb-color:     var(--white-a50);
    --breadcrumb-sep-color: var(--white-a25);

    /* Tooltips */
    --tooltip-bg:           var(--clr-berry-800);
    --tooltip-border:       1px solid var(--white-a14);
    --tooltip-padding:      6px 10px;
    --tooltip-font:         11px;
    --tooltip-radius:       var(--comp-radius);
    --tooltip-z:            var(--z-dropdown);

    /* Selected states */
    --selected-bg:          rgba(var(--clr-berry-400-rgb), 0.10);
    --selected-border:      2px solid var(--clr-berry-400);
    --selected-color:       var(--clr-white);
  }

  /* ── Shared utility classes ───────────────────────────── */

  /* Section label — use wherever a small uppercase label
     sits above a group of content */
  .std-label {
    font-size: var(--label-font);
    font-weight: var(--label-weight);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-spacing);
    color: var(--label-color);
  }

  /* Muted text — secondary/helper text */
  .std-muted {
    color: var(--text-muted);
  }

  /* Standard link */
  .std-link {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
  }
  .std-link:hover {
    color: var(--link-hover-color);
  }

  /* Standard card */
  .std-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
  }

  /* Standard dropdown panel */
  .std-dropdown {
    background: var(--dropdown-bg);
    border: var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    overflow: hidden;
  }

  /* Standard save bar */
  .std-save-bar {
    display: flex;
    align-items: center;
    gap: var(--save-bar-gap);
    padding: var(--save-bar-padding);
    background: var(--save-bar-bg);
    border: var(--save-bar-border);
    border-radius: var(--save-bar-radius);
  }

  /* Standard form input */
  .std-input {
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-padding);
    font-size: var(--input-font-size);
    color: var(--input-color);
    outline: none;
    width: 100%;
  }
  .std-input:focus {
    border: var(--input-border-focus);
  }

  /* Standard accordion header */
  .std-acc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--acc-header-padding);
    background: var(--acc-header-bg);
    border-radius: var(--acc-header-radius);
    font-size: var(--acc-header-font);
    font-weight: var(--acc-header-weight);
    color: var(--acc-header-color);
    cursor: pointer;
    user-select: none;
  }

  /* Standard table header cell */
  .std-th {
    background: var(--th-bg);
    color: var(--th-color);
    padding: var(--th-padding);
    font-size: var(--th-font-size);
    font-weight: var(--th-font-weight);
    text-transform: var(--th-transform);
    letter-spacing: var(--th-letter-spacing);
    border-bottom: var(--th-border-bottom);
    text-align: left;
    white-space: nowrap;
  }

  /* Standard table row */
  .std-tr {
    height: var(--tr-height);
    border-bottom: var(--tr-border);
    font-size: var(--tr-font-size);
    color: var(--tr-color);
  }
  .std-tr:hover {
    background: var(--row-hover-bg);
    border-left: var(--row-hover-border);
    color: var(--row-hover-color);
  }

  /* Standard table cell */
  .std-td {
    padding: var(--td-padding);
    font-size: var(--td-font-size);
    color: var(--td-color);
    vertical-align: middle;
  }

  /* Standard card header */
  .std-card-header {
    padding: var(--card-header-padding);
    background: var(--card-header-bg);
    border-bottom: var(--card-header-border);
    font-size: var(--card-header-font-size);
    font-weight: var(--card-header-weight);
    text-transform: var(--card-header-transform);
    letter-spacing: var(--card-header-spacing);
    color: var(--card-header-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Standard drop zone */
  .std-dropzone {
    border: var(--dropzone-border);
    border-radius: var(--dropzone-radius);
    background: var(--dropzone-bg);
    color: var(--dropzone-color);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .std-dropzone:hover,
  .std-dropzone.drag-over {
    background: rgba(var(--clr-berry-400-rgb), 0.08);
    border-color: rgba(var(--clr-berry-400-rgb), 0.6);
  }


  /* Standard tile */
  .std-tile {
    background: var(--tile-bg);
    border-radius: var(--tile-radius);
    border: var(--tile-border);
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }

  /* Tree nav item */
  .std-tree-item {
    padding: 5px 8px;
    font-size: var(--fs-base-s);
    color: var(--tree-inactive-color);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s;
  }
  .std-tree-item.active {
    background: var(--tree-active-bg);
    border-left-color: var(--tree-active-border);
    color: var(--tree-active-color);
  }
  .std-tree-item.parent {
    color: var(--tree-parent-color);
    font-weight: var(--tree-parent-weight);
  }

  /* Standard focus ring — apply to :focus or :focus-visible */
  .std-focus:focus,
  .std-focus:focus-visible {
    outline: var(--focus-outline);
    border-color: var(--focus-border);
    box-shadow: var(--focus-shadow);
  }

  /* Standard initials circle */
  .std-initials {
    width: var(--initials-size);
    height: var(--initials-size);
    border-radius: var(--initials-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--initials-font);
    font-weight: var(--initials-weight);
    color: var(--clr-white);
    flex-shrink: 0;
  }
  .std-initials.sm {
    width: var(--initials-size-sm);
    height: var(--initials-size-sm);
    font-size: var(--initials-font-sm);
  }
  .std-initials.md {
    width: var(--initials-size-md);
    height: var(--initials-size-md);
    font-size: var(--initials-font-md);
  }
  .std-initials.lg {
    width: var(--initials-size-lg);
    height: var(--initials-size-lg);
    font-size: var(--initials-font-lg);
  }

  /* Standard progress bar */
  .std-progress-track {
    height: var(--progress-height);
    border-radius: var(--progress-radius);
    background: var(--progress-track-bg);
    overflow: hidden;
  }
  .std-progress-fill {
    height: 100%;
    border-radius: var(--progress-radius);
    transition: var(--progress-transition);
  }

  /* Standard toolbar */
  .std-toolbar {
    display: flex;
    align-items: center;
    gap: var(--toolbar-gap);
    padding: var(--toolbar-padding);
    border-bottom: var(--toolbar-border);
  }

  /* Standard breadcrumb */
  .std-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--breadcrumb-gap);
    font-size: var(--breadcrumb-font);
    color: var(--breadcrumb-color);
  }

  /* Standard tooltip */
  .std-tooltip {
    background: var(--tooltip-bg);
    border: var(--tooltip-border);
    border-radius: var(--tooltip-radius);
    padding: var(--tooltip-padding);
    font-size: var(--tooltip-font);
    color: var(--text-primary);
    z-index: var(--tooltip-z);
  }

  /* Standard selected state */
  .std-selected {
    background: var(--selected-bg);
    border-left: var(--selected-border);
    color: var(--selected-color);
  }

}