/**
 * Risviel Design System — Utilities & Components
 *
 * Reusable UI component classes shared across all modules.
 * Each class uses --rs-* tokens for automatic theme/dark-mode adaptation.
 *
 * Sections:
 *   1.  Stat Cards (dashboard KPIs)
 *   2.  Status Badges
 *   3.  Cards (enhanced Bootstrap)
 *   4.  Tables (enhanced Bootstrap)
 *   5.  Filter Forms
 *   6.  Sections (content blocks)
 *   7.  Stats Grid
 *   8.  Timeline
 *   9.  Usage Bars
 *   10. Anomaly Cards
 *   11. Telemetry Metrics
 *   12. Log Actions
 *   13. JSON Preview
 *   14. Customer Avatar
 *   15. Pagination (enhanced)
 *   16. Forms (enhanced)
 *   17. Severity Indicators
 *   18. Responsive Helpers
 *
 * Dependencies: tokens.css (must be loaded first)
 *
 * @version 1.0.0
 * @since   2026-04-11
 */

/* ============================================================================
   1. STAT CARDS — Dashboard KPI cards
   ============================================================================ */

.stat-card {
    border: none;
    border-radius: var(--rs-border-radius-lg);
    box-shadow: var(--rs-shadow);
    border-inline-start: 4px solid;          /* LTR: border-left  |  RTL: border-right */
    transition: transform var(--rs-transition-fast);
    background: var(--rs-card-bg);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rs-shadow-md);
}

/* Color variants */
.stat-card.primary   { border-inline-start-color: var(--rs-primary); }
.stat-card.success   { border-inline-start-color: var(--rs-success); }
.stat-card.warning   { border-inline-start-color: var(--rs-warning); }
.stat-card.danger    { border-inline-start-color: var(--rs-danger); }
.stat-card.info      { border-inline-start-color: var(--rs-info); }
.stat-card.secondary { border-inline-start-color: var(--rs-secondary); }

/* Stat icon container */
.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--rs-border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-card.primary .stat-icon   { background: rgba(var(--rs-primary-rgb), 0.1);   color: var(--rs-primary); }
.stat-card.success .stat-icon   { background: rgba(var(--rs-success-rgb), 0.1);   color: var(--rs-success); }
.stat-card.warning .stat-icon   { background: rgba(var(--rs-warning-rgb), 0.1);   color: var(--rs-warning); }
.stat-card.danger .stat-icon    { background: rgba(var(--rs-danger-rgb), 0.1);    color: var(--rs-danger); }
.stat-card.info .stat-icon      { background: rgba(var(--rs-info-rgb), 0.1);      color: var(--rs-info); }
.stat-card.secondary .stat-icon { background: rgba(var(--rs-secondary-rgb), 0.1); color: var(--rs-secondary); }

/* Large stat number */
.stat-card h2,
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--rs-text-color);
}

.stat-card .stat-label {
    font-size: var(--rs-font-size-sm);
    color: var(--rs-text-muted);
}

/* ============================================================================
   2. STATUS BADGES
   ============================================================================ */

.badge-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    font-size: var(--rs-font-size-xs);
    display: inline-block;
}

.badge-active    { background: var(--rs-alert-success-bg);   color: var(--rs-alert-success-text); }
.badge-expired   { background: var(--rs-alert-danger-bg);    color: var(--rs-alert-danger-text); }
.badge-suspended { background: var(--rs-alert-warning-bg);   color: var(--rs-alert-warning-text); }
.badge-revoked   { background: rgba(var(--rs-primary-rgb), 0.15); color: var(--rs-primary); }
.badge-pending   { background: var(--rs-alert-secondary-bg); color: var(--rs-alert-secondary-text); }
.badge-inactive  { background: var(--rs-alert-secondary-bg); color: var(--rs-alert-secondary-text); }

/* ============================================================================
   3. CARDS — Enhanced Bootstrap cards
   ============================================================================ */

.card {
    border: none;
    border-radius: var(--rs-border-radius-lg);
    box-shadow: var(--rs-shadow);
    background: var(--rs-card-bg);
}

