/* BLACK X ERP — Canonical component system */

/* Glass surfaces */
.card, .blackx-card, .blackx-panel, .blackx-kpi-card, .dashboard-card, .report-card, .module-card,
.erp-card, .erp-panel, .erp-module-card, .projects-panel, .auth-card, .bx-card, .bx-dashboard-panel,
.bx-report-panel, .bx-operational-section, .erp-section, .erp-page-card, .bx-record-card,
.blackx-dashboard-module-card, .list-group-item, .dropdown-menu, .modal-content, .blackx-modal,
[role="dialog"].blackx-dialog {
  position: relative;
  color: var(--bx-text);
  background: var(--bx-surface-glass);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-sm);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-bx-glass], .card, .blackx-card, .blackx-panel, .blackx-kpi-card, .dashboard-card, .report-card,
.module-card, .erp-card, .erp-panel, .erp-module-card, .projects-panel, .auth-card, .bx-card,
.bx-dashboard-panel, .bx-report-panel, .bx-record-card, .blackx-dashboard-module-card, .modal-content {
  isolation: isolate;
  overflow: clip;
}
[data-bx-glass]::before, .card::before, .blackx-card::before, .blackx-panel::before,
.blackx-kpi-card::before, .dashboard-card::before, .report-card::before, .module-card::before,
.erp-card::before, .erp-panel::before, .erp-module-card::before, .projects-panel::before,
.auth-card::before, .bx-card::before, .bx-dashboard-panel::before, .bx-report-panel::before,
.bx-record-card::before, .blackx-dashboard-module-card::before, .modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  opacity: 0;
  transition: opacity var(--bx-transition);
}
[data-bx-glass]:hover::before, [data-bx-glass]:focus-within::before,
.card:hover::before, .card:focus-within::before, .blackx-card:hover::before, .blackx-card:focus-within::before,
.blackx-panel:hover::before, .blackx-panel:focus-within::before, .blackx-kpi-card:hover::before,
.dashboard-card:hover::before, .report-card:hover::before, .module-card:hover::before, .erp-card:hover::before,
.erp-panel:hover::before, .erp-module-card:hover::before, .projects-panel:hover::before, .auth-card:hover::before,
.bx-card:hover::before, .bx-dashboard-panel:hover::before, .bx-report-panel:hover::before,
.bx-record-card:hover::before, .blackx-dashboard-module-card:hover::before, .modal-content:hover::before { opacity: 1; }

.card, .erp-card, .blackx-card, .blackx-panel, .bx-card, .bx-dashboard-panel, .bx-report-panel, .projects-panel { padding: 1.15rem; }
.card-header, .modal-header, .card-footer, .modal-footer {
  margin-inline: -1.15rem;
  padding-inline: 1.15rem;
}
.card-header, .modal-header {
  margin-block-start: -1.15rem;
  margin-block-end: 1rem;
  padding-block: 1rem;
  color: var(--bx-text-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.10));
  border-bottom: 1px solid var(--bx-border-soft);
}
.card-footer, .modal-footer {
  margin-block-start: 1rem;
  margin-block-end: -1.15rem;
  padding-block: 1rem;
  border-top: 1px solid var(--bx-border-soft);
  background: rgba(238,245,244,.42);
}

