/*
 * BB101 Stage 2 Component Contract
 * Scope: visual component normalization only.
 * No grid/flex/height/position layout rules are changed here.
 */
:root{
  --bb101-card-bg: var(--panel-card, var(--nxt-panel-card, rgba(20,28,40,.92)));
  --bb101-surface-bg: var(--panel-surface, var(--nxt-panel-surface, rgba(15,22,34,.92)));
  --bb101-input-bg: var(--panel-input-bg, rgba(5,10,18,.72));
  --bb101-border: var(--panel-border, var(--nxt-panel-border, rgba(148,163,184,.28)));
  --bb101-border-soft: var(--panel-border-soft, rgba(148,163,184,.18));
  --bb101-text: var(--panel-text, var(--nxt-panel-text, #f8fafc));
  --bb101-muted: var(--panel-muted, var(--nxt-panel-muted, #b7c4d4));
  --bb101-accent: var(--panel-accent, var(--nxt-panel-accent, #f0b429));
  --bb101-focus: color-mix(in srgb, var(--bb101-accent) 42%, transparent);
  --bb101-radius: 14px;
  --bb101-radius-sm: 10px;
  --bb101-shadow-soft: 0 14px 36px rgba(0,0,0,.22);
}

/* Cards / panels: visual only, no layout sizing. */
:where(.card,.badgersclaw-card,.dashboard-ref-panel,.nxt-card,.module-card,.panel-card){
  color: var(--bb101-text);
  border-color: var(--bb101-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb101-card-bg) 94%, #fff 3%), var(--bb101-card-bg));
  box-shadow: var(--bb101-shadow-soft);
}
:where(.card-header,.card-footer,.badgersclaw-card-header,.module-card-header){
  border-color: var(--bb101-border-soft);
}

/* Form controls: keep existing width/layout, normalize only visual shell. */
:where(input.form-control,textarea.form-control,select.form-control,.form-select,input[type="text"],input[type="url"],input[type="password"],input[type="email"],input[type="number"],input[type="search"],textarea,select):not(.flatpickr-input){
  color: var(--bb101-text);
  background-color: var(--bb101-input-bg);
  border-color: var(--bb101-border);
  border-radius: var(--bb101-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
:where(input.form-control,textarea.form-control,select.form-control,.form-select,input[type="text"],input[type="url"],input[type="password"],input[type="email"],input[type="number"],input[type="search"],textarea,select):not(.flatpickr-input):focus{
  color: var(--bb101-text);
  background-color: var(--bb101-input-bg);
  border-color: color-mix(in srgb, var(--bb101-accent) 55%, var(--bb101-border));
  box-shadow: 0 0 0 .18rem var(--bb101-focus), inset 0 1px 0 rgba(255,255,255,.03);
}
:where(input,textarea)::placeholder{ color: color-mix(in srgb, var(--bb101-muted) 78%, transparent); opacity: 1; }
:where(label,.form-label){ color: var(--bb101-text); }
:where(.form-text,.text-muted){ color: var(--bb101-muted) !important; }

/* Buttons: visual only; preserve module sizing/classes. */
:where(.btn,.button,button.btn,input[type="submit"].btn,input[type="button"].btn){
  border-radius: var(--bb101-radius-sm);
  border-color: color-mix(in srgb, var(--bb101-border) 85%, var(--bb101-accent) 15%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.18);
}
:where(.btn:hover,.button:hover,button.btn:hover){ filter: brightness(1.06); }
:where(.btn:focus,.button:focus,button.btn:focus){ box-shadow: 0 0 0 .18rem var(--bb101-focus), inset 0 1px 0 rgba(255,255,255,.05); }

/* Pills / badges / status chips. */
:where(.badge,.pill,.status-pill,.module-pill,.theme-pill,.topbar-pill,.security-pill){
  border-radius: 999px;
  border-color: var(--bb101-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Tables / DataTables: visual border cleanup only, no display/layout rules. */
:where(table,.table,.dataTable){
  color: var(--bb101-text);
  border-color: var(--bb101-border-soft);
}
:where(table thead th,.table thead th,.dataTable thead th){
  color: var(--bb101-text);
  background-color: color-mix(in srgb, var(--bb101-card-bg) 86%, #000 14%);
  border-top: 0;
  border-bottom: 1px solid var(--bb101-border) !important;
  box-shadow: none !important;
}
:where(table thead,.table thead,.dataTable thead){
  border-bottom: 0 !important;
  box-shadow: none !important;
}
:where(table tbody td,.table tbody td,.dataTable tbody td){
  border-color: var(--bb101-border-soft);
}
:where(.table-striped tbody tr:nth-of-type(odd),.dataTable.stripe tbody tr.odd){
  background-color: color-mix(in srgb, var(--bb101-surface-bg) 93%, #fff 3%);
}

/* Modals / dropdowns: visual alignment with panel theme. */
:where(.modal-content,.dropdown-menu){
  color: var(--bb101-text);
  background: var(--bb101-card-bg);
  border-color: var(--bb101-border);
  border-radius: var(--bb101-radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
:where(.modal-header,.modal-footer,.dropdown-divider){ border-color: var(--bb101-border-soft); }

/* Alerts: theme-aware visual normalization only. */
:where(.alert){
  border-radius: var(--bb101-radius-sm);
  border-color: var(--bb101-border);
}