.card-header {
    border-block-end: var(--rs-border-width) solid var(--rs-border-color);
    font-weight: 600;
    padding: var(--rs-space-4) var(--rs-space-5);
    background: var(--rs-card-header-bg);
}

.card-header:first-child {
    border-start-start-radius: var(--rs-border-radius-lg);
    border-start-end-radius: var(--rs-border-radius-lg);
}

/* ============================================================================
   4. TABLES — Enhanced Bootstrap tables
   ============================================================================ */

.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rs-text-muted);
}

/* ============================================================================
   5. FILTER FORMS
   ============================================================================ */

.filters-form {
    border: none;
    border-radius: var(--rs-border-radius-lg);
    box-shadow: var(--rs-shadow);
    padding: var(--rs-space-4) var(--rs-space-5);
    margin-block-end: var(--rs-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--rs-space-3);
    align-items: flex-end;
    background: var(--rs-card-bg);
}

.filters-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--rs-space-1);
}

.filters-form .form-group label {
    font-size: var(--rs-font-size-sm);
    font-weight: 500;
}

.filters-form .form-group input,
.filters-form .form-group select {
    padding: 6px 10px;
    border: var(--rs-border-width) solid var(--rs-border-color);
    border-radius: var(--rs-border-radius-sm);
    font-size: 0.9rem;
    background: var(--rs-input-bg);
    color: var(--rs-text-color);
}

/* ============================================================================
   6. SECTIONS — Content blocks
   ============================================================================ */

.section {
    border: none;
    border-radius: var(--rs-border-radius-lg);
    box-shadow: var(--rs-shadow);
    padding: var(--rs-space-5);
    margin-block-end: var(--rs-space-5);
    background: var(--rs-card-bg);
}

.section h2 {
    font-size: var(--rs-font-size-xl);
    margin-block-end: var(--rs-space-4);
}

/* ============================================================================
   7. STATS GRID
   ============================================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--rs-space-4);
    margin-block-end: var(--rs-space-5);
}

/* Mini stat blocks */
.stat-mini {
    text-align: center;
    padding: var(--rs-space-3);
    border-radius: var(--rs-border-radius-lg);
    background: var(--rs-card-bg);
}

.stat-mini h4 {
    margin: 0;
    font-size: var(--rs-font-size-xxl);
    font-weight: 700;
}

.stat-mini small {
    font-size: var(--rs-font-size-xs);
    color: var(--rs-text-muted);
}

/* ============================================================================
   8. TIMELINE
   ============================================================================ */

.timeline-item {
    position: relative;
    padding-inline-start: 28px;       /* LTR: padding-left  |  RTL: padding-right */
    padding-block-end: var(--rs-space-4);
    border-inline-start: 2px solid var(--rs-border-color);
}

.timeline-item:last-child {
    border-inline-start-color: transparent;
    padding-block-end: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -5px;         /* LTR: left:-5px  |  RTL: right:-5px */
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-secondary);
}

.timeline-item.success::before { background: var(--rs-success); }
.timeline-item.danger::before  { background: var(--rs-danger); }
.timeline-item.info::before    { background: var(--rs-info); }
.timeline-item.warning::before { background: var(--rs-orange); }

/* ============================================================================
   9. USAGE BARS
   ============================================================================ */

.usage-bar {
    height: 8px;
    border-radius: var(--rs-border-radius-sm);
    overflow: hidden;
    background: var(--rs-table-striped-bg);
}

.usage-bar-fill {
    height: 100%;
    border-radius: var(--rs-border-radius-sm);
    transition: width 0.4s ease;
}

.usage-bar-fill.green  { background: var(--rs-success); }
.usage-bar-fill.yellow { background: var(--rs-warning); }
.usage-bar-fill.red    { background: var(--rs-danger); }

/* ============================================================================
   10. ANOMALY CARDS
   ============================================================================ */

.anomaly-card {
    border: none;
    border-radius: var(--rs-border-radius-lg);
    box-shadow: var(--rs-shadow-sm);
    transition: box-shadow var(--rs-transition-fast);
    background: var(--rs-card-bg);
}

.anomaly-card:hover {
    box-shadow: var(--rs-shadow-md);
}

.anomaly-breakdown p {
    margin: var(--rs-space-1) 0;
}

