/* =============================================================================
   Kochupally Design System — Admin UI
   -----------------------------------------------------------------------------
   Central design tokens exposed as CSS variables so the rest of the admin UI
   can gradually converge on a single visual language. Add tokens here rather
   than hard-coding values in feature-specific stylesheets.

   The live reference for all components is /DesignSystem.
   ============================================================================= */

:root {
    /* ---------- Semantic color tokens ----------
       Hue values intentionally align with Bootstrap 4 so existing utility
       classes (.text-primary, .btn-success, …) stay visually consistent. */
    --ks-primary: #007bff;
    --ks-primary-soft: #e7f1ff;
    --ks-primary-hover: #0069d9;

    --ks-success: #28a745;
    --ks-success-soft: #e4f7ea;
    --ks-success-hover: #218838;

    --ks-danger: #dc3545;
    --ks-danger-soft: #fdecee;
    --ks-danger-hover: #c82333;

    --ks-warning: #ff9800;
    --ks-warning-soft: #fff4e5;
    --ks-warning-hover: #f57c00;

    --ks-info: #17a2b8;
    --ks-info-soft: #e3f6f8;
    --ks-info-hover: #138496;

    /* ---------- Surface / text ---------- */
    --ks-bg: #f6f8fb;        /* page background */
    --ks-surface: #ffffff;   /* card/panel background */
    --ks-surface-alt: #f8f9fa; /* subtle raised surface */
    --ks-text: #1f2937;      /* primary text */
    --ks-text-muted: #6c757d;
    --ks-text-soft: #9aa3ad;
    --ks-border: #e9ecef;
    --ks-border-strong: #dee2e6;
    --ks-divider: #f1f3f5;

    /* ---------- Typography ---------- */
    --ks-font-sans: "Poppins", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ks-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ks-fs-xs: 0.75rem;    /* 12px */
    --ks-fs-sm: 0.85rem;    /* ~14px */
    --ks-fs-base: 0.95rem;  /* 15px body */
    --ks-fs-md: 1rem;       /* 16px */
    --ks-fs-lg: 1.15rem;
    --ks-fs-xl: 1.35rem;
    --ks-fs-2xl: 1.75rem;

    --ks-fw-regular: 400;
    --ks-fw-medium: 500;
    --ks-fw-semibold: 600;
    --ks-fw-bold: 700;

    --ks-lh-tight: 1.2;
    --ks-lh-normal: 1.5;
    --ks-lh-loose: 1.75;

    /* ---------- Spacing scale ----------
       Uses a 4px baseline so components can compose without accidental drift. */
    --ks-sp-1: 4px;
    --ks-sp-2: 8px;
    --ks-sp-3: 12px;
    --ks-sp-4: 16px;
    --ks-sp-5: 20px;
    --ks-sp-6: 24px;
    --ks-sp-8: 32px;
    --ks-sp-10: 40px;
    --ks-sp-12: 48px;

    /* ---------- Radius ---------- */
    --ks-radius-sm: 4px;
    --ks-radius: 6px;     /* default for inputs and buttons */
    --ks-radius-md: 8px;  /* cards */
    --ks-radius-lg: 12px;
    --ks-radius-pill: 999px;

    /* ---------- Elevation ---------- */
    --ks-shadow-0: none;
    --ks-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
    --ks-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08);
    --ks-shadow-3: 0 6px 20px rgba(0, 0, 0, 0.12);

    /* ---------- Animation ---------- */
    --ks-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ks-duration-fast: 120ms;
    --ks-duration: 200ms;
    --ks-duration-slow: 320ms;

    /* ---------- Component sizes ---------- */
    --ks-control-height: 40px;  /* buttons, inputs, dropdowns */
    --ks-control-height-sm: 32px;
    --ks-control-height-lg: 48px;

    /* ---------- Focus ring ---------- */
    --ks-focus-ring: 0 0 0 0.2rem rgba(0, 123, 255, 0.18);
}

/* =============================================================================
   Design System reference page layout
   ============================================================================= */

.ds-page {
    background: var(--ks-bg);
    color: var(--ks-text);
    font-family: var(--ks-font-sans);
    min-height: 100vh;
    padding: var(--ks-sp-6) 0 var(--ks-sp-12);
}

.ds-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--ks-sp-8);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--ks-sp-5);
}

