/* ============================================================================
   CAD.Web Centralized Theme
   ============================================================================
   This file contains CSS custom properties (variables) for centralized theming.
   Customize these variables to change colors across the entire application.
   
   Usage: Reference this file in all layout files before other custom CSS.
   Variables can be overridden by defining them in a more specific scope.
   ============================================================================ */

:root {
/* =========================================================================
   PRIMARY COLORS (Orange Theme - matching CAD.MauiAlert)
   ========================================================================= */
--theme-primary: #FF6300;
--theme-primary-hover: #E55900;
--theme-primary-light: #FF8C40;
--theme-primary-dark: #CC4F00;
    
--theme-secondary: #64748B;
--theme-secondary-hover: #475569;
--theme-secondary-light: #94A3B8;
--theme-secondary-dark: #334155;
    
    /* =========================================================================
       SEMANTIC COLORS
       ========================================================================= */
    --theme-success: #74BE45;
    --theme-success-hover: #5fa938;
    --theme-success-light: #AECA3C;
    --theme-success-dark: #4d8a2e;
    
    --theme-info: #38BDF8;
    --theme-info-hover: #0EA5E9;
    --theme-info-light: #7DD3FC;
    --theme-info-dark: #0284C7;
    
    --theme-warning: #FABF26;
    --theme-warning-hover: #E5AB1C;
    --theme-warning-light: #fcd062;
    --theme-warning-dark: #d9a31e;
    
    --theme-danger: #D6313F;
    --theme-danger-hover: #b52833;
    --theme-danger-light: #e06570;
    --theme-danger-dark: #a8242e;
    
    /* =========================================================================
       TEXT COLORS
       ========================================================================= */
    --theme-text-primary: #333333;
    --theme-text-secondary: #666666;
    --theme-text-muted: #999999;
    --theme-text-light: #ffffff;
    --theme-text-dark: #000000;
    
    /* =========================================================================
       BACKGROUND COLORS (Orange Theme - matching CAD.MauiAlert)
       ========================================================================= */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #FFF7F0;
    --theme-bg-tertiary: #FFEAD6;
    --theme-bg-dark: #993B00;
    --theme-bg-darker: #7A2F00;
    
    /* =========================================================================
       BORDER COLORS (Orange Theme - matching CAD.MauiAlert)
       ========================================================================= */
    --theme-border-light: #FFEAD6;
    --theme-border-medium: #FFCFA3;
    --theme-border-dark: #FFB573;
    
    /* =========================================================================
       HEADER / NAVIGATION (Orange Theme - matching CAD.MauiAlert)
       ========================================================================= */
    --theme-header-bg: #FF6300;
    --theme-header-text: #ffffff;
    --theme-header-hover: #CC4F00;
    
    --theme-sidebar-bg: #993B00;
    --theme-sidebar-text: #FFEAD6;
    --theme-sidebar-hover: #7A2F00;
    --theme-sidebar-active: #FFB380;
    
    --theme-navbar-bg: #FF6300;
    --theme-navbar-text: #ffffff;
    --theme-navbar-hover: #CC4F00;
    
    /* =========================================================================
       FORM CONTROLS
       ========================================================================= */
    --theme-input-bg: #ffffff;
    --theme-input-border: #FFCFA3;
    --theme-input-focus-border: #FF6300;
    --theme-input-focus-shadow: rgba(255, 99, 0, 0.25);
    --theme-input-placeholder: #999999;
    --theme-input-disabled-bg: #FFF7F0;
    
    --theme-select-bg: #ffffff;
    --theme-select-border: #FFCFA3;
    --theme-select-focus-border: #FF6300;
    
    --theme-checkbox-checked: #FF6300;
    --theme-radio-checked: #FF6300;
    
    /* =========================================================================
       BUTTONS
       ========================================================================= */
    --theme-btn-default-bg: #e5e5e5;
    --theme-btn-default-text: #333333;
    --theme-btn-default-hover: #d5d5d5;
    
    --theme-btn-primary-bg: var(--theme-primary);
    --theme-btn-primary-text: #ffffff;
    --theme-btn-primary-hover: var(--theme-primary-hover);
    
    --theme-btn-success-bg: var(--theme-success);
    --theme-btn-success-text: #ffffff;
    --theme-btn-success-hover: var(--theme-success-hover);
    
    --theme-btn-info-bg: var(--theme-info);
    --theme-btn-info-text: #ffffff;
    --theme-btn-info-hover: var(--theme-info-hover);
    
    --theme-btn-warning-bg: var(--theme-warning);
    --theme-btn-warning-text: #ffffff;
    --theme-btn-warning-hover: var(--theme-warning-hover);
    
    --theme-btn-danger-bg: var(--theme-danger);
    --theme-btn-danger-text: #ffffff;
    --theme-btn-danger-hover: var(--theme-danger-hover);
    
    /* =========================================================================
       TABLES
       ========================================================================= */
    --theme-table-header-bg: #f5f5f5;
    --theme-table-header-text: #333333;
    --theme-table-border: #e5e5e5;
    --theme-table-row-hover: #f9f9f9;
    --theme-table-row-striped: #fafafa;
    --theme-table-row-selected: rgba(255, 99, 0, 0.1);
    
    /* =========================================================================
       MODALS
       ========================================================================= */
    --theme-modal-backdrop: rgba(0, 0, 0, 0.5);
    --theme-modal-bg: #ffffff;
    --theme-modal-header-bg: #FF6300;
    --theme-modal-header-text: #ffffff;
    --theme-modal-border: #e5e5e5;
    --theme-modal-footer-bg: #f5f5f5;
    --theme-modal-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    
    /* =========================================================================
       CARDS / PANELS / PORTLETS
       ========================================================================= */
    --theme-card-bg: #ffffff;
    --theme-card-border: #e5e5e5;
    --theme-card-header-bg: #f5f5f5;
    --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    
    --theme-portlet-title-bg: #FF6300;
    --theme-portlet-title-text: #ffffff;
    
    /* =========================================================================
       ALERTS / NOTIFICATIONS
       ========================================================================= */
    --theme-alert-success-bg: #dff0d8;
    --theme-alert-success-text: #3c763d;
    --theme-alert-success-border: #d6e9c6;
    
    --theme-alert-info-bg: #d9edf7;
    --theme-alert-info-text: #31708f;
    --theme-alert-info-border: #bce8f1;
    
    --theme-alert-warning-bg: #fcf8e3;
    --theme-alert-warning-text: #8a6d3b;
    --theme-alert-warning-border: #faebcc;
    
    --theme-alert-danger-bg: #f2dede;
    --theme-alert-danger-text: #a94442;
    --theme-alert-danger-border: #ebccd1;
    
    /* =========================================================================
       BADGES / LABELS
       ========================================================================= */
    --theme-badge-default-bg: #999999;
    --theme-badge-primary-bg: var(--theme-primary);
    --theme-badge-success-bg: var(--theme-success);
    --theme-badge-info-bg: var(--theme-info);
    --theme-badge-warning-bg: var(--theme-warning);
    --theme-badge-danger-bg: var(--theme-danger);
    
    /* =========================================================================
       VALIDATION
       ========================================================================= */
    --theme-validation-error: #e80c4d;
    --theme-validation-success: #26c281;
    
    /* =========================================================================
       LINKS (Orange Theme - matching CAD.MauiAlert)
       ========================================================================= */
    --theme-link-color: #CC4F00;
    --theme-link-hover: #993B00;
    --theme-link-visited: #E55900;
    
    /* =========================================================================
       SHADOWS
       ========================================================================= */
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --theme-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
    --theme-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --theme-border-radius-sm: 2px;
    --theme-border-radius: 4px;
    --theme-border-radius-lg: 6px;
    
    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --theme-transition-fast: 0.15s ease-in-out;
    --theme-transition-normal: 0.3s ease-in-out;
    --theme-transition-slow: 0.5s ease-in-out;
    
    /* =========================================================================
       Z-INDEX LAYERS
       ========================================================================= */
    --theme-z-dropdown: 1000;
    --theme-z-sticky: 1020;
    --theme-z-fixed: 1030;
    --theme-z-modal-backdrop: 1040;
    --theme-z-modal: 1050;
    --theme-z-popover: 1060;
    --theme-z-tooltip: 1070;
}