/* Severity indicator strip */
.severity-indicator {
    width: 4px;
    min-height: 100%;
    border-radius: 2px;
}

.severity-critical .severity-indicator { background: var(--rs-danger); }
.severity-high .severity-indicator     { background: var(--rs-orange); }
.severity-medium .severity-indicator   { background: var(--rs-info); }
.severity-low .severity-indicator      { background: var(--rs-secondary); }

/* ============================================================================
   11. TELEMETRY METRICS
   ============================================================================ */

.telemetry-metric {
    padding: var(--rs-space-3);
    border-radius: var(--rs-border-radius-lg);
    text-align: center;
    background: var(--rs-card-bg);
}

.telemetry-metric h5 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.telemetry-metric small {
    font-size: var(--rs-font-size-xs);
    color: var(--rs-text-muted);
}

/* ============================================================================
   12. LOG ACTIONS
   ============================================================================ */

.log-action { font-weight: 600; }

.log-action.validation_success  { color: var(--rs-success); }
.log-action.validation_failed   { color: var(--rs-danger); }
.log-action.telemetry           { color: var(--rs-primary); }
.log-action.activation_created  { color: var(--rs-info); }
.log-action.deactivation        { color: var(--rs-secondary); }
.log-action.license_created     { color: var(--rs-purple); }
.log-action.limit_exceeded      { color: var(--rs-orange); }
.log-action.activation_limit    { color: var(--rs-orange); }

/* ============================================================================
   13. JSON PREVIEW
   ============================================================================ */

.json-preview {
    max-height: 200px;
    overflow-y: auto;
    font-size: var(--rs-font-size-xs);
    border-radius: var(--rs-border-radius);
    padding: var(--rs-space-2);
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--rs-pre-bg);
    color: var(--rs-pre-color);
    font-family: var(--rs-font-mono);
}

/* ============================================================================
   14. CUSTOMER AVATAR
   ============================================================================ */

.customer-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ============================================================================
   15. PAGINATION (enhanced)
   ============================================================================ */

.rs-pagination {
    display: flex;
    gap: var(--rs-space-1);
    margin-block-start: var(--rs-space-4);
}

.rs-pagination a,
.rs-pagination span {
    padding: 6px 12px;
    border: var(--rs-border-width) solid var(--rs-border-color);
    border-radius: var(--rs-border-radius-sm);
    text-decoration: none;
    color: var(--rs-text-color);
    transition: all var(--rs-transition-fast);
}

.rs-pagination a:hover {
    background-color: var(--rs-dropdown-link-hover-bg);
}

.rs-pagination a.active,
.rs-pagination span.active {
    background-color: var(--rs-primary);
    color: #ffffff;
    border-color: var(--rs-primary);
}

/* ============================================================================
   16. FORMS (enhanced)
   ============================================================================ */

.form-group {
    margin-block-end: var(--rs-space-3);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-block-end: var(--rs-space-1);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--rs-space-2) var(--rs-space-3);
    border: var(--rs-border-width) solid var(--rs-border-color);
    border-radius: var(--rs-border-radius-sm);
    font-size: 0.9rem;
    background: var(--rs-input-bg);
    color: var(--rs-text-color);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* ============================================================================
   17. SEVERITY INDICATORS (standalone)
   ============================================================================ */

.severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--rs-font-size-xs);
    font-weight: 600;
}

.severity-badge.critical { background: rgba(var(--rs-danger-rgb), 0.15);  color: var(--rs-danger); }
.severity-badge.high     { background: rgba(var(--rs-orange-rgb), 0.15);  color: var(--rs-orange); }
.severity-badge.medium   { background: rgba(var(--rs-info-rgb), 0.15);    color: var(--rs-info); }
.severity-badge.low      { background: rgba(var(--rs-secondary-rgb), 0.15); color: var(--rs-secondary); }

/* ============================================================================
   18. RESPONSIVE HELPERS
   ============================================================================ */

/* Tab panes get consistent spacing */
.tab-pane {
    padding-block-start: var(--rs-space-5);
}

