/**
 * Flatrix Ops UI — matches CRM mockup (screenshot 1)
 * Load after style.css
 */

html.dark,
html.dark body {
    --crm-bg: oklch(0.145 0.01 286);
    --crm-fg: oklch(0.87 0.008 286);
    --crm-card: oklch(0.19 0.012 286);
    --crm-border: oklch(0.27 0.012 286);
    --crm-muted: oklch(0.62 0.012 286);
    --crm-primary: oklch(0.62 0.19 277);
    background: var(--crm-bg) !important;
    color: var(--crm-fg);
}

.app-shell {
    background: var(--crm-bg);
    min-height: 100vh;
}

.app-shell .footer {
    display: none !important;
}

/* Sidebar — w-60 / 240px like React CRM */
.crm-sidebar {
    width: 240px !important;
    min-width: 240px;
    background: oklch(0.17 0.012 286 / 0.98) !important;
    border-right: 1px solid var(--crm-border) !important;
    padding: 1.25rem 0.75rem 1rem !important;
    display: flex;
    flex-direction: column;
}

.crm-sidebar .app-sidebar-brand {
    padding: 0 0.5rem 1.25rem;
    margin-bottom: 0.25rem;
}

.crm-sidebar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.25rem;
    overflow-y: auto;
}

.crm-sidebar-foot {
    padding: 0.75rem 0.25rem 0.5rem;
    border-top: 1px solid #3a3a48;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-sidebar .app-side-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.crm-sidebar .app-side-link.active {
    background: #2a2a36 !important;
    color: #f4f4f6 !important;
    border: none !important;
}

.crm-sidebar .app-side-link:not(.active) {
    color: #8b8b9a !important;
}

.crm-sidebar .app-side-link:hover:not(.active) {
    background: color-mix(in srgb, #2a2a36 50%, transparent) !important;
    color: #d4d4dc !important;
}

.crm-sidebar .app-side-dot {
    width: 6px;
    height: 6px;
    background: #7c6df0;
}

.crm-sidebar-user-wrap {
    padding: 0.5rem 0.25rem 0;
}

.crm-sidebar .app-user-card {
    background: #2e2e3a;
    border-color: #3a3a48;
}

.crm-sidebar .app-user-role {
    color: #8b8b9a;
}

/* Main area */
.app-main {
    background: #14141c;
    flex: 1;
    min-width: 0;
}

.app-topbar {
    height: 3.5rem !important;
    padding: 0 1.5rem !important;
    background: color-mix(in srgb, var(--crm-bg) 92%, transparent) !important;
    border-bottom: 1px solid var(--crm-border) !important;
}

.app-topbar-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.app-topbar-sub {
    font-size: 0.6875rem !important;
}

.content-wrapper {
    padding: 1.5rem !important;
    background: var(--crm-bg);
}

.content-wrapper.crm-spa-host-wrap {
    padding: 0 !important;
}

.crm-spa-host {
    min-height: calc(100vh - 3.5rem);
}

.crm-spa-host #root {
    min-height: inherit;
}

