/* --- BUTTONS --- */
.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    padding: 8px 16px; 
    border-radius: 6px; 
    font-size: 13.5px; 
    font-weight: 500; 
    cursor: pointer; 
    border: none; 
    transition: background 0.15s, box-shadow 0.15s; 
    text-decoration: none; 
    vertical-align: middle; 
    line-height: 1; 
    font-family: inherit; }

.btn-create       { background: var(--color-teal-primary); color: #fff; }
.btn-create:hover { background: var(--color-teal-hover); box-shadow: 0 2px 6px rgba(66,160,189,0.3); }
.btn-save         { background: var(--color-green-primary); color: #fff; }
.btn-save:hover   { background: var(--color-green-hover); box-shadow: 0 2px 6px rgba(53,141,90,0.3); }
.btn-info         { background: var(--color-blue-primary); color: #fff; }
.btn-info:hover   { background: var(--color-blue-hover); box-shadow: 0 2px 6px rgba(55,122,190,0.3); }
.btn-destroy      { background: var(--color-red-primary); color: #fff; }
.btn-destroy:hover{ background: var(--color-red-hover); box-shadow: 0 2px 6px rgba(178,52,52,0.3); }
.btn-cancel       { background: var(--color-light); color: var(--color-light-text); border: 1px solid var(--color-light-border); }
.btn-cancel:hover { background: var(--color-light-hover); box-shadow: 0 2px 6px rgba(43,48,59,0.3); }
.btn-ghost        { background: none; border: 1px solid var(--color-ghost-border); color: var(--color-ghost-text); cursor: not-allowed; }
.btn-ghost:hover  { background: var(--color-bg-hover); }

.btn-sm   { padding: 5px 10px; font-size: 12.5px; }
.btn-full { width: 100%; }



/* BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;     
  font-weight: 500;       
  line-height: 1;
}

.badge-role--super  {background-color: var(--color-teal-lighter);    color: var(--color-teal-text);}
.badge-role--admin  {background-color: var(--color-teal-lighter-20); color: var(--color-teal-text);}
.badge-role--editor {background-color: var(--color-teal-lighter-40); color: var(--color-teal-text);}
.badge-role--member {background-color: var(--color-teal-lighter-60); color: var(--color-teal-text);}
.badge-role--viewer {background-color: var(--color-teal-lighter-80); color: var(--color-teal-text);}

.badge-status-entries--live               {background-color: var(--color-green-primary); color: #FFFFFF;}
.badge-status-entries--approved           {background-color: var(--color-green-light); color: var(--color-green-text);}
.badge-status-entries--pending            {background-color: var(--color-beige-light); color: var(--color-beige-text);}
.badge-status-entries--rejected           {background-color: var(--color-red-light); color: var(--color-red-text);}
.badge-status-entries--revision_requested {background-color: var(--color-blue-light); color: var(--color-blue-text);}


/* ALERTS */
.alert { padding: 12px 16px; border-radius: 6px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alert-error   { background: var(--color-red-tint);   border: 1px solid var(--color-red-light);   color: var(--color-red-primary); }
.alert-success { background: var(--color-green-tint); border: 1px solid var(--color-green-light); color: var(--color-green-primary); }
.alert-info    { background: var(--color-blue-tint);  border: 1px solid var(--color-blue-light);  color: var(--color-blue-primary); }
.alert-warning { background: var(--color-beige-tint); border: 1px solid var(--color-beige-light); color: var(--color-beige-primary); }
.error         { color: var(--color-red-primary); font-size: 13px; margin-top: 4px; }

/* TOASTS */
.toast { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.toast-pointer { cursor:pointer; font-size:16px;}
.toast-success { background: var(--color-green-tint); border: 1px solid var(--color-green-light); color: var(--color-green-primary); }
.toast-error   { background: var(--color-red-tint);  border: 1px solid var(--color-red-light);  color: var(--color-red-primary); }



/* =========================================================
   BELOW: merged in verbatim from the old styles.css during the
   transitional split.
   ========================================================= */

/* CLEANUP UPDATE: the danger/success/warning/info tokens formerly
   used throughout this section have been repointed to the new
   red/green/beige/blue system (see styles-colors.css) — confirmed
   close enough in hue to carry the same meaning, per the HSL
   comparison done before this change. --color-navy is UNCHANGED
   in this pass — only danger/success/warning/info were in scope
   for this edit. */

/* -----------------------------------------------------------
   BUTTONS (old styles.css Section 7 — the submit-button
   legacy layer, NOT the new .btn-* system above)
   CLEANUP UPDATE: .button was confirmed dead (0 matches for
   class="button" across all views) and has been removed.
   button[type="submit"]:not(.btn) is still live though (styles
   any un-classed submit button), and still hardcoded to navy —
   navy wasn't part of this pass, still needs its own migration.
   ----------------------------------------------------------- */

.list-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.list-item-actions form { display: inline-flex; margin: 0; }
.list-item-actions--top { align-items: flex-start; margin-left: 16px; padding-top: 2px; }
.section-actions, .form-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.section-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.section-actions form { display: inline-flex; margin: 0; }
.list-item-actions button, .list-item-actions a, .list-item-actions form,
.section-actions button, .section-actions a, .section-actions form,
.form-actions button, .form-actions a {
    height: 32px; align-self: center; margin: 0; line-height: 1; box-sizing: border-box;
}


/* -----------------------------------------------------------
   ALERTS / TOASTS (old styles.css Section 10)
   CLEANUP UPDATE: #flash-toast.toast-success/-error/-info below
   now use the new green/red/blue tokens instead of the old
   success/danger/info tokens. The ID+class specificity issue
   flagged earlier STILL APPLIES though: #flash-toast.toast-success
   (ID+class) still outranks the plain .toast-success class above,
   so this rule still wins when both apply to the same element —
   that conflict is unrelated to which tokens are used and is not
   fixed by this pass.
   ----------------------------------------------------------- */


#flash-toast {
    position: fixed; bottom: 28px; right: 28px; z-index: 9999;
    min-width: 260px; max-width: 400px;
    padding: 12px 16px; border-radius: 8px; font-size: 13.5px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    animation: toast-in 0.2s ease;
}
#flash-toast.toast-success { background: var(--color-green-tint); border: 1px solid var(--color-green-light); color: var(--color-green-primary); }
#flash-toast.toast-error   { background: var(--color-red-tint);   border: 1px solid var(--color-red-light);   color: var(--color-red-primary); }
#flash-toast.toast-info    { background: var(--color-blue-tint);  border: 1px solid var(--color-blue-light);  color: var(--color-blue-primary); }
#flash-toast.toast-hide    { animation: toast-out 0.2s ease forwards; }
@keyframes toast-in  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } }

/* The OTHER toast — client/AJAX confirmations ("Saved"), kept as its
   own separate system per the audit notes; shares no markup with #flash-toast. */
.toast-base {
    position: fixed; bottom: 24px; right: 24px; padding: 10px 20px; border-radius: 6px;
    font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999; transition: opacity 0.3s;
}
#savedToast { background: var(--color-green-primary); color: #fff; }


/* -----------------------------------------------------------
   PILL / BADGE FAMILY (old styles.css Section 14)
   CLEANUP UPDATE: .badge-public/-active/-archived/-pending/-rejected
   below now use the new -tint/-primary tokens instead of the old
   -bg/base tokens. .badge-private is unaffected (it already used
   grayscale tokens, not a semantic color). .pill still uses navy —
   out of scope for this pass.
   ----------------------------------------------------------- */
.abbr-badge {
    display: inline-block; background: #edf2f7; border-radius: 4px;
    padding: 1px 7px; font-size: 12px; margin-left: 6px;
    font-family: monospace; color: var(--color-text-secondary);
}
.source-tag { font-size: 11px; color: var(--color-border-strong); margin-left: 6px; }
.imported-tag {
    font-size: 11px; color: var(--color-text-faint); background: var(--color-bg-hover);
    padding: 2px 8px; border-radius: 10px; margin-left: 8px;
}

.pill {
    font-size: 12px; font-weight: 500; color: var(--color-navy);
    background: var(--color-bg-active); border: 1px solid var(--color-pill-border);
    padding: 4px 11px; border-radius: 20px; cursor: pointer; white-space: nowrap;
    transition: background 0.1s;
}
.pill:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

.project-item-badge { font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.badge-public    { background: var(--color-blue-tint);  color: var(--color-blue-primary); }
.badge-private   { background: var(--color-bg-hover);   color: var(--color-text-muted); }
.badge-active    { background: var(--color-green-tint); color: var(--color-green-primary); }
.badge-archived  { background: var(--color-beige-tint); color: var(--color-beige-primary); }
.badge-pending   { background: var(--color-beige-tint); color: var(--color-beige-primary); }
.badge-rejected  { background: var(--color-red-tint);   color: var(--color-red-primary); }


/* -----------------------------------------------------------
   FIELD CONFIG "AVAILABLE FIELDS" PILLS — elements half of old
   Section 19 (the table half is in styles-tables.css instead)
   CLEANUP NOTE: .fc-avail-pill is explicitly commented in the
   original as "a visual alias of .pill" — genuine duplication,
   two class names for the same visual pattern, kept separate
   only because JS targets .fc-avail-pill directly. Still uses
   navy — out of scope for this pass.
   CLEANUP UPDATE: .fc-deactivate:hover now uses the new red tokens.
   ----------------------------------------------------------- */
.fc-avail-group { margin-bottom: 14px; }
.fc-avail-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-text-faint); margin-bottom: 6px;
}
.fc-avail-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-avail-pill { /* visual alias of .pill, kept as its own name since JS targets it directly */
    font-size: 12px; font-weight: 500; color: var(--color-navy);
    background: var(--color-bg-active); border: 1px solid var(--color-pill-border);
    padding: 4px 11px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: background 0.1s;
}
.fc-avail-pill:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.fc-activate {
    font-size: 12px; font-weight: 600; color: var(--color-navy);
    background: var(--color-bg-active); border: 1px solid var(--color-pill-border);
    padding: 4px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.fc-activate:hover { background: var(--color-navy); color: #fff; }
.fc-deactivate { background: none; border: none; cursor: pointer; color: var(--color-border-strong); padding: 2px 4px; border-radius: 4px; }
.fc-deactivate:hover { color: var(--color-red-primary); background: var(--color-red-tint); }