@media (max-width: 991.98px) {
    .ds-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ds-hero {
    margin-bottom: var(--ks-sp-6);
}

    .ds-hero h1 {
        font-size: var(--ks-fs-2xl);
        font-weight: var(--ks-fw-semibold);
        margin-bottom: var(--ks-sp-2);
    }

    .ds-hero p {
        color: var(--ks-text-muted);
        margin: 0;
        max-width: 640px;
    }

/* Sticky sidebar nav ---------------------------------------------------- */
.ds-nav {
    position: sticky;
    top: 88px;           /* clear the fixed site header */
    align-self: start;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-sp-3) 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: var(--ks-shadow-1);
}

.ds-nav-group {
    padding: var(--ks-sp-2) 0;
}

.ds-nav-heading {
    font-size: var(--ks-fs-xs);
    font-weight: var(--ks-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ks-text-soft);
    padding: var(--ks-sp-2) var(--ks-sp-4);
    margin: 0;
}

.ds-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ds-nav a {
    display: block;
    padding: var(--ks-sp-2) var(--ks-sp-4);
    color: var(--ks-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    font-size: var(--ks-fs-sm);
    transition: color var(--ks-duration-fast) var(--ks-ease), border-color var(--ks-duration-fast) var(--ks-ease), background var(--ks-duration-fast) var(--ks-ease);
}

    .ds-nav a:hover {
        color: var(--ks-primary);
        background: var(--ks-primary-soft);
    }

    .ds-nav a.is-active {
        color: var(--ks-primary);
        border-left-color: var(--ks-primary);
        font-weight: var(--ks-fw-semibold);
        background: var(--ks-primary-soft);
    }

/* Sections --------------------------------------------------------------- */
.ds-section {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-sp-6);
    margin-bottom: var(--ks-sp-6);
    box-shadow: var(--ks-shadow-1);
    scroll-margin-top: 96px; /* offset anchor jumps below the fixed header */
}

.ds-section h2 {
    font-size: var(--ks-fs-xl);
    font-weight: var(--ks-fw-semibold);
    margin: 0 0 var(--ks-sp-2);
    color: var(--ks-text);
}

.ds-section h3 {
    font-size: var(--ks-fs-md);
    font-weight: var(--ks-fw-semibold);
    margin: var(--ks-sp-5) 0 var(--ks-sp-3);
    color: var(--ks-text);
}

.ds-section .ds-lead {
    color: var(--ks-text-muted);
    font-size: var(--ks-fs-sm);
    margin: 0 0 var(--ks-sp-4);
}

/* Example + code pair ---------------------------------------------------- */
.ds-demo {
    border: 1px dashed var(--ks-border-strong);
    border-radius: var(--ks-radius);
    padding: var(--ks-sp-5);
    background: var(--ks-surface-alt);
    margin-bottom: var(--ks-sp-3);
}

.ds-snippet {
    position: relative;
    background: #0b1020;
    color: #e2e8f0;
    border-radius: var(--ks-radius);
    padding: var(--ks-sp-4) var(--ks-sp-5);
    overflow: auto;
    font-family: var(--ks-font-mono);
    font-size: var(--ks-fs-sm);
    line-height: var(--ks-lh-normal);
    margin-bottom: var(--ks-sp-5);
}

    .ds-snippet pre {
        margin: 0;
        white-space: pre;
        color: inherit;
    }

    .ds-snippet code {
        color: inherit;
        background: transparent;
        padding: 0;
    }

.ds-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ks-radius-sm);
    font-size: var(--ks-fs-xs);
    padding: 4px 10px;
    cursor: pointer;
    transition: background var(--ks-duration-fast) var(--ks-ease);
}

    .ds-copy-btn:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .ds-copy-btn.is-copied {
        background: var(--ks-success);
        border-color: var(--ks-success);
        color: #fff;
    }

/* Swatches --------------------------------------------------------------- */
.ds-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ks-sp-4);
}

.ds-swatch {
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    overflow: hidden;
    background: var(--ks-surface);
}

.ds-swatch-chip {
    height: 72px;
}

.ds-swatch-body {
    padding: var(--ks-sp-3);
}

.ds-swatch-name {
    font-weight: var(--ks-fw-semibold);
    font-size: var(--ks-fs-sm);
    margin: 0 0 2px;
    color: var(--ks-text);
}

.ds-swatch-token {
    font-family: var(--ks-font-mono);
    font-size: var(--ks-fs-xs);
    color: var(--ks-text-muted);
    display: block;
}

.ds-swatch-hex {
    font-family: var(--ks-font-mono);
    font-size: var(--ks-fs-xs);
    color: var(--ks-text-soft);
}