/* ============================================================================
   THEME APPLICATION STYLES
   ============================================================================
   These classes apply theme variables to common UI elements.
   ============================================================================ */

/* Links */
a {
    color: var(--theme-link-color);
    transition: color var(--theme-transition-fast);
}

a:hover,
a:focus {
    color: var(--theme-link-hover);
}

/* Form Controls */
.form-control {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    transition: border-color var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.form-control:focus {
    border-color: var(--theme-input-focus-border);
    box-shadow: 0 0 0 0.2rem var(--theme-input-focus-shadow);
}

.form-control::placeholder {
    color: var(--theme-input-placeholder);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--theme-input-disabled-bg);
}

/* Buttons - Primary */
.btn-primary {
    background-color: var(--theme-btn-primary-bg);
    border-color: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--theme-btn-primary-hover);
    border-color: var(--theme-btn-primary-hover);
}

/* Buttons - Success */
.btn-success {
    background-color: var(--theme-btn-success-bg);
    border-color: var(--theme-btn-success-bg);
    color: var(--theme-btn-success-text);
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--theme-btn-success-hover);
    border-color: var(--theme-btn-success-hover);
}

/* Buttons - Info */
.btn-info {
    background-color: var(--theme-btn-info-bg);
    border-color: var(--theme-btn-info-bg);
    color: var(--theme-btn-info-text);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--theme-btn-info-hover);
    border-color: var(--theme-btn-info-hover);
}

