/*!
 * Theme Name: Livi Lemphakatsi - Citizen Engagement Platform
 * Package : DashLite (Customized)
 * Version : 3.0.0
 * Updated : 2026-01-02
 *
 * Livi Lemphakatsi Official CI - Mpumalanga Provincial Government
 * Warm sunrise-inspired civic design | Community voice and reporting
 * Clean modern government UI | Professional, trustworthy, empowering
 * South African public service identity
 *
 * Primary Palette:
 *   #FFC72C - Gold (warm sunrise, primary accent)
 *   #44883E - Livi Green (primary brand)
 *   #AC8400 - Dark Gold (secondary gold)
 *   #2C2A29 - Charcoal (dark backgrounds/text)
 *   #FFFFFF - White (backgrounds)
 *
 * Accent Palette:
 *   #EE9433 - Orange (warmth, alerts)
 *   #3C6A3F - Forest Green (accent green)
 *   #7D5031 - Brown (earth tones)
 *   #1C1C1B - Black (text)
 *
 * Contents (Theme Overrides Only)
 * 0. CSS Custom Properties (Variables)
 *    0a. Livi Lemphakatsi CI Colors
 *    0b. Legacy Variable Aliases
 *    0c. Semantic Color Assignments
 *    0d. Component-Specific Variables
 *    0e. Bootstrap/DashLite Variable Overrides
 * 1. NK Sidebar
 * 2. Navbar background
 * 3. Nav Links
 * 4. Dashboard Widgets
 * 5. NK-ECWG
 * 6. Alerts
 * 7. Forms
 * 8. User
 * 9. Links and Hovers
 * 10. TB List
 * 11. Auth Forms
 * 12. Badges
 * 13. Bootstrap Utility Class Overrides
 *
 * App-specific styles (tabs, accordions, detail pages) are in system.css
**/

/* ======================================
   CSS Custom Properties - Livi Lemphakatsi CI Palette
   ====================================== */
:root {
    /* ----------------------------------------
       LIVI LEMPHAKATSI OFFICIAL CI COLORS
       Warm sunrise-inspired civic design
       ---------------------------------------- */

    /* Primary Brand Colors */
    --livi-gold: #FFC72C;              /* Primary accent - warm sunrise */
    --livi-green: #44883E;             /* Primary brand - Livi green */
    --livi-dark-gold: #AC8400;         /* Secondary gold */
    --livi-charcoal: #2C2A29;          /* Dark backgrounds/text */
    --livi-white: #FFFFFF;             /* Clean backgrounds */

    /* Accent Colors */
    --livi-orange: #EE9433;            /* Warmth, alerts, warnings */
    --livi-forest: #3C6A3F;            /* Accent green */
    --livi-brown: #7D5031;             /* Earth tones */
    --livi-black: #1C1C1B;             /* True black, text */

    /* Derived/Computed Colors */
    --livi-green-hover: #3A7636;       /* Darker green for hover */
    --livi-green-light: #5A9A4E;       /* Lighter green */
    --livi-gold-hover: #E6B228;        /* Darker gold for hover */
    --livi-gold-light: #FFD966;        /* Lighter gold */

    /* Alert/Status Colors */
    --livi-red: #C41E3A;               /* Danger, errors */
    --livi-info-blue: #3C6A3F;         /* Info uses forest green */

    /* ----------------------------------------
       ISSUE STATUS COLORS (MANDATORY)
       These are the ONLY colors to use for issue statuses
       across all components: KPI cards, badges, maps, charts
       ---------------------------------------- */
    --status-open: #154194;            /* Open - Blue */
    --status-in-progress: #ee9433;     /* In Progress - Orange */
    --status-resolved: #f6c32d;        /* Resolved - Gold */
    --status-disputed: #e30513;        /* Disputed - CI Red */
    --status-closed: #3c6a3f;          /* Closed - Forest Green */

    /* Status Background Colors (12% opacity for badges/chips) */
    --status-open-bg: rgba(21, 65, 148, 0.12);
    --status-in-progress-bg: rgba(238, 148, 51, 0.12);
    --status-resolved-bg: rgba(246, 195, 45, 0.15);
    --status-disputed-bg: rgba(227, 5, 19, 0.12);
    --status-closed-bg: rgba(60, 106, 63, 0.12);

    /* ----------------------------------------
       LEGACY VARIABLE ALIASES
       For backward compatibility
       ---------------------------------------- */
    --mpg-green: var(--livi-green);
    --mpg-gold: var(--livi-gold);
    --mpg-orange: var(--livi-orange);
    --mpg-brown-warm: var(--livi-brown);
    --mpg-black: var(--livi-black);
    --mpg-gray-dark: var(--livi-charcoal);
    --mpg-gray-green: #464b43;
    --mpg-beige: #ceb18e;
    --mpg-brown-dark: #513e2e;
    --mpg-red: var(--livi-red);
    --mpg-blue: var(--livi-forest);

    /* ----------------------------------------
       SEMANTIC COLOR ASSIGNMENTS
       Use these for consistent theming
       ---------------------------------------- */

    /* Primary Theme - Livi Green */
    --color-primary: var(--livi-green);
    --color-primary-hover: var(--livi-green-hover);
    --color-primary-light: var(--livi-green-light);
    --color-primary-rgb: 68, 136, 62;  /* RGB for rgba() usage */

    /* Secondary Theme - Forest Green */
    --color-secondary: var(--livi-forest);
    --color-secondary-hover: #2D5030;
    --color-secondary-light: #4A7D4D;
    --color-secondary-rgb: 60, 106, 63;

    /* Accent Colors - Gold (warm sunrise) */
    --color-accent: var(--livi-gold);
    --color-accent-hover: var(--livi-gold-hover);
    --color-accent-light: var(--livi-gold-light);
    --color-accent-rgb: 255, 199, 44;

    /* Status/Alert Colors */
    --color-success: var(--livi-green);
    --color-success-light: rgba(68, 136, 62, 0.1);

    --color-warning: var(--livi-orange);
    --color-warning-light: rgba(238, 148, 51, 0.1);

    --color-danger: var(--livi-red);
    --color-danger-light: rgba(196, 30, 58, 0.1);

    --color-info: var(--livi-forest);
    --color-info-light: rgba(60, 106, 63, 0.1);

    /* Text Colors */
    --color-text-primary: var(--livi-black);
    --color-text-secondary: var(--livi-charcoal);
    --color-text-muted: #6e7a8a;
    --color-text-light: #8094ae;
    --color-text-inverse: var(--livi-white);

    /* Background Colors */
    --color-bg-primary: var(--livi-white);
    --color-bg-secondary: #f5f6fa;
    --color-bg-tertiary: #f8f9fc;
    --color-bg-dark: var(--livi-charcoal);

    /* Border Colors */
    --color-border: #e5e9f2;
    --color-border-light: #f0f3f8;
    --color-border-dark: var(--livi-charcoal);

    /* Sidebar/Navigation - Green with Gold accents */
    --color-sidebar-bg: var(--livi-green);
    --color-sidebar-text: var(--livi-white);
    --color-sidebar-hover: var(--livi-gold);
    --color-sidebar-active: var(--livi-gold);

    /* Interactive Elements */
    --color-link: var(--livi-green);
    --color-link-hover: var(--livi-green-hover);
    --color-focus-ring: rgba(68, 136, 62, 0.25);

    /* Cards/Surfaces */
    --color-card-bg: var(--livi-white);
    --color-card-border: var(--color-border);
    --color-card-shadow: rgba(0, 0, 0, 0.08);

    /* ----------------------------------------
       COMPONENT-SPECIFIC VARIABLES
       ---------------------------------------- */

    /* Buttons */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-border: var(--color-primary);
    --btn-primary-text: var(--livi-white);
    --btn-primary-hover-bg: var(--color-primary-hover);
    --btn-primary-hover-border: var(--color-primary-hover);

    /* Forms */
    --form-focus-border: var(--color-primary);
    --form-focus-shadow: var(--color-focus-ring);

    /* Avatar */
    --avatar-bg: rgba(var(--color-primary-rgb), 0.6);

    /* Dropdown */
    --dropdown-border-accent: var(--color-primary);

    /* ----------------------------------------
       BOOTSTRAP/DASHLITE VARIABLE OVERRIDES
       Override framework utility classes to use Livi CI
       These enable .text-success, .bg-primary, etc.
       ---------------------------------------- */

    /* Primary - Livi Green */
    --bs-primary: var(--livi-green);
    --bs-primary-rgb: 68, 136, 62;

    /* Secondary - Forest Green */
    --bs-secondary: var(--livi-forest);
    --bs-secondary-rgb: 60, 106, 63;

    /* Success - Livi Green (matches primary) */
    --bs-success: var(--livi-green);
    --bs-success-rgb: 68, 136, 62;

    /* Danger - Livi Red */
    --bs-danger: var(--livi-red);
    --bs-danger-rgb: 196, 30, 58;

    /* Warning - Livi Orange */
    --bs-warning: var(--livi-orange);
    --bs-warning-rgb: 238, 148, 51;

    /* Info - Forest Green (civic/informational) */
    --bs-info: var(--livi-forest);
    --bs-info-rgb: 60, 106, 63;

    /* Light/Dark overrides */
    --bs-light: #f5f6fa;
    --bs-light-rgb: 245, 246, 250;
    --bs-dark: var(--livi-charcoal);
    --bs-dark-rgb: 44, 42, 41;

    /* Link colors */
    --bs-link-color: var(--livi-green);
    --bs-link-color-rgb: 68, 136, 62;
    --bs-link-hover-color: var(--livi-green-hover);
    --bs-link-hover-color-rgb: 58, 118, 54;

    /* Body text */
    --bs-body-color: var(--livi-black);
    --bs-body-color-rgb: 28, 28, 27;
}

/* ======================================
NK Sidebar - Livi Lemphakatsi Style
====================================== */
.logo-img {
    width: 222px;
    max-height: 60px;
}
.nk-header-content-block {
    min-width: 32%;
}
@media (max-width: 1490px) {
    .nk-header-content-block {
        min-width: 40%;
    }
}

/* ======================================
Sidebar Background & Base
====================================== */
.nk-sidebar.is-dark,
.nk-sidebar.is-light {
    background: linear-gradient(180deg, var(--livi-green) 0%, var(--livi-green-hover) 100%);
    border-right: none;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.nk-sidebar .nk-sidebar-element {
    background: transparent;
}

/* Sidebar Header/Logo Area */
.nk-sidebar-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
}

.nk-sidebar-brand {
    flex: 1;
}

.nk-sidebar-brand .logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nk-sidebar-brand .logo-link:hover {
    text-decoration: none;
}

/* Sidebar Logo Icon */
.sidebar-logo-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Sidebar Brand Text */
.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name-livi {
    font-size: 20px;
    font-weight: 700;
    color: var(--mpg-gold);
    letter-spacing: 0.5px;
}