/* Buttons */
.btn, .blackx-btn, button[type="submit"], button[type="button"], button[type="reset"],
input[type="submit"], input[type="button"], input[type="reset"] {
  --bx-button-bg: linear-gradient(180deg, var(--bx-teal-800), var(--bx-teal-850));
  --bx-button-color: var(--bx-text-inverse);
  --bx-button-border: rgba(var(--bx-neon-rgb), .24);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .64rem 1rem;
  border: 1px solid var(--bx-button-border);
  border-radius: var(--bx-radius-sm);
  background: var(--bx-button-bg);
  color: var(--bx-button-color) !important;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(var(--bx-neon-rgb), .045), 0 10px 20px rgba(9,23,19,.14);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--bx-transition), box-shadow var(--bx-transition), border-color var(--bx-transition), filter var(--bx-transition);
}
.btn::after, .blackx-btn::after, button[type="submit"]::after, button[type="button"]::after, button[type="reset"]::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--bx-radius-sm) - 2px);
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 32%, transparent 70%, rgba(var(--bx-neon-rgb), .08));
  pointer-events: none;
}
.btn:hover, .blackx-btn:hover, button[type="submit"]:hover, button[type="button"]:hover, button[type="reset"]:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: var(--bx-focus-ring), 0 0 14px rgba(var(--bx-neon-rgb), .085), 0 14px 26px rgba(9,23,19,.17);
}
.btn:active, .blackx-btn:active, button[type="submit"]:active, button[type="button"]:active, button[type="reset"]:active { transform: translateY(0); }
:where(.btn, .blackx-btn, button[type="submit"], button[type="button"], button[type="reset"],
input[type="submit"], input[type="button"], input[type="reset"]) :where(span, small, strong, b, i, svg) {
  color: inherit !important;
}
:where(.btn, .blackx-btn, button[type="submit"], button[type="button"], button[type="reset"]) svg {
  fill: currentColor;
  stroke: currentColor;
}
.btn-sm, .blackx-btn--compact { min-height: 34px; padding: .42rem .72rem; border-radius: 12px; font-size: .84rem; }
.blackx-btn--block { width: 100%; }
.btn-primary, .btn-success, .blackx-btn--primary, .blackx-btn--success {
  --bx-button-bg: linear-gradient(180deg, var(--bx-teal-700), var(--bx-teal-850));
  --bx-button-color: var(--bx-text-inverse);
  --bx-button-border: rgba(var(--bx-neon-rgb), .28);
}
.btn-secondary, .btn-light, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
.btn-ghost, .blackx-btn--secondary, .blackx-btn--ghost, .blackx-btn--metal {
  --bx-button-bg: linear-gradient(180deg, #f4f9f9 0%, #dce6e6 48%, #becdce 100%);
  --bx-button-color: #09201f;
  --bx-button-border: rgba(122,148,150,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 20px rgba(9,23,19,.09), 0 0 0 1px rgba(var(--bx-neon-rgb), .06);
}
.btn-secondary::after, .btn-light::after, .btn-outline::after, .btn-outline-primary::after,
.btn-outline-secondary::after, .btn-outline-info::after, .btn-ghost::after,
.blackx-btn--secondary::after, .blackx-btn--ghost::after, .blackx-btn--metal::after {
  background: linear-gradient(115deg, rgba(255,255,255,.64), transparent 38%, transparent 68%, rgba(var(--bx-neon-rgb), .08));
}
.btn-danger, .btn-outline-danger, .blackx-btn--danger,
[data-action="delete"], [data-action="remove"], [data-blackx-danger], [data-remove-row],
form[action*="/delete/"] :is(button, input[type="submit"]),
form[action*="/remove/"] :is(button, input[type="submit"]),
a[href*="/delete/"], a[href*="/remove/"] {
  --bx-button-bg: radial-gradient(circle at 50% 24%, var(--bx-danger-hot) 0%, var(--bx-danger) 46%, var(--bx-danger-deep) 100%);
  --bx-button-color: #fff;
  --bx-button-border: rgba(255,82,101,.60);
  box-shadow: inset 0 0 24px rgba(255,255,255,.11), inset 0 -12px 22px rgba(80,0,13,.32), 0 12px 22px rgba(94,10,28,.24);
}
:where(.btn-danger, .btn-outline-danger, .blackx-btn--danger, [data-action="delete"], [data-action="remove"],
[data-blackx-danger], [data-remove-row], form[action*="/delete/"] :is(button, input[type="submit"]),
form[action*="/remove/"] :is(button, input[type="submit"]), a[href*="/delete/"], a[href*="/remove/"]):is(:hover, :focus-visible) {
  --bx-button-bg: radial-gradient(circle at 50% 20%, #e3263f 0%, var(--bx-danger) 44%, #760a1d 100%);
  --bx-button-color: #fff;
  color: #fff !important;
  border-color: rgba(255,82,101,.72);
  box-shadow: 0 0 0 3px rgba(216,27,52,.16), 0 14px 26px rgba(94,10,28,.30);
}
.btn-warning { --bx-button-bg: linear-gradient(180deg, #d79227, #9d5f0b); --bx-button-color: #fff; --bx-button-border: rgba(179,115,23,.5); }
.btn-info { --bx-button-bg: linear-gradient(180deg, #1683a4, #0c607d); --bx-button-color: #fff; --bx-button-border: rgba(22,131,164,.45); }
.bx-on-light { color: #09201f !important; }
.bx-on-dark { color: #f3fffd !important; }

/* Icon buttons */
.blackx-icon-button, .blackx-alert__dismiss {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 13px;
}
.blackx-icon-button svg, .blackx-alert__dismiss svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Forms */
form p { margin-block: 0 1rem; }
label, legend { display: inline-block; margin-block-end: .38rem; color: var(--bx-text-strong); font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]),
select, textarea, .form-control, .form-select, .input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  width: 100%;
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid rgba(125,151,153,.44);
  border-radius: var(--bx-radius-sm);
  background: rgba(255,255,255,.90);
  color: var(--bx-text-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), var(--bx-shadow-xs);
  transition: border-color var(--bx-transition-fast), box-shadow var(--bx-transition-fast), background var(--bx-transition-fast);
}
textarea { min-height: 118px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #829493; }
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(var(--bx-neon-rgb), .52);
  background: #fff;
  box-shadow: var(--bx-focus-ring), 0 12px 26px rgba(7,16,15,.07);
  outline: none;
}
input[type="checkbox"], input[type="radio"], .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--bx-teal-700);
}
input[readonly], textarea[readonly], select[disabled] { background: #edf2f2; color: var(--bx-text-muted); }
.form-error, .errorlist { color: var(--bx-danger); font-size: .86rem; font-weight: 700; }
.errorlist { margin: .35rem 0 0; padding-inline-start: 1.2rem; }
.bx-field, .erp-form-field, .bx-report-filter__field, .media-op-field { min-width: 0; }
.bx-fieldset {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-md);
  background: rgba(255,255,255,.46);
}

/* Tables */
.table-responsive, .erp-table-wrap, .bx-report-table-wrap, .projects-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-md);
  background: rgba(255,255,255,.70);
  box-shadow: var(--bx-shadow-xs);
}
table, .table, .erp-table, .projects-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--bx-text);
}
thead th, .table thead th, .erp-table thead th, .projects-data-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding: .78rem .8rem;
  background: linear-gradient(180deg, var(--bx-teal-800), var(--bx-teal-900));
  color: var(--bx-text-inverse);
  border-bottom: 1px solid rgba(var(--bx-neon-rgb), .22);
  font-size: .82rem;
  font-weight: 780;
  white-space: nowrap;
}
tbody td, tbody th, .table tbody td, .erp-table tbody td, .projects-data-table tbody td {
  padding: .72rem .8rem;
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--bx-border-soft);
  vertical-align: middle;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th, .table-hover tbody tr:hover td { background: rgba(225,244,242,.86); }