/* Responsive grid for stat cards */
@media (max-width: 575.98px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .stat-card h2,
    .stat-card .stat-value {
        font-size: 1.5rem;
    }

    .filters-form {
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    /* DataTables: horizontal scroll on mobile */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form multi-column: stack to single column */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Prevent horizontal overflow at 375px */
    .card-body,
    .section {
        overflow-x: hidden;
        word-break: break-word;
    }

    /* Compact table cells on mobile */
    .table td,
    .table th {
        font-size: var(--rs-font-size-sm);
        padding: var(--rs-space-2);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet: 2-column dashboard grid */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Form: 2-column layout on tablet */
    .row > [class*="col-lg-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Desktop: 4-column dashboard grid */
@media (min-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
   19. TOUCHSCREEN — Coarse pointer adaptations (WCAG 44x44px tap targets)
   ============================================================================ */

@media (pointer: coarse) {
    /* Interactive elements: enforce minimum touch target */
    .btn,
    .nav-link,
    .dropdown-item,
    .list-group-item-action,
    .page-link {
        min-height: var(--rs-touch-target);
        display: inline-flex;
        align-items: center;
    }

    /* Form controls: larger touch target */
    .form-select,
    .form-control {
        min-height: var(--rs-touch-target);
    }

    /* Form check: larger tap area */
    .form-check {
        min-height: var(--rs-touch-target);
        display: flex;
        align-items: center;
    }

    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    /* Pagination: larger tap targets */
    .rs-pagination a,
    .rs-pagination span,
    .page-link {
        min-height: var(--rs-touch-target);
        min-width: var(--rs-touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Dropdown items: more padding for touch */
    .dropdown-item {
        padding-block: var(--rs-space-3);
    }

    /* Badge links: touch-friendly */
    a.badge,
    button.badge {
        min-height: calc(var(--rs-touch-target) * 0.75);
        display: inline-flex;
        align-items: center;
    }

    /* Close buttons: larger touch area */
    .btn-close {
        width: var(--rs-touch-target);
        height: var(--rs-touch-target);
        padding: var(--rs-space-3);
    }
}

/* ============================================================================
   20. PRINT — hide interactive utilities
   ============================================================================ */

@media print {
    /* ── Hide interactive elements ── */
    .filters-form,
    .rs-pagination,
    .sidebar-toggle-btn,
    .no-print {
        display: none !important;
    }

    /* Hide action buttons (edit, delete, CRUD actions) */
    .btn-group,
    .btn[data-action],
    .btn-edit,
    .btn-delete,
    .btn-danger,
    a[href*="delete"],
    a[href*="edit"]:not(.card a),
    .dropdown-toggle,
    [data-bs-toggle="modal"],
    [data-bs-toggle="dropdown"] {
        display: none !important;
    }

    /* ── Cards: clean borders for print ── */
    .stat-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        break-inside: avoid;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        break-inside: avoid;
    }

    .anomaly-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        break-inside: avoid;
    }

    .section {
        box-shadow: none;
        border: 1px solid #dee2e6;
        break-inside: avoid;
    }

    /* ── Badges: visible border in print ── */
    .badge,
    .badge-status,
    .severity-badge {
        border: 1px solid #6c757d;
    }

    /* ── Tables: fit A4, repeated headers ── */
    .table {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 4px 6px;
    }

    thead {
        display: table-header-group;
    }

    tr {
        break-inside: avoid;
    }

    .table-responsive {
        overflow: visible !important;
    }

    /* ── Stats grid: 2 columns for print ── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rs-space-2);
    }

    /* ── Force light colors for print ── */
    .stat-card h2,
    .stat-card .stat-value,
    .stat-card .stat-label {
        color: #000 !important;
    }

    /* ── Timeline: clean print ── */
    .timeline-item {
        break-inside: avoid;
    }

    /* ── JSON preview: limit height ── */
    .json-preview {
        max-height: none;
        overflow: visible;
    }

    /* ── Usage bars: visible in print ── */
    .usage-bar {
        border: 1px solid #dee2e6;
    }

    .usage-bar-fill.green  { background: #198754 !important; }
    .usage-bar-fill.yellow { background: #ffc107 !important; }
    .usage-bar-fill.red    { background: #dc3545 !important; }
}