.brand-name-lemphakatsi {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Compact sidebar adjustments */
.nk-sidebar.is-compact:not(.has-hover) .sidebar-brand-text,
.nk-sidebar.is-compact:not(.has-hover) .sidebar-logo-icon {
    opacity: 0;
    transition: opacity 0.2s linear;
}

.nk-sidebar.is-compact.has-hover .sidebar-brand-text,
.nk-sidebar.is-compact.has-hover .sidebar-logo-icon {
    opacity: 1;
}

/* ======================================
Menu Section Headings
====================================== */
.nk-menu-heading {
    padding: 16px 24px 8px;
    margin-top: 8px;
}

/* First menu heading - reduce top space */
.nk-menu > li.nk-menu-heading:first-child {
    padding-top: 8px;
    margin-top: 0;
}

.nk-menu-heading .overline-title {
    color: var(--mpg-gold) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 1;
}

.nk-menu-heading .overline-title.text-primary-alt {
    color: var(--mpg-gold) !important;
}

/* ======================================
Menu Items & Links
====================================== */
.nk-sidebar .nk-menu > li > .nk-menu-link {
    padding: 10px 24px;
    margin: 2px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nk-sidebar .nk-menu-link {
    color: rgba(255, 255, 255, 0.85);
}

.nk-sidebar .nk-menu-icon {
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    font-size: 18px;
}

.nk-sidebar .nk-menu-text {
    font-size: 14px;
    font-weight: 500;
}

/* Menu Toggle Arrow */
.nk-sidebar .nk-menu-toggle::after {
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

/* ======================================
Hover States
====================================== */
.nk-sidebar .nk-menu > li > .nk-menu-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nk-sidebar .nk-menu > li > .nk-menu-link:hover .nk-menu-icon {
    color: var(--mpg-gold);
}

.nk-sidebar .nk-menu > li > .nk-menu-link:hover .nk-menu-text {
    color: #fff;
}

.nk-sidebar .nk-menu-toggle:hover::after {
    color: var(--mpg-gold);
}

/* ======================================
Active States
====================================== */
.nk-sidebar .nk-menu > li.active > .nk-menu-link,
.nk-sidebar .nk-menu > li.current-page > .nk-menu-link {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.nk-sidebar .nk-menu > li.active > .nk-menu-link .nk-menu-icon,
.nk-sidebar .nk-menu > li.current-page > .nk-menu-link .nk-menu-icon {
    color: var(--mpg-gold);
}

.nk-sidebar .nk-menu > li.active > .nk-menu-link .nk-menu-text,
.nk-sidebar .nk-menu > li.current-page > .nk-menu-link .nk-menu-text {
    color: #fff;
    font-weight: 600;
}

.nk-sidebar .has-sub.active > .nk-menu-toggle::after {
    color: var(--mpg-gold);
}

/* ======================================
Submenu Styling
====================================== */
.nk-sidebar .nk-menu-sub {
    background: rgba(0, 0, 0, 0.15) !important;
    margin: 4px 12px 8px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.nk-sidebar .nk-menu-sub .nk-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.nk-sidebar .nk-menu-sub .nk-menu-link {
    display: flex !important;
    align-items: center;
    padding: 10px 12px 10px 48px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    transition: all 0.15s ease;
    border: none !important;
    box-sizing: border-box;
    width: 100%;
}

.nk-sidebar .nk-menu-sub .nk-menu-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link {
    color: var(--mpg-gold) !important;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure non-active submenu items remain white/gray - with maximum specificity */
.nk-sidebar .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link,
.nk-sidebar .nk-menu > li.active .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link,
.nk-sidebar .nk-menu > li.current-page .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link,
.nk-sidebar .nk-menu > li.active.current-page .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
    background: transparent !important;
}

.nk-sidebar .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link:hover,
.nk-sidebar .nk-menu > li.active .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link:hover,
.nk-sidebar .nk-menu > li.current-page .nk-menu-sub .nk-menu-item:not(.active) > .nk-menu-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Override any inherited active styling from parent container */
.nk-sidebar .nk-menu > li.active .nk-menu-sub .nk-menu-link,
.nk-sidebar .nk-menu > li.current-page .nk-menu-sub .nk-menu-link {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    background: transparent;
}

/* Then re-apply active styling only to items with .active class */
.nk-sidebar .nk-menu > li.active .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu > li.current-page .nk-menu-sub .nk-menu-item.active > .nk-menu-link {
    color: var(--mpg-gold) !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Remove default submenu vertical line */
.nk-sidebar .nk-menu-sub::before,
.nk-sidebar .nk-menu-sub:before,
.nk-sidebar.is-dark .nk-menu-sub::before,
.nk-sidebar.is-dark .nk-menu-sub:before,
.nk-sidebar.is-theme .nk-menu-sub::before,
.nk-sidebar.is-theme .nk-menu-sub:before {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide ALL bullet indicators for submenu items - chevrons are now inline HTML */
.nk-sidebar .nk-menu-sub .nk-menu-link::before,
.nk-sidebar .nk-menu-sub .nk-menu-link:before,
.nk-sidebar .nk-menu > li .nk-menu-sub .nk-menu-link::before,
.nk-sidebar .nk-menu > li .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link::before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-dark .nk-menu > li .nk-menu-sub .nk-menu-link::before,
.nk-sidebar.is-dark .nk-menu > li .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link::before,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-theme .nk-menu > li .nk-menu-sub .nk-menu-link::before,
.nk-sidebar.is-theme .nk-menu > li .nk-menu-sub .nk-menu-link:before,
.nk-sidebar .nk-menu-sub .active > .nk-menu-link::before,
.nk-sidebar .nk-menu-sub .active > .nk-menu-link:before,
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link::before,
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link:before,
.nk-sidebar.is-dark .nk-menu-sub .active > .nk-menu-link::before,
.nk-sidebar.is-dark .nk-menu-sub .active > .nk-menu-link:before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-item.active > .nk-menu-link::before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-item.active > .nk-menu-link:before {
    display: none !important;
    visibility: hidden !important;
    content: "" !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ======================================
Sidebar Compact Mode
====================================== */
.nk-sidebar.is-compact:not(.has-hover) .nk-menu > li > .nk-menu-link {
    margin: 2px 0;
    padding: 10px 0;
    justify-content: center;
    border-radius: 0;
}

.nk-sidebar.is-compact:not(.has-hover) .nk-menu-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.nk-sidebar.is-compact:not(.has-hover) .nk-menu-icon {
    margin-right: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nk-sidebar.is-compact:not(.has-hover) .nk-menu-text,
.nk-sidebar.is-compact:not(.has-hover) .nk-menu-toggle::after {
    display: none;
}

.nk-sidebar.is-compact .nk-menu-heading {
    padding: 16px 0 8px;
    text-align: center;
}

.nk-sidebar.is-compact .nk-menu-heading .overline-title {
    font-size: 9px;
}

/* Hide submenus in compact mode */
.nk-sidebar.is-compact:not(.has-hover) .nk-menu-sub {
    display: none !important;
}

/* ======================================
Scrollbar Styling
====================================== */
.nk-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.nk-sidebar-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.nk-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.nk-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ======================================
Quick Nav Icons (Collapse Toggle)
====================================== */
.nk-sidebar .nk-quick-nav-icon {
    color: rgba(255, 255, 255, 0.8);
}

.nk-sidebar .nk-quick-nav-icon:hover {
    color: var(--mpg-gold);
}

.user-name {
    font-weight: 500;
}

/* ======================================
Dashboard - By Suburb
====================================== */

.map-block {
    height: 187px;
    overflow: hidden;
    padding: 16px 0;
}
.map-block iframe {
    max-width: 100%;
    /* height: 180px; */
    height: auto;
}

/* ======================================
NK-ECWG
====================================== */

.nk-ecwg .data-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nk-ecwg4-ck {
    height: 180px;
    width: 180px;
    margin-right: 1.5rem;
  }
  @media (min-width: 1540px) {
    .nk-ecwg4-ck {
      height: 210px;
      width: 210px;
      margin-right: 2.5rem;
    }
  }
  .nk-ecwg4-legends {
    flex-grow: 1;
    padding: 1rem 0;
  }
  .nk-ecwg4-legends li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  .nk-ecwg4-legends .title {
    display: flex;
    align-items: center;
  }
  .nk-ecwg4-legends .title .dot {
    margin-right: 0.5rem;
  }
  
/* ======================================
Alerts
====================================== */

.ui-rounder .alert {
    border-radius: 0!important;
}

/* Primary Alert - Livi Green */
.alert-primary {
    --bs-alert-color: #1e3520;
    --bs-alert-bg: rgba(68, 136, 62, 0.15);
    --bs-alert-border-color: rgba(68, 136, 62, 0.3);
    --bs-alert-link-color: var(--livi-green);
}

/* Secondary Alert - Forest Green */
.alert-secondary {
    --bs-alert-color: #1e3520;
    --bs-alert-bg: rgba(60, 106, 63, 0.15);
    --bs-alert-border-color: rgba(60, 106, 63, 0.3);
    --bs-alert-link-color: var(--livi-forest);
}

/* Success Alert - Livi Green */
.alert-success {
    --bs-alert-color: #1e3520;
    --bs-alert-bg: rgba(68, 136, 62, 0.15);
    --bs-alert-border-color: rgba(68, 136, 62, 0.3);
    --bs-alert-link-color: var(--livi-green);
}

/* Danger Alert - CI Red */
.alert-danger {
    --bs-alert-color: #5c020a;
    --bs-alert-bg: rgba(196, 30, 58, 0.12);
    --bs-alert-border-color: rgba(196, 30, 58, 0.25);
    --bs-alert-link-color: var(--livi-red);
}

/* Warning Alert - CI Orange */
.alert-warning {
    --bs-alert-color: #614012;
    --bs-alert-bg: rgba(238, 148, 51, 0.18);
    --bs-alert-border-color: rgba(238, 148, 51, 0.35);
    --bs-alert-link-color: var(--livi-orange);
}

/* Info Alert - Forest Green */
.alert-info {
    --bs-alert-color: #1e3520;
    --bs-alert-bg: rgba(60, 106, 63, 0.12);
    --bs-alert-border-color: rgba(60, 106, 63, 0.25);
    --bs-alert-link-color: var(--livi-forest);
}

/* Light Alert - Beige tones */
.alert-light {
    --bs-alert-color: var(--mpg-brown-dark);
    --bs-alert-bg: rgba(206, 177, 143, 0.25);
    --bs-alert-border-color: rgba(206, 177, 143, 0.4);
    --bs-alert-link-color: var(--mpg-brown-warm);
}

/* Dark Alert - Official dark tones */
.alert-dark {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--mpg-gray-dark);
    --bs-alert-border-color: var(--mpg-gray-green);
    --bs-alert-link-color: var(--mpg-gold);
}

/* Alert icons and close button styling */
.alert .btn-close {
    filter: none;
}

.alert-dark .btn-close {
    filter: invert(1);
}

/* Pro/Accent Alert - CI Gold accent for special notices */
.alert-pro,
.alert-accent {
    --bs-alert-color: #614012;
    --bs-alert-bg: rgba(255, 199, 44, 0.15);
    --bs-alert-border-color: rgba(255, 199, 44, 0.35);
    --bs-alert-link-color: var(--livi-dark-gold);
    border-left: 4px solid var(--livi-gold);
}

/* Fill variants - solid backgrounds */
.alert-fill.alert-primary,
.alert-primary.alert-fill {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--livi-green);
    --bs-alert-border-color: var(--livi-green);
}

.alert-fill.alert-secondary,
.alert-secondary.alert-fill {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--livi-forest);
    --bs-alert-border-color: var(--livi-forest);
}

.alert-fill.alert-success,
.alert-success.alert-fill {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--livi-green);
    --bs-alert-border-color: var(--livi-green);
}

.alert-fill.alert-danger,
.alert-danger.alert-fill {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--livi-red);
    --bs-alert-border-color: var(--livi-red);
}

.alert-fill.alert-warning,
.alert-warning.alert-fill {
    --bs-alert-color: var(--livi-black);
    --bs-alert-bg: var(--livi-orange);
    --bs-alert-border-color: var(--livi-orange);
}

.alert-fill.alert-info,
.alert-info.alert-fill {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: var(--livi-forest);
    --bs-alert-border-color: var(--livi-forest);
}

.alert-fill .btn-close {
    filter: invert(1);
}

.alert-fill.alert-warning .btn-close {
    filter: none;
}

/* ======================================
Badges - Livi Lemphakatsi CI
====================================== */

/* Primary Badge - Livi Green */
.badge.bg-primary,
.bg-primary {
    background-color: var(--livi-green) !important;
    color: #ffffff !important;
}

/* Secondary Badge - Forest Green */
.badge.bg-secondary,
.bg-secondary {
    background-color: var(--livi-forest) !important;
    color: #ffffff !important;
}

/* Success Badge - Livi Green */
.badge.bg-success,
.bg-success {
    background-color: var(--livi-green) !important;
    color: #ffffff !important;
}

/* Danger Badge - CI Red */
.badge.bg-danger,
.bg-danger {
    background-color: var(--livi-red) !important;
    color: #ffffff !important;
}

/* Warning Badge - CI Orange */
.badge.bg-warning,
.bg-warning {
    background-color: var(--livi-orange) !important;
    color: var(--livi-black) !important;
}

/* Info Badge - Forest Green */
.badge.bg-info,
.bg-info {
    background-color: var(--livi-forest) !important;
    color: #ffffff !important;
}

/* Light Badge - Beige */
.badge.bg-light,
.bg-light {
    background-color: var(--mpg-beige) !important;
    color: var(--livi-brown) !important;
}

/* Dark Badge - Charcoal */
.badge.bg-dark,
.bg-dark {
    background-color: var(--livi-charcoal) !important;
    color: #ffffff !important;
}

/* Outline/Soft Badge Variants - Livi CI */
.badge.badge-soft-primary,
.badge-soft-primary {
    background-color: rgba(68, 136, 62, 0.15) !important;
    color: var(--livi-green) !important;
}

.badge.badge-soft-secondary,
.badge-soft-secondary {
    background-color: rgba(60, 106, 63, 0.15) !important;
    color: var(--livi-forest) !important;
}

.badge.badge-soft-success,
.badge-soft-success {
    background-color: rgba(68, 136, 62, 0.15) !important;
    color: var(--livi-green) !important;
}

.badge.badge-soft-danger,
.badge-soft-danger {
    background-color: rgba(196, 30, 58, 0.12) !important;
    color: var(--livi-red) !important;
}

.badge.badge-soft-warning,
.badge-soft-warning {
    background-color: rgba(238, 148, 51, 0.18) !important;
    color: var(--livi-dark-gold) !important;
}

.badge.badge-soft-info,
.badge-soft-info {
    background-color: rgba(60, 106, 63, 0.12) !important;
    color: var(--livi-forest) !important;
}

/* Dim Badge Variants (DashLite specific) */
.badge-dim.bg-primary {
    background-color: rgba(68, 136, 62, 0.15) !important;
    color: var(--livi-green) !important;
}

.badge-dim.bg-secondary {
    background-color: rgba(60, 106, 63, 0.15) !important;
    color: var(--livi-forest) !important;
}

.badge-dim.bg-success {
    background-color: rgba(68, 136, 62, 0.15) !important;
    color: var(--livi-green) !important;
}

.badge-dim.bg-danger {
    background-color: rgba(196, 30, 58, 0.12) !important;
    color: var(--livi-red) !important;
}

.badge-dim.bg-warning {
    background-color: rgba(238, 148, 51, 0.18) !important;
    color: var(--livi-dark-gold) !important;
}

.badge-dim.bg-info {
    background-color: rgba(60, 106, 63, 0.12) !important;
    color: var(--livi-forest) !important;
}

/* Outline Badge Variants */
.badge.badge-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--livi-green) !important;
    color: var(--livi-green) !important;
}

.badge.badge-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--livi-forest) !important;
    color: var(--livi-forest) !important;
}