/* Token table ----------------------------------------------------------- */
.ds-token-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ks-fs-sm);
}

    .ds-token-table th,
    .ds-token-table td {
        padding: var(--ks-sp-2) var(--ks-sp-3);
        text-align: left;
        border-bottom: 1px solid var(--ks-divider);
    }

    .ds-token-table th {
        font-weight: var(--ks-fw-semibold);
        color: var(--ks-text-muted);
        text-transform: uppercase;
        font-size: var(--ks-fs-xs);
        letter-spacing: 0.4px;
    }

    .ds-token-table code {
        background: var(--ks-surface-alt);
        color: var(--ks-text);
        padding: 2px 6px;
        border-radius: var(--ks-radius-sm);
        font-size: var(--ks-fs-xs);
    }

.ds-spacing-bar {
    background: var(--ks-primary);
    height: 16px;
    border-radius: var(--ks-radius-sm);
}

.ds-shadow-box {
    background: var(--ks-surface);
    height: 70px;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ks-fs-xs);
    color: var(--ks-text-muted);
    font-family: var(--ks-font-mono);
}

/* Reusable summary / metric card (extracted from member-income) ---------- */
.ks-summary-card {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-sp-5) var(--ks-sp-5) var(--ks-sp-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 96px;
    transition: box-shadow var(--ks-duration) var(--ks-ease), transform var(--ks-duration) var(--ks-ease);
    box-shadow: var(--ks-shadow-1);
}

    .ks-summary-card:hover {
        box-shadow: var(--ks-shadow-2);
    }

    .ks-summary-card h5 {
        font-size: var(--ks-fs-xs);
        font-weight: var(--ks-fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--ks-text-muted);
        margin: 0 0 var(--ks-sp-2);
    }

    .ks-summary-card .amount {
        font-size: var(--ks-fs-xl);
        font-weight: var(--ks-fw-semibold);
        line-height: var(--ks-lh-tight);
    }

.ks-summary-indicator {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 4px;
}

    .ks-summary-indicator.primary {
        background: var(--ks-primary);
    }

    .ks-summary-indicator.success {
        background: var(--ks-success);
    }

    .ks-summary-indicator.danger {
        background: var(--ks-danger);
    }

    .ks-summary-indicator.warning {
        background: var(--ks-warning);
    }

/* Status pills ---------------------------------------------------------- */
.ks-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-sp-1);
    padding: 2px 10px;
    border-radius: var(--ks-radius-pill);
    font-size: var(--ks-fs-xs);
    font-weight: var(--ks-fw-semibold);
    line-height: 1.6;
}

    .ks-pill.is-success {
        background: var(--ks-success-soft);
        color: var(--ks-success-hover);
    }

    .ks-pill.is-danger {
        background: var(--ks-danger-soft);
        color: var(--ks-danger-hover);
    }

    .ks-pill.is-warning {
        background: var(--ks-warning-soft);
        color: var(--ks-warning-hover);
    }

    .ks-pill.is-info {
        background: var(--ks-info-soft);
        color: var(--ks-info-hover);
    }

    .ks-pill.is-neutral {
        background: var(--ks-surface-alt);
        color: var(--ks-text-muted);
    }

/* Empty state ----------------------------------------------------------- */
.ks-empty {
    text-align: center;
    padding: var(--ks-sp-10) var(--ks-sp-6);
    color: var(--ks-text-muted);
}

    .ks-empty i {
        font-size: 3rem;
        color: var(--ks-text-soft);
        margin-bottom: var(--ks-sp-3);
        display: block;
    }

    .ks-empty .ks-empty-title {
        font-weight: var(--ks-fw-semibold);
        color: var(--ks-text);
        font-size: var(--ks-fs-lg);
        margin-bottom: var(--ks-sp-1);
    }

    .ks-empty .ks-empty-msg {
        font-size: var(--ks-fs-sm);
    }

/* Icon button ---------------------------------------------------------- */
.ks-btn-icon {
    width: var(--ks-control-height);
    height: var(--ks-control-height);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ks-border-strong);
    background: var(--ks-surface);
    color: var(--ks-text-muted);
    font-size: 1.2rem;
    transition: background var(--ks-duration-fast) var(--ks-ease), color var(--ks-duration-fast) var(--ks-ease), border-color var(--ks-duration-fast) var(--ks-ease);
}

    .ks-btn-icon:hover {
        background: var(--ks-surface-alt);
        color: var(--ks-primary);
        border-color: var(--ks-primary);
        text-decoration: none;
    }

