/* ==========================================================================
   BRYZORA — Central Design Tokens (Audit 2026)
   Single source of truth for all color, spacing, and component tokens.
   Import this before any other Bryzora CSS.
   ========================================================================== */

:root {
    /* Audit-spec primary palette */
    --color-primary:        #0D9373;
    --color-primary-hover:  #0a7d62;
    --color-primary-dark:   #086b53;
    --color-success:        #27AE60;
    --color-warning:        #E67E22;
    --color-danger:         #C0392B;
    --color-danger-hover:   #a93226;
    --color-neutral:        #6B7280;
    --color-bg-page:        #F8FAFC;
    --color-bg-card:        #FFFFFF;
    --color-border:         #E2E8F0;
    --color-text-primary:   #1A202C;
    --color-text-secondary: #4A5568;
    --color-text-muted:     #718096;  /* WCAG AA-compliant; replaces #A0AEC0 */

    /* Map to existing brz- tokens so legacy CSS continues to work */
    --brz-brand-500:  var(--color-primary);
    --brz-brand-600:  var(--color-primary);
    --brz-brand-700:  var(--color-primary-dark);
    --brz-success:    var(--color-success);
    --brz-warning:    var(--color-warning);
    --brz-danger:     var(--color-danger);
    --brz-page-bg:    var(--color-bg-page);
    --brz-card-bg:    var(--color-bg-card);
    --brz-card-border: var(--color-border);
    --brz-gray-500:   var(--color-text-muted);

    /* Button system */
    --btn-height:       40px;
    --btn-height-ghost: 36px;
    --btn-radius:       6px;
    --btn-font-size:    14px;
    --btn-font-weight:  600;
    --btn-border-width: 1.5px;
    --btn-icon-size:    36px;
    --btn-touch-min:    44px;
}

/* ==========================================================================
   Standardised Button System
   ========================================================================== */

/* Base */
.btn-primary,
.brz-btn--primary,
.btn.btn-primary {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary) !important;
    color:            #fff !important;
    height:           var(--btn-height);
    border-radius:    var(--btn-radius);
    font-size:        var(--btn-font-size);
    font-weight:      var(--btn-font-weight);
}

.btn-primary:hover,
.brz-btn--primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color:     var(--color-primary-hover) !important;
    color:            #fff !important;
}

/* Secondary */
.brz-btn--secondary,
.btn-outline-primary {
    background-color: transparent;
    border:           var(--btn-border-width) solid var(--color-primary) !important;
    color:            var(--color-primary) !important;
}

.brz-btn--secondary:hover,
.btn-outline-primary:hover {
    background-color: rgba(13, 147, 115, 0.06) !important;
    color:            var(--color-primary-dark) !important;
}

/* Danger */
.btn-danger,
.brz-btn--danger {
    background-color: var(--color-danger) !important;
    border-color:     var(--color-danger) !important;
    color:            #fff !important;
}

.btn-danger:hover,
.brz-btn--danger:hover {
    background-color: var(--color-danger-hover) !important;
    border-color:     var(--color-danger-hover) !important;
}

/* Ghost */
.brz-btn--ghost {
    background:    transparent;
    color:         var(--color-text-secondary);
    border:        none;
    height:        var(--btn-height-ghost);
    border-radius: var(--btn-radius);
    font-size:     var(--btn-font-size);
    font-weight:   var(--btn-font-weight);
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    cursor:        pointer;
    transition:    background 150ms;
}

.brz-btn--ghost:hover {
    background: rgba(0,0,0,0.05);
}

/* Icon-only buttons — 36×36 minimum, 44×44 touch target via padding */
.brz-btn--icon,
[data-toggle="tooltip"][class*="btn"]:not([class*="btn-sm"]) i:only-child {
    min-width:  var(--btn-icon-size);
    min-height: var(--btn-icon-size);
}

/* ==========================================================================
   Focus-visible — all interactive elements (WCAG 2.1 AA)
   ========================================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.brz-btn:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.dropdown-toggle:focus-visible {
    outline:        2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    box-shadow:     none !important;
}

/* Remove Bootstrap's default blue focus ring and replace with brand */
.btn:focus,
.btn.focus,
.form-control:focus,
.custom-select:focus {
    box-shadow: 0 0 0 3px rgba(13, 147, 115, 0.25) !important;
    border-color: var(--color-primary) !important;
}

/* ==========================================================================
   Typography fixes — Table headers & Labels
   ========================================================================== */