.badge.badge-outline-success {
    background-color: transparent !important;
    border: 1px solid var(--livi-green) !important;
    color: var(--livi-green) !important;
}

.badge.badge-outline-danger {
    background-color: transparent !important;
    border: 1px solid var(--livi-red) !important;
    color: var(--livi-red) !important;
}

.badge.badge-outline-warning {
    background-color: transparent !important;
    border: 1px solid var(--livi-orange) !important;
    color: var(--livi-orange) !important;
}

.badge.badge-outline-info {
    background-color: transparent !important;
    border: 1px solid var(--livi-forest) !important;
    color: var(--livi-forest) !important;
}

/* Dot/Status Indicators */
.badge-dot.bg-primary,
.dot.bg-primary {
    background-color: var(--livi-green) !important;
}

.badge-dot.bg-secondary,
.dot.bg-secondary {
    background-color: var(--livi-forest) !important;
}

.badge-dot.bg-success,
.dot.bg-success {
    background-color: var(--livi-green) !important;
}

.badge-dot.bg-danger,
.dot.bg-danger {
    background-color: var(--livi-red) !important;
}

.badge-dot.bg-warning,
.dot.bg-warning {
    background-color: var(--livi-orange) !important;
}

.badge-dot.bg-info,
.dot.bg-info {
    background-color: var(--livi-forest) !important;
}

/* Special Accent Badges */
.badge.bg-gold,
.bg-gold {
    background-color: var(--mpg-gold) !important;
    color: var(--mpg-black) !important;
}

.badge.bg-orange,
.bg-orange {
    background-color: var(--mpg-orange) !important;
    color: #ffffff !important;
}

.badge.bg-brown,
.bg-brown {
    background-color: var(--mpg-brown-warm) !important;
    color: #ffffff !important;
}

/* ======================================
Forms & Buttons
====================================== */

/* Base button - ensure consistent border radius */
.btn {
    --bs-btn-border-radius: 4px !important;
    border-radius: 4px !important;
}

/* Primary Button - Official Green */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mpg-green);
    --bs-btn-border-color: var(--mpg-green);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: 60, 106, 63;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mpg-green);
    --bs-btn-disabled-border-color: var(--mpg-green);
}

/* Secondary Button - Official Blue */
.btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mpg-blue);
    --bs-btn-border-color: var(--mpg-blue);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-focus-shadow-rgb: 21, 65, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mpg-blue);
    --bs-btn-disabled-border-color: var(--mpg-blue);
}

/* Success Button - Official Green (same as primary) */
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mpg-green);
    --bs-btn-border-color: var(--mpg-green);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: 60, 106, 63;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mpg-green);
    --bs-btn-disabled-border-color: var(--mpg-green);
}

/* Danger Button - Official Red */
.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mpg-red);
    --bs-btn-border-color: var(--mpg-red);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c5040f;
    --bs-btn-hover-border-color: #b8030e;
    --bs-btn-focus-shadow-rgb: 227, 5, 19;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #b8030e;
    --bs-btn-active-border-color: #a8030d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mpg-red);
    --bs-btn-disabled-border-color: var(--mpg-red);
}

/* Warning Button - Official Orange */
.btn-warning {
    --bs-btn-color: var(--mpg-black);
    --bs-btn-bg: var(--mpg-orange);
    --bs-btn-border-color: var(--mpg-orange);
    --bs-btn-hover-color: var(--mpg-black);
    --bs-btn-hover-bg: #dc8428;
    --bs-btn-hover-border-color: #d07d25;
    --bs-btn-focus-shadow-rgb: 238, 148, 51;
    --bs-btn-active-color: var(--mpg-black);
    --bs-btn-active-bg: #d07d25;
    --bs-btn-active-border-color: #c47522;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: var(--mpg-black);
    --bs-btn-disabled-bg: var(--mpg-orange);
    --bs-btn-disabled-border-color: var(--mpg-orange);
}

/* Info Button - Official Blue */
.btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--mpg-blue);
    --bs-btn-border-color: var(--mpg-blue);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-focus-shadow-rgb: 21, 65, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--mpg-blue);
    --bs-btn-disabled-border-color: var(--mpg-blue);
}

/* Outline Primary - Official Green */
.btn-outline-primary {
    --bs-btn-color: var(--mpg-green);
    --bs-btn-border-color: var(--mpg-green);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mpg-green);
    --bs-btn-hover-border-color: var(--mpg-green);
    --bs-btn-focus-shadow-rgb: 60, 106, 63;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mpg-green);
    --bs-btn-active-border-color: var(--mpg-green);
    --bs-btn-disabled-color: var(--mpg-green);
    --bs-btn-disabled-border-color: var(--mpg-green);
}

/* Outline Secondary - Official Blue */
.btn-outline-secondary {
    --bs-btn-color: var(--mpg-blue);
    --bs-btn-border-color: var(--mpg-blue);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mpg-blue);
    --bs-btn-hover-border-color: var(--mpg-blue);
    --bs-btn-focus-shadow-rgb: 21, 65, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mpg-blue);
    --bs-btn-active-border-color: var(--mpg-blue);
    --bs-btn-disabled-color: var(--mpg-blue);
    --bs-btn-disabled-border-color: var(--mpg-blue);
}

/* Outline Success - Official Green */
.btn-outline-success {
    --bs-btn-color: var(--mpg-green);
    --bs-btn-border-color: var(--mpg-green);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mpg-green);
    --bs-btn-hover-border-color: var(--mpg-green);
    --bs-btn-focus-shadow-rgb: 60, 106, 63;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mpg-green);
    --bs-btn-active-border-color: var(--mpg-green);
    --bs-btn-disabled-color: var(--mpg-green);
    --bs-btn-disabled-border-color: var(--mpg-green);
}

/* Outline Danger - Official Red */
.btn-outline-danger {
    --bs-btn-color: var(--mpg-red);
    --bs-btn-border-color: var(--mpg-red);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mpg-red);
    --bs-btn-hover-border-color: var(--mpg-red);
    --bs-btn-focus-shadow-rgb: 227, 5, 19;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mpg-red);
    --bs-btn-active-border-color: var(--mpg-red);
    --bs-btn-disabled-color: var(--mpg-red);
    --bs-btn-disabled-border-color: var(--mpg-red);
}

/* Outline Warning - Official Orange */
.btn-outline-warning {
    --bs-btn-color: var(--mpg-orange);
    --bs-btn-border-color: var(--mpg-orange);
    --bs-btn-hover-color: var(--mpg-black);
    --bs-btn-hover-bg: var(--mpg-orange);
    --bs-btn-hover-border-color: var(--mpg-orange);
    --bs-btn-focus-shadow-rgb: 238, 148, 51;
    --bs-btn-active-color: var(--mpg-black);
    --bs-btn-active-bg: var(--mpg-orange);
    --bs-btn-active-border-color: var(--mpg-orange);
    --bs-btn-disabled-color: var(--mpg-orange);
    --bs-btn-disabled-border-color: var(--mpg-orange);
}

/* Outline Info - Official Blue */
.btn-outline-info {
    --bs-btn-color: var(--mpg-blue);
    --bs-btn-border-color: var(--mpg-blue);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mpg-blue);
    --bs-btn-hover-border-color: var(--mpg-blue);
    --bs-btn-focus-shadow-rgb: 21, 65, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mpg-blue);
    --bs-btn-active-border-color: var(--mpg-blue);
    --bs-btn-disabled-color: var(--mpg-blue);
    --bs-btn-disabled-border-color: var(--mpg-blue);
}

/* Mpumalanga Branded Button - Primary action button with Mpumalanga CI */
.btn-mpg,
.auth-btn {
    position: relative;
    background: linear-gradient(135deg, var(--mpg-green) 0%, var(--color-primary-hover) 100%);
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    overflow: hidden;
    color: #ffffff;
}

.btn-mpg::before,
.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-mpg:hover,
.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(60, 106, 63, 0.35);
    color: #ffffff;
}

.btn-mpg:hover::before,
.auth-btn:hover::before {
    opacity: 1;
    animation: shimmer 1.5s infinite;
}

.btn-mpg:active,
.auth-btn:active {
    transform: translateY(0);
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Form Controls */
.form-control:focus {
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border-color: var(--mpg-green);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(60, 106, 63, 0.15);
}

.form-select:focus {
    border-color: var(--mpg-green);
    box-shadow: 0 0 0 3px rgba(60, 106, 63, 0.15);
}

.form-check-input:checked {
    background-color: var(--mpg-green);
    border-color: var(--mpg-green);
}

.form-check-input:focus {
    border-color: var(--mpg-green);
    box-shadow: 0 0 0 3px rgba(60, 106, 63, 0.15);
}

.form-icon {
  top: calc(44px - 13px);
}

/* ======================================
User
====================================== */

.user-avatar {
    background-color: rgba(var(--color-primary-rgb), 0.6) !important;
}
.dropdown-menu-s1 {
    border-top: 3px solid rgba(var(--color-primary-rgb), 0.6);
}
.link-list a:hover {
    color: var(--color-primary-hover);
}

/* ======================================
Links and Hovers
====================================== */
.link-list-menu li.active > a, .link-list-menu a.active, .link-list-menu a:hover, .link-list-menu li.active > a .icon, .link-list-menu a.active .icon, .link-list-menu a:hover .icon, .link-list-menu li.active > a:after, .link-list-menu a.active:after, .link-list-menu a:hover:after {
    color: var(--color-primary-hover);
}

/* ======================================
TB List
====================================== */
.nk-tb-list > .tb-lead a,
.nk-activity-data .label a,
.nk-footer .nav-link {
  color: var(--color-text-primary);
}
.nk-tb-list > .tb-lead a:hover,
.nk-activity-data .label a:hover,
.nk-footer .nav-link:hover {
  color: rgba(var(--color-primary-rgb), 0.6);
}
.card-tools a {
  color: var(--color-primary-hover);
}
.card-tools a:hover {
  color: rgba(var(--color-primary-rgb), 0.6);
}
.card-tools-nav li a:before {
  background: rgba(var(--color-primary-rgb), 0.6);
}

/* ======================================
Button Hovers
====================================== */
.nk-block-head-content .btn-dim.btn-outline-light:not(:disabled):not(.disabled):hover,
.nk-block-head-content .dt-buttons .btn-dim.btn-secondary:not(:disabled):not(.disabled):hover {
  color: var(--color-text-inverse);
  background-color: rgba(var(--color-primary-rgb), 0.6);
  border-color: rgba(var(--color-primary-rgb), 0.6);
}

/* ======================================
Auth Forms
====================================== */
#userLoginForm .is-shown .passcode-icon.icon-show {
  display: block;
}

/* ======================================
   LIST PAGE DESIGN SYSTEM
   Modern, cohesive design for all list pages
   ====================================== */

/* ----------------------------------------
   12.1 Page Header
   ---------------------------------------- */
/* Reduce spacing on list pages */
.nk-content:has(.cogta-list-header) {
    padding-top: 16px;
    padding-bottom: 24px;
}

