/* =========================================================
   eBarCouncil — Modern Professional Grids (global)
   Covers: Bootstrap tables, FluentDataGrid, QuickGrid
   ========================================================= */

:root {
    --grid-ink: #0f172a;
    --grid-muted: #64748b;
    --grid-border: rgba(15, 23, 42, 0.08);
    --grid-header-from: #0f766e;
    --grid-header-to: #0e7490;
    --grid-header-text: #ffffff;
    --grid-row-hover: rgba(13, 148, 136, 0.07);
    --grid-row-alt: rgba(240, 253, 250, 0.55);
    --grid-selected: rgba(13, 148, 136, 0.12);
    --grid-radius: 16px;
    --grid-shadow: 0 10px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 118, 110, 0.06);
    --grid-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Card shells that wrap grids ---------- */
.content .card,
.app-content .card,
.landing-main .card {
    border: 1px solid var(--grid-border);
    border-radius: var(--grid-radius);
    box-shadow: var(--grid-shadow);
    overflow: hidden;
    background: #fff;
}

.content .card-header,
.app-content .card-header {
    background: linear-gradient(120deg, rgba(240, 253, 250, 0.95), rgba(239, 246, 255, 0.9));
    border-bottom: 1px solid var(--grid-border);
    color: var(--grid-ink);
    font-weight: 700;
    padding: 0.9rem 1.15rem;
}

.content .card-body,
.app-content .card-body {
    padding: 0;
}

.content .card-body.p-3,
.content .card-body.p-2,
.content .card-body.p-4,
.app-content .card-body.p-3 {
    padding: 1rem !important;
}

.content .card-footer,
.app-content .card-footer {
    background: linear-gradient(135deg, #f8fafc, #f0fdfa);
    border-top: 1px solid var(--grid-border);
    padding: 0.85rem 1.15rem;
}

/* =========================================================
   Bootstrap / HTML tables
   ========================================================= */

.table-responsive {
    border-radius: 0 0 var(--grid-radius) var(--grid-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--grid-font);
    font-size: 0.9rem;
    color: var(--grid-ink);
    background: #fff;
}

/* Header */
table.table thead th,
table.table > thead > tr > th,
table.table thead.table-dark th,
table.table .table-dark th {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: var(--grid-header-text) !important;
    font-weight: 700 !important;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none !important;
    border-bottom: none !important;
    padding: 0.85rem 1rem !important;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 2px 0 rgba(15, 118, 110, 0.2);
}

table.table thead th:first-child {
    border-top-left-radius: 0;
}

/* Body cells */
table.table tbody td,
table.table > tbody > tr > td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border-color: var(--grid-border) !important;
    border-width: 0 0 1px 0 !important;
    color: var(--grid-ink);
    background-color: transparent;
}

/* Zebra */
table.table-striped > tbody > tr:nth-of-type(odd) > * ,
table.table.table-striped tbody tr:nth-child(odd) td {
    background-color: var(--grid-row-alt) !important;
    --bs-table-bg-type: transparent;
    box-shadow: none !important;
}

table.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Hover */
table.table-hover > tbody > tr:hover > *,
table.table tbody tr:hover > td {
    background-color: var(--grid-row-hover) !important;
    --bs-table-bg-state: transparent;
    transition: background-color 0.15s ease;
}

/* Selected / success row (Day Book etc.) */
table.table tbody tr.table-success > td,
table.table tbody tr.table-success:hover > td {
    background-color: var(--grid-selected) !important;
    --bs-table-bg-state: transparent;
    --bs-table-bg-type: transparent;
}

table.table tbody tr.table-info > td {
    background-color: rgba(14, 165, 233, 0.1) !important;
}

/* Compact option still readable */
table.table-sm tbody td,
table.table-sm thead th {
    padding: 0.65rem 0.85rem !important;
}

/* Bordered tables — soft borders */
table.table-bordered {
    border: 1px solid var(--grid-border) !important;
}

table.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0 !important;
    border-color: var(--grid-border) !important;
}