/* Remove ALL CAPS from all table headers; Title Case enforced by content, not CSS */
table thead th,
.table thead th,
.hb-table thead th,
.proj-v2__table thead th,
.table-custom thead th,
.brz-data-table thead th,
.sp-v2__table thead th,
.brz-table thead th,
.brz-locations-table th,
.teams-table th,
.dns-table th {
    text-transform: none !important;
    font-weight:    600 !important;
    font-size:      12px !important;
    color:          var(--color-text-muted) !important;
    letter-spacing: 0 !important;
}

/* Form labels — Title Case enforced via CSS baseline; never ALL CAPS */
label,
.form-label,
.mf-label {
    font-size:       12px !important;
    font-weight:     600 !important;
    color:           var(--color-text-primary) !important;
    text-transform:  none !important;
    letter-spacing:  0 !important;
}

/* Card/stat/metric labels — remove ALL CAPS; Title Case via content */
.brz-mcard__label,
.brz-dns-stat__label,
.brz-table th,
.brz-stat__label,
.brz-stat-label,
.brz-metric__label,
.brz-locations-table th,
.brz-ai-cmd-header,
.sm2-stat-label,
.sm-meta-label,
[class*="__label"] {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight:    600 !important;
}

/* Status/type inline labels — remove uppercase; keep pill styling */
.brz-status-label,
.brz-status-label--ok,
.brz-status-label--down,
.brz-status-label--paused,
.brz-status-label--pending,
.brz-monitor-header__type {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Required field asterisk */
.required {
    color:       var(--color-danger);
    margin-left: 2px;
}

/* ==========================================================================
   Accessibility — touch targets & table minimum row height
   ========================================================================== */
button,
a.btn,
.btn,
.brz-btn,
.dropdown-item {
    min-height: 36px;
}

/* Minimum 52px row height in all data tables */
.table tbody tr,
.hb-table tbody tr,
.proj-v2__table tbody tr,
.table-custom tbody tr,
.brz-data-table tbody tr {
    min-height: 52px;
}

.table tbody td,
.hb-table tbody td,
.proj-v2__table tbody td,
.table-custom tbody td,
.brz-data-table tbody td {
    padding-top:    14px !important;
    padding-bottom: 14px !important;
}

/* Ensure adequate touch target for icon buttons via pseudo-element hit area */
.brz-btn--icon {
    position:  relative;
}

.brz-btn--icon::before {
    content:  '';
    position: absolute;
    inset:    -4px;
}

/* ==========================================================================
   Color contrast fix — replace #A0AEC0 muted text with #718096
   ========================================================================== */
.text-muted,
.brz-text-muted {
    color: var(--color-text-muted) !important;
}

/* ==========================================================================
   StatusBadge component
   ========================================================================== */
.badge--online,
.status-badge--online {
    background: rgba(39, 174, 96, 0.12);
    color:      #1a7a3f;
    border:     1px solid rgba(39, 174, 96, 0.25);
}

.badge--down,
.status-badge--down {
    background: rgba(192, 57, 43, 0.12);
    color:      var(--color-danger);
    border:     1px solid rgba(192, 57, 43, 0.25);
}

.badge--paused,
.status-badge--paused {
    background: rgba(230, 126, 34, 0.12);
    color:      #b85d10;
    border:     1px solid rgba(230, 126, 34, 0.25);
}

.badge--warning,
.status-badge--warning {
    background: rgba(230, 126, 34, 0.12);
    color:      #b85d10;
    border:     1px solid rgba(230, 126, 34, 0.25);
}

.badge--inactive,
.status-badge--inactive {
    background: rgba(107, 114, 128, 0.12);
    color:      var(--color-neutral);
    border:     1px solid rgba(107, 114, 128, 0.25);
}

.badge--pending,
.status-badge--pending {
    background: rgba(107, 114, 128, 0.12);
    color:      var(--color-neutral);
    border:     1px solid rgba(107, 114, 128, 0.25);
}

.status-badge {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     4px 10px;
    border-radius: 6px;
    font-size:   12px;
    font-weight: 600;
}

/* ==========================================================================
   API Docs — endpoint category cards click affordance
   ========================================================================== */
.card.d-flex.flex-row.h-100.overflow-hidden {
    transition: border-color 150ms, box-shadow 150ms;
    cursor: pointer;
}
.card.d-flex.flex-row.h-100.overflow-hidden:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(13, 147, 115, 0.15) !important;
}

/* ==========================================================================
   Projects — color swatch
   ========================================================================== */
.proj-color-swatch {
    width:         16px;
    height:        16px;
    border-radius: 4px;
    border:        1px solid rgba(0,0,0,0.1);
    display:       inline-block;
    vertical-align: middle;
}