.nk-block-head.cogta-list-header {
    padding: 8px 0 8px;
    margin-bottom: 8px;
}

.nk-block-head.cogta-list-header .nk-block-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.nk-block-head.cogta-list-header .nk-block-des {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.nk-block-head.cogta-list-header .nk-block-des p {
    margin: 0;
}

/* Header Actions - Force title and description to stack vertically */
.cogta-list-header .nk-block-head-content:first-child {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
}

.cogta-list-header .nk-block-head-content:first-child .nk-block-title,
.cogta-list-header .nk-block-head-content:first-child .nk-block-des {
    flex: 0 0 100%;
    width: 100%;
}

.cogta-list-header .nk-block-head-content:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ----------------------------------------
   12.2 List Card Container
   ---------------------------------------- */
.cogta-list-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.cogta-list-card .card-inner-group {
    border: none;
}

/* ----------------------------------------
   12.3 Toolbar
   ---------------------------------------- */
.cogta-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #f8f9fa 100%);
    border-bottom: 1px solid var(--color-border);
    gap: 16px;
    flex-wrap: wrap;
}

.cogta-list-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cogta-list-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search Input */
.cogta-search-input {
    position: relative;
    min-width: 280px;
}

.cogta-search-input .form-control {
    padding-left: 40px;
    padding-right: 16px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.cogta-search-input .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.cogta-search-input .form-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Filter Dropdown Trigger */
.cogta-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.cogta-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

.cogta-filter-btn.has-filters {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.cogta-filter-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
}

/* Toolbar Action Buttons */
.cogta-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text-muted);
    transition: all 0.2s ease;
}

.cogta-toolbar-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

/* Show Count Select */
.cogta-show-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cogta-show-select label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cogta-show-select .form-select {
    width: auto;
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
    min-width: 70px;
}

/* ----------------------------------------
   12.3b Date Range Filter
   ---------------------------------------- */
.cogta-date-range-filter {
    display: flex;
    align-items: center;
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-input-group label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.date-input-group input[type="date"] {
    width: auto;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: #526484;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.date-input-group input[type="date"]:hover {
    border-color: var(--livi-green);
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: var(--livi-green);
    box-shadow: 0 0 0 3px rgba(68, 136, 62, 0.1);
}

.date-input-group input[type="date"]:not(:placeholder-shown),
.date-input-group input[type="date"][value]:not([value=""]) {
    border-color: var(--livi-green);
    background: rgba(68, 136, 62, 0.05);
}

.date-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(196, 30, 58, 0.1);
    color: var(--livi-red);
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-clear-btn:hover {
    background: rgba(196, 30, 58, 0.2);
}

.date-clear-btn .icon {
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .cogta-list-toolbar-right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .date-range-inputs {
        flex-wrap: wrap;
    }
}

/* ----------------------------------------
   12.4 Data Table
   ---------------------------------------- */
.cogta-data-table {
    width: 100%;
    border-collapse: collapse;
}

.cogta-data-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid var(--color-border);
}

.cogta-data-table thead th {
    padding: 14px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    text-align: left;
    white-space: nowrap;
    border: none;
}

.cogta-data-table thead th:first-child {
    padding-left: 24px;
}

.cogta-data-table thead th:last-child {
    padding-right: 24px;
    text-align: right;
}

/* Sortable Headers */
.cogta-data-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
}

.cogta-data-table thead th.sortable a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    gap: 6px;
}

.cogta-data-table thead th.sortable:hover {
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.08);
}

.cogta-data-table thead th.sortable:hover a {
    color: var(--color-primary);
}

.cogta-data-table thead th.sortable .sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    opacity: 0.5;
    transition: all 0.2s ease;
    font-size: 14px;
}

.cogta-data-table thead th.sortable:hover .sort-icon {
    opacity: 1;
    background-color: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
}

.cogta-data-table thead th.sortable.sorted .sort-icon {
    opacity: 1;
    background-color: var(--color-primary);
    color: #fff;
}

.cogta-data-table thead th.sortable.sorted {
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.1);
    font-weight: 600;
}

.cogta-data-table thead th.sortable.sorted a {
    color: var(--color-primary);
}

/* Sorted Column Highlighting - using nth-child based on data-sort attribute */
.cogta-sortable-table[data-sorted-col="1"] tbody tr td:nth-child(1) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="2"] tbody tr td:nth-child(2) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="3"] tbody tr td:nth-child(3) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="4"] tbody tr td:nth-child(4) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="5"] tbody tr td:nth-child(5) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="6"] tbody tr td:nth-child(6) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="7"] tbody tr td:nth-child(7) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}
.cogta-sortable-table[data-sorted-col="8"] tbody tr td:nth-child(8) {
    background-color: rgba(var(--color-primary-rgb), 0.06) !important;
}

/* Alternative: Highlight cells in sorted column via class */
.cogta-data-table tbody td.sorted-col {
    background-color: rgba(var(--color-primary-rgb), 0.04);
}

/* Table Body */
.cogta-data-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

.cogta-data-table tbody tr:hover {
    background-color: rgba(var(--color-primary-rgb), 0.02);
}

.cogta-data-table tbody tr:last-child {
    border-bottom: none;
}

.cogta-data-table tbody td {
    padding: 16px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    vertical-align: middle;
    border: none;
}

.cogta-data-table tbody td:first-child {
    padding-left: 24px;
}

.cogta-data-table tbody td:last-child {
    padding-right: 24px;
    text-align: right;
}

/* Cell Variants */
.cogta-data-table .cell-primary {
    font-weight: 600;
    color: var(--color-primary);
}

.cogta-data-table .cell-muted {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.cogta-data-table .cell-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.cogta-data-table .cell-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Table Container */
.cogta-table-wrapper {
    border-top: 1px solid rgba(44, 42, 41, 0.08);
}

.cogta-table-wrapper .cogta-data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Municipality Table Cell Variants */
.cogta-data-table .municipality-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--livi-charcoal);
}

.cogta-data-table .district-label {
    font-size: 0.75rem;
    color: rgba(44, 42, 41, 0.6);
}

.cogta-data-table .user-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
}

/* Inline Progress Bar */
.cogta-data-table .progress-bar-track {
    height: 6px;
    background: rgba(44, 42, 41, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.cogta-data-table .progress-bar-fill {
    height: 100%;
    background: var(--livi-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Empty State */
.cogta-data-table .empty-state {
    padding: 2rem 1rem !important;
    text-align: center;
    color: rgba(44, 42, 41, 0.5);
    font-size: 0.875rem;
}

/* ----------------------------------------
   12.5 Status Badges
   ---------------------------------------- */
.cogta-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Badge Variants */
.cogta-badge-success {
    background: rgba(60, 106, 63, 0.12);
    color: var(--mpg-green);
}

.cogta-badge-warning {
    background: rgba(238, 148, 51, 0.12);
    color: #b97420;
}

.cogta-badge-danger {
    background: rgba(227, 5, 19, 0.12);
    color: var(--mpg-red);
}

.cogta-badge-info {
    background: rgba(21, 65, 148, 0.12);
    color: var(--mpg-blue);
}

.cogta-badge-secondary {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}

.cogta-badge-primary {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

/* Badge with Dot */
.cogta-badge-dot {
    padding-left: 18px;
    position: relative;
}

.cogta-badge-dot::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ----------------------------------------
   12.6 Action Buttons
   ---------------------------------------- */
.cogta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.cogta-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    transition: all 0.2s ease;
    cursor: pointer;
}

.cogta-action-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.cogta-action-btn.action-view:hover {
    background: rgba(21, 65, 148, 0.08);
    color: var(--mpg-blue);
}

.cogta-action-btn.action-edit:hover {
    background: rgba(238, 148, 51, 0.08);
    color: var(--mpg-orange);
}

.cogta-action-btn.action-delete:hover {
    background: rgba(227, 5, 19, 0.08);
    color: var(--mpg-red);
}

/* Action Dropdown */
.cogta-action-dropdown .dropdown-menu {
    min-width: 160px;
    padding: 8px 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cogta-action-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
}

.cogta-action-dropdown .dropdown-item:hover {
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
}

.cogta-action-dropdown .dropdown-item .icon {
    font-size: 1.125rem;
    opacity: 0.7;
}

.cogta-action-dropdown .dropdown-divider {
    margin: 8px 0;
    border-color: var(--color-border);
}

.cogta-action-dropdown .dropdown-item.text-danger:hover {
    background: rgba(227, 5, 19, 0.06);
    color: var(--mpg-red);
}

/* ----------------------------------------
   12.7 Empty State
   ---------------------------------------- */
.cogta-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.cogta-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
    border-radius: 50%;
}

.cogta-empty-state-icon .icon {
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.6;
}

.cogta-empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.cogta-empty-state-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 320px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cogta-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cogta-empty-state-action:hover {
    background: var(--color-primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.25);
}

.cogta-empty-state-action.btn-outline {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.cogta-empty-state-action.btn-outline:hover {
    background: #f8f9fa;
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
    transform: none;
    box-shadow: none;
}

/* ----------------------------------------
   12.8 Pagination
   ---------------------------------------- */
.cogta-pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #fafbfc;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: 16px;
}

.cogta-pagination-info {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.cogta-pagination-info strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.cogta-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cogta-pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cogta-pagination .page-item .page-link:hover {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cogta-pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.cogta-pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.cogta-pagination-goto {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(44, 42, 41, 0.65);
    white-space: nowrap;
}

.cogta-pagination-goto span {
    color: rgba(44, 42, 41, 0.65);
}

.cogta-pagination-goto .form-select {
    width: auto;
    min-width: 60px;
    height: 32px;
    padding: 0 28px 0 10px;
    border-radius: 4px;
    border: 1px solid #e5e9f2;
    font-size: 13px;
    font-weight: 500;
    color: #2C2A29;
    background-color: #fff;
}

/* ----------------------------------------
   12.9 Filter Panel
   ---------------------------------------- */
.cogta-filter-panel {
    min-width: 320px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cogta-filter-panel .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.cogta-filter-panel .filter-header-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cogta-filter-panel .filter-header-clear {
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.cogta-filter-panel .filter-header-clear:hover {
    text-decoration: underline;
}

.cogta-filter-panel .filter-body {
    padding: 20px;
}

.cogta-filter-panel .filter-group {
    margin-bottom: 16px;
}

.cogta-filter-panel .filter-group:last-child {
    margin-bottom: 0;
}

.cogta-filter-panel .filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.cogta-filter-panel .filter-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: #fafbfc;
}

.cogta-filter-panel .filter-footer .btn {
    flex: 1;
}

/* ----------------------------------------
   12.10 Active Filter Tags
   ---------------------------------------- */
.cogta-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cogta-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-primary);
}

.cogta-filter-tag-label {
    font-weight: 500;
}

.cogta-filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.cogta-filter-tag-remove:hover {
    background: rgba(var(--color-primary-rgb), 0.15);
}

.cogta-clear-all-filters {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cogta-clear-all-filters:hover {
    background: #f0f0f0;
    color: var(--color-text-primary);
}

/* ----------------------------------------
   12.11 Filter Pills (Compact Dropdowns)
   ---------------------------------------- */
.cogta-filter-pills {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--color-border);
}

.cogta-filter-pills-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.cogta-filter-pills-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8094ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.cogta-filter-pills-label .icon {
    font-size: 14px;
}

.cogta-pill-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: 32px !important;
    padding: 0 30px 0 14px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #526484 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238094ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    border: 1px solid #dbdfea !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-width: auto !important;
    line-height: 30px !important;
    outline: none !important;
}

.cogta-pill-select:hover {
    border-color: #c4cdd5 !important;
    background-color: #fff !important;
}

.cogta-pill-select:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1) !important;
}

.cogta-pill-select.active {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.cogta-pill-select.active:hover {
    background-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

.cogta-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border-radius: 50%;
    color: #8094ae;
    background: #e5e9f2;
    transition: all 0.15s ease;
}

.cogta-pill-clear:hover {
    background: #d3d9e4;
    color: #364a63;
}

.cogta-pill-clear .icon {
    font-size: 12px;
}

/* ----------------------------------------
   12.12 Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 991px) {
    .cogta-list-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cogta-list-toolbar-left,
    .cogta-list-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .cogta-search-input {
        min-width: 100%;
        flex: 1;
    }

    .cogta-pagination-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .cogta-filter-pills {
        padding: 10px 16px;
    }

    .cogta-filter-pills-form {
        gap: 6px;
    }

    .cogta-filter-pills-label {
        display: none;
    }

    .cogta-pill-select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .cogta-data-table thead {
        display: none;
    }

    .cogta-data-table tbody tr {
        display: block;
        padding: 16px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        margin-bottom: 12px;
        background: #ffffff;
    }

    .cogta-data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .cogta-data-table tbody td:first-child {
        padding-left: 0;
    }

    .cogta-data-table tbody td:last-child {
        padding-right: 0;
        text-align: left;
        border-bottom: none;
    }

    .cogta-data-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
}

/* ----------------------------------------
   12.12 Loading State
   ---------------------------------------- */
.cogta-table-loading {
    position: relative;
    min-height: 200px;
}

.cogta-table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cogta-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--color-primary-rgb), 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: cogta-spin 0.8s linear infinite;
}

