/*
 * ══════════════════════════════════════════════════════════════════════
 *  NXT BANKING — Design System CSS (Shared)
 *  Include this on every admin/module page to get consistent styling.
 *  Reference: theme-element/design-system.txt
 *  Source of truth: admin/logs/action-logs.blade.php
 * ══════════════════════════════════════════════════════════════════════
 */

/* ─── Hero Banner ─── */
.ds-hero {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-radius: 20px; padding: 28px 30px; color: white; margin-bottom: 24px;
}
.ds-hero h2 { font-weight: 700; margin-bottom: 6px; font-size: 1.5rem; }
.ds-hero p  { opacity: 0.85; margin-bottom: 0; font-size: 0.92rem; }
.ds-hero-badge {
    background: rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px;
}

/* ─── Section Card (generic card wrapper) ─── */
.ds-section {
    background: white; border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 20px;
}
.ds-section-header {
    padding: 16px 20px; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.ds-section-header h5 { font-weight: 700; margin: 0; font-size: 1rem; }
.ds-section-body { padding: 20px; }

/* ─── Stat Mini Cards ─── */
.ds-stat {
    background: white; border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); height: 100%;
    display: flex; align-items: center; gap: 14px;
}
.ds-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.ds-stat-info { flex: 1; min-width: 0; }
.ds-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ds-stat-label { font-size: 0.78rem; color: #888; font-weight: 500; }
.ds-stat-sub { font-size: 0.72rem; color: #aaa; margin-top: 2px; }

/* ─── Nav Toggle ─── */
.ds-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.ds-nav a {
    padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 0.88rem;
    text-decoration: none; transition: all 0.2s; border: 2px solid #e9ecef; color: #555;
}
.ds-nav a:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
.ds-nav a.active { background: var(--theme-primary); color: white; border-color: var(--theme-primary); }

/* ─── Filter Bar ─── */
.ds-filter-bar {
    background: white; border-radius: 16px; padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 20px;
}
.ds-filter-bar label {
    font-size: 0.75rem; font-weight: 600; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.ds-filter-bar .form-select,
.ds-filter-bar .form-control {
    border: 2px solid #e9ecef; border-radius: 10px; font-size: 0.88rem; padding: 8px 12px;
}
.ds-filter-bar .form-select:focus,
.ds-filter-bar .form-control:focus {
    border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}
.ds-filter-btn { border-radius: 10px; font-weight: 600; font-size: 0.85rem; padding: 8px 18px; }

/* ─── Filter Pills (Smart — with counts, colors, icons) ─── */
.ds-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-pill {
    padding: 6px 14px; border-radius: 20px; font-weight: 600; font-size: 0.78rem;
    cursor: pointer; transition: all 0.2s; border: 2px solid #e9ecef;
    background: white; color: #666; display: inline-flex; align-items: center; gap: 5px;
}
.ds-pill:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
.ds-pill.active { background: var(--theme-primary); color: white; border-color: var(--theme-primary); }
.ds-pill .pill-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 700; padding: 0 5px;
    background: rgba(0,0,0,0.08); color: inherit;
}
.ds-pill.active .pill-count { background: rgba(255,255,255,0.3); color: white; }
/* Per-status colors */
.ds-pill.pill-pending  { border-color: #ffe082; }
.ds-pill.pill-pending:hover, .ds-pill.pill-pending.active  { background: #f57f17; border-color: #f57f17; color: white; }
.ds-pill.pill-success  { border-color: #a5d6a7; }
.ds-pill.pill-success:hover, .ds-pill.pill-success.active  { background: #2e7d32; border-color: #2e7d32; color: white; }
.ds-pill.pill-danger   { border-color: #ef9a9a; }
.ds-pill.pill-danger:hover, .ds-pill.pill-danger.active    { background: #c62828; border-color: #c62828; color: white; }
.ds-pill.pill-info     { border-color: #81d4fa; }
.ds-pill.pill-info:hover, .ds-pill.pill-info.active        { background: #0277bd; border-color: #0277bd; color: white; }

/* ─── Data Table inside section card ─── */
.ds-table { width: 100%; font-size: 0.83rem; }
.ds-table th {
    background: #f8f9fb; font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.5px; color: #666;
    padding: 10px 14px; white-space: nowrap; border-bottom: 2px solid #e9ecef;
}
.ds-table td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid #f5f5f5; }
.ds-table tbody tr:hover { background: #f8f9fb; }

/* DataTable controls padding inside ds-section */
.ds-section .dataTables_wrapper { padding: 0; }
.ds-section .dataTables_length,
.ds-section .dataTables_filter { padding: 14px 20px 0 20px; font-size: 0.82rem; color: #666; }
.ds-section .dataTables_length select {
    border: 2px solid #e9ecef; border-radius: 8px; padding: 4px 10px;
    font-size: 0.82rem; margin: 0 6px; outline: none;
}
.ds-section .dataTables_length select:focus { border-color: var(--theme-primary); }
.ds-section .dataTables_filter input {
    border: 2px solid #e9ecef; border-radius: 8px; padding: 6px 12px;
    font-size: 0.82rem; margin-left: 6px; outline: none;
}
.ds-section .dataTables_filter input:focus { border-color: var(--theme-primary); }
.ds-section .dataTables_info { padding: 12px 20px; font-size: 0.78rem; color: #999; font-weight: 600; }
.ds-section .dataTables_paginate { padding: 8px 20px 16px 20px; }
.ds-section .dataTables_paginate .paginate_button {
    border-radius: 8px !important; padding: 4px 12px !important;
    font-size: 0.78rem !important; font-weight: 600 !important;
    margin: 0 2px !important; border: 2px solid #e9ecef !important;
    background: white !important; color: #666 !important;
}
.ds-section .dataTables_paginate .paginate_button.current {
    background: var(--theme-primary) !important; color: white !important;
    border-color: var(--theme-primary) !important;
}
.ds-section .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #f8f9fb !important; border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}
.ds-section .dataTables_paginate .paginate_button.disabled { opacity: 0.4; cursor: default; }
.ds-section .dataTables_empty { padding: 40px 20px !important; text-align: center; color: #aaa; }

/* ─── Status Badges ─── */
.ds-badge {
    padding: 3px 10px; border-radius: 6px; font-weight: 700;
    font-size: 0.75rem; display: inline-flex; align-items: center; gap: 4px;
}
.ds-badge-success { background: #d4edda; color: #155724; }
.ds-badge-warning { background: #fff3cd; color: #856404; }
.ds-badge-danger  { background: #f8d7da; color: #721c24; }
.ds-badge-info    { background: #d1ecf1; color: #0c5460; }
.ds-badge-muted   { background: #f5f5f5; color: #888; }
.ds-badge-primary { background: #e3f2fd; color: #1565c0; }

/* ─── Detail Eye Button ─── */
.ds-btn-eye {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; transition: all 0.15s; font-size: 0.82rem;
}
.ds-btn-eye-ok  { background: #e3f2fd; color: #1565c0; }
.ds-btn-eye-ok:hover  { background: #1565c0; color: white; }
.ds-btn-eye-err { background: #fce4ec; color: #c62828; }
.ds-btn-eye-err:hover { background: #c62828; color: white; }

/* ─── Detail Modal ─── */
.ds-modal .modal-content { border-radius: 16px; border: none; }
.ds-modal .modal-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: white; border-radius: 16px 16px 0 0;
}
.ds-modal .btn-close { filter: brightness(0) invert(1); }
.ds-detail-section { margin-bottom: 16px; }
.ds-detail-section h6 {
    font-weight: 700; font-size: 0.82rem; color: #666;
    text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}
.ds-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.ds-detail-grid .dg-item { background: #f8f9fb; border-radius: 10px; padding: 12px 14px; }
.ds-detail-grid .dg-label {
    font-size: 0.72rem; text-transform: uppercase; font-weight: 700;
    color: #888; letter-spacing: 0.5px;
}
.ds-detail-grid .dg-value { font-size: 0.88rem; font-weight: 600; margin-top: 2px; word-break: break-all; }
.ds-json-block {
    background: #1e1e2e; color: #a6e3a1; border-radius: 10px; padding: 14px;
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem;
    max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}

/* ─── Module Grid ─── */
.ds-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ds-module-card {
    background: white; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.2s;
    border-left: 4px solid #e9ecef;
}
.ds-module-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.ds-module-card.active { border-left-color: var(--theme-primary); background: #f0f4ff; }

/* ─── Service Category Grid ─── */
.ds-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ds-svc-card {
    background: white; border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 12px; border: 2px solid transparent;
}
.ds-svc-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: #e0e0e0; }
.ds-svc-card.active { border-color: var(--theme-primary); background: #f0f4ff; }
.ds-svc-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}

/* ─── Quick Action Buttons ─── */
.ds-action-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: 12px; border: 2px solid #e9ecef; background: white;
    color: #555; font-weight: 600; font-size: 0.85rem; cursor: pointer;
    transition: all 0.2s; text-decoration: none; width: 100%;
}
.ds-action-btn:hover { border-color: var(--theme-primary); color: var(--theme-primary); transform: translateX(4px); }
.ds-action-btn .ds-action-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}

/* ─── Progress Bars (resource meters) ─── */
.ds-meter { margin-bottom: 14px; }
.ds-meter-label {
    display: flex; justify-content: space-between; margin-bottom: 4px;
    font-size: 0.78rem; color: #666;
}
.ds-meter-label strong { font-weight: 700; }
.ds-meter-bar {
    height: 6px; border-radius: 3px; background: #f0f0f0; overflow: hidden;
}
.ds-meter-fill {
    height: 100%; border-radius: 3px; transition: width 0.6s ease;
}

/* ─── Pulse Dot (live indicators) ─── */
.ds-pulse {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
    animation: ds-pulse 2s infinite;
}
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ─── Entry Counter ─── */
.ds-counter {
    background: #f0f4ff; padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; color: var(--theme-primary);
}

/* ─── Error Toast ─── */
.ds-toast {
    position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 420px;
    background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden; transform: translateX(120%); transition: transform 0.3s ease;
}
.ds-toast.show { transform: translateX(0); }
.ds-toast-bar { height: 4px; background: linear-gradient(90deg, #c62828, #ef5350); }
.ds-toast-body { padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; }

/* ─── Table Row Action Buttons (Edit, Toggle, Delete) ─── */
.ds-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; border: none;
    cursor: pointer; color: #fff; font-size: 0.72rem; transition: transform .15s;
}
.ds-act:hover { transform: scale(1.1); color: #fff; }
.ds-act-edit   { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.ds-act-toggle { background: linear-gradient(135deg, #f57f17, #ffb300); }
.ds-act-on     { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.ds-act-delete { background: linear-gradient(135deg, #c62828, #ef5350); }
.ds-act-view   { background: linear-gradient(135deg, #6c3483, #a569bd); }
.ds-act-group  { display: inline-flex; gap: 4px; }

/* ─── Status Pill Badges (Active/Inactive in tables) ─── */
.ds-status-pill {
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 600; display: inline-block;
}
.ds-status-active   { background: #d1fae5; color: #059669; }
.ds-status-inactive { background: #fee2e2; color: #dc2626; }
.ds-status-pending  { background: #fef3c7; color: #92400e; }
.ds-status-blocked  { background: #fce4ec; color: #c62828; }

/* ─── Empty State (centered icon + text) ─── */
.ds-empty {
    text-align: center; padding: 40px 20px;
}
.ds-empty-icon {
    width: 56px; height: 56px; border-radius: 50%; background: #f3f4f6;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.ds-empty-icon i { color: #9ca3af; font-size: 1.2rem; }
.ds-empty p { color: #888; font-size: 0.82rem; margin: 0; }

/* ─── Section Header Inline Controls ─── */
.ds-section-header .ds-header-controls {
    display: flex; gap: 8px; align-items: center;
}
.ds-section-header .ds-header-search {
    position: relative;
}
.ds-section-header .ds-header-search i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #aaa; font-size: 0.72rem;
}
.ds-section-header .ds-header-search input {
    border: 1px solid #ddd; border-radius: 8px;
    padding: 5px 10px 5px 30px; font-size: 0.78rem; width: 180px;
}
.ds-section-header .ds-header-filter {
    min-width: 120px; border-radius: 8px; font-size: 0.78rem;
}

/* ─── Quick Search Box ─── */
.ds-quick-search {
    background: white; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-bottom: 25px;
}
.ds-quick-search input {
    padding: 14px 20px 14px 50px; font-size: 1rem;
    border: 2px solid #e9ecef; border-radius: 12px; transition: all 0.2s; width: 100%;
}
.ds-quick-search input:focus {
    border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.ds-quick-search .search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #aaa;
}

/* ─── Quick Link Buttons ─── */
.ds-quick-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    font-weight: 500; font-size: 0.9rem;
    text-decoration: none; transition: all 0.2s; color: white;
}
.ds-quick-link:hover { transform: translateY(-2px); color: white; }
.ds-quick-link-primary { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%); }
.ds-quick-link-danger  { background: linear-gradient(135deg, #fc4438 0%, #dc3545 100%); }
.ds-quick-link-warning { background: linear-gradient(135deg, #ffaa05 0%, #ff9500 100%); }
.ds-quick-link-success { background: linear-gradient(135deg, #54ba4a 0%, #198754 100%); }
.ds-quick-link-info    { background: linear-gradient(135deg, #16c7f9 0%, #0dcaf0 100%); }

/* ─── Date Navigation Pills ─── */
.ds-date-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-date-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 500;
    text-decoration: none; transition: all 0.2s;
    background: white; color: #555; border: 1px solid #e9ecef;
}
.ds-date-pill:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
.ds-date-pill.active {
    background: var(--theme-primary); color: white; border-color: var(--theme-primary);
}
.ds-date-pill .size { font-size: 0.7rem; opacity: 0.7; }

/* ─── Summary Dashboard Cards ─── */
.ds-summary-card {
    background: white; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); height: 100%;
}
.ds-summary-card h6 { font-weight: 700; margin-bottom: 16px; color: #333; }

/* ─── Level / Distribution Bars ─── */
.ds-level-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ds-level-bar .label { width: 80px; font-size: 0.8rem; font-weight: 600; }
.ds-level-bar .bar-track { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.ds-level-bar .bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
.ds-level-bar .count { width: 50px; text-align: right; font-size: 0.8rem; font-weight: 600; color: #555; }

/* ─── Error Item Cards ─── */
.ds-error-item {
    padding: 10px 14px; border-radius: 8px; margin-bottom: 8px;
    background: #fff5f5; border-left: 3px solid #fc4438;
    font-size: 0.82rem; color: #555; cursor: pointer; transition: all 0.2s;
}
.ds-error-item:hover { background: #ffe8e8; }
.ds-error-item .count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; border-radius: 11px;
    background: #fc4438; color: white; font-size: 0.7rem; font-weight: 700;
}

/* ─── Category Item List ─── */
.ds-cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px; margin-bottom: 6px;
    background: #f8f9fa; transition: all 0.2s; cursor: pointer;
    text-decoration: none; color: inherit;
}
.ds-cat-item:hover { background: #e9ecef; color: inherit; }
.ds-cat-item .cat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.ds-cat-item .cat-count { margin-left: auto; font-weight: 700; color: #333; }

/* ─── Channel / Feature Card Grid ─── */
.ds-channel-card {
    background: white; border-radius: 16px; padding: 24px; height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s ease;
    text-decoration: none; display: block; border-left: 4px solid transparent;
    position: relative;
}
.ds-channel-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.ds-channel-card .icon-wrapper {
    width: 60px; height: 60px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 16px;
}
.ds-channel-card h5 { font-weight: 600; color: #333; margin-bottom: 8px; }
.ds-channel-card .stats { font-size: 0.85rem; color: #888; }
.ds-channel-card .arrow {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    opacity: 0; transition: all 0.3s; color: var(--theme-primary);
}
.ds-channel-card:hover .arrow { opacity: 1; right: 16px; }

/* Border-left color utilities */
.ds-bl-primary   { border-left-color: var(--theme-primary) !important; }
.ds-bl-success   { border-left-color: #54ba4a !important; }
.ds-bl-warning   { border-left-color: #ffaa05 !important; }
.ds-bl-danger    { border-left-color: #fc4438 !important; }
.ds-bl-info      { border-left-color: #16c7f9 !important; }
.ds-bl-secondary { border-left-color: #6c757d !important; }
.ds-bl-dark      { border-left-color: #2c323f !important; }

/* Subtle background color utilities */
.ds-bg-primary   { background: rgba(102, 126, 234, 0.1) !important; }
.ds-bg-success   { background: rgba(84, 186, 74, 0.1) !important; }
.ds-bg-warning   { background: rgba(255, 170, 5, 0.1) !important; }
.ds-bg-danger    { background: rgba(252, 68, 56, 0.1) !important; }
.ds-bg-info      { background: rgba(22, 199, 249, 0.1) !important; }
.ds-bg-secondary { background: rgba(108, 117, 125, 0.1) !important; }
.ds-bg-dark      { background: rgba(44, 50, 63, 0.1) !important; }

/* ─── Search Container (gradient background with hints) ─── */
.ds-search-container {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-radius: 16px; padding: 24px; margin-bottom: 20px;
}
.ds-search-main { position: relative; }
.ds-search-main input {
    width: 100%; padding: 16px 60px 16px 50px; font-size: 1.1rem;
    border: none; border-radius: 12px;
    background: rgba(255,255,255,0.95); box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ds-search-main input:focus { outline: none; box-shadow: 0 4px 30px rgba(0,0,0,0.25); }
.ds-search-main .search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--theme-primary); font-size: 1.2rem;
}
.ds-search-hints { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ds-search-hint {
    background: rgba(255,255,255,0.2); color: white;
    padding: 6px 14px; border-radius: 20px; font-size: 0.8rem;
    cursor: pointer; transition: all 0.2s;
}
.ds-search-hint:hover { background: rgba(255,255,255,0.35); }

/* ─── Sidebar Stream / File List ─── */
.ds-stream-list { max-height: 400px; overflow-y: auto; }
.ds-stream-item {
    padding: 12px 16px; border-left: 3px solid transparent;
    cursor: pointer; transition: all 0.2s; border-bottom: 1px solid #f0f0f0;
}
.ds-stream-item:hover { background: #f8f9fa; }
.ds-stream-item.active {
    background: linear-gradient(90deg, rgba(102,126,234,0.1) 0%, transparent 100%);
    border-left-color: var(--theme-primary);
}
.ds-stream-item .stream-name { font-weight: 500; font-size: 0.9rem; color: #333; }
.ds-stream-item .stream-meta { font-size: 0.75rem; color: #888; margin-top: 4px; }
.ds-stream-badge {
    font-size: 0.7rem; padding: 3px 8px; border-radius: 12px;
    background: #e9ecef; color: #495057;
}

/* ─── Log Detail Modal (dark theme with syntax highlighting) ─── */
.ds-log-modal .modal-content { border-radius: 16px; overflow: hidden; }
.ds-log-modal .modal-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white; border: none;
}
.ds-log-modal .modal-header .btn-close { filter: brightness(0) invert(1); }
.ds-log-content {
    background: #1e1e2e; color: #cdd6f4; padding: 20px; border-radius: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.85rem;
    white-space: pre-wrap; word-break: break-all; max-height: 60vh;
    overflow-y: auto; line-height: 1.6;
}
.ds-log-content .log-timestamp { color: #89b4fa; }
.ds-log-content .log-level-error { color: #f38ba8; font-weight: bold; }
.ds-log-content .log-level-warning { color: #f9e2af; }
.ds-log-content .log-level-info { color: #89dceb; }
.ds-log-content .log-channel { color: #a6e3a1; }
.ds-log-content .log-key { color: #cba6f7; }
.ds-log-content .log-string { color: #a6e3a1; }
.ds-log-content .log-number { color: #fab387; }

/* ─── Error Trace Display ─── */
.ds-error-trace {
    background: #2d2d3d; border-radius: 8px; padding: 16px;
    margin-top: 12px; font-size: 0.8rem; max-height: 300px; overflow-y: auto;
}
.ds-error-trace-line {
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ds-error-trace-line:hover { background: rgba(255,255,255,0.05); }
.ds-error-trace-file { color: #89b4fa; }
.ds-error-trace-linenum { color: #fab387; font-weight: bold; }

/* ─── Channel Navigation Pills ─── */
.ds-channel-pills { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.ds-channel-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 25px; font-size: 0.85rem; font-weight: 500;
    text-decoration: none; transition: all 0.2s; border: 2px solid transparent;
}
.ds-channel-pill i { font-size: 0.9rem; }
.ds-channel-pill.active {
    background: var(--theme-primary); color: white;
    box-shadow: 0 4px 15px rgba(102,126,234,0.35);
}
.ds-channel-pill:not(.active) { background: #f8f9fa; color: #495057; }
.ds-channel-pill:not(.active):hover { background: #e9ecef; transform: translateY(-2px); }

/* ─── Quick Actions Bar (sidebar bottom) ─── */
.ds-quick-actions {
    display: flex; gap: 8px; padding: 12px;
    background: #f8f9fa; border-radius: 0 0 12px 12px;
}
.ds-quick-actions .btn { flex: 1; font-size: 0.8rem; }

/* ─── Log Level Badges (channel view) ─── */
.ds-log-level-DEBUG    { background: #6c757d; color: white; }
.ds-log-level-INFO     { background: #0dcaf0; color: white; }
.ds-log-level-WARNING  { background: #ffc107; color: #212529; }
.ds-log-level-ERROR    { background: #dc3545; color: white; }
.ds-log-level-CRITICAL { background: #b02a37; color: white; }

/* ─── Manual Pagination (non-DataTable) ─── */
.ds-pagination-wrap {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
}
.ds-pagination-wrap .ds-pagination-info {
    font-size: 0.75rem; color: #888;
}
.ds-pagination-wrap .pagination { margin-bottom: 0; }
.ds-pagination-wrap .page-link {
    border-radius: 6px; font-size: 0.78rem; margin: 0 2px;
    border-color: #e9ecef; color: #555;
}
.ds-pagination-wrap .page-item.active .page-link {
    background: var(--theme-primary); border-color: var(--theme-primary); color: white;
}
.ds-pagination-wrap .page-link svg,
.ds-section .dataTables_paginate .paginate_button svg,
.pagination .page-link svg,
nav .page-link svg,
[role="navigation"] .page-link svg {
    width: 14px !important; height: 14px !important; display: inline-block; vertical-align: middle;
}
.ds-pagination-wrap .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }

/* Global pagination SVG fix (Laravel Tailwind pagination renders huge SVGs without this) */
nav[role="navigation"] {
    display: flex; justify-content: flex-end; align-items: center; padding: 12px 16px; gap: 8px;
}
nav[role="navigation"] svg {
    width: 14px !important; height: 14px !important;
}
nav[role="navigation"] p { font-size: 0.78rem; color: #888; margin: 0; }
nav[role="navigation"] span[aria-current="page"] span {
    background: var(--theme-primary) !important; color: white !important;
    border-color: var(--theme-primary) !important; border-radius: 6px; padding: 4px 12px;
    font-size: 0.78rem; font-weight: 600;
}
nav[role="navigation"] a {
    border-radius: 6px; font-size: 0.78rem; padding: 4px 12px;
    border: 1px solid #e9ecef; color: #555; text-decoration: none; margin: 0 2px;
}
nav[role="navigation"] a:hover {
    border-color: var(--theme-primary); color: var(--theme-primary); background: #f8f9fb;
}
nav[role="navigation"] .flex.justify-between {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
}
nav[role="navigation"] .hidden { display: none; }
nav[role="navigation"] .relative.inline-flex { display: inline-flex; gap: 2px; }
nav[role="navigation"] span.relative inline-flex span {
    border-radius: 6px; padding: 4px 12px; font-size: 0.78rem; border: 1px solid #e9ecef;
}

/* ─── Gradient Stat Cards (full-color hero stat cards) ─── */
.ds-gradient-card {
    border: none; border-radius: 14px; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.ds-gradient-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.ds-gradient-card .card-body { position: relative; z-index: 1; }
.ds-gradient-card h2 { font-size: 1.8rem; font-weight: 800; color: #fff; margin: 0; }
.ds-gradient-card .ds-gc-label { font-size: 12px; color: rgba(255,255,255,.8); font-weight: 500; }
.ds-gradient-card .ds-gc-sub { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 4px; }
.ds-gradient-card .ds-gc-icon {
    position: absolute; right: 14px; top: 14px;
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2);
}
.ds-gradient-card .ds-gc-icon i { font-size: 18px; color: #fff; }
/* Larger variant (48px icon) */
.ds-gradient-card .ds-gc-icon-lg {
    position: absolute; right: 15px; top: 15px;
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.25);
}
.ds-gradient-card .ds-gc-icon-lg i { font-size: 22px; color: #fff; }
.ds-gradient-card h2.ds-gc-value-lg { font-size: 2rem; font-weight: 700; }

/* Gradient color utilities */
.ds-grad-indigo  { background: linear-gradient(135deg, #6366f1, #818cf8); }
.ds-grad-emerald { background: linear-gradient(135deg, #10b981, #34d399); }
.ds-grad-amber   { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.ds-grad-red     { background: linear-gradient(135deg, #ef4444, #f87171); }
.ds-grad-sky     { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.ds-grad-violet  { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.ds-grad-slate   { background: linear-gradient(135deg, #64748b, #94a3b8); }
.ds-grad-rose    { background: linear-gradient(135deg, #ec4899, #f472b6); }

/* ─── Period Toggle (shared day/period selector) ─── */
.ds-period-toggle {
    display: inline-flex; border-radius: 8px; overflow: hidden;
    border: 1px solid #e5e7eb; font-size: 11px;
}
.ds-period-toggle .pt-btn {
    padding: 5px 14px; cursor: pointer; font-weight: 600;
    background: #fff; color: #6b7280; border: none; transition: all .15s;
}
.ds-period-toggle .pt-btn.active { background: var(--theme-primary); color: #fff; }

/* ─── Alert Notification Bars ─── */
.ds-alert-bar {
    padding: 10px 14px; border-radius: 10px; font-size: 12px;
    margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.ds-alert-bar.critical { background: #fee2e2; color: #991b1b; }
.ds-alert-bar.warning  { background: #fef3c7; color: #92400e; }
.ds-alert-bar.info     { background: #dbeafe; color: #1e40af; }

/* ─── Score / Gauge Ring (SVG circular gauge) ─── */
.ds-score-ring { position: relative; width: 90px; height: 90px; }
.ds-score-ring svg { transform: rotate(-90deg); }
.ds-score-ring .ds-score-val {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px; font-weight: 800;
}
/* Smaller 80px variant */
.ds-score-ring-sm { position: relative; width: 80px; height: 80px; }
.ds-score-ring-sm svg { transform: rotate(-90deg); }
.ds-score-ring-sm .ds-score-val {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; font-weight: 800;
}

/* ─── Chart Container ─── */
.ds-chart-wrap { position: relative; height: 260px; }

/* ─── Card Utilities (lightweight card overrides) ─── */
.ds-card { border: none; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* ─── Card Section Title (icon badge + text header inside cards) ─── */
.ds-card-title {
    font-size: 15px; font-weight: 700; color: #1e293b;
    display: flex; align-items: center; gap: 8px;
}
.ds-card-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-card-icon i { font-size: 14px; color: #fff; }

/* ─── Loading Spinner Placeholder ─── */
.ds-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.ds-loading .spinner-border { width: 2rem; height: 2rem; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .ds-hero { padding: 20px; }
    .ds-hero h2 { font-size: 1.2rem; }
    .ds-module-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-detail-grid { grid-template-columns: 1fr; }
    .ds-section-header { flex-direction: column; align-items: flex-start; }
}