/* Footer totals */
table.table tfoot th,
table.table tfoot td {
    background: linear-gradient(135deg, #f0fdfa, #f8fafc) !important;
    color: var(--grid-ink) !important;
    font-weight: 750;
    padding: 0.85rem 1rem !important;
    border-top: 2px solid rgba(15, 118, 110, 0.25) !important;
    border-bottom: none !important;
}

/* Active / special tables (AddFees etc.) */
table.table-active thead th,
table.table.table-active thead th {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: #fff !important;
}

/* Checkbox alignment in grids */
table.table .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    cursor: pointer;
    border-color: #94a3b8;
    accent-color: #0f766e;
}

table.table .form-check-input:checked {
    background-color: #0f766e;
    border-color: #0f766e;
}

/* Action buttons inside cells */
table.table .btn-sm,
table.table button.btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.28rem 0.65rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

table.table .btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

table.table .btn-primary,
table.table .btn-success {
    background: linear-gradient(145deg, #14b8a6, #0f766e);
    border-color: #0f766e;
}

table.table .btn-outline-danger {
    border-radius: 8px;
}

/* Badges in grids */
table.table .badge {
    font-weight: 650;
    letter-spacing: 0.02em;
    padding: 0.35em 0.65em;
    border-radius: 999px;
}

/* Empty state rows */
table.table tbody td.text-muted {
    color: var(--grid-muted) !important;
}

/* =========================================================
   FluentDataGrid
   ========================================================= */

fluent-data-grid,
.fluent-data-grid {
    width: 100% !important;
    display: block;
    border: 1px solid var(--grid-border) !important;
    border-radius: var(--grid-radius) !important;
    overflow: hidden;
    box-shadow: var(--grid-shadow);
    background: #fff !important;
    font-family: var(--grid-font);
    font-size: 0.9rem;
    color: var(--grid-ink);
}

/* Fluent often renders header / rows as parts of grid */
fluent-data-grid-row,
.fluent-data-grid-row {
    border-bottom: 1px solid var(--grid-border) !important;
    transition: background-color 0.15s ease;
}

fluent-data-grid-row[row-type="header"],
fluent-data-grid-row.header,
.fluent-data-grid-row[row-type="header"] {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: var(--grid-header-text) !important;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 44px;
}

fluent-data-grid-row[row-type="header"] fluent-data-grid-cell,
fluent-data-grid-row[row-type="header"] .fluent-data-grid-cell,
fluent-data-grid-row.header fluent-data-grid-cell {
    color: var(--grid-header-text) !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
}

fluent-data-grid-cell,
.fluent-data-grid-cell {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--grid-border) !important;
    vertical-align: middle;
    color: var(--grid-ink);
}

fluent-data-grid-row:not([row-type="header"]):nth-child(even),
.fluent-data-grid-row:not([row-type="header"]):nth-child(even) {
    background: var(--grid-row-alt);
}

fluent-data-grid-row:not([row-type="header"]):hover,
.fluent-data-grid-row:not([row-type="header"]):hover {
    background: var(--grid-row-hover) !important;
}

/* FluentDataGrid with Bootstrap table class applied */
fluent-data-grid.table,
fluent-data-grid.table-striped {
    border-collapse: separate;
}

fluent-data-grid.table thead th,
fluent-data-grid table thead th {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: #fff !important;
}

/* Class often used on FluentDataGrid */
fluent-data-grid.table.table-striped.m-0,
.fluent-data-grid.table {
    margin: 0 !important;
}

/* Explicit modern-grid marker (FluentDataGrid / QuickGrid) */
.modern-grid,
fluent-data-grid.modern-grid {
    border-radius: var(--grid-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--grid-shadow) !important;
    border: 1px solid var(--grid-border) !important;
}

/* =========================================================
   QuickGrid
   ========================================================= */

.quickgrid,
table.quickgrid,
.quickgrid table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--grid-font);
    font-size: 0.9rem;
    color: var(--grid-ink);
    background: #fff;
    border: 1px solid var(--grid-border);
    border-radius: var(--grid-radius);
    overflow: hidden;
    box-shadow: var(--grid-shadow);
}

