/* BLACK X — Administration & Organization UI Foundation (Batch 1) * Scope: opt-in pages only via .bx-admin-foundation-page on . * Purpose: compact information density, shared responsive grids, restrained * gold/silver edge light, glassy grouped inputs, and layered 3D depth. * This stylesheet intentionally does not change authorization, routes, forms, * workflow behavior, or business logic. */ body.bx-admin-foundation-page { --bx-admin-gap-2xs: 0.28rem; --bx-admin-gap-xs: 0.42rem; --bx-admin-gap-sm: 0.58rem; --bx-admin-gap-md: 0.78rem; --bx-admin-gap-lg: 1rem; --bx-admin-card-pad: clamp(0.68rem, 0.85vw, 0.86rem); --bx-admin-panel-pad: clamp(0.78rem, 1vw, 1rem); --bx-admin-radius-sm: 9px; --bx-admin-radius-md: 13px; --bx-admin-radius-lg: 16px; --bx-admin-gold-line: rgba(224, 190, 121, 0.44); --bx-admin-gold-soft: rgba(200, 162, 90, 0.16); --bx-admin-silver-line: rgba(182, 188, 195, 0.26); --bx-admin-silver-soft: rgba(182, 188, 195, 0.07); --bx-admin-glass: rgba(10, 11, 14, 0.72); --bx-admin-glass-strong: rgba(11, 12, 15, 0.84); --bx-admin-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 2px 10px rgba(200, 162, 90, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.52); --bx-admin-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.48), 0 0 20px rgba(200, 162, 90, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.58); } /* ------------------------------------------------------------------------- Shared density and page rhythm ------------------------------------------------------------------------- */ body.bx-admin-foundation-page main { --bx-section-gap: 0.82rem; --bx-grid-gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .section, body.bx-admin-foundation-page .organization-section, body.bx-admin-foundation-page .access-admin-section { padding-block: clamp(0.75rem, 1.25vw, 1rem); } body.bx-admin-foundation-page :where(.page-hero, .organization-hero) { min-height: auto; padding-block: clamp(0.78rem, 1.35vw, 1.1rem); } body.bx-admin-foundation-page :where(.editorial-shell, .copy-stack) { gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page :where(.page-lead, .page-summary) { max-width: 74ch; font-size: var(--bx-font-size-sm); line-height: 1.5; } body.bx-admin-foundation-page .page-title { font-size: clamp(1.35rem, 2.2vw, 1.82rem); } body.bx-admin-foundation-page .action-row { gap: var(--bx-admin-gap-xs); margin-top: var(--bx-admin-gap-md); } body.bx-admin-foundation-page :where(.btn, a.btn, button.btn) { border-radius: var(--bx-admin-radius-sm); } body.bx-admin-foundation-page .meta-strip { gap: var(--bx-admin-gap-xs); margin-top: var(--bx-admin-gap-md); } body.bx-admin-foundation-page .meta-strip span { min-height: 29px; padding-inline: 0.58rem; border-radius: var(--bx-admin-radius-sm); } /* ------------------------------------------------------------------------- Shared gold/silver glass surface contract ------------------------------------------------------------------------- */ body.bx-admin-foundation-page :where( .profile-control-card, .profile-identity-card, .activity-panel, .access-admin-panel, .access-policy-panel, .crud-form-panel, .crud-delete-warning, .access-table-shell, .permission-matrix-shell, .organization-panel, .organization-stat-grid > article, .organization-dashboard-card, .organization-table-wrap, .portal-card ) { border: 1px solid transparent; border-radius: var(--bx-admin-radius-md); background: linear-gradient(160deg, rgba(24, 26, 31, 0.9), rgba(8, 9, 11, 0.78)) padding-box, linear-gradient( 132deg, rgba(224, 190, 121, 0.52) 0%, rgba(182, 188, 195, 0.30) 32%, rgba(182, 188, 195, 0.10) 62%, rgba(200, 162, 90, 0.28) 100% ) border-box; box-shadow: var(--bx-admin-shadow); backdrop-filter: blur(14px) saturate(118%); -webkit-backdrop-filter: blur(14px) saturate(118%); } body.bx-admin-foundation-page :where( .profile-control-card, .organization-stat-grid > article, .organization-dashboard-card, .portal-card ) { transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } @media (hover: hover) { body.bx-admin-foundation-page :where( .profile-control-card, .organization-stat-grid > article, .organization-dashboard-card, .portal-card ):hover { transform: translateY(-2px); box-shadow: var(--bx-admin-shadow-hover); } } /* ------------------------------------------------------------------------- Compact data cards and grid contract ------------------------------------------------------------------------- */ body.bx-admin-foundation-page :where( .profile-control-grid, .organization-stat-grid, .organization-dashboard-grid, .portal-grid.compact-grid, .bx-admin-card-grid ) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.8rem), 1fr)); gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .profile-control-grid + .profile-control-grid { margin-top: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page :where( .profile-control-card, .organization-stat-grid > article, .organization-dashboard-card ) { min-height: 76px; padding: var(--bx-admin-card-pad); align-content: start; gap: var(--bx-admin-gap-2xs); } body.bx-admin-foundation-page .profile-control-card > span, body.bx-admin-foundation-page .organization-stat-grid span, body.bx-admin-foundation-page .organization-dashboard-card span { font-size: 0.67rem; letter-spacing: 0.035em; line-height: 1.25; } body.bx-admin-foundation-page .profile-control-card strong { margin-top: var(--bx-admin-gap-2xs); font-size: clamp(0.84rem, 1vw, 0.98rem); line-height: 1.34; } body.bx-admin-foundation-page .profile-control-card small, body.bx-admin-foundation-page .organization-dashboard-card small { margin-top: 0.1rem; font-size: 0.68rem; line-height: 1.35; } body.bx-admin-foundation-page .organization-stat-grid strong { margin-top: 0.18rem; font-size: 1.08rem; } body.bx-admin-foundation-page .organization-dashboard-card strong { font-size: 1.28rem; line-height: 1.05; } body.bx-admin-foundation-page .portal-grid.compact-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); } body.bx-admin-foundation-page .portal-card { min-height: 118px; padding: var(--bx-admin-card-pad); } body.bx-admin-foundation-page .portal-card h2 { margin-top: var(--bx-admin-gap-xs); font-size: 1rem; line-height: 1.35; } body.bx-admin-foundation-page .portal-card p { margin-top: var(--bx-admin-gap-xs); display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--bx-font-size-xs); line-height: 1.45; } body.bx-admin-foundation-page .portal-card::after { inset-inline: 0.75rem; } /* ------------------------------------------------------------------------- Filter grid contract — use for 4+ filters ------------------------------------------------------------------------- */ body.bx-admin-foundation-page :where(.bx-filter-grid, .organization-dashboard-filter) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bx-admin-gap-sm); align-items: end; } body.bx-admin-foundation-page .access-form-panel .crud-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .organization-filter:not(.organization-dashboard-filter) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bx-admin-gap-sm); align-items: end; } body.bx-admin-foundation-page :where( .crud-form-panel, .organization-form, .organization-filter, .organization-dashboard-filter ) { padding: var(--bx-admin-panel-pad); } body.bx-admin-foundation-page :where(.access-form-panel, .organization-form, .organization-filter) { border: 1px solid transparent; border-radius: var(--bx-admin-radius-md); background: linear-gradient(155deg, rgba(20, 22, 27, 0.82), rgba(7, 8, 10, 0.76)) padding-box, linear-gradient(130deg, rgba(224, 190, 121, 0.42), rgba(182, 188, 195, 0.24), rgba(200, 162, 90, 0.18)) border-box; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px) saturate(118%); -webkit-backdrop-filter: blur(14px) saturate(118%); } body.bx-admin-foundation-page :where(.crud-form-panel, .organization-form) { gap: var(--bx-admin-gap-md); } /* ------------------------------------------------------------------------- Grouped inputs — glassy but clearly bounded ------------------------------------------------------------------------- */ body.bx-admin-foundation-page .organization-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .crud-form-panel:not(.access-form-panel) .crud-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page :where(.crud-field, .organization-field) { min-width: 0; gap: var(--bx-admin-gap-2xs); padding: 0.54rem 0.58rem; border: 1px solid rgba(182, 188, 195, 0.09); border-radius: var(--bx-admin-radius-sm); background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), rgba(7, 8, 10, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 -1px 0 rgba(0, 0, 0, 0.28); } body.bx-admin-foundation-page :where(.crud-field label, .organization-field > label, .organization-field > span, .organization-filter label > span) { font-size: 0.68rem; line-height: 1.3; letter-spacing: 0.025em; } body.bx-admin-foundation-page :where(.crud-input, .organization-input) { width: 100%; max-width: 100%; min-width: 0; min-height: 34px; padding-block: 0.32rem; padding-inline: 0.52rem; border-color: rgba(182, 188, 195, 0.18); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)), rgba(3, 4, 6, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.038), 0 4px 12px rgba(0, 0, 0, 0.14); } body.bx-admin-foundation-page :where(.crud-input, .organization-input):focus { border-color: var(--bx-admin-gold-line); box-shadow: 0 0 0 2px rgba(200, 162, 90, 0.07), 0 0 16px rgba(200, 162, 90, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.045); } body.bx-admin-foundation-page textarea.organization-input, body.bx-admin-foundation-page textarea.crud-input { min-height: 82px; } body.bx-admin-foundation-page :where(.crud-help, .organization-field small) { font-size: 0.66rem; line-height: 1.35; } /* ------------------------------------------------------------------------- Panels, definitions and activity streams ------------------------------------------------------------------------- */ body.bx-admin-foundation-page :where(.organization-split, .organization-detail-grid, .organization-members-layout) { gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .organization-detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } body.bx-admin-foundation-page .organization-panel, body.bx-admin-foundation-page .access-admin-panel, body.bx-admin-foundation-page .access-policy-panel, body.bx-admin-foundation-page .activity-panel { padding: var(--bx-admin-panel-pad); } body.bx-admin-foundation-page .organization-panel-head { gap: var(--bx-admin-gap-xs); margin-bottom: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .organization-definition-list { gap: 0; } body.bx-admin-foundation-page .organization-definition-list > div { grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: var(--bx-admin-gap-sm); padding-block: 0.46rem; border-bottom: 1px solid rgba(182, 188, 195, 0.08); } body.bx-admin-foundation-page .organization-definition-list > div:last-child { border-bottom: 0; } body.bx-admin-foundation-page .organization-activity { gap: 0; } body.bx-admin-foundation-page .organization-activity article { padding-block: 0.52rem; border-bottom: 1px solid rgba(182, 188, 195, 0.075); } body.bx-admin-foundation-page .organization-activity article:last-child { border-bottom: 0; } body.bx-admin-foundation-page .activity-panel { margin-top: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .activity-item { padding-block: 0.48rem; } /* ------------------------------------------------------------------------- Tabs — visual compression only. Information architecture is Batch 2. ------------------------------------------------------------------------- */ body.bx-admin-foundation-page .bx-tabs-shell { gap: var(--bx-admin-gap-sm); } body.bx-admin-foundation-page .bx-tab-list { gap: 0.32rem; padding: 0.36rem; border: 1px solid rgba(182, 188, 195, 0.14); border-radius: var(--bx-admin-radius-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.006)), rgba(7, 8, 10, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.22); } body.bx-admin-foundation-page .bx-tab-btn { min-height: 34px; padding: 0.38rem 0.62rem; border: 1px solid transparent; border-radius: 8px; font-size: 0.72rem; line-height: 1.25; } body.bx-admin-foundation-page .bx-tab-btn.bx-tab-active { color: var(--color-gold-light); border-color: rgba(224, 190, 121, 0.30); background: linear-gradient(180deg, rgba(224, 190, 121, 0.09), rgba(200, 162, 90, 0.035)); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ------------------------------------------------------------------------- Tables — compact and locally scrollable ------------------------------------------------------------------------- */ body.bx-admin-foundation-page :where(.access-table-shell, .organization-table-wrap) { padding: 0.34rem; } body.bx-admin-foundation-page :where(.crud-table th, .crud-table td, .organization-table th, .organization-table td) { padding-block: 0.4rem; padding-inline: 0.52rem; font-size: 0.72rem; } body.bx-admin-foundation-page :where(.crud-table th, .organization-table th) { font-size: 0.64rem; letter-spacing: 0.035em; } body.bx-admin-foundation-page .access-table td:first-child small, body.bx-admin-foundation-page .organization-table small { margin-top: 0.08rem; font-size: 0.65rem; } body.bx-admin-foundation-page .permission-badge { min-height: 24px; padding-inline: 0.46rem; font-size: 0.64rem; } /* ------------------------------------------------------------------------- Access directory and live results ------------------------------------------------------------------------- */ body.bx-admin-foundation-page .access-live-results { gap: 0.24rem; margin-top: 0.28rem; border-radius: var(--bx-admin-radius-sm); } body.bx-admin-foundation-page .access-live-result { gap: 0.12rem; padding: 0.5rem 0.58rem; border-radius: 8px; background: rgba(13, 14, 18, 0.96); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32); } /* ------------------------------------------------------------------------- Administration action grids ------------------------------------------------------------------------- */ body.bx-admin-foundation-page .bx-admin-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--bx-admin-gap-xs); align-items: stretch; } body.bx-admin-foundation-page .bx-admin-action-grid > :where(.btn, a.btn, button.btn) { width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: normal; } body.bx-admin-foundation-page .admin-action-row { margin-top: var(--bx-admin-gap-md); } /* ------------------------------------------------------------------------- Responsive behavior ------------------------------------------------------------------------- */ @media (max-width: 1199px) { body.bx-admin-foundation-page .access-form-panel .crud-form-grid, body.bx-admin-foundation-page :where(.bx-filter-grid, .organization-dashboard-filter) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } } @media (max-width: 991px) { body.bx-admin-foundation-page .access-form-panel .crud-form-grid, body.bx-admin-foundation-page :where(.bx-filter-grid, .organization-dashboard-filter), body.bx-admin-foundation-page .organization-form-grid, body.bx-admin-foundation-page .crud-form-panel:not(.access-form-panel) .crud-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } body.bx-admin-foundation-page .organization-filter:not(.organization-dashboard-filter) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } body.bx-admin-foundation-page .organization-filter:not(.organization-dashboard-filter) > .btn { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 767px) { body.bx-admin-foundation-page :where( .profile-control-grid, .organization-stat-grid, .organization-dashboard-grid, .portal-grid.compact-grid, .bx-admin-card-grid ) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.bx-admin-foundation-page :where( .access-form-panel .crud-form-grid, .bx-filter-grid, .organization-dashboard-filter, .organization-form-grid, .crud-form-panel:not(.access-form-panel) .crud-form-grid, .organization-filter:not(.organization-dashboard-filter) ) { grid-template-columns: minmax(0, 1fr) !important; } body.bx-admin-foundation-page .organization-filter:not(.organization-dashboard-filter) > .btn { grid-column: auto; width: 100%; } body.bx-admin-foundation-page .organization-definition-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.16rem; } } @media (max-width: 479px) { body.bx-admin-foundation-page :where( .profile-control-grid, .organization-stat-grid, .organization-dashboard-grid, .portal-grid.compact-grid, .bx-admin-card-grid ) { grid-template-columns: minmax(0, 1fr) !important; } body.bx-admin-foundation-page .bx-tab-btn { min-height: 40px; } body.bx-admin-foundation-page .bx-admin-action-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { body.bx-admin-foundation-page :where( .profile-control-card, .organization-stat-grid > article, .organization-dashboard-card, .portal-card ) { transition: none; } } /* Batch 2 — Administration IA and navigation consolidation */ .bx-admin-primary-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .access-admin-flow-section + .access-admin-flow-section { margin-top: clamp(1rem, 1.5vw, 1.4rem); padding-top: clamp(.9rem, 1.4vw, 1.25rem); border-top: 1px solid rgba(232, 220, 200, .14); } .access-admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; } .access-admin-boundary-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sidebar-external-boundary { margin: .85rem .55rem .25rem; padding-top: .85rem; border-top: 1px solid rgba(232, 220, 200, .12); } .sidebar-external-erp { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid rgba(198, 167, 94, .42); border-radius: 12px; background: linear-gradient(145deg, rgba(198, 167, 94, .08), rgba(232, 220, 200, .035)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.16); text-decoration: none; } .sidebar-external-erp:hover, .sidebar-external-erp:focus-visible { border-color: rgba(232, 220, 200, .68); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 18px rgba(198, 167, 94, .14), 0 12px 28px rgba(0,0,0,.18); } @media (max-width: 760px) { .bx-admin-primary-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Organization O2: manual-first location provider foundation */ body.bx-admin-foundation-page .organization-provider-note { display: grid; gap: .35rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--border-color, #c6a75e) 35%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface, #fff) 92%, transparent); } body.bx-admin-foundation-page .organization-provider-note span { opacity: .78; line-height: 1.65; } body.bx-admin-foundation-page .organization-region-stats { margin-block: 1rem; }