/* Buttons - Warning */
.btn-warning {
    background-color: var(--theme-btn-warning-bg);
    border-color: var(--theme-btn-warning-bg);
    color: var(--theme-btn-warning-text);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--theme-btn-warning-hover);
    border-color: var(--theme-btn-warning-hover);
}

/* Buttons - Danger */
.btn-danger {
    background-color: var(--theme-btn-danger-bg);
    border-color: var(--theme-btn-danger-bg);
    color: var(--theme-btn-danger-text);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--theme-btn-danger-hover);
    border-color: var(--theme-btn-danger-hover);
}

/* Buttons - Default */
.btn-default {
    background-color: var(--theme-btn-default-bg);
    border-color: var(--theme-btn-default-bg);
    color: var(--theme-btn-default-text);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--theme-btn-default-hover);
    border-color: var(--theme-btn-default-hover);
}

/* Modal Theming */
.modal-backdrop {
    background-color: var(--theme-modal-backdrop);
}

.modal-content {
    background-color: var(--theme-modal-bg);
    border-color: var(--theme-modal-border);
    box-shadow: var(--theme-modal-shadow);
}

.modal-header {
    background-color: var(--theme-modal-header-bg);
    color: var(--theme-modal-header-text);
    border-bottom-color: var(--theme-modal-border);
}

.modal-header .close {
    color: var(--theme-modal-header-text);
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-footer {
    background-color: var(--theme-modal-footer-bg);
    border-top-color: var(--theme-modal-border);
}

/* Table Theming */
.table > thead > tr > th {
    background-color: var(--theme-table-header-bg);
    color: var(--theme-table-header-text);
    border-color: var(--theme-table-border);
}

.table > tbody > tr > td {
    border-color: var(--theme-table-border);
}

.table-hover > tbody > tr:hover {
    background-color: var(--theme-table-row-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--theme-table-row-striped);
}

/* Alert Theming */
.alert-success {
    background-color: var(--theme-alert-success-bg);
    border-color: var(--theme-alert-success-border);
    color: var(--theme-alert-success-text);
}

.alert-info {
    background-color: var(--theme-alert-info-bg);
    border-color: var(--theme-alert-info-border);
    color: var(--theme-alert-info-text);
}

.alert-warning {
    background-color: var(--theme-alert-warning-bg);
    border-color: var(--theme-alert-warning-border);
    color: var(--theme-alert-warning-text);
}

.alert-danger {
    background-color: var(--theme-alert-danger-bg);
    border-color: var(--theme-alert-danger-border);
    color: var(--theme-alert-danger-text);
}

/* Card / Panel Theming */
.panel,
.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    box-shadow: var(--theme-card-shadow);
}

.panel-heading,
.card-header {
    background-color: var(--theme-card-header-bg);
}

/* Portlet Theming */
.portlet > .portlet-title {
    background-color: var(--theme-portlet-title-bg);
    color: var(--theme-portlet-title-text);
}

/* Badge Theming */
.badge-default,
.label-default {
    background-color: var(--theme-badge-default-bg);
}

.badge-primary,
.label-primary {
    background-color: var(--theme-badge-primary-bg);
}

.badge-success,
.label-success {
    background-color: var(--theme-badge-success-bg);
}

.badge-info,
.label-info {
    background-color: var(--theme-badge-info-bg);
}

.badge-warning,
.label-warning {
    background-color: var(--theme-badge-warning-bg);
}

.badge-danger,
.label-danger {
    background-color: var(--theme-badge-danger-bg);
}

/* Validation Theming */
.field-validation-error {
    color: var(--theme-validation-error);
}

.validation-summary-errors {
    color: var(--theme-validation-error);
}

.input-validation-error {
    border-color: var(--theme-validation-error) !important;
}

/* Header Theming */
.page-header,
.page-header-top {
    background-color: var(--theme-header-bg);
}