[data-blackx-row-link] { cursor: pointer; }

/* Badges and statuses */
.badge, .erp-badge, .blackx-badge, .bx-status, .status-badge, .erp-tag-row > *, .bx-badge-cluster > * {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 28px;
  padding: .3rem .62rem;
  border: 1px solid rgba(var(--bx-neon-rgb), .18);
  border-radius: var(--bx-radius-pill);
  background: rgba(11,36,31,.08);
  color: var(--bx-teal-800);
  font-size: .78rem;
  font-weight: 760;
}
.badge.bg-danger, .blackx-badge--danger, .bx-status--danger { background: rgba(216,27,52,.10); color: #9b1025; border-color: rgba(216,27,52,.24); }
.badge.bg-success, .blackx-badge--teal, .bx-status--success { background: rgba(8,118,108,.10); color: #075f58; border-color: rgba(8,118,108,.22); }

/* Alerts and messages */
.blackx-messages {
  position: fixed;
  inset-block-start: calc(var(--bx-topbar-height) + 14px);
  inset-inline-end: 20px;
  z-index: 2100;
  display: grid;
  gap: .65rem;
  width: min(420px, calc(100vw - 32px));
}
.blackx-alert, .alert, .message {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .78rem .85rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-md);
  background: rgba(255,255,255,.88);
  color: var(--bx-text);
  box-shadow: var(--bx-shadow-md);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.blackx-alert__indicator { width: 8px; height: 28px; border-radius: var(--bx-radius-pill); background: var(--bx-info); box-shadow: 0 0 12px rgba(17,107,139,.24); }
.blackx-alert--success .blackx-alert__indicator { background: var(--bx-success); }
.blackx-alert--warning .blackx-alert__indicator { background: var(--bx-warning); }
.blackx-alert--error .blackx-alert__indicator, .blackx-alert--danger .blackx-alert__indicator { background: var(--bx-danger); }
.blackx-alert__dismiss { --bx-button-bg: transparent; --bx-button-color: var(--bx-text-muted); --bx-button-border: transparent; min-width: 34px; width: 34px; height: 34px; min-height: 34px; box-shadow: none; }
.blackx-alert.is-leaving { opacity: 0; transform: translateX(12px); }

/* Dropdowns */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.blackx-user-menu, .blackx-language-switcher { position: relative; }
.blackx-user-menu > summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .4rem .55rem;
  border: 1px solid rgba(var(--bx-neon-rgb), .16);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  color: var(--bx-text-inverse);
}
.blackx-user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--bx-teal-950);
  color: var(--bx-text-inverse);
  border: 1px solid rgba(var(--bx-neon-rgb), .28);
  box-shadow: 0 0 10px rgba(var(--bx-neon-rgb), .08);
  font-weight: 850;
}
.blackx-user-menu__identity { display: grid; min-width: 0; }
.blackx-user-menu__identity strong { color: var(--bx-text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.blackx-user-menu__chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--bx-transition); }
.blackx-user-menu[open] .blackx-user-menu__chevron { transform: rotate(180deg); }
.blackx-user-menu__panel, .blackx-language-switcher__panel, .dropdown-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 2200;
  min-width: 250px;
  padding: .8rem;
  background: rgba(11,36,31,.94);
  color: var(--bx-text-inverse);
  border: 1px solid rgba(var(--bx-neon-rgb), .22);
  border-radius: var(--bx-radius-md);
  box-shadow: var(--bx-shadow-shell), 0 0 22px rgba(var(--bx-neon-rgb), .10);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}
