/* ==========================================================================
   Platform CSS — CommunityPay shared UI components
   Loaded by base.html. Available on every page.
   ========================================================================== */

/* --- Buttons --- */

/* Primary platform button — blue, white text */
.btn-platform {
    display: inline-flex;
    align-items: center;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 1rem;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-platform:hover {
    background: #1e40af;
    color: #fff;
}

/* --- Institutional-blue primary button ---
   Same treatment as the Save Changes button on Edit Profile: sharp
   (2px radius), no shadow, darker on hover/active. Shared here since new
   pages (Create Unit, etc.) need it too — not a copy of the inline version
   in edit_user_profile.html. */
.btn-institutional-primary {
    background: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 2px;
    color: #fff;
    box-shadow: none;
}

.btn-institutional-primary:hover,
.btn-institutional-primary:focus {
    background: #0052a3;
    border-color: #0052a3;
    color: #fff;
    box-shadow: none;
}

.btn-institutional-primary:active {
    background: #003d7a;
    border-color: #003d7a;
}

/* --- Institutional-blue focus ring ---
   Thin border + a subtle 2px halo, replacing Bootstrap's default bulky
   0.25rem/25%-opacity ring. Institutional blue (#0066cc), not the platform
   button blue above — this is the color already established on account/
   dashboard/content pages (edit_user_profile.html's Save button, etc). */
.form-control:focus,
.form-select:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* --- Text link buttons (no background, no border) --- */

/* Blue text link — view/navigate actions */
.btn-text-blue {
    background: none;
    border: none;
    padding: 0;
    color: #0066cc;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-text-blue:hover {
    color: #0052a3;
}

/* Muted text link — cancel, secondary actions */
.btn-text-muted {
    background: none;
    border: none;
    padding: 0;
    color: #999;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-text-muted:hover {
    color: #212529;
}

/* Red text link — destructive actions */
.btn-text-red {
    background: none;
    border: none;
    padding: 0;
    color: #dc3545;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-text-red:hover {
    color: #a71d2a;
}

/* --- Segmented pill toggle (tabs or in-place mode switches) --- */
/* One shared component instead of a per-page variant — first used by
   manage_units.html's Add Unit/Bulk Import/Allocations tabs, reused
   wherever a page needs a small segmented switch. Works with <a> (real
   navigation, e.g. ?tab=) or <button> (JS-driven, no navigation) children;
   whichever is selected gets the .active class. */
.pill-toggle {
    display: inline-flex;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.pill-toggle > a,
.pill-toggle > button {
    border: none;
    background: transparent;
    padding: 0.35rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.pill-toggle > a:hover:not(.active),
.pill-toggle > button:hover:not(.active) {
    color: #212529;
    background: #fff;
}

.pill-toggle > a.active,
.pill-toggle > button.active {
    color: #0066cc;
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid #0066cc;
    border-radius: 2px;
    font-weight: 600;
}