.page-header .page-header-menu {
    background-color: var(--theme-navbar-bg);
}

/* Sidebar Theming */
.page-sidebar {
    background-color: var(--theme-sidebar-bg);
}

.page-sidebar .page-sidebar-menu > li > a {
    color: var(--theme-sidebar-text);
}

.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li.active > a {
    background-color: var(--theme-sidebar-hover);
}

.page-sidebar .page-sidebar-menu > li.active > a {
    border-left-color: var(--theme-sidebar-active);
}

/* ============================================================================
   EXTENDED THEME VARIABLES FOR PAGE COMPONENTS
   ============================================================================ */

:root {
/* =========================================================================
   GRID / DATA TABLE EXTENDED COLORS (Orange Theme)
   ========================================================================= */
--theme-grid-border: #FFEAD6;
--theme-grid-header-bg: linear-gradient(135deg, #FFF7F0 0%, #FFEAD6 100%);
--theme-grid-header-border: var(--theme-primary);
--theme-grid-header-text: #993B00;
--theme-grid-row-hover: #FFF7F0;
--theme-grid-row-even: #FFFBF7;
--theme-grid-cell-text: #475569;
--theme-grid-cell-border: #FFEAD6;
    
    /* =========================================================================
       ACTION BUTTON COLORS (Orange Theme)
       ========================================================================= */
    --theme-action-btn-bg: #fff;
    --theme-action-btn-border: #FFEAD6;
    --theme-action-btn-text: #64748b;
    
    --theme-action-view-bg: linear-gradient(135deg, #FF6300 0%, #FF8C40 100%);
    --theme-action-view-border: #FF6300;
    
    --theme-action-edit-bg: linear-gradient(135deg, #CC4F00 0%, #FF6300 100%);
    --theme-action-edit-border: #CC4F00;
    
    --theme-action-delete-bg: linear-gradient(135deg, #D6313F 0%, #e06570 100%);
    --theme-action-delete-border: #D6313F;
    
    --theme-action-logs-bg: linear-gradient(135deg, #74BE45 0%, #AECA3C 100%);
    --theme-action-logs-border: #74BE45;
    
    /* =========================================================================
       STATUS ROW COLORS (ALERTS, INCIDENTS, ETC.)
       ========================================================================= */
    /* Pending Status */
    --theme-status-pending-bg: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    --theme-status-pending-border: #ef4444;
    --theme-status-pending-text: #991b1b;
    
    /* Ongoing/Active Status */
    --theme-status-ongoing-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --theme-status-ongoing-border: #22c55e;
    --theme-status-ongoing-text: #166534;
    
    /* Rejected/Warning Status */
    --theme-status-rejected-bg: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    --theme-status-rejected-border: #eab308;
    --theme-status-rejected-text: #854d0e;
    
    /* Done/Completed Status */
    --theme-status-done-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --theme-status-done-border: #3b82f6;
    --theme-status-done-text: #1e40af;
    
    /* =========================================================================
       CARD VIEW COLORS (Orange Theme)
       ========================================================================= */
    --theme-card-view-bg: #FFF7F0;
    --theme-card-item-bg: #fff;
    --theme-card-item-border: #FFEAD6;
    --theme-card-item-accent: var(--theme-primary);
    --theme-card-title-text: #993B00;
    --theme-card-footer-bg: #FFF7F0;
    
    /* =========================================================================
       TOGGLE / TAB COLORS (Orange Theme)
       ========================================================================= */
    --theme-toggle-bg: #FFEAD6;
    --theme-toggle-active-bg: var(--theme-primary);
    --theme-toggle-active-text: #fff;
    --theme-toggle-text: #993B00;
    
    /* =========================================================================
       PROFILE IMAGE COLORS (Orange Theme)
       ========================================================================= */
    --theme-profile-img-border: #FFEAD6;
    --theme-profile-img-hover: var(--theme-primary);
    
    /* =========================================================================
       PAGINATION COLORS (Orange Theme)
       ========================================================================= */
    --theme-pagination-bg: #fff;
    --theme-pagination-border: #FFEAD6;
    --theme-pagination-text: #993B00;
    --theme-pagination-active-bg: var(--theme-primary);
    --theme-pagination-active-text: #fff;
    --theme-pagination-info-bg: #FFF7F0;
}

/* ============================================================================
   GRID COMPONENT STYLES
   ============================================================================ */

/* Kendo Grid Theming */
.k-grid {
    border-radius: 0.75rem;
    overflow: visible;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-grid-border);
}

.k-grid .k-grid-header {
    background: var(--theme-grid-header-bg);
    border-bottom: 2px solid var(--theme-grid-header-border);
    padding-right: 0 !important;
    border-radius: 0.75rem 0.75rem 0 0;
}

.k-grid .k-grid-header th {
    color: var(--theme-grid-header-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 1rem 0.875rem;
}

.k-grid .k-grid-content {
    background: var(--theme-bg-primary);
    overflow: visible;
}

.k-grid tbody {
    position: relative;
}

.k-grid tbody tr {
    transition: all 0.25s ease;
    position: relative;
}

.k-grid tbody tr:hover {
    background-color: var(--theme-grid-row-hover) !important;
    z-index: 10;
}

.k-grid tbody td {
    padding: 1rem 0.875rem;
    border-bottom: 1px solid var(--theme-grid-cell-border);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--theme-grid-cell-text);
}

/* Allow dropdown overflow in action columns */
.k-grid tbody td:last-child {
    overflow: visible;
    position: relative;
}

/* Ensure row with open dropdown has higher z-index */
.k-grid tbody tr:has(.btn-group.open) {
    z-index: 100;
}

.k-grid tbody tr:nth-child(even) {
    background-color: var(--theme-grid-row-even);
}

/* ============================================================================
   DROPDOWN MENU FIX FOR KENDO GRID
   ============================================================================
   Ensures dropdown menus are not clipped by grid container overflow
   ============================================================================ */

/* Bootstrap dropdown menu inside Kendo Grid */
.k-grid .btn-group {
    position: static;
}

.k-grid .btn-group.open {
    position: relative;
}

.k-grid .btn-group .dropdown-menu {
    position: absolute;
    z-index: 9999;
    min-width: 180px;
    background-color: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-shadow-lg);
    padding: 0.5rem 0;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 2px;
}

.k-grid .btn-group .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--theme-text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.k-grid .btn-group .dropdown-menu > li > a:hover {
    background-color: var(--theme-primary);
    color: var(--theme-text-light);
}

.k-grid .btn-group .dropdown-menu > li > a i {
    width: 1rem;
    text-align: center;
}

.k-grid .btn-group .dropdown-menu > li.divider {
    height: 1px;
    margin: 0.5rem 0;
    background-color: var(--theme-border-light);
}

/* Dropdown trigger button styling */
.k-grid .btn-group > .btn {
    background: var(--theme-primary);
    color: var(--theme-text-light);
    border: none;
    border-radius: var(--theme-border-radius);
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.k-grid .btn-group > .btn:hover {
    background: var(--theme-primary-hover);
}

/* ============================================================================
   ACTION BUTTON STYLES
   ============================================================================ */

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--theme-action-btn-border);
    background: var(--theme-action-btn-bg);
    color: var(--theme-action-btn-text);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.action-btn:hover {
    transform: translateY(-1px);
}

.action-btn.view:hover {
    background: var(--theme-action-view-bg);
    color: var(--theme-text-light);
    border-color: var(--theme-action-view-border);
}

.action-btn.edit:hover {
    background: var(--theme-action-edit-bg);
    color: var(--theme-text-light);
    border-color: var(--theme-action-edit-border);
}

.action-btn.delete:hover {
    background: var(--theme-action-delete-bg);
    color: var(--theme-text-light);
    border-color: var(--theme-action-delete-border);
}

.action-btn.logs:hover {
    background: var(--theme-action-logs-bg);
    color: var(--theme-text-light);
    border-color: var(--theme-action-logs-border);
}

/* ============================================================================
   STATUS ROW STYLES
   ============================================================================ */

.pendingAlert,
.status-pending {
    background: var(--theme-status-pending-bg) !important;
    border-left: 4px solid var(--theme-status-pending-border) !important;
}

.pendingAlert td,
.status-pending td {
    color: var(--theme-status-pending-text) !important;
}

.ongoingAlert,
.status-ongoing,
.status-active {
    background: var(--theme-status-ongoing-bg) !important;
    border-left: 4px solid var(--theme-status-ongoing-border) !important;
}

.ongoingAlert td,
.status-ongoing td,
.status-active td {
    color: var(--theme-status-ongoing-text) !important;
}

.rejectedAlert,
.status-rejected,
.status-warning {
    background: var(--theme-status-rejected-bg) !important;
    border-left: 4px solid var(--theme-status-rejected-border) !important;
}

.rejectedAlert td,
.status-rejected td,
.status-warning td {
    color: var(--theme-status-rejected-text) !important;
}

.doneAlert,
.status-done,
.status-completed {
    background: var(--theme-status-done-bg) !important;
    border-left: 4px solid var(--theme-status-done-border) !important;
}

.doneAlert td,
.status-done td,
.status-completed td {
    color: var(--theme-status-done-text) !important;
}

/* ============================================================================
   CARD VIEW STYLES
   ============================================================================ */

.grid-card {
    background: var(--theme-bg-primary);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.view-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--theme-grid-header-bg);
    border-bottom: 1px solid var(--theme-grid-border);
}

.view-toggle-buttons {
    display: flex;
    gap: 0.25rem;
    background: var(--theme-toggle-bg);
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.view-toggle-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--theme-toggle-text);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-toggle-btn:hover {
    color: var(--theme-text-secondary);
}

.view-toggle-btn.active {
    background: var(--theme-toggle-active-bg);
    color: var(--theme-toggle-active-text);
}

.results-count {
    font-size: 0.875rem;
    color: var(--theme-toggle-text);
}

.results-count strong {
    color: var(--theme-text-primary);
}

.card-view-container {
    display: none;
    padding: 1rem;
    background: var(--theme-card-view-bg);
}

.card-view-container.active {
    display: block;
}

.item-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.item-card {
    background: var(--theme-card-item-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-card-item-border);
    border-left: 4px solid var(--theme-card-item-accent);
}

.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
}

.item-card-body {
    padding: 1rem;
}

.item-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-card-title-text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-card-title i {
    color: var(--theme-primary);
}

.item-card-footer {
    padding: 0.75rem 1rem;
    background: var(--theme-card-footer-bg);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--theme-grid-cell-border);
}