@keyframes cogta-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ----------------------------------------
   12.13 Export Button Styling
   ---------------------------------------- */
.cogta-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 40px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cogta-export-btn:hover {
    background: var(--color-primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.25);
}

.cogta-export-btn .icon {
    font-size: 1.125rem;
}

/* Export Dropdown */
.cogta-export-dropdown .dropdown-menu {
    min-width: 140px;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cogta-export-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
}

.cogta-export-dropdown .dropdown-item .icon {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   12.14 Breadcrumb Navigation - Minimal with Active Pill
   Design: Clean inline breadcrumb with pill-styled current page
   ---------------------------------------- */
.cogta-breadcrumb-nav {
    /* Container - no background for minimal look */
}

.cogta-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.8125rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 2px;
}

/* Breadcrumb in header - align right */
.nk-block-head-content .cogta-breadcrumb {
    justify-content: flex-end;
}

.cogta-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: rgba(44, 42, 41, 0.55);
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

.cogta-breadcrumb-item a {
    color: rgba(44, 42, 41, 0.55);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px 2px;
    border-bottom: none;
}

.cogta-breadcrumb-item a:hover {
    color: #3C6A3F;
}

/* Active/Current page - Forest Green text highlight */
.cogta-breadcrumb-item.active {
    color: #3C6A3F;
    font-weight: 600;
}

/* Separator - Sunrise Gold chevron */
.cogta-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    color: var(--livi-gold);
}

.cogta-breadcrumb-separator .icon {
    font-size: 0.875rem;
}

/* Home icon style - Minimal transparent */
.cogta-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 0;
    color: rgba(44, 42, 41, 0.5);
    background: transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cogta-breadcrumb-home:hover {
    color: #3C6A3F;
    background: rgba(60, 106, 63, 0.1);
}

.cogta-breadcrumb-home .icon {
    font-size: 0.9375rem;
}

/* ======================================
   Bootstrap Utility Class Overrides
   Force Livi CI colors on utility classes
   ====================================== */

/* Text color utilities - Livi CI */
.text-success {
    color: var(--livi-green, #44883E) !important;
}

.text-primary {
    color: var(--livi-green, #44883E) !important;
}

.text-danger {
    color: var(--livi-red, #C41E3A) !important;
}

.text-warning {
    color: var(--livi-orange, #EE9433) !important;
}

.text-info {
    color: var(--livi-forest, #3C6A3F) !important;
}

.text-secondary {
    color: var(--livi-forest, #3C6A3F) !important;
}

/* Background color utilities - Livi CI */
.bg-success {
    background-color: var(--livi-green, #44883E) !important;
}

.bg-primary {
    background-color: var(--livi-green, #44883E) !important;
}

.bg-danger {
    background-color: var(--livi-red, #C41E3A) !important;
}

.bg-warning {
    background-color: var(--livi-orange, #EE9433) !important;
}

.bg-info {
    background-color: var(--livi-forest, #3C6A3F) !important;
}

/* Soft/light background variants */
.bg-success-dim {
    background-color: rgba(68, 136, 62, 0.1) !important;
}

.bg-primary-dim {
    background-color: rgba(68, 136, 62, 0.1) !important;
}

.bg-danger-dim {
    background-color: rgba(196, 30, 58, 0.1) !important;
}

.bg-warning-dim {
    background-color: rgba(238, 148, 51, 0.1) !important;
}

.bg-info-dim {
    background-color: rgba(60, 106, 63, 0.1) !important;
}

/* Border color utilities */
.border-success {
    border-color: var(--livi-green, #44883E) !important;
}

.border-primary {
    border-color: var(--livi-green, #44883E) !important;
}

.border-danger {
    border-color: var(--livi-red, #C41E3A) !important;
}

.border-warning {
    border-color: var(--livi-orange, #EE9433) !important;
}

/* ======================================
   14. Dashboard Redesign Components
   KPI Cards, District Cards, Horizontal Bar Charts
   ====================================== */

/* ----------------------------------------
   14a. KPI Cards
   Modern stat cards with trend indicators
   ---------------------------------------- */
.kpi-card {
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.kpi-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.kpi-card .card-inner {
    padding: 1.25rem;
}

.kpi-content {
    flex: 1;
}

.kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: block;
}

.kpi-value {
    margin-bottom: 0.5rem;
}

.kpi-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--livi-charcoal);
}

a.kpi-count {
    text-decoration: none;
}

a.kpi-count:hover {
    opacity: 0.85;
}

.kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon .icon {
    font-size: 1.5rem;
}

/* KPI Trend Indicators */
.kpi-trend {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kpi-trend .icon {
    font-size: 0.6875rem;
}

.kpi-trend .trend-period {
    color: var(--text-soft);
    margin-left: 0.25rem;
}

.kpi-trend.trend-up {
    color: var(--livi-red);
}

.kpi-trend.trend-down {
    color: var(--livi-green);
}

.kpi-trend.trend-neutral {
    color: var(--text-soft);
}

/* KPI Card Color Variants */
.kpi-card.kpi-primary .kpi-icon {
    background-color: rgba(68, 136, 62, 0.12);
    color: var(--livi-green);
}

.kpi-card.kpi-primary .kpi-count {
    color: var(--livi-green);
}

.kpi-card.kpi-danger .kpi-icon {
    background-color: rgba(196, 30, 58, 0.12);
    color: var(--livi-red);
}

.kpi-card.kpi-danger .kpi-count {
    color: var(--livi-red);
}

.kpi-card.kpi-warning .kpi-icon {
    background-color: rgba(238, 148, 51, 0.12);
    color: var(--livi-orange);
}

.kpi-card.kpi-warning .kpi-count {
    color: var(--livi-orange);
}

.kpi-card.kpi-success .kpi-icon {
    background-color: rgba(68, 136, 62, 0.12);
    color: var(--livi-forest);
}

.kpi-card.kpi-success .kpi-count {
    color: var(--livi-forest);
}

/* Gold accent variant for totals */
.kpi-card.kpi-gold .kpi-icon {
    background-color: rgba(255, 199, 44, 0.2);
    color: var(--livi-dark-gold);
}

.kpi-card.kpi-gold .kpi-count {
    color: var(--livi-dark-gold);
}

/* ----------------------------------------
   Solid Color KPI Cards (Full Block Color)
   ---------------------------------------- */
.kpi-card-solid {
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    border: none;
}

.kpi-card-solid:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.kpi-card-solid .card-inner {
    padding: 1.5rem 1rem;
}

.kpi-label-light {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
    color: rgba(255, 255, 255, 0.9);
}

.kpi-count-light {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

a.kpi-count-light {
    color: #fff;
    text-decoration: none;
}

a.kpi-count-light:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Solid color variants */
.kpi-card-solid.kpi-gold {
    background: linear-gradient(135deg, var(--livi-gold) 0%, var(--livi-dark-gold) 100%);
}

.kpi-card-solid.kpi-danger {
    background: linear-gradient(135deg, #e53e3e 0%, var(--livi-red) 100%);
}

.kpi-card-solid.kpi-warning {
    background: linear-gradient(135deg, #f6ad55 0%, var(--livi-orange) 100%);
}

.kpi-card-solid.kpi-success {
    background: linear-gradient(135deg, #68d391 0%, var(--livi-green) 100%);
}

.kpi-card-solid.kpi-primary {
    background: linear-gradient(135deg, var(--livi-green-light) 0%, var(--livi-green) 100%);
}

/* ----------------------------------------
   14b. District Cards
   Cards with progress bars and status breakdown
   ---------------------------------------- */
.district-card {
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.district-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.district-card .card-title {
    color: var(--livi-charcoal);
}

.district-total {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.district-breakdown {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

/* ----------------------------------------
   14c. Horizontal Bar Charts (for Top 5 Categories)
   CSS-only progress bars with labels
   ---------------------------------------- */
.horizontal-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.horizontal-bar-item {
    margin-bottom: 1rem;
}

.horizontal-bar-item:last-child {
    margin-bottom: 0;
}

.horizontal-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.horizontal-bar-label {
    font-size: 0.8125rem;
    color: var(--livi-charcoal);
    font-weight: 500;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horizontal-bar-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
}

.horizontal-bar-track {
    height: 8px;
    background-color: var(--bg-lighter, #f5f6fa);
    border-radius: 4px;
    overflow: hidden;
}

.horizontal-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Bar color variants */
.horizontal-bar-fill.bar-danger {
    background-color: var(--livi-red);
}

.horizontal-bar-fill.bar-warning {
    background-color: var(--livi-orange);
}

.horizontal-bar-fill.bar-success {
    background-color: var(--livi-green);
}

.horizontal-bar-fill.bar-primary {
    background-color: var(--livi-green);
}

.horizontal-bar-fill.bar-gold {
    background-color: var(--livi-gold);
}

/* ----------------------------------------
   14d. Dashboard Section Headers
   Consistent section styling
   ---------------------------------------- */
.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.dashboard-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    margin: 0;
}

.dashboard-section-title .icon {
    margin-right: 0.5rem;
    color: var(--livi-green);
}

.dashboard-section-actions {
    display: flex;
    gap: 0.5rem;
}

/* ----------------------------------------
   14e. Dashboard Action Buttons
   Export, Refresh, Filter buttons
   ---------------------------------------- */
.btn-dashboard-action {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-dashboard-action .icon {
    font-size: 0.875rem;
}

/* ----------------------------------------
   14f. Dashboard Quick Stats Row
   Compact inline stats
   ---------------------------------------- */
.quick-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.quick-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quick-stat-label {
    font-size: 0.75rem;
    color: var(--text-soft);
}

.quick-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--livi-charcoal);
}

/* ----------------------------------------
   14g. Issues Timeline Card
   For line chart section
   ---------------------------------------- */
.chart-container {
    position: relative;
    height: 280px;
}

.chart-legend-inline {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ----------------------------------------
   14h. Empty State for Dashboard
   ---------------------------------------- */
.dashboard-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-soft);
}

.dashboard-empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.dashboard-empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

/* ----------------------------------------
   14i. Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .kpi-count {
        font-size: 1.5rem;
    }

    .kpi-icon {
        width: 44px;
        height: 44px;
    }

    .kpi-icon .icon {
        font-size: 1.25rem;
    }

    .horizontal-bar-label {
        max-width: 60%;
    }
}

@media (max-width: 575.98px) {
    .quick-stats {
        gap: 1rem;
    }

    .dashboard-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   15. REFINED INSTITUTIONAL DASHBOARD
   Professional government/civic design with Livi Lemphakatsi brand integration
   ========================================================================== */

/* ----------------------------------------
   15a. Dashboard Header - Institutional
   ---------------------------------------- */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0 1.5rem;
    margin-bottom: 0.5rem;
}

.dashboard-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-title-block {
    display: flex;
    flex-direction: column;
}

.dashboard-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dashboard-subtitle {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0.25rem 0 0;
    font-weight: 400;
}

.dashboard-meta {
    margin-top: 0.5rem;
}

.dashboard-date {
    font-size: 0.75rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Institutional Button Styles */
.btn-institutional {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--livi-white);
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: var(--livi-charcoal);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-institutional:hover {
    background: #F9FAFB;
    border-color: var(--livi-green);
    color: var(--livi-green);
    text-decoration: none;
}

.btn-institutional .icon {
    font-size: 1rem;
    opacity: 0.7;
}

.btn-institutional-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--livi-white);
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: var(--livi-charcoal);
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-institutional-icon:hover {
    background: var(--livi-green);
    border-color: var(--livi-green);
    color: var(--livi-white);
}

.btn-institutional-icon .icon {
    font-size: 1.125rem;
}

/* ----------------------------------------
   15a-2. Dashboard Filter Bar
   ---------------------------------------- */
.dashboard-filter-bar {
    background: var(--livi-white);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.filter-bar-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* Quick Filter Pills */
.filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-pills-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.25rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: #F3F4F6;
    border: 1px solid transparent;
    border-radius: 20px;
    color: #4B5563;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-pill:hover {
    background: #E5E7EB;
    color: var(--livi-charcoal);
    text-decoration: none;
}

.filter-pill.active {
    background: var(--livi-green);
    color: var(--livi-white);
    border-color: var(--livi-green);
}

.filter-pill.active:hover {
    background: var(--livi-green-hover);
}

/* Status Filter Row */
.filter-bar-status-row {
    padding-top: 0.75rem;
    border-top: 1px solid #E5E7EB;
    margin-top: 0.75rem;
}

.filter-pill-status.active {
    background: var(--livi-gold);
    color: var(--livi-charcoal);
    border-color: var(--livi-gold);
}

.filter-pill-status.active:hover {
    background: var(--livi-gold-hover);
}

.filter-status-separator {
    color: #D1D5DB;
    margin: 0 0.5rem;
}

/* Custom Date Range */
.filter-date-range {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.filter-date-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-date-form {
    display: flex;
    align-items: center;
}

.filter-date-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-date-field {
    position: relative;
}

.filter-date-input {
    width: 130px;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--livi-charcoal);
    background: var(--livi-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-date-input:focus {
    outline: none;
    border-color: var(--livi-green);
    box-shadow: 0 0 0 3px rgba(68, 136, 62, 0.1);
}

.filter-date-input::placeholder {
    color: #9CA3AF;
}

.filter-date-icon {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
    font-size: 0.875rem;
}

.filter-date-separator {
    color: #9CA3AF;
    font-size: 0.8125rem;
    font-weight: 500;
}

.filter-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--livi-green);
    border: none;
    border-radius: 6px;
    color: var(--livi-white);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filter-apply-btn:hover {
    background: var(--livi-green-hover);
}

.filter-apply-btn .icon {
    font-size: 0.875rem;
}

/* Filter Status Bar */
.filter-bar-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid #F3F4F6;
}

.filter-bar-status .icon {
    color: var(--livi-gold);
    font-size: 1rem;
}

.filter-status-text {
    font-size: 0.8125rem;
    color: #6B7280;
}

.filter-status-text strong {
    color: var(--livi-charcoal);
    font-weight: 600;
}

.filter-reset-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 0.25rem;
    background: #F3F4F6;
    border-radius: 50%;
    color: #9CA3AF;
    text-decoration: none;
    transition: all 0.15s ease;
}

.filter-reset-link:hover {
    background: var(--livi-red);
    color: var(--livi-white);
}

.filter-reset-link .icon {
    font-size: 0.75rem;
    color: inherit;
}

/* Flatpickr Custom Theme Override */
.flatpickr-calendar {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--livi-green);
    border-color: var(--livi-green);
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--livi-green-hover);
    border-color: var(--livi-green-hover);
}

.flatpickr-day:hover {
    background: rgba(68, 136, 62, 0.1);
    border-color: rgba(68, 136, 62, 0.2);
}

.flatpickr-day.inRange {
    background: rgba(68, 136, 62, 0.1);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(68, 136, 62, 0.1), 5px 0 0 rgba(68, 136, 62, 0.1);
}

/* Filter Bar Responsive */
@media (max-width: 992px) {
    .filter-bar-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-date-range {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-date-inputs {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .filter-pills {
        width: 100%;
    }

    .filter-date-input {
        width: 110px;
    }
}

/* ----------------------------------------
   15b. KPI Solid Cards - Full CI Color Backgrounds
   ---------------------------------------- */
.kpi-solid-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 100px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-solid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Clickable KPI Card - Link styles */
a.kpi-solid-card.kpi-clickable {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

a.kpi-solid-card.kpi-clickable .kpi-solid-content {
    flex: 1;
}

.kpi-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

a.kpi-solid-card.kpi-clickable:hover .kpi-arrow {
    opacity: 1;
    right: 0.75rem;
}

/* Arrow colors per card type */
.kpi-solid-card.kpi-total .kpi-arrow { color: var(--livi-charcoal); }
.kpi-solid-card.kpi-open .kpi-arrow { color: var(--livi-white); }
.kpi-solid-card.kpi-progress .kpi-arrow { color: var(--livi-charcoal); }
.kpi-solid-card.kpi-resolved .kpi-arrow { color: var(--livi-white); }
.kpi-solid-card.kpi-closed .kpi-arrow { color: var(--livi-white); }

.kpi-solid-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.kpi-solid-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.kpi-solid-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpi-solid-value a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.kpi-solid-value a:hover {
    opacity: 0.85;
}

.kpi-percentage {
    font-size: 0.5em;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 0.25em;
}

/* ----------------------------------------
   KPI Hero Card - Large Total Issues Card
   ---------------------------------------- */
.kpi-hero-card {
    background: linear-gradient(135deg, var(--livi-charcoal) 0%, #1a1918 100%);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 4px 20px rgba(44, 42, 41, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Side-by-side variant - taller card for grid alignment */
.kpi-hero-card.kpi-hero-sidebar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 220px;
    padding: 2rem 1.5rem;
}

.kpi-hero-card.kpi-hero-sidebar .kpi-hero-content {
    flex-direction: column;
    text-align: center;
}

.kpi-hero-card.kpi-hero-sidebar .kpi-hero-icon {
    margin-bottom: 1rem;
}

.kpi-hero-card.kpi-hero-sidebar .kpi-hero-text {
    align-items: center;
}

.kpi-hero-card.kpi-hero-sidebar .kpi-hero-value {
    font-size: 3.5rem;
}

.kpi-hero-card.kpi-hero-sidebar .kpi-hero-subtitle {
    margin-top: 0.5rem;
}

.kpi-hero-card.kpi-hero-sidebar::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(255, 199, 44, 0.06) 0%, transparent 100%);
}

/* ----------------------------------------
   KPI Workflow Grid - Status Flow with Arrows
   ---------------------------------------- */
.kpi-workflow-grid {
    position: relative;
    height: 100%;
}

.kpi-workflow-grid .workflow-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Hide arrows on smaller screens where layout stacks */
@media (max-width: 767px) {
    .kpi-workflow-grid .workflow-arrows {
        display: none;
    }
}

.kpi-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 199, 44, 0.08) 100%);
    pointer-events: none;
}

.kpi-hero-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
}

.kpi-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 199, 44, 0.2) 0%, rgba(255, 199, 44, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 199, 44, 0.2);
}

.kpi-hero-icon .icon {
    font-size: 2rem;
    color: var(--livi-gold);
}

.kpi-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kpi-hero-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kpi-hero-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--livi-white);
    line-height: 1;
}

.kpi-hero-value a {
    color: var(--livi-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.kpi-hero-value a:hover {
    color: var(--livi-gold);
}

.kpi-hero-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.kpi-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 199, 44, 0.15);
    color: var(--livi-gold);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
}

.kpi-hero-badge .icon {
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .kpi-hero-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    .kpi-hero-icon {
        width: 56px;
        height: 56px;
    }

    .kpi-hero-icon .icon {
        font-size: 1.5rem;
    }

    .kpi-hero-value {
        font-size: 2.25rem;
    }

    .kpi-hero-card::before {
        display: none;
    }
}

/* ----------------------------------------
   KPI Summary Bar - Total Issues Banner
   ---------------------------------------- */
.kpi-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--livi-charcoal) 0%, rgba(44, 42, 41, 0.9) 100%);
    border-radius: 10px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(44, 42, 41, 0.15);
}

.kpi-summary-bar-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kpi-summary-bar-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 199, 44, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-summary-bar-icon .icon {
    font-size: 1.5rem;
    color: var(--livi-gold);
}

.kpi-summary-bar-text {
    display: flex;
    flex-direction: column;
}

.kpi-summary-bar-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.125rem;
}

.kpi-summary-bar-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--livi-white);
    line-height: 1;
}

.kpi-summary-bar-value a {
    color: var(--livi-white);
    text-decoration: none;
}

.kpi-summary-bar-value a:hover {
    color: var(--livi-gold);
}

.kpi-summary-bar-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.kpi-summary-bar-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.kpi-summary-bar-stat:first-child {
    border-left: none;
    padding-left: 0;
}

.kpi-summary-bar-stat-label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kpi-summary-bar-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--livi-white);
}

.kpi-summary-bar-stat-value.text-success {
    color: #44883E;
}

.kpi-summary-bar-stat-value.text-warning {
    color: var(--livi-orange);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kpi-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 1.25rem;
    }

    .kpi-summary-bar-meta {
        width: 100%;
        justify-content: space-between;
    }

    .kpi-summary-bar-stat {
        align-items: center;
        padding-left: 0;
        border-left: none;
    }

    .kpi-summary-bar-value {
        font-size: 1.5rem;
    }
}