.blackx-user-menu__meta { display: grid; gap: .2rem; padding: .35rem .2rem .8rem; margin-bottom: .7rem; border-bottom: 1px solid rgba(var(--bx-neon-rgb), .12); }
.blackx-user-menu__meta strong { color: var(--bx-text-inverse); }
.blackx-user-menu__meta small { color: var(--bx-text-inverse-muted) !important; }

/* Language select */
.blackx-language-switcher label { margin: 0; }
.blackx-language-switcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.blackx-language-switcher select {
  min-width: 108px;
  min-height: 42px;
  padding: .5rem 2.2rem .5rem .75rem;
  background-color: rgba(255,255,255,.05);
  color: var(--bx-text-inverse);
  border-color: rgba(var(--bx-neon-rgb), .18);
  box-shadow: none;
}
.blackx-language-switcher select option { color: var(--bx-text-strong); background: #fff; }

/* Modals */
.modal-backdrop, .blackx-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2040;
  background: rgba(7,16,15,.58);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.modal, .blackx-modal { z-index: 2050; }
.modal-content, .blackx-modal, [role="dialog"].blackx-dialog {
  background: rgba(255,255,255,.78);
  border-color: rgba(var(--bx-neon-rgb), .20);
  box-shadow: 0 26px 70px rgba(7,16,15,.26), 0 0 28px rgba(var(--bx-neon-rgb), .10);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
}

/* Tabs and pagination */
.nav-tabs, .nav-pills, .pagination, .bx-report-tabs {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .35rem;
  margin: 0;
  list-style: none;
  border: 1px solid var(--bx-border-soft);
  border-radius: var(--bx-radius-md);
  background: rgba(255,255,255,.55);
}
.nav-link, .page-link, .bx-report-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .45rem .72rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--bx-text);
  background: transparent;
  text-decoration: none;
}
.nav-link.active, .page-item.active .page-link, .bx-report-tabs a.active, .bx-report-tabs a[aria-current="page"] {
  background: linear-gradient(180deg, var(--bx-teal-800), var(--bx-teal-900));
  color: var(--bx-text-inverse);
  border-color: rgba(var(--bx-neon-rgb), .22);
  box-shadow: 0 0 10px rgba(var(--bx-neon-rgb), .07);
}

/* Empty states */
.bx-empty-state, .blackx-empty-state, .bx-report-empty, .bx-empty-row, .blackx-dashboard-empty-hint {
  padding: 1.35rem;
  border: 1px dashed rgba(116,145,147,.42);
  border-radius: var(--bx-radius-md);
  background: rgba(246,250,250,.68);
  color: var(--bx-text-muted);
  text-align: center;
}
.bx-empty-state__icon { width: 44px; height: 44px; margin: 0 auto .8rem; border-radius: 16px; background: rgba(var(--bx-neon-rgb), .08); color: var(--bx-teal-700); }

/* Code and money */
.erp-code, .bx-data-code, .bx-code-value, code, kbd, pre {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .88em;
}
.erp-code, .bx-data-code, .bx-code-value, code {
  padding: .18rem .38rem;
  border-radius: 8px;
  background: rgba(11,36,31,.07);
  color: var(--bx-teal-800);
  border: 1px solid rgba(var(--bx-neon-rgb), .10);
}
.bx-money, .bx-number, .bx-metric-value, [data-bx-number] { font-variant-numeric: tabular-nums; font-weight: 780; color: var(--bx-text-strong); }

@media (max-width: 720px) {
  .blackx-messages { inset-inline: 11px; width: auto; }
  .blackx-user-menu__identity { display: none; }
  .blackx-language-switcher select { min-width: 90px; }
}