/* Icon showcase grid (for the icons section) ---------------------------- */
.ds-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ks-sp-3);
}

.ds-icon-tile {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    padding: var(--ks-sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-sp-1);
    text-align: center;
}

    .ds-icon-tile i {
        font-size: 1.5rem;
        color: var(--ks-primary);
    }

    .ds-icon-tile code {
        font-size: var(--ks-fs-xs);
        color: var(--ks-text-muted);
        background: transparent;
    }

/* Source-of-component tag (Bootstrap / Custom / Shared) ----------------- */
.ds-tag {
    display: inline-block;
    font-size: var(--ks-fs-xs);
    font-weight: var(--ks-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: var(--ks-radius-pill);
    margin-left: var(--ks-sp-2);
    vertical-align: middle;
    line-height: 1.6;
}

    .ds-tag--bootstrap {
        background: var(--ks-primary-soft);
        color: var(--ks-primary-hover);
    }

    .ds-tag--custom {
        background: var(--ks-warning-soft);
        color: var(--ks-warning-hover);
    }

    .ds-tag--shared {
        background: var(--ks-success-soft);
        color: var(--ks-success-hover);
    }

/* Data toolbar (for tables) --------------------------------------------- */
/* Sits above a table and groups filter / search / bulk-action controls.
   Use .ks-data-toolbar as a flex row; children flow naturally. */
.ks-data-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-sp-3);
    padding: var(--ks-sp-3) var(--ks-sp-4);
    background: var(--ks-surface-alt);
    border: 1px solid var(--ks-border);
    border-bottom: 0;
    border-radius: var(--ks-radius-md) var(--ks-radius-md) 0 0;
}

    .ks-data-toolbar .ks-data-toolbar-search {
        flex: 1 1 260px;
        position: relative;
    }

        .ks-data-toolbar .ks-data-toolbar-search .form-control {
            padding-left: 36px;
        }

        .ks-data-toolbar .ks-data-toolbar-search i.bx-search {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ks-text-soft);
            pointer-events: none;
        }

    .ks-data-toolbar .ks-data-toolbar-actions {
        display: flex;
        gap: var(--ks-sp-2);
        margin-left: auto;
    }

/* Connect a table directly to the toolbar above it */
.ks-data-toolbar + .table-responsive > .table,
.ks-data-toolbar + .table {
    border-top: 0;
    margin-bottom: 0;
}

/* Sortable column headers ----------------------------------------------- */
.ks-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important;
}

    .ks-sortable::after {
        content: "\25B4\25BE"; /* up/down triangles */
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ks-text-soft);
        font-size: 0.7em;
        letter-spacing: -2px;
    }

    .ks-sortable.is-asc::after {
        content: "\25B4";
        color: var(--ks-primary);
    }

    .ks-sortable.is-desc::after {
        content: "\25BE";
        color: var(--ks-primary);
    }

/* Pagination footer (info + page-size + pager) -------------------------- */
.ks-pagination-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-sp-3);
    padding: var(--ks-sp-3) var(--ks-sp-4);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-top: 0;
    border-radius: 0 0 var(--ks-radius-md) var(--ks-radius-md);
    font-size: var(--ks-fs-sm);
    color: var(--ks-text-muted);
}

    .ks-pagination-footer .ks-pagination-info {
        margin: 0;
    }

    .ks-pagination-footer .ks-pagination-size {
        display: flex;
        align-items: center;
        gap: var(--ks-sp-2);
    }

        .ks-pagination-footer .ks-pagination-size select {
            width: auto;
            min-width: 72px;
        }

    .ks-pagination-footer .pagination {
        margin: 0 0 0 auto;
    }

/* When the whole table is wrapped in .ks-data-table-wrapper, drop table
   border-radius/margin so toolbar + table + footer read as one panel. */
.ks-data-table-wrapper {
    border-radius: var(--ks-radius-md);
    background: var(--ks-surface);
    box-shadow: var(--ks-shadow-1);
}

    .ks-data-table-wrapper .table {
        margin-bottom: 0;
        border-left: 1px solid var(--ks-border);
        border-right: 1px solid var(--ks-border);
    }

    .ks-data-table-wrapper .table thead th {
        border-top: 0;
    }

/* Responsive tweaks ---------------------------------------------------- */
@media (max-width: 575.98px) {
    .ds-section {
        padding: var(--ks-sp-4);
    }

    .ds-demo {
        padding: var(--ks-sp-4);
    }
}