/* KPI Total - Gold #f6c32d */
.kpi-solid-card.kpi-total {
    background: #f6c32d;
    box-shadow: 0 2px 8px rgba(246, 195, 45, 0.25);
}

.kpi-solid-card.kpi-total .kpi-solid-label,
.kpi-solid-card.kpi-total .kpi-solid-value,
.kpi-solid-card.kpi-total .kpi-solid-value a {
    color: var(--livi-charcoal);
}

/* KPI Issue Types - Dark Maroon #805747 */
.kpi-solid-card.kpi-types {
    background: #805747;
    box-shadow: 0 2px 8px rgba(128, 87, 71, 0.25);
}

.kpi-solid-card.kpi-types .kpi-solid-label,
.kpi-solid-card.kpi-types .kpi-solid-value,
.kpi-solid-card.kpi-types .kpi-solid-value a {
    color: var(--livi-white);
}

/* KPI Open - Blue (new issues awaiting action) */
.kpi-solid-card.kpi-open {
    background: var(--status-open);
    box-shadow: 0 2px 8px var(--status-open-bg);
}

.kpi-solid-card.kpi-open .kpi-solid-label,
.kpi-solid-card.kpi-open .kpi-solid-value,
.kpi-solid-card.kpi-open .kpi-solid-value a {
    color: var(--livi-white);
}

/* KPI In Progress - Orange (being worked on) */
.kpi-solid-card.kpi-progress {
    background: var(--status-in-progress);
    box-shadow: 0 2px 8px var(--status-in-progress-bg);
}

.kpi-solid-card.kpi-progress .kpi-solid-label,
.kpi-solid-card.kpi-progress .kpi-solid-value,
.kpi-solid-card.kpi-progress .kpi-solid-value a {
    color: var(--livi-charcoal);
}

/* KPI Resolved - Gold (completed, awaiting verification) */
.kpi-solid-card.kpi-resolved {
    background: var(--status-resolved);
    box-shadow: 0 2px 8px var(--status-resolved-bg);
}

.kpi-solid-card.kpi-resolved .kpi-solid-label,
.kpi-solid-card.kpi-resolved .kpi-solid-value,
.kpi-solid-card.kpi-resolved .kpi-solid-value a {
    color: var(--livi-charcoal);
}

/* KPI Closed - Forest Green (finalized/archived) */
.kpi-solid-card.kpi-closed {
    background: var(--status-closed);
    box-shadow: 0 2px 8px var(--status-closed-bg);
}

.kpi-solid-card.kpi-closed .kpi-solid-label,
.kpi-solid-card.kpi-closed .kpi-solid-value,
.kpi-solid-card.kpi-closed .kpi-solid-value a {
    color: var(--livi-white);
}

/* KPI Disputed - CI Red (citizen disputed resolution) */
.kpi-solid-card.kpi-disputed {
    background: var(--status-disputed);
    box-shadow: 0 2px 8px var(--status-disputed-bg);
}

.kpi-solid-card.kpi-disputed .kpi-solid-label,
.kpi-solid-card.kpi-disputed .kpi-solid-value,
.kpi-solid-card.kpi-disputed .kpi-solid-value a {
    color: var(--livi-white);
}

.kpi-solid-card.kpi-disputed .kpi-arrow {
    color: var(--livi-white);
}

/* ----------------------------------------
   15c. Institutional Card - Chart Container
   ---------------------------------------- */
.institutional-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.institutional-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid #F3F4F6;
}

.institutional-card-title h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    margin: 0 0 0.25rem;
}

.institutional-card-title p {
    font-size: 0.8125rem;
    color: #9CA3AF;
    margin: 0;
}

.institutional-card-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.institutional-card-tools .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Card Title Link - Clickable card headers */
.card-title-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.card-title-link:hover {
    color: var(--livi-green);
}

.card-title-link h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title-link:hover h2 .icon {
    opacity: 1;
    transform: translateX(2px);
}

.card-title-link h2 .icon {
    transition: all 0.2s ease;
}

.institutional-card-body {
    padding: 1.5rem 1.75rem;
}