.item-card-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-card-item-border);
    background: var(--theme-card-item-bg);
    color: var(--theme-toggle-text);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
}

.item-card-btn:hover {
    background: var(--theme-primary);
    color: var(--theme-text-light);
    border-color: var(--theme-primary);
}

.item-card-btn.delete:hover {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
}

/* ============================================================================
   PAGINATION STYLES
   ============================================================================ */

.card-view-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--theme-pagination-bg);
    border-radius: 0.5rem;
}

.card-view-pagination button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-pagination-border);
    background: var(--theme-pagination-bg);
    color: var(--theme-pagination-text);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.card-view-pagination button:hover:not(:disabled) {
    background: var(--theme-pagination-active-bg);
    color: var(--theme-pagination-active-text);
    border-color: var(--theme-pagination-active-bg);
}

.card-view-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-view-pagination .page-info {
    padding: 0.5rem 1rem;
    background: var(--theme-pagination-info-bg);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--theme-pagination-text);
}

/* ============================================================================
   PROFILE IMAGE STYLES
   ============================================================================ */

.imgProfile {
    cursor: pointer;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 2px solid var(--theme-profile-img-border);
    transition: all 0.2s;
}

.imgProfile:hover {
    border-color: var(--theme-profile-img-hover);
    transform: scale(1.05);
}