.quickgrid thead th,
.quickgrid th,
table.quickgrid thead th,
.quickgrid table thead th {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: var(--grid-header-text) !important;
    font-weight: 700 !important;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none !important;
    padding: 0.85rem 1rem !important;
}

.quickgrid tbody td,
.quickgrid td,
table.quickgrid tbody td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--grid-border) !important;
    border-top: none !important;
    vertical-align: middle;
    color: var(--grid-ink);
}

.quickgrid tbody tr:nth-child(odd) td {
    background: var(--grid-row-alt);
}

.quickgrid tbody tr:hover td {
    background: var(--grid-row-hover) !important;
}

/* Sort buttons in QuickGrid headers */
.quickgrid th button,
.quickgrid .col-title {
    color: #fff !important;
    font-weight: 700;
    background: transparent;
    border: none;
}

.quickgrid th .col-options-button,
.quickgrid th button:hover {
    color: #ecfdf5 !important;
}

/* Paginator */
.paginator,
nav.paginator,
.quickgrid + .paginator,
fluent-paginator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background: #fff;
    border: 1px solid var(--grid-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    font-size: 0.88rem;
    color: var(--grid-muted);
}

.paginator button,
.paginator .btn,
fluent-paginator button {
    border-radius: 8px !important;
    border: 1px solid var(--grid-border);
    background: #fff;
    color: var(--grid-ink);
    min-width: 2rem;
    font-weight: 600;
}

.paginator button:hover {
    background: var(--grid-row-hover);
    border-color: rgba(15, 118, 110, 0.3);
}

/* =========================================================
   Syncfusion Grid (if used)
   ========================================================= */

.e-grid {
    border: 1px solid var(--grid-border) !important;
    border-radius: var(--grid-radius) !important;
    overflow: hidden;
    box-shadow: var(--grid-shadow);
    font-family: var(--grid-font) !important;
}

.e-grid .e-headercell,
.e-grid .e-columnheader {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: transparent !important;
}

.e-grid .e-headercelldiv,
.e-grid .e-headertext {
    color: #fff !important;
    font-weight: 700 !important;
}

.e-grid .e-rowcell {
    padding: 0.7rem 0.9rem !important;
    border-color: var(--grid-border) !important;
    color: var(--grid-ink) !important;
}

.e-grid .e-altrow {
    background: var(--grid-row-alt) !important;
}

.e-grid .e-row:hover .e-rowcell {
    background: var(--grid-row-hover) !important;
}

/* =========================================================
   Page toolbar above grids (filters, h3)
   ========================================================= */

.content > h3,
.app-content > h3,
.content h3 {
    font-weight: 800;
    color: var(--grid-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.content .fluent-datepicker,
.content fluent-text-field,
.content .form-control {
    border-radius: 10px;
}

/* Soft wrap for long remarks in any grid */
table.table td[style*="word-wrap"],
table.table .remarks-cell,
.quickgrid td,
fluent-data-grid-cell {
    word-break: break-word;
}

/* Report-specific tables keep polish */
.dfr-report-table thead th,
.dfr-select-table thead th {
    background: linear-gradient(120deg, var(--grid-header-from), var(--grid-header-to)) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.dfr-select-table tbody tr.row-selected td {
    background: var(--grid-selected) !important;
}

/* Border-top totals under grids */
.border-top.d-flex,
.card-body .border-top {
    background: linear-gradient(135deg, #f8fafc, #f0fdfa) !important;
    border-top: 1px solid var(--grid-border) !important;
    padding: 0.85rem 1.15rem !important;
    font-weight: 700;
    color: var(--grid-ink);
}

/* =========================================================
   Print: clean professional tables
   ========================================================= */

@media print {
    table.table thead th,
    .quickgrid thead th,
    .dfr-report-table thead th {
        background: #e2e8f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        text-transform: none;
        box-shadow: none !important;
    }

    fluent-data-grid,
    .quickgrid,
    table.table {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    table.table tbody tr:hover > td {
        background: transparent !important;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
    table.table thead th,
    table.table tbody td,
    .quickgrid th,
    .quickgrid td {
        padding: 0.55rem 0.65rem !important;
        font-size: 0.82rem;
    }

    table.table thead th {
        font-size: 0.7rem;
    }
}