/* Chart Legend Row */
.chart-legend-row {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Chart Container */
.chart-container-lg {
    position: relative;
    height: 320px;
}

/* ----------------------------------------
   15d. Section Headers
   ---------------------------------------- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    margin: 0;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--livi-green);
    text-decoration: none;
    transition: color 0.15s ease;
}

.section-link:hover {
    color: var(--livi-green-hover);
}

.section-link .icon {
    font-size: 0.875rem;
    transition: transform 0.15s ease;
}

.section-link:hover .icon {
    transform: translateX(3px);
}

/* ----------------------------------------
   15e. District Stat Cards
   ---------------------------------------- */
.district-stat-card {
    background: var(--livi-white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

.district-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.district-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid #F3F4F6;
}

.district-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    margin: 0 0 0.125rem;
}

.district-label {
    font-size: 0.6875rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.district-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #F9FAFB;
    color: #6B7280;
    text-decoration: none;
    transition: all 0.15s ease;
}

.district-action:hover {
    background: var(--livi-green);
    color: var(--livi-white);
}

.district-stat-body {
    padding: 1rem 1.25rem 1.25rem;
}

.district-count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.district-count .count-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    line-height: 1;
}

.district-count .count-label {
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 500;
}

.district-progress {
    height: 6px;
    background: #F3F4F6;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.district-progress-bar {
    height: 100%;
    background: var(--livi-green);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.district-breakdown {
    display: flex;
    gap: 0;
}

.breakdown-item {
    flex: 1;
    text-align: center;
    padding: 0.625rem 0.5rem;
    border-radius: 4px;
}

.breakdown-item .breakdown-count {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.breakdown-item .breakdown-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.125rem;
    opacity: 0.8;
}

.breakdown-item.breakdown-open {
    background: rgba(21, 65, 148, 0.1);
    color: #154194;
}

.breakdown-item.breakdown-progress {
    background: rgba(238, 148, 51, 0.1);
    color: var(--livi-orange);
}

.breakdown-item.breakdown-resolved {
    background: rgba(255, 199, 44, 0.15);
    color: #AC8400;
}

/* 4-column layout for breakdown items (Open, In Progress, Resolved, Closed) */
.district-breakdown-4col .breakdown-item {
    flex: 1 1 25%;
    min-width: 0;
    padding: 0.5rem 0.25rem;
}

.district-breakdown-4col .breakdown-item .breakdown-count {
    font-size: 1rem;
}

.district-breakdown-4col .breakdown-item .breakdown-label {
    font-size: 0.625rem;
}

.breakdown-item.breakdown-disputed {
    background: rgba(227, 5, 19, 0.1);
    color: #e30513;
}

.breakdown-item.breakdown-closed {
    background: rgba(68, 136, 62, 0.1);
    color: var(--livi-green);
}

/* ----------------------------------------
   15f. Category Cards - Issue Breakdown
   ---------------------------------------- */
.category-card {
    background: var(--livi-white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.category-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #FAFBFC;
    border-bottom: 1px solid #E5E7EB;
}

.category-card-header h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 6px;
}

.category-badge.badge-open {
    background: rgba(196, 30, 58, 0.12);
    color: var(--livi-red);
}

.category-badge.badge-progress {
    background: rgba(238, 148, 51, 0.15);
    color: #B5700A;
}

.category-badge.badge-closed {
    background: rgba(60, 106, 63, 0.12);
    color: var(--livi-forest);
}

.category-card-body {
    flex: 1;
    padding: 1rem 1.25rem 1.5rem;
}

.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.15s ease;
}

.category-item:hover {
    background-color: #FAFBFC;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.category-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.category-item:first-child {
    padding-top: 0;
}

.category-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.category-name {
    font-size: 0.8125rem;
    color: var(--livi-charcoal);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
    line-height: 1.4;
}

.category-count {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    background: #F3F4F6;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}

.category-service {
    color: #9CA3AF;
    font-weight: 400;
}

/* Category Issues List - Similar to Emerging Issues */
.category-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.category-issue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem;
    background: #FAFAFA;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.category-issue-item:hover {
    background: #F3F4F6;
}