/* ============================================================================
   GRID VIEW TOGGLE STYLES
   ============================================================================ */

.grid-view-container {
    display: block;
    overflow: visible;
    position: relative;
}

.grid-view-container.hidden {
    display: none;
}

/* ============================================================================
   PORTLET / PANEL EXTENDED STYLES
   ============================================================================ */

.portlet {
    border-radius: 0.5rem;
    box-shadow: var(--theme-shadow-md);
    border: 1px solid var(--theme-border-light);
    background: var(--theme-bg-primary);
}

.portlet > .portlet-title {
    background: var(--theme-portlet-title-bg);
    color: var(--theme-portlet-title-text);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 1rem;
}

.portlet > .portlet-title > .caption {
    color: var(--theme-portlet-title-text);
}

.portlet > .portlet-title > .caption > i {
    color: var(--theme-portlet-title-text);
}

.portlet > .portlet-body {
    padding: 1rem;
}

/* ============================================================================
   HEADER ACTIONS WRAPPER
   ============================================================================ */

.header-actions-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================================================
   SELECT2 THEMING (Green Theme)
   ============================================================================ */

/* Ensure Select2 container takes full width */
.select2-container {
    width: 100% !important;
    min-width: 100px;
}

/* Select2 Selection Box */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    border-radius: var(--theme-border-radius);
    min-height: 34px;
    transition: border-color var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--theme-text-primary);
    line-height: 32px;
    padding-left: 12px;
    padding-right: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--theme-input-placeholder);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--theme-text-secondary) transparent transparent transparent;
}

/* Focus State */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--theme-input-focus-border);
    box-shadow: 0 0 0 0.2rem var(--theme-input-focus-shadow);
    outline: none;
}