/* Invoice page layout */
.invoice-board.app-page {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.crm-stat-grid {
    margin-bottom: 1.5rem;
}

.crm-stat-card {
    background: #1f1f28 !important;
    border: 1px solid #3a3a48 !important;
    box-shadow: none !important;
}

.crm-stat-card::before {
    opacity: 0.06;
}

/* Toolbar row — tabs left, actions right */
.crm-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.invoice-board .invoice-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 0.5rem;
    background: color-mix(in srgb, #2e2e3a 60%, transparent);
    border: 1px solid #3a3a48;
}

.invoice-board .invoice-segment .crm-tab-trigger {
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 0.375rem !important;
    padding: 0 0.75rem;
    height: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #8b8b9a !important;
    background: transparent !important;
}

.invoice-board .invoice-segment .crm-tab-trigger:hover {
    color: #d4d4dc !important;
    background: color-mix(in srgb, #2a2a36 50%, transparent) !important;
}

.invoice-board .invoice-segment .crm-tab-trigger.active {
    background: #14141c !important;
    color: #f4f4f6 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #3a3a48 !important;
    font-weight: 600;
}

.invoice-board .invoice-tab-count {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    background: color-mix(in srgb, #7c6df0 15%, transparent) !important;
    color: #7c6df0 !important;
}

.invoice-board .invoice-segment .crm-tab-trigger:not(.active) .invoice-tab-count {
    background: #2e2e3a !important;
    color: #8b8b9a !important;
}

.crm-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.invoice-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #8b8b9a;
    pointer-events: none;
    z-index: 2;
}

.invoice-search-form {
    position: relative;
}

.invoice-board .invoice-search-input {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    width: 18rem !important;
    max-width: 100%;
    font-size: 0.75rem !important;
    background: #2e2e3a !important;
    border: 1px solid #3a3a48 !important;
    color: #d4d4dc !important;
    border-radius: 0.375rem !important;
}

.invoice-board .invoice-tool-btn {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    min-width: auto !important;
    padding: 0 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    background: #2e2e3a !important;
    border: 1px solid #3a3a48 !important;
    color: #d4d4dc !important;
    border-radius: 0.375rem !important;
}

.invoice-board .invoice-tool-btn:hover {
    background: #2a2a36 !important;
    color: #f4f4f6 !important;
}

.invoice-flatrix-toggle {
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, #3dd68c 30%, transparent);
    background: color-mix(in srgb, #3dd68c 12%, transparent);
    color: #3dd68c;
    cursor: default;
}

.invoice-flatrix-toggle.is-off {
    border-color: #3a3a48;
    background: #2e2e3a;
    color: #8b8b9a;
}

/* Table panel */
.crm-table-panel {
    border-radius: 0.75rem;
    border: 1px solid #4a4a58;
    background: #1f1f28;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* React SPA embedded in PHP shell — same panel chrome as legacy invoice board */
.crm-spa-host .invoice-board .crm-table-panel {
    border-color: #52525f;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.invoice-board .crm-card-elevated {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Bootstrap overrides inside app */
.app-shell .btn-primary {
    background: linear-gradient(135deg, #7c6df0 0%, #9b7cf7 100%) !important;
    border: none !important;
    color: #fff !important;
}

.app-shell .card::before {
    display: none;
}

.app-shell .crm-stat-card::before {
    display: block;
}

/* Kill global readability overrides inside invoice board */
.invoice-board.tab-content,
.invoice-board.tab-content * {
    color: inherit;
}

html.dark .invoice-board .table thead th,
html.dark .invoice-board .table tbody td {
    background: transparent !important;
    color: inherit !important;
}

/* Admin / settings / reports pages (dark shell) */
.app-page .card {
    background: var(--crm-card) !important;
    border: 1px solid var(--crm-border) !important;
    color: var(--crm-fg) !important;
}

.app-page .card .card-title,
.app-page .card .form-label {
    color: #d4d4dc !important;
}

.app-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: #d4d4dc;
    --bs-table-border-color: #3a3a48;
    --bs-table-striped-bg: rgba(46, 46, 58, 0.45);
    --bs-table-hover-bg: rgba(42, 42, 54, 0.65);
}

.app-page .table thead th {
    background: #2e2e3a !important;
    color: #8b8b9a !important;
    border-color: #3a3a48 !important;
}

.app-page .table td,
.app-page .table th {
    border-color: #3a3a48 !important;
    color: #d4d4dc !important;
}

.app-admin-panel {
    background: #2e2e3a !important;
    border-color: #3a3a48 !important;
    color: #d4d4dc !important;
}

.app-page .form-control,
.app-page .form-select {
    background: #2e2e3a !important;
    border-color: #3a3a48 !important;
    color: #d4d4dc !important;
}

.app-page .form-control:focus {
    background: #2e2e3a !important;
    border-color: #7c6df0 !important;
    color: #f4f4f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 109, 240, 0.2);
}

.app-page .form-check-label {
    color: #d4d4dc !important;
}

.app-page h6.bg-primary {
    background: linear-gradient(135deg, #7c6df0 0%, #9b7cf7 100%) !important;
    border: none;
}

/* Sidebar minimized (icon-only) — default on load */
.app-shell.sidebar-collapsed .crm-sidebar {
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    overflow: hidden;
    transform: none !important;
    pointer-events: auto !important;
}

.app-shell.sidebar-collapsed .app-brand-text,
.app-shell.sidebar-collapsed .app-side-link span,
.app-shell.sidebar-collapsed .app-side-dot,
.app-shell.sidebar-collapsed .app-user-meta,
.app-shell.sidebar-collapsed .crm-sidebar-user-wrap > a.small {
    display: none !important;
}

.app-shell.sidebar-collapsed .app-sidebar-brand {
    display: flex !important;
    justify-content: center;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.app-shell.sidebar-collapsed .app-side-link {
    justify-content: center;
    padding: 0.5rem !important;
    height: auto !important;
    overflow: visible !important;
    text-align: center;
}

.app-shell.sidebar-collapsed .app-side-link i {
    margin-right: 0 !important;
}

.app-shell.sidebar-collapsed .crm-sidebar-main,
.app-shell.sidebar-collapsed .crm-sidebar-foot {
    display: flex !important;
}

.app-shell.sidebar-collapsed .app-user-card {
    justify-content: center;
    padding: 0.5rem !important;
}

.app-shell.sidebar-collapsed .app-user-avatar {
    margin: 0 auto;
}

/* ========== PHP pages (dashboard, reports, reminders, admin) — match invoices CRM shell ========== */

/* Neutralize legacy full-hide sidebar when CRM sidebar is present */
.app-shell.sidebar-collapsed .crm-sidebar.app-sidebar {
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    border-right: 1px solid var(--crm-border) !important;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: auto !important;
    position: relative !important;
}

.app-shell.sidebar-collapsed .crm-sidebar .app-sidebar-brand {
    display: flex !important;
}

.app-main > .content-wrapper:not(.crm-spa-host-wrap) {
    padding: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-left: 0 !important;
}

.app-page.tab-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--crm-fg) !important;
}

/* Override global .tab-content readability rules (style.css) inside CRM shell */
html.dark .app-shell .app-page.tab-content,
html.dark .app-shell .app-page.tab-content *:not(.btn):not(.badge):not(i):not(.bi) {
    color: inherit !important;
}

html.dark .app-shell .app-page.tab-content .text-muted {
    color: #8b8b9a !important;
}

html.dark .app-shell .app-page.tab-content .table thead th {
    background: #2e2e3a !important;
    color: #8b8b9a !important;
    border-color: #3a3a48 !important;
}

html.dark .app-shell .app-page.tab-content .table tbody td {
    color: #d4d4dc !important;
    background: transparent !important;
    border-color: #3a3a48 !important;
}

html.dark .app-shell .app-page.tab-content .form-control,
html.dark .app-shell .app-page.tab-content .form-select {
    color: #d4d4dc !important;
    background: #2e2e3a !important;
    border-color: #3a3a48 !important;
}

.app-page-head h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #f4f4f6 !important;
    margin-bottom: 0.25rem !important;
}

.app-page-head p {
    font-size: 0.75rem !important;
    color: #8b8b9a !important;
}

.app-page .text-primary {
    color: #7c6df0 !important;
}

.app-page .text-danger {
    color: #f87171 !important;
}

.app-page .text-info {
    color: #5b9cf5 !important;
}

.app-page .text-secondary {
    color: #8b8b9a !important;
}

/* Sub-tabs — same pill row as invoice board */
.app-page .app-subtabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: 0.5rem;
    background: color-mix(in srgb, #2e2e3a 60%, transparent);
    border: 1px solid #3a3a48;
    margin-bottom: 1.25rem !important;
}

.app-page .app-subtabs .nav-item {
    margin: 0;
}

.app-page .app-subtabs .nav-link {
    border: 0 !important;
    border-radius: 0.375rem !important;
    padding: 0 0.75rem !important;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #8b8b9a !important;
    background: transparent !important;
}

.app-page .app-subtabs .nav-link:hover {
    color: #d4d4dc !important;
    background: color-mix(in srgb, #2a2a36 50%, transparent) !important;
}

.app-page .app-subtabs .nav-link.active {
    background: #14141c !important;
    color: #f4f4f6 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #3a3a48 !important;
    font-weight: 600 !important;
}

.crm-section-title,
.app-page h6.bg-primary {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(135deg, #7c6df0 0%, #9b7cf7 100%) !important;
    border: none !important;
    color: #fff !important;
}

.crm-table-panel {
    border-radius: 0.75rem;
    border: 1px solid #3a3a48;
    background: #1f1f28;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.crm-table-panel .table {
    margin-bottom: 0 !important;
}

.app-page .app-kpi-tile {
    background: #1f1f28 !important;
    border: 1px solid #3a3a48 !important;
    border-left-width: 3px !important;
    box-shadow: none !important;
    border-radius: 0.75rem !important;
}

.app-page .app-kpi-tile .card-body h6 {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #8b8b9a !important;
}

.app-page .app-kpi-tile .card-body h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #f4f4f6 !important;
}

.app-page .app-kpi-pink { border-left-color: #7c6df0 !important; }
.app-page .app-kpi-red { border-left-color: #f87171 !important; }
.app-page .app-kpi-blue { border-left-color: #5b9cf5 !important; }
.app-page .app-kpi-dark { border-left-color: #8b8b9a !important; }

.app-page .app-panel-card {
    background: #1f1f28 !important;
    border: 1px solid #3a3a48 !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
    overflow: hidden;
}

.app-page .app-panel-card .card-header {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1rem !important;
    border-bottom: 1px solid #3a3a48 !important;
}

.app-page .app-panel-card .card-header.crm-header-accent {
    background: linear-gradient(135deg, color-mix(in srgb, #7c6df0 85%, #be1d4f) 0%, #be1d4f 100%) !important;
    color: #fff !important;
}

.app-page .app-panel-card .card-header.crm-header-danger {
    background: color-mix(in srgb, #f87171 25%, #1f1f28) !important;
    color: #fecaca !important;
    border-bottom-color: color-mix(in srgb, #f87171 35%, transparent) !important;
}

.app-page .list-group-item {
    background: #1f1f28 !important;
    border-color: #3a3a48 !important;
    color: #d4d4dc !important;
}

.app-page .list-group-item .fw-medium {
    color: #f4f4f6 !important;
}

.app-page .btn-outline-primary {
    color: #7c6df0 !important;
    border-color: color-mix(in srgb, #7c6df0 45%, transparent) !important;
    background: transparent !important;
    font-size: 0.75rem !important;
}

.app-page .btn-outline-primary:hover {
    background: color-mix(in srgb, #7c6df0 15%, transparent) !important;
    color: #c4b8fd !important;
}

.app-page .btn-outline-danger {
    color: #f87171 !important;
    border-color: color-mix(in srgb, #f87171 40%, transparent) !important;
    font-size: 0.75rem !important;
}

.app-page .btn-outline-secondary {
    color: #8b8b9a !important;
    border-color: #3a3a48 !important;
    font-size: 0.75rem !important;
}

.app-page .alert {
    border-radius: 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #3a3a48;
}

.app-page .alert-success {
    background: color-mix(in srgb, #3dd68c 12%, #1f1f28) !important;
    color: #3dd68c !important;
    border-color: color-mix(in srgb, #3dd68c 30%, transparent) !important;
}

.app-page .alert-info {
    background: color-mix(in srgb, #5b9cf5 12%, #1f1f28) !important;
    color: #93c5fd !important;
    border-color: color-mix(in srgb, #5b9cf5 30%, transparent) !important;
}

.app-page .badge.bg-primary {
    background: #7c6df0 !important;
}

.app-page .badge.bg-secondary {
    background: #2e2e3a !important;
    color: #8b8b9a !important;
}

.app-page .badge.bg-success {
    background: color-mix(in srgb, #3dd68c 25%, #1f1f28) !important;
    color: #3dd68c !important;
}

.app-page .badge.bg-warning {
    background: color-mix(in srgb, #fbbf24 25%, #1f1f28) !important;
    color: #fcd34d !important;
}

.app-page a:not(.btn) {
    color: #9b8cf8;
}

.app-page a:not(.btn):hover {
    color: #c4b8fd;
}

.app-page code {
    color: #c4b8fd;
    background: #2e2e3a;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.85em;
}