.category-issue-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Open Issues - Red tones */
.category-issue-item.category-open:nth-child(1) .category-issue-rank { background: var(--livi-red); }
.category-issue-item.category-open:nth-child(2) .category-issue-rank { background: #D93A52; }
.category-issue-item.category-open:nth-child(3) .category-issue-rank { background: #E45A6F; }
.category-issue-item.category-open:nth-child(4) .category-issue-rank { background: #EF7A8B; }
.category-issue-item.category-open:nth-child(5) .category-issue-rank { background: #F99AA7; }

/* In Progress - Orange tones */
.category-issue-item.category-progress:nth-child(1) .category-issue-rank { background: var(--livi-orange); color: var(--livi-charcoal); }
.category-issue-item.category-progress:nth-child(2) .category-issue-rank { background: #F0A24D; color: var(--livi-charcoal); }
.category-issue-item.category-progress:nth-child(3) .category-issue-rank { background: #F3B166; color: var(--livi-charcoal); }
.category-issue-item.category-progress:nth-child(4) .category-issue-rank { background: #F6C080; color: var(--livi-charcoal); }
.category-issue-item.category-progress:nth-child(5) .category-issue-rank { background: #F9CF99; color: var(--livi-charcoal); }

/* Resolved - Gold tones */
.category-issue-item.category-resolved:nth-child(1) .category-issue-rank { background: var(--livi-gold); color: var(--livi-charcoal); }
.category-issue-item.category-resolved:nth-child(2) .category-issue-rank { background: #E6B629; color: var(--livi-charcoal); }
.category-issue-item.category-resolved:nth-child(3) .category-issue-rank { background: #CCAA35; color: var(--livi-charcoal); }
.category-issue-item.category-resolved:nth-child(4) .category-issue-rank { background: #B39E41; color: var(--livi-charcoal); }
.category-issue-item.category-resolved:nth-child(5) .category-issue-rank { background: #99924D; color: #fff; }

/* Closed - Green tones */
.category-issue-item.category-closed:nth-child(1) .category-issue-rank { background: var(--livi-green); }
.category-issue-item.category-closed:nth-child(2) .category-issue-rank { background: #3C6A3F; }
.category-issue-item.category-closed:nth-child(3) .category-issue-rank { background: #5A8A5D; }
.category-issue-item.category-closed:nth-child(4) .category-issue-rank { background: #78AA7B; }
.category-issue-item.category-closed:nth-child(5) .category-issue-rank { background: #96CA99; }

.category-issue-content {
    flex: 1;
    min-width: 0;
}

.category-issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.category-issue-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.category-issue-count {
    font-size: 0.8125rem;
    font-weight: 700;
}

.category-issue-count.count-open { color: var(--livi-red); }
.category-issue-count.count-progress { color: var(--livi-orange); }
.category-issue-count.count-closed { color: var(--livi-green); }

.category-issue-bar {
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.category-issue-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.category-issue-bar-fill.bar-open {
    background: linear-gradient(90deg, var(--livi-red) 0%, #D93A52 100%);
}

.category-issue-bar-fill.bar-progress {
    background: linear-gradient(90deg, var(--livi-orange) 0%, #F5A855 100%);
}

.category-issue-bar-fill.bar-closed {
    background: linear-gradient(90deg, var(--livi-green) 0%, #5A9A54 100%);
}

.category-issue-service {
    font-size: 0.625rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.category-bar {
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.category-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.category-bar-fill.bar-open {
    background: linear-gradient(90deg, var(--livi-red) 0%, #D93A52 100%);
}

.category-bar-fill.bar-progress {
    background: linear-gradient(90deg, var(--livi-orange) 0%, #F5A855 100%);
}

.category-bar-fill.bar-closed {
    background: linear-gradient(90deg, var(--livi-green) 0%, #5A9A54 100%);
}

/* Category Card - Clean style without border accents */
.category-card.category-open,
.category-card.category-progress,
.category-card.category-closed {
    border: none;
}

/* ----------------------------------------
   15g. Activity Cards
   ---------------------------------------- */
.activity-card {
    background: var(--livi-white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.activity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #FAFBFC;
    border-bottom: 1px solid #E5E7EB;
}

.activity-card-header h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.activity-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--livi-green);
    text-decoration: none;
    transition: color 0.15s ease;
}

.activity-link:hover {
    color: var(--livi-green-hover);
}

.activity-card-body {
    flex: 1;
    padding: 0.5rem 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: background 0.15s ease;
}

.activity-item:hover {
    background: #FAFAFA;
}

.activity-item-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    text-decoration: none;
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-title:hover {
    color: var(--livi-green);
}

.activity-meta {
    display: block;
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: var(--livi-green);
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px;
    line-height: 1;
    text-align: center;
}

.activity-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 500;
}

.activity-time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: #9CA3AF;
}

.activity-ward-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(68, 136, 62, 0.1);
    color: var(--livi-green);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 6px;
}

/* ----------------------------------------
   15g-ii. Ward Dashboard - Role Badges
   ---------------------------------------- */
.dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.badge-councillor {
    background: rgba(68, 136, 62, 0.12);
    color: var(--livi-green);
}

.badge-cdw {
    background: rgba(255, 199, 44, 0.15);
    color: var(--livi-dark-gold);
}

.subtitle-separator {
    margin: 0 0.5rem;
    color: #9CA3AF;
}

/* ----------------------------------------
   15g-iii. Ward Dashboard - Feedback Items
   ---------------------------------------- */
.feedback-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    transition: background 0.15s ease;
}

.feedback-item:hover {
    background: #FAFAFA;
}

.feedback-rating {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.rating-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--livi-gold) 0%, #D4A520 100%);
    color: var(--livi-charcoal);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 8px;
}

.rating-stars {
    display: flex;
    gap: 1px;
}

.rating-stars .icon {
    font-size: 0.625rem;
    color: var(--livi-gold);
}

.rating-stars .ni-star {
    color: #E5E7EB;
}

.feedback-content {
    flex: 1;
    min-width: 0;
}

.feedback-ref {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    text-decoration: none;
    transition: color 0.15s ease;
}

.feedback-ref:hover {
    color: var(--livi-green);
}

.feedback-comment {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0.25rem 0 0.125rem;
    line-height: 1.4;
}

.feedback-time {
    font-size: 0.6875rem;
    color: #9CA3AF;
}

/* ----------------------------------------
   15h. Empty States
   ---------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #9CA3AF;
}

.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

.empty-state-sm {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #9CA3AF;
}

.empty-state-sm p {
    margin: 0;
    font-size: 0.8125rem;
}

/* ----------------------------------------
   15i. Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 991.98px) {
    .dashboard-header {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .chart-legend-row {
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .dashboard-title {
        font-size: 1.5rem;
    }

    .kpi-solid-value {
        font-size: 1.75rem;
    }

    .kpi-solid-content {
        padding: 1.25rem;
    }

    .institutional-card-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .chart-container-lg {
        height: 260px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .district-count .count-value {
        font-size: 1.5rem;
    }

    .breakdown-item {
        padding: 0.5rem 0.25rem;
    }

    .breakdown-item .breakdown-count {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-header {
        padding: 1rem 0 1.5rem;
    }

    .kpi-solid-card {
        min-height: 85px;
    }

    .kpi-solid-value {
        font-size: 1.5rem;
    }

    .category-card-header h3 {
        font-size: 0.875rem;
    }

    .activity-card-header h3 {
        font-size: 0.875rem;
    }
}

/* ----------------------------------------
   15j. Emerging Issues Components
   ---------------------------------------- */
.emerging-issues-chart {
    position: relative;
    height: 280px;
}

.emerging-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.emerging-issue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem;
    background: #FAFAFA;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.emerging-issue-item:hover {
    background: #F3F4F6;
}

.emerging-issue-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--livi-green);
    color: var(--livi-white);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}

.emerging-issue-item:nth-child(1) .emerging-issue-rank {
    background: var(--livi-green);
}

.emerging-issue-item:nth-child(2) .emerging-issue-rank {
    background: #3C6A3F;
}

.emerging-issue-item:nth-child(3) .emerging-issue-rank {
    background: var(--livi-gold);
    color: var(--livi-charcoal);
}

.emerging-issue-item:nth-child(4) .emerging-issue-rank {
    background: var(--livi-orange);
    color: var(--livi-charcoal);
}

.emerging-issue-item:nth-child(5) .emerging-issue-rank {
    background: #AC8400;
    color: var(--livi-white);
}

.emerging-issue-content {
    flex: 1;
    min-width: 0;
}

.emerging-issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.emerging-issue-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.emerging-issue-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--livi-green);
}

.emerging-issue-bar {
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.emerging-issue-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--livi-green) 0%, var(--livi-gold) 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.emerging-issue-service {
    font-size: 0.6875rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 767.98px) {
    .emerging-issues-chart {
        height: 220px;
    }

    .emerging-issue-item {
        padding: 0.625rem;
    }

    .emerging-issue-rank {
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }

    .emerging-issue-title {
        font-size: 0.8125rem;
    }
}


/* ==========================================================================
   USER INTERACTION COMPONENTS (Comments & Ratings)
   ========================================================================== */

/* Base Card Styles */
.user-interaction-card {
    background: var(--livi-white);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.user-interaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E5E7EB;
    background: linear-gradient(135deg, #FAFAFA 0%, #F9FAFB 100%);
}

.user-interaction-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.user-interaction-title .icon {
    font-size: 1.125rem;
    color: var(--livi-gold);
}

.user-interaction-title h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    margin: 0;
}

.user-interaction-stat {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.user-interaction-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--livi-green);
}

.user-interaction-stat .stat-label {
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.user-interaction-body {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    max-height: 400px;
}

.user-interaction-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #E5E7EB;
    background: #FAFAFA;
}

/* Comment Item Styles */
.comment-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #F3F4F6;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-avatar .icon {
    font-size: 1rem;
    color: var(--livi-white);
}

.comment-avatar.avatar-citizen {
    background: linear-gradient(135deg, var(--livi-orange) 0%, #D47F28 100%);
}

.comment-avatar.avatar-official {
    background: linear-gradient(135deg, var(--livi-green) 0%, var(--livi-forest) 100%);
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.comment-author {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--livi-charcoal);
}

.comment-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.comment-badge.badge-citizen {
    background: rgba(238, 148, 51, 0.1);
    color: var(--livi-orange);
}

.comment-badge.badge-official {
    background: rgba(68, 136, 62, 0.1);
    color: var(--livi-green);
}

.comment-text {
    font-size: 0.8125rem;
    color: #4B5563;
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: #9CA3AF;
}

.comment-issue-link {
    color: var(--livi-green);
    font-weight: 600;
    text-decoration: none;
}

.comment-issue-link:hover {
    color: var(--livi-green-hover);
    text-decoration: underline;
}

.comment-separator {
    color: #D1D5DB;
}

/* Interaction Breakdown Footer */
.interaction-breakdown {
    display: flex;
    justify-content: space-around;
}

.breakdown-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.breakdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breakdown-icon .icon {
    font-size: 0.875rem;
    color: var(--livi-white);
}

.breakdown-icon.citizen {
    background: var(--livi-orange);
}

.breakdown-icon.official {
    background: var(--livi-green);
}

.breakdown-icon.issues {
    background: var(--livi-gold);
}

.breakdown-stat .breakdown-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--livi-charcoal);
}

.breakdown-stat .breakdown-label {
    font-size: 0.625rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Rating Card Specific Styles */
.rating-card .user-interaction-header {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.satisfaction-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.satisfaction-badge.high {
    background: rgba(68, 136, 62, 0.15);
    color: var(--livi-green);
}

.satisfaction-badge.medium {
    background: rgba(238, 148, 51, 0.15);
    color: var(--livi-orange);
}

.satisfaction-badge.low {
    background: rgba(196, 30, 58, 0.15);
    color: var(--livi-red);
}

/* Rating Overview */
.rating-overview {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #F3F4F6;
}

.rating-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.rating-score .score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    line-height: 1;
}

.rating-score .score-stars {
    display: flex;
    gap: 0.125rem;
    margin: 0.5rem 0;
}

.rating-score .score-stars .icon {
    font-size: 0.875rem;
}

.rating-score .star-filled {
    color: var(--livi-gold);
}

.rating-score .star-empty {
    color: #E5E7EB;
}

.rating-score .score-count {
    font-size: 0.6875rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Rating Distribution */
.rating-distribution {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.distribution-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.distribution-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    min-width: 28px;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.distribution-label .icon {
    font-size: 0.625rem;
    color: var(--livi-gold);
}

.distribution-bar {
    flex: 1;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.distribution-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--livi-gold) 0%, var(--livi-orange) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.distribution-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--livi-charcoal);
    min-width: 24px;
    text-align: right;
}

/* Recent Ratings List */
.recent-ratings-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.rating-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #F3F4F6;
}

.rating-item:last-child {
    border-bottom: none;
}

.rating-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.rating-stars-small {
    display: flex;
    gap: 0.125rem;
}

.rating-stars-small .icon {
    font-size: 0.75rem;
    color: var(--livi-gold);
}

.rating-stars-small .ni-star {
    color: #E5E7EB;
}

.rating-time {
    font-size: 0.6875rem;
    color: #9CA3AF;
}

.rating-comment {
    font-size: 0.8125rem;
    color: #4B5563;
    line-height: 1.5;
    margin: 0 0 0.375rem 0;
    font-style: italic;
}

.rating-issue {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
}

.rating-issue a {
    color: var(--livi-green);
    font-weight: 600;
    text-decoration: none;
}

.rating-issue a:hover {
    text-decoration: underline;
}

.rating-ward {
    color: #9CA3AF;
}

/* Empty State */
.empty-state-interaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: #9CA3AF;
}

.empty-state-interaction .icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state-interaction p {
    font-size: 0.875rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .rating-overview {
        flex-direction: column;
        align-items: center;
    }

    .rating-score {
        margin-bottom: 1rem;
    }

    .rating-distribution {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .user-interaction-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .user-interaction-body {
        max-height: 350px;
    }

    .comment-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .comment-avatar {
        width: 28px;
        height: 28px;
    }

    .comment-meta {
        flex-wrap: wrap;
    }

    .interaction-breakdown {
        gap: 0.5rem;
    }

    .breakdown-icon {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================================
   Multi-Select Dropdown Component
   Reusable multi-select filter dropdowns for list pages
   ========================================================================== */
.multiselect-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.multiselect-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    font-size: 12px;
    color: #526484;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 32px;
}

.multiselect-btn:hover {
    border-color: var(--livi-green);
}

.multiselect-btn.active {
    border-color: var(--livi-green);
    background: rgba(68, 136, 62, 0.05);
    color: var(--livi-green);
    font-weight: 500;
}

.multiselect-btn .icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.multiselect-dropdown.open .multiselect-btn .icon {
    transform: rotate(180deg);
}

.multiselect-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.multiselect-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    min-width: 200px;
}

.multiselect-dropdown.open .multiselect-menu {
    display: block;
}

.multiselect-search {
    padding: 8px;
    border-bottom: 1px solid #e5e9f2;
}

.multiselect-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}

.multiselect-search input:focus {
    border-color: var(--livi-green);
}

.multiselect-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
}

.multiselect-option:hover {
    background: rgba(68, 136, 62, 0.05);
}

.multiselect-option.hidden {
    display: none;
}

.multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--livi-green);
    cursor: pointer;
    flex-shrink: 0;
}

.multiselect-option span {
    font-size: 12px;
    color: #526484;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-actions {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-top: 1px solid #e5e9f2;
    gap: 8px;
}

.multiselect-clear,
.multiselect-apply {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.multiselect-clear {
    background: #f5f6fa;
    color: #526484;
    flex: 1;
}

.multiselect-clear:hover {
    background: #e5e9f2;
}

.multiselect-apply {
    background: var(--livi-green);
    color: #fff;
    flex: 1;
}

.multiselect-apply:hover {
    background: var(--livi-green-hover);
}


/* ==========================================================================
   Issue Breakdown Page Styles
   Follows Livi Lemphakatsi CI - Government Institutional Design
   ========================================================================== */

/* Simple KPI Cards - Clean CI-Compliant Design */
.kpi-simple-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #E5E7EB;
    transition: box-shadow 0.2s ease;
}

.kpi-simple-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi-simple-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}

.kpi-simple-icon .icon {
    font-size: 1.5rem;
}

/* Icon color variants using CI colors */
.kpi-simple-icon.kpi-icon-green {
    background: rgba(68, 136, 62, 0.1);
    color: var(--livi-green);
}

.kpi-simple-icon.kpi-icon-gold {
    background: rgba(255, 199, 44, 0.15);
    color: var(--livi-dark-gold);
}

.kpi-simple-icon.kpi-icon-orange {
    background: rgba(238, 148, 51, 0.12);
    color: var(--livi-orange);
}

.kpi-simple-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-simple-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--livi-charcoal);
    line-height: 1.2;
}

.kpi-simple-label {
    font-size: 0.75rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    margin-top: 0.125rem;
}

/* Responsive */
@media (max-width: 575.98px) {
    .kpi-simple-card {
        padding: 1rem;
    }

    .kpi-simple-icon {
        width: 40px;
        height: 40px;
    }

    .kpi-simple-icon .icon {
        font-size: 1.25rem;
    }

    .kpi-simple-value {
        font-size: 1.5rem;
    }
}

/* Service Category Accordion */
.breakdown-accordion {
    border: none;
}

.breakdown-accordion-item {
    border: none;
    border-bottom: 1px solid #E5E7EB;
}

.breakdown-accordion-item:last-child {
    border-bottom: none;
}

.breakdown-accordion-item .accordion-button {
    padding: 1rem 1.5rem;
    background: #fff;
    box-shadow: none;
    border: none;
}

.breakdown-accordion-item .accordion-button:not(.collapsed) {
    background: #FAFAFA;
    color: var(--livi-charcoal);
    box-shadow: none;
}

.breakdown-accordion-item .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.breakdown-accordion-item .accordion-button::after {
    background-size: 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.breakdown-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 0.5rem;
}

.breakdown-accordion-body {
    padding: 0 1.5rem 1.25rem;
    background: #FAFAFA;
}

.breakdown-service-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.breakdown-service-indicator {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--livi-green);
}

.breakdown-service-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--livi-charcoal);
}

.breakdown-service-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.breakdown-service-total {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--livi-green);
}

.breakdown-service-percent {
    font-size: 0.6875rem;
    color: #9CA3AF;
    background: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid #E5E7EB;
}

.breakdown-service-count-badge {
    font-size: 0.6875rem;
    color: var(--livi-green);
    background: rgba(68, 136, 62, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* Issue List within Accordion */
.breakdown-issue-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.breakdown-issue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    transition: all 0.15s ease;
}

.breakdown-issue-item:hover {
    background: #fff;
    border-color: var(--livi-green);
    box-shadow: 0 2px 4px rgba(68, 136, 62, 0.1);
}

.breakdown-issue-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--livi-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.breakdown-issue-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.breakdown-issue-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--livi-green);
    min-width: 40px;
    text-align: right;
}

.breakdown-issue-mini-bar {
    width: 80px;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-issue-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--livi-green) 0%, var(--livi-gold) 100%);
    transition: width 0.5s ease;
}

/* Breakdown Table Elements - Used with cogta-data-table */
.breakdown-rank-number {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #9CA3AF;
    min-width: 24px;
    text-align: center;
}

.breakdown-row-bar {
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    min-width: 100px;
}

.breakdown-row-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--livi-green) 0%, var(--livi-gold) 100%);
    transition: width 0.5s ease;
}

/* Empty State - Institutional Pattern */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #9CA3AF;
}

.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--livi-gold);
}

.empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

/* Responsive - Issue Breakdown Page */
@media (max-width: 767.98px) {
    .breakdown-summary-value {
        font-size: 2rem;
    }

    .breakdown-service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .breakdown-issue-item {
        padding: 0.5rem 0.625rem;
    }

    .breakdown-issue-title {
        max-width: 45%;
        font-size: 0.8125rem;
    }

    .breakdown-issue-mini-bar {
        width: 60px;
    }

    /* Hide distribution bar column on mobile - scoped to breakdown page */
    .breakdown-row-bar {
        display: none;
    }
}


/* ==========================================================================
   Issue Statistics Badges - Reusable List Components
   CI-compliant badge styles for issue status columns
   ========================================================================== */

.issue-stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

/* Total Issues - Heritage Gold */
.issue-stat-total {
    background: rgba(172, 132, 0, 0.12);
    color: #AC8400;
}

/* Open - Warm Orange */
.issue-stat-open {
    background: rgba(238, 148, 51, 0.12);
    color: #EE9433;
}

/* In Progress - Sunrise Gold */
.issue-stat-in-progress {
    background: rgba(255, 199, 44, 0.15);
    color: #AC8400;
}

/* Resolved - Government Green */
.issue-stat-resolved {
    background: rgba(68, 136, 62, 0.12);
    color: #44883E;
}

/* Closed - Charcoal */
.issue-stat-closed {
    background: rgba(44, 42, 41, 0.08);
    color: #2C2A29;
}


/* ==========================================================================
   END OF THEME FILE

   For app-specific styles (layouts, custom components, page-specific designs),
   see: system.css
   ========================================================================== */