/* Dropdown */
.select2-container--default .select2-dropdown {
    background-color: var(--theme-bg-primary);
    border: 1px solid var(--theme-input-focus-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-shadow-md);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--theme-input-border);
    border-radius: var(--theme-border-radius-sm);
    padding: 6px 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--theme-input-focus-border);
    outline: none;
}

/* Results */
.select2-container--default .select2-results__option {
    padding: 8px 12px;
    color: var(--theme-text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary);
    color: var(--theme-text-light);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-primary);
}

/* Multiple Selection Tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-primary);
    border: none;
    border-radius: var(--theme-border-radius-sm);
    color: var(--theme-text-light);
    padding: 4px 8px;
    margin: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--theme-text-light);
    margin-right: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--theme-danger-light);
}

/* Disabled State */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--theme-input-disabled-bg);
    cursor: not-allowed;
}

/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--theme-text-muted);
    margin-right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--theme-danger);
}

/* ============================================================================
   KENDO UI THEMING (Green Theme)
   ============================================================================ */

/* Kendo Pager - Compact layout */
.k-pager-wrap,
.k-grid-pager {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-grid-border) !important;
    padding: 0.5rem 1rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Reset table-based layout */
.k-pager-wrap table {
    display: inline !important;
    width: auto !important;
}

.k-pager-wrap table td {
    display: inline !important;
    padding: 0 2px !important;
    border: none !important;
    width: auto !important;
}

/* Navigation buttons (first, prev, next, last) */
.k-pager-wrap .k-pager-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--theme-grid-border) !important;
    border-radius: var(--theme-border-radius) !important;
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
}

.k-pager-wrap .k-pager-nav:hover {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
    border-color: var(--theme-primary) !important;
}

/* HIDE the numeric input wrapper - this causes duplicate page numbers */
.k-pager-wrap .k-pager-numbers-wrap {
    display: none !important;
}

/* Also hide numeric input if it exists */
.k-pager-wrap .k-pager-input {
    display: none !important;
}

/* Hide current page indicator that duplicates page numbers */
.k-pager-wrap .k-current-page {
    display: none !important;
}

/* Hide dropdown for page selection if it duplicates */
.k-pager-wrap .k-dropdown,
.k-pager-wrap .k-dropdownlist:not(.k-pager-sizes .k-dropdownlist) {
    display: none !important;
}

/* Hide any button that shows current page number outside of k-pager-numbers */
.k-pager-wrap > .k-link:not(.k-pager-nav):not(.k-pager-numbers .k-link) {
    display: none !important;
}

/* Hide state-selected buttons outside of k-pager-numbers (duplicate current page) */
.k-pager-wrap > .k-state-selected:not(.k-pager-numbers .k-state-selected) {
    display: none !important;
}

/* Page numbers list */
.k-pager-wrap .k-pager-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    list-style: none !important;
}

.k-pager-numbers li {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Page number links */
.k-pager-numbers .k-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--theme-grid-border) !important;
    border-radius: var(--theme-border-radius) !important;
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
}

.k-pager-numbers .k-link:hover {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
    border-color: var(--theme-primary) !important;
}

/* Selected page number */
.k-pager-numbers .k-state-selected,
.k-pager-numbers .k-link.k-state-selected {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
    border-color: var(--theme-primary) !important;
}

/* Pager info (showing X of Y items) - BIGGER FONT */
.k-pager-wrap .k-pager-info {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
    border-radius: var(--theme-border-radius) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

/* Page size selector */
.k-pager-wrap .k-pager-sizes {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 4px !important;
}

/* Disabled navigation buttons */
.k-pager-wrap .k-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Kendo Pager Refresh Button */
.k-pager-refresh,
.k-grid .k-pager-refresh {
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-primary);
    border: 1px solid var(--theme-grid-border);
    border-radius: var(--theme-border-radius);
    padding: 0.375rem 0.75rem;
    min-width: 2rem;
    min-height: 2rem;
}

.k-pager-refresh:hover {
    background-color: var(--theme-primary);
    color: var(--theme-text-light);
    border-color: var(--theme-primary);
}

/* Ensure Kendo icons are visible */
.k-icon,
.k-i-reload,
.k-i-refresh,
.k-pager-refresh .k-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Kendo icon font fallback - refresh icon */
.k-i-reload::before,
.k-i-refresh::before {
    content: "\e117";
    font-family: "WebComponentsIcons", monospace;
}

/* If using Font Awesome as fallback */
.k-pager-refresh:empty::before,
.k-pager-refresh .k-icon:empty::before {
    content: "\f021";
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
}

/* Kendo Toolbar */
.k-toolbar {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-grid-border);
    padding: 0.5rem;
}

.k-toolbar .k-button {
    background-color: var(--theme-bg-primary);
    border-color: var(--theme-grid-border);
    color: var(--theme-text-primary);
}

.k-toolbar .k-button:hover {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-text-light);
}

/* Kendo DropDownList */
.k-dropdown .k-dropdown-wrap,
.k-dropdownlist .k-input-inner {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
}

.k-dropdown .k-dropdown-wrap:hover,
.k-dropdown .k-dropdown-wrap.k-state-focused,
.k-dropdownlist:hover,
.k-dropdownlist.k-focus {
    border-color: var(--theme-input-focus-border);
    box-shadow: 0 0 0 0.2rem var(--theme-input-focus-shadow);
}

/* Kendo Popup/List */
.k-popup,
.k-list-container {
    background-color: var(--theme-bg-primary);
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-shadow-md);
}

.k-list .k-item:hover,
.k-list .k-item.k-state-hover {
    background-color: var(--theme-primary);
    color: var(--theme-text-light);
}

.k-list .k-item.k-state-selected {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-primary);
}

/* ============================================================================
   CUSTOM MODAL SYSTEM (Green Theme)
   ============================================================================
   Replacement for Bootstrap modals to avoid issues with modals not showing
   on second attempt or leaving backdrops behind.
   ============================================================================ */

/* Modal Overlay */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 1rem;
    box-sizing: border-box;
}

.custom-modal-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Modal Content Container */
.custom-modal-content {
    background: var(--theme-bg-primary);
    border-radius: 0.5rem;
    position: relative;
    max-height: 90vh;
    overflow: auto;
    transform: translateY(-20px);
    transition: transform 0.2s ease;
    box-shadow: var(--theme-modal-shadow);
    margin: 0 auto;
}

.custom-modal-overlay.show .custom-modal-content {
    transform: translateY(0);
}

/* Reset Bootstrap modal styles that interfere with centering */
.custom-modal-overlay .modal-header,
.custom-modal-overlay .modal-body,
.custom-modal-overlay .modal-footer {
    margin: 0;
    position: static;
}

.custom-modal-overlay .custom-modal-inner {
    width: 100%;
}

/* Modal Size Variants */
.custom-modal-content.modal-sm {
    width: 400px;
    max-width: calc(100vw - 2rem);
}

.custom-modal-content.modal-md {
    width: 600px;
    max-width: calc(100vw - 2rem);
}

.custom-modal-content.modal-lg {
    width: 900px;
    max-width: calc(100vw - 2rem);
}

.custom-modal-content.modal-xl {
    width: 1200px;
    max-width: calc(100vw - 2rem);
}

.custom-modal-content.modal-full {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
}

/* Modal Header */
.custom-modal-header {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-primary);
    color: var(--theme-text-light);
    border-radius: 0.5rem 0.5rem 0 0;
}

.custom-modal-header h4,
.custom-modal-header h5,
.custom-modal-header .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-light);
}

.custom-modal-header .close,
.custom-modal-header .custom-modal-close {
    background: transparent;
    border: none;
    color: var(--theme-text-light);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.8;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.custom-modal-header .close:hover,
.custom-modal-header .custom-modal-close:hover {
    opacity: 1;
}

/* Modal Body */
.custom-modal-body {
    padding: 1.25rem;
}

/* Modal Footer */
.custom-modal-footer {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--theme-border-light);
    background: var(--theme-modal-footer-bg);
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Delete/Danger Modal Header Variant */
.custom-modal-header.modal-header-danger {
    background: var(--theme-danger);
}

/* Loading State */
.custom-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--theme-text-muted);
}

.custom-modal-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border-light);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
}

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

/* Close button positioned outside */
.custom-modal-close-outside {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--theme-danger);
    color: var(--theme-text-light);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-modal-close-outside:hover {
    background: var(--theme-danger-hover);
}

/* Select2 dropdown inside custom modal - ensure it appears above the modal */
.select2-container--open {
    z-index: 10010 !important;
}

.select2-dropdown {
    z-index: 10010 !important;
}

/* Modal scrolling fix - flex layout with fixed header/footer */
.custom-modal-overlay .custom-modal-content {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-modal-overlay .custom-modal-inner {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* Modal header stays at top */
.custom-modal-overlay .modal-header {
    flex-shrink: 0;
}

/* Modal body scrolls */
.custom-modal-overlay .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Modal footer stays at bottom */
.custom-modal-overlay .modal-footer {
    flex-shrink: 0;
}