/* ToDo/public/css/Ticketcommon.css */

/* ===== BASE & VARIABLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* Import Arabic font (e.g., Noto Sans Arabic) if you want specific Arabic typography */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');


:root {
    /* Colors */
    --primary-color: #007bff;
    /* Dovalla Blue */
    --primary-dark: #0056b3;
    --primary-light: #b0d6fa;
    /* Light blue, for light theme */
    --primary-light-transparent: rgba(0, 123, 255, 0.25);
    /* For focus outlines in light theme */
    --primary-color-rgb: 0, 123, 255;

    /* Secondary Colors */
    --secondary-color: #6c757d;
    /* Grey for secondary actions/text */
    --secondary-dark: #495057;

    /* Accent Colors */
    --accent-color: #28a745;
    /* Green for success/completion */
    --accent-dark: #218838;
    --warning-color: #ffc107;
    /* Yellow for warnings */
    --warning-dark: #e0a800;
    --danger-color: #dc3545;
    /* Red for errors/danger */
    --danger-dark: #c82333;
    --success-color: #28a745;
    /* Green */
    --success-light: #d4edda;
    /* Light green background */
    --success-dark: #155724;
    /* Dark green text */
    --info-color: #17a2b8;
    /* Cyan */
    --info-light: #d1ecf1;
    --info-dark: #0c5460;
    /* Dark cyan text */
    --danger-color-rgb: 220, 53, 69;

    /* Text */
    --text-color: #343a40;
    /* Default text color for light theme */
    --text-light: #6c757d;
    /* Lighter text for general use in light theme */
    --text-white: #ffffff;
    --text-black: #000000;
    --text-muted: #888;
    /* Added for placeholders/subtle text */

    /* Backgrounds */
    --bg-light: #f8f9fa;
    /* General light background */
    --bg-white: #ffffff;
    /* White background for cards/sections in light theme */
    --input-bg: #ffffff;
    /* Input background for light theme */
    --bg-dark-sidebar: #343a40;
    /* Specific for sidebar dark background */
    --color-background-dark: #1e1e1e;
    /* Generic dark background for modals etc. */

    /* Borders & Shadows */
    --border-color: #e9ecef;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-large: 0 8px 25px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

/* Dark Theme */
body.dark-theme {
    --primary-color: #FFD700;
    /* Gold */
    --primary-dark: #DAA520;
    /* Darker Gold */
    --primary-light: #FFD700;
    /* Gold, for light text on dark primary buttons in dark theme */
    --primary-light-transparent: rgba(255, 215, 0, 0.25);
    --primary-color-rgb: 255, 215, 0;

    --secondary-color: #ADD8E6;
    /* Light Blue */
    --secondary-dark: #000000;
    /* Black for secondary actions/text in dark theme */

    /* Custom overrides for secondary button in dark mode to achieve light grey with black text */
    --btn-secondary-bg-dark: #f1f1f1;
    --btn-secondary-hover-bg-dark: #e0e0e0;
    --btn-secondary-text-dark: #000000;

    --accent-color: #FFFF00;
    /* Yellow for success/completion */
    --accent-dark: #CCCC00;
    --warning-color: #FFA500;
    /* Orange for warnings */
    --warning-dark: #CC8400;
    --danger-color: #FF4500;
    /* Orange-Red for errors/danger */
    --danger-dark: #CC3700;
    --success-color: #32CD32;
    /* LimeGreen for dark theme success */
    --success-light: #1A3E1A;
    --success-dark-surface: #008000;
    --info-color: #4682B4;
    --info-light: #2A4D69;
    --danger-light: #8B0000;
    --danger-dark-surface: #8B0000;
    --danger-color-rgb: 255, 69, 0;

    /* Text Colors */
    --text-color: #E0E0E0;
    /* Default text color for dark theme */
    --text-light: #AAAAAA;
    /* Lighter text for general use in dark theme */
    --text-white: #ffffff;
    --text-black: #000000;
    --text-muted: #666;
    /* Muted text for dark theme */

    /* Backgrounds */
    --bg-light: #121212;
    /* General dark background */
    --bg-dark: #121212;
    /* More specific dark background, potentially for elements like table rows hover */
    --bg-white: #1e1e1e;
    /* 'White' elements in dark theme (cards, sections) */
    --bg-dark-surface: #1e1e1e;
    /* Semantic alias for dark surface backgrounds */
    --input-bg: #2a2a2a;
    /* Input background for dark theme */
    --bg-dark-sidebar: #000000;
    /* Specific for sidebar dark background */
    --color-background-dark: #121212;
    /* Ensure consistency for generic modal background */

    --border-color: #333333;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 25px rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 6px 18px rgba(0, 0, 0, 0.4);
    /* Re-using shadow-medium for consistency */
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* NEW: Base RTL styles for the entire document */
html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif;
    /* Prioritize Arabic font for RTL */
    text-align: right;
    /* Default text alignment for RTL */
    direction: rtl;
    /* Set base direction to right-to-left */
}

/* Utility class to prevent body scrolling */
body.no-scroll {
    overflow: hidden;
}

/* Common link styles */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* List styles */
ul {
    list-style: none;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===== LAYOUT & STRUCTURE ===== */
.admin-dashboard-container {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-light);
}

.admin-main-content {
    position: relative;
    flex-grow: 1;
    padding: var(--spacing-xl);
    padding-top: 100px;
    /* Changed this line to add a light space */
    margin-left: 250px;
    transition: margin-left 0.3s ease;
    min-height: calc(100vh - 70px);
    overflow-x: auto;
}

/* RTL for main content margin */
html[dir="rtl"] .admin-main-content {
    margin-left: 0;
    margin-right: 250px;
}

/* ===== COMPONENTS ===== */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
}

/* RTL for button icons */
html[dir="rtl"] .btn .fas,
html[dir="rtl"] .btn .lucide {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .btn .fa-spinner {
    margin-right: 0;
    margin-left: 5px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn .fas,
.btn .lucide {
    margin-right: 8px;
    /* For icons inside buttons */
}

.btn .fa-spinner {
    margin-right: 5px;
    /* Adjust for spinner */
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

body.dark-theme .btn-primary {
    background-color: var(--primary-light);
    /* Changed from gradient to solid color */
    color: var(--text-black);
    border-color: var(--primary-light);
    /* Changed to solid color */
}

body.dark-theme .btn-primary:hover {
    background-color: var(--primary-dark);
    /* Changed from gradient to solid color */
    border-color: var(--primary-dark);
    /* Changed to solid color */
    color: var(--text-black);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-white);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: var(--text-white);
}

/* Specific dark theme styles for secondary button (light grey background, black text) */
body.dark-theme .btn-secondary,
body.dark-theme .filter-toggle-btn {
    background-color: var(--bg-dark-surface);
    color: var(--primary-light);
    border-color: var(--primary-light);
}

body.dark-theme .filter-toggle-btn .fas {
    color: var(--primary-light) !important;
}


body.dark-theme .filter-toggle-btn:hover .fas {
    color: var(--text-black) !important;
    /* Ensure black on hover */
}

body.dark-theme .btn-secondary:hover,
body.dark-theme .filter-toggle-btn:hover {
    background-color: var(--primary-dark);
    color: var(--text-white); /* Changed from var(--text-black) */
    border-color: var(--primary-dark);
}


body.dark-theme .btn-secondary i,
body.dark-theme .filter-toggle-btn i {
    color: var(--primary-light);
}

body.dark-theme .btn-secondary:hover i,
body.dark-theme .filter-toggle-btn:hover i {
    color: var(--text-white); /* Changed from var(--text-black) */
}
.btn-danger {
    background-color: var(--danger-color);
    color: var(--text-white);
    border: 1px solid var(--danger-color);
}

.btn-danger:hover {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}

body.dark-theme .btn-danger {
    background-color: var(--danger-dark);
    color: var(--text-white);
}

body.dark-theme .btn-danger:hover {
    background-color: var(--danger-color);
}

.btn-icon {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    font-size: 1.2rem;
    color: inherit;
    cursor: pointer;
}

/* Language Toggle Button Style */
.lang-toggle-btn {
    background: none;
    border: none;
    font-size: 1rem;
    /* Adjust font size to fit */
    font-weight: bold;
    color: var(--secondary-color);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: var(--spacing-xs);
    /* Match padding of theme toggle */
    border-radius: var(--border-radius-sm);
    /* Match border-radius of theme toggle */
    display: flex;
    /* Make it a flex container to align icon and text */
    align-items: center;
    /* Vertically align items */
    gap: 0.5rem;
    /* Space between icon and text */
}

.lang-toggle-btn i {
    font-size: 1.4rem;
    /* Icon size */
}

.lang-toggle-btn span {
    display: block;
    /* Ensure the span text is displayed */
}

.lang-toggle-btn:hover {
    color: var(--primary-color);
}

/* End Language Toggle Button Style */


body.dark-theme .btn-icon {
    color: var(--text-color);
}

body.dark-theme .btn-icon:hover {
    color: var(--primary-light);
}

/* NEW: Styles for "Select Files" button within Add New Ticket Modal (specific dark mode override) */
/* Changed .file-select-button to only define the specific overrides for consistency with the new .btn-secondary styles */
body.dark-theme .file-select-button {
    background-color: var(--btn-secondary-bg-dark);
    /* Light grey background */
    color: var(--btn-secondary-text-dark);
    /* Black text */
    border-color: var(--btn-secondary-bg-dark);
    /* Light grey border */
}

body.dark-theme .file-select-button:hover {
    background-color: var(--btn-secondary-hover-bg-dark);
    /* Slightly darker grey on hover */
    border-color: var(--btn-secondary-hover-bg-dark);
    /* Slightly darker grey border on hover */
    color: var(--btn-secondary-text-dark);
    /* Keep text black on hover */
}

/* Highlighted change: Ensure icons within the file select button are white in dark mode */
body.dark-theme .file-select-button .fas,
body.dark-theme .file-select-button .lucide {
    color: var(--text-black);
    /* Changed icon color to black */
}

body.dark-theme .file-select-button:hover .fas,
body.dark-theme .file-select-button:hover .lucide {
    color: var(--text-black);
    /* Keep icon black on hover */
}


/* Spinner Overlay for Content */
.content-overlay-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: var(--text-white);
    font-size: 1.2rem;
    border-radius: var(--border-radius);
}

.content-overlay-spinner .spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Header */
.admin-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.admin-main-header h1 {
    font-size: 2rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-right: auto;
}

/* RTL for admin main header */
html[dir="rtl"] .admin-main-header h1 {
    margin-right: 0;
    margin-left: auto;
}

body.dark-theme .admin-main-header h1 {
    color: var(--primary-light);
}

.admin-main-header .header-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Filter Toggle */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.filter-toggle-btn .filter-arrow {
    transition: transform 0.3s ease;
}

.filter-toggle-btn.expanded .filter-arrow {
    transform: rotate(180deg);
}

/* Dashboard Statistics Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* General card styling (used for stat-cards and summary-cards) */
.card {
    background-color: var(--bg-white);
    /* MODIFIED: Ensured it uses theme variable */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-card {
    background-color: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.stat-card .stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

body.dark-theme .stat-card .stat-icon {
    color: var(--primary-light);
}

.stat-card .stat-title {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-xs);
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Collapsible Filters */
.collapsible-filters-container {
    margin-bottom: var(--spacing-xl);
}

/* Tables */
.admin-list-section {
    background-color: var(--bg-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    min-width: 600px;
}

.admin-table th,
.admin-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* RTL for table headers and cells */
html[dir="rtl"] .admin-table th,
html[dir="rtl"] .admin-table td {
    text-align: right;
}

.admin-table th {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Corrected table header color for dark theme */
body.dark-theme .admin-table th {
    background-color: var(--primary-dark);
    color: var(--text-black);
    border-color: var(--border-color);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr {
    background-color: var(--bg-white);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.admin-table tbody tr:hover {
    background-color: var(--bg-light);
}

/* Action Buttons in Table */
.admin-table .actions-cell {
    display: flex;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.admin-table .actions-cell .btn-icon {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    font-size: 1rem;
    color: var(--secondary-color);
    cursor: pointer;
}

.admin-table .actions-cell .btn-icon:hover {
    color: var(--primary-color);
    background-color: transparent;
}

/* Badges */
.status-badge,
.priority-badge {
    display: inline-block;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text-white);
    text-align: center;
    white-space: nowrap;
}

/* Find the .status-badge.new style block and modify it */
.status-badge.new,
.status-badge.not-started {
    background-color: var(--info-color);
    /* This is the light blue background */
    color: var(--text-black);
    /* Force text to black for better contrast in light mode */
}

body.dark-theme .status-badge.new,
body.dark-theme .status-badge.not-started {
    background-color: var(--info-dark);
    color: var(--text-white);
    /* Keep text white for dark mode */
}

.status-badge.in-progress {
    background-color: var(--primary-color);
}

.status-badge.resolved {
    background-color: var(--accent-color);
}

.status-badge.closed {
    background-color: var(--secondary-color);
}

.priority-badge.low {
    background-color: var(--info-color);
}

.priority-badge.medium {
    background-color: var(--warning-color);
    color: var(--text-black);
    /* Set text to black for contrast on yellow/orange in light mode */
}

.priority-badge.high {
    background-color: var(--danger-color);
}

/* Forms & Controls */
.controls-section {
    background-color: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.controls-section .filters,
.controls-section .search-sort {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.controls-section select,
.controls-section input[type="text"],
.controls-section input[type="date"],
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    color: var(--text-color);
    background-color: var(--bg-light);
    flex: 1;
    min-width: 150px;
}

/* RTL for form controls */
html[dir="rtl"] .controls-section select,
html[dir="rtl"] .controls-section input[type="text"],
html[dir="rtl"] .controls-section input[type="date"],
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea {
    text-align: right;
    /* Align text to the right */
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important;
    /* Prioritize Noto Sans Arabic */

}

.form-group input::placeholder,
.form-group textarea::placeholder,
.login-form .input-group input::placeholder

/* Specific for login/register forms */
    {
    color: var(--text-muted) !important;
    /* Force a visible color from your theme variables */
    opacity: 1 !important;
    /* Ensure it's fully opaque */
    /* z-index: 10; */
    /* Only add if you suspect z-index issues, otherwise it's generally not needed for placeholders */
}

body.dark-theme .form-group input::placeholder,
body.dark-theme .form-group textarea::placeholder,
body.dark-theme .login-form .input-group input::placeholder

/* Specific for login/register forms */
    {
    color: rgba(255, 215, 0, 0.8) !important;
    /* A slightly opaque gold for dark mode placeholders, ensuring visibility */
    opacity: 1 !important;
    /* z-index: 10; */
    /* Only add if you suspect z-index issues */
}

.controls-section input:focus,
.controls-section select:focus,
.controls-section input[type="date"]:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light-transparent);
}

.controls-section .search-box {
    position: relative;
    flex-grow: 1.5;
    min-width: 200px;
}

.controls-section .search-box input {
    width: 100%;
    padding-left: 48px;
    /* Adjusted to create 8px space after the 24px wide icon, positioned at 16px. */
}

.powered-by-text-ticket-admin {
    color: var(--text-light);
    /* Adjust color as needed */
    font-size: 0.9em;
    /* Smaller font size */
    margin-top: var(--spacing-md);
    /* Space from the button above */
    text-align: center;
    width: 100%;
}

/* In ToDo/public/css/Ticketcommon.css */
/* In ToDo/public/css/Ticketcommon.css */
.controls-section .search-box .search-icon,
.input-group .icon {
    position: absolute;
    left: var(--spacing-md);
    top: 52%;
    transform: translateY(-50%);
    color: var(--secondary-color);
    pointer-events: none;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* RTL for search icons in controls section */
html[dir="rtl"] .controls-section .search-box input {
    padding-left: var(--spacing-md);
    padding-right: 48px;
}

html[dir="rtl"] .controls-section .search-box .search-icon,
html[dir="rtl"] .input-group .icon {
    left: auto;
    right: var(--spacing-md);
}

/* Checkbox and Radio Button styles */
.checkbox-group,
.radio-group {
    display: flex; /* Ensure it's a flex container */
    align-items: center; /* Align checkbox and label vertically */
    gap: var(--spacing-xs); /* Control space between checkbox and label */
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    width: 100%; /* Take full width of parent to utilize space */
}

/* RTL for checkboxes and radios */
html[dir="rtl"] .checkbox-group,
html[dir="rtl"] .radio-group {
    flex-direction: row-reverse;
    justify-content: flex-end;
    /* Align group to the right */
}

html[dir="rtl"] .checkbox-group input[type="checkbox"],
html[dir="rtl"] .radio-group input[type="radio"] {
    margin-right: 0; /* Remove default LTR margin */
    margin-left: var(--spacing-xs); /* Add margin for RTL positioning */
}

html[dir="rtl"] .checkbox-group label,
html[dir="rtl"] .radio-group label {
    text-align: right;
}

/* MODIFIED: Explicitly define checkbox size and prevent stretching */
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
    appearance: none;
    width: 16px; /* Slightly larger for better click target/visuals */
    height: 16px;
    min-width: 16px; /* Ensure it never gets smaller */
    min-height: 16px; /* Ensure it never gets smaller */
    max-width: 16px; /* Explicitly cap max width */
    max-height: 16px; /* Explicitly cap max height */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-right: var(--spacing-xs);
    position: relative;
    cursor: pointer;
    flex-grow: 0 !important; /* CRITICAL: Absolutely prevent it from growing */
    flex-shrink: 0 !important; /* CRITICAL: Absolutely prevent it from shrinking */
    box-sizing: border-box;
    transition: all 0.2s ease;
    /* CRITICAL: Remove any inherited padding or background images that might cause stretching */
    padding: 0 !important;
    background-image: none !important;
    display: inline-block !important; /* Ensure it behaves as a block for explicit sizing */
}

.form-group.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    /* Consistent small gap between checkbox and label */
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    width: 100%;
    /* Ensure it takes full width of its parent container */
}

body.dark-theme .checkbox-group input[type="checkbox"] {
    border-color: var(--border-color); /* Ensure border is visible in dark mode */
}

.radio-group input[type="radio"] {
    border-radius: 50%;
}

.checkbox-group input[type="checkbox"]:checked,
.radio-group input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-group input[type="checkbox"]:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--text-white);
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-group input[type="radio"]:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--text-white);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-group label,
.radio-group label {
    flex: 1; /* Allow the label to take up remaining space */
    white-space: normal; /* Allow text to wrap if it's long */
    /* Remove any fixed widths or max-widths that might conflict */
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.95rem;
}


/* Password input group and toggle icon */
.password-input-group {
    position: relative;
    width: 100%;
}

.password-input-group input {
    padding-right: 40px;
}

/* RTL for password input group */
html[dir="rtl"] .password-input-group input {
    padding-right: 12px;
    /* Default padding-left becomes padding-right in RTL for text */
    padding-left: 40px;
    /* Space for the toggle icon on the left */
}


.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    z-index: 3;
    transition: color 0.2s ease;
}

/* RTL for password toggle */
html[dir="rtl"] .toggle-password {
    right: auto;
    left: 10px;
}


.toggle-password:hover {
    color: var(--primary-color);
}

/* NEW: Dashboard Summary Lists */
.dashboard-summary-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Responsive columns */
    gap: var(--spacing-lg);
    /* Space between cards */
    margin-bottom: var(--spacing-xl);
    /* Space below this section */
}

.dashboard-summary-lists .summary-card {
    background-color: var(--bg-white);
    /* Card background */
    padding: var(--spacing-lg);
    /* Inner padding */
    border-radius: var(--border-radius);
    /* Rounded corners */
    box-shadow: var(--shadow-light);
    /* Subtle shadow */
    border: 1px solid var(--border-color);
    /* Border for definition */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure cards are same height */
}

.dashboard-summary-lists .summary-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    /* Heading text color */
    margin-bottom: var(--spacing-md);
    /* Space below title */
    padding-bottom: var(--spacing-sm);
    /* Padding for border */
    border-bottom: 1px solid var(--border-color);
    /* Separator line */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Space between icon and title */
}

.dashboard-summary-lists .summary-title .fas {
    color: var(--primary-color);
    /* Icon color */
}

.dashboard-summary-lists .summary-list {
    list-style: none;
    /* Remove bullet points */
    padding: 0;
    /* Remove default padding */
    flex-grow: 1;
    /* Allow list to take available space */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* Space between list items */
}

/* RTL for summary list items */
html[dir="rtl"] .dashboard-summary-lists .summary-list li {
    align-items: flex-end;
    /* Align text to end */
}


.dashboard-summary-lists .summary-list li:last-child {
    margin-bottom: 0;
    /* No margin for last item */
}

.dashboard-summary-lists .summary-list li .font-semibold {
    font-weight: 600;
    color: var(--primary-dark);
    /* Highlight subject/name */
}

.dashboard-summary-lists .summary-list li .text-sm {
    font-size: 0.85rem;
    color: var(--text-light);
    /* Muted text for status/details */
}

/* Hover effect for summary list items */
.dashboard-summary-lists .summary-list li:hover {
    background-color: var(--primary-light);
    /* Light primary on hover */
    cursor: pointer;
}

.dashboard-summary-lists .summary-list li .assign-ticket-btn {
    align-self: flex-end;
    /* Push button to bottom right */
    margin-top: var(--spacing-sm);
    /* Space above button */
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* RTL for assign ticket button */
html[dir="rtl"] .dashboard-summary-lists .summary-list li .assign-ticket-btn {
    align-self: flex-start;
    /* Push button to bottom left */
}


/* ===== MODAL STYLES (NEW/UPDATED) ===== */

/* General Modal Backdrop and Content */
.info-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Changed from 100% to 100vh to ensure full viewport height coverage */
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Changed from 'flex-start' to 'center' */
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* margin-top: calc(70px + var(--spacing-md)) !important; */
    /* Removed, handled by align-items: center */
    /* max-height: calc(100vh - (20px + var(--spacing-md)) - var(--spacing-xl) - var(--spacing-md)); */
    /* Removed */
    overflow-y: auto;
    /* Allow backdrop itself to scroll if content is too tall */
}

/* Ensures modal is hidden from layout when not active */
.info-modal-backdrop:not(.active) {
    display: none;
}

.info-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    display: flex;
    /* Ensure it's displayed as flex when active */
}

.info-modal-content {
    background-color: var(--bg-white);
    color: var(--text-color);
    padding: var(--spacing-xl);
    /* Standard padding for the modal content */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    width: 90%;
    max-width: 650px;
    position: relative;
    text-align: center;
    transform: translateY(-20px);
    /* Initial state for animation */
    opacity: 0;
    /* Initial state for animation */
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 1px solid var(--border-color);

    display: flex;
    flex-direction: column;
    /* Remove margin-top as align-items: center on the parent now handles vertical positioning */
    /* margin-top: calc(70px + var(--spacing-md)) !important; */

    /* Dynamically calculates the max height available from the viewport, leaving only padding for the modal's top and bottom content */
    max-height: calc(100vh - 2 * var(--spacing-xl));
    /* Reduced vertical offset to allow modal to be taller */
    overflow-y: auto;
    /* Enable vertical scrolling if content exceeds max-height */
}

/* Animation for modal content */
.info-modal-backdrop.active .info-modal-content {
    transform: translateY(0);
    opacity: 1;
}


/* Modal Header Elements */
.info-modal-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.info-modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.close-modal-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* RTL for close modal icon */
html[dir="rtl"] .close-modal-icon {
    right: auto;
    left: 15px;
}


.close-modal-icon:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--primary-color);
}

.close-modal-icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    stroke: currentColor;
}

/* Modal Body Content (Dynamic) */
.modal-dynamic-body {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    padding: 0 10px;
}

/* RTL for modal body content */
html[dir="rtl"] .modal-dynamic-body {
    text-align: right;
}


.info-modal-message {
    margin-bottom: 15px;
    color: var(--text-color);
    text-align: center;
}

/* Modal Actions (Buttons) */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Form Group Styles within Modals */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

/* RTL for form group alignment */
html[dir="rtl"] .form-group {
    text-align: right;
}


.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
}

/* RTL for form group inputs */
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea {
    text-align: right;
}


.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-light-transparent);
}

/* Make select dropdown text and options theme-aware */
.info-modal-content select {
    color: var(--text-color);
}

.info-modal-content select option {
    background-color: var(--bg-white);
    color: var(--text-color);
}


.field-error {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
    text-align: left;
}

/* RTL for field errors */
html[dir="rtl"] .field-error {
    text-align: right;
}


/* Password input group and toggle icon */
.password-input-group {
    position: relative;
    width: 100%;
}

.password-input-group input {
    padding-right: 40px;
}

/* RTL for password input group */
html[dir="rtl"] .password-input-group input {
    padding-right: 12px;
    /* Default padding-left becomes padding-right in RTL for text */
    padding-left: 40px;
    /* Space for the toggle icon on the left */
}


.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    z-index: 3;
    transition: color 0.2s ease;
}

/* RTL for password toggle */
html[dir="rtl"] .toggle-password {
    right: auto;
    left: 10px;
}


.toggle-password:hover {
    color: var(--primary-color);
}

/* Role Change Details */
.role-change-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.role-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 15px;
    background-color: rgba(var(--primary-color-rgb), 0.08);
    border-radius: 5px;
    margin-bottom: 10px;
}

.role-field .label {
    color: var(--text-muted);
}

.role-field .role {
    font-weight: 600;
    color: var(--primary-color);
}

.role-arrow {
    font-size: 1.5rem;
    color: var(--text-color);
    margin: 5px 0;
}

.admin-modal-content {
    background-color: var(--bg-white);
    border-color: var(--border-color);
    box-shadow: var(--shadow-medium);
    z-index: 1060;
}


/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {

    /* Changed from 992px to 1200px for broader mobile/tablet view */
    .admin-main-content {
        margin-left: 0;
    }

    /* RTL for admin main content on smaller screens */
    html[dir="rtl"] .admin-main-content {
        margin-left: 0;
        margin-right: 0;
    }


    /* Filters */
    .admin-main-header .filter-toggle-btn {
        display: inline-flex;
    }

    .collapsible-filters-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        padding-top: 0;
        padding-bottom: 0;
    }

    .collapsible-filters-container.expanded {
        max-height: 1000px;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .collapsible-filters-container .controls-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .collapsible-filters-container .controls-section .filters,
    .collapsible-filters-container .controls-section .search-sort {
        flex-direction: column;
        align-items: stretch;
    }

    .controls-section select,
    .controls-section input[type="text"],
    .controls-section input[type="date"] {
        min-width: unset;
        width: 100%;
    }

    .controls-section .search-box {
        width: 100%;
    }

    /* Tables */
    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
    }

    .admin-table thead {
        display: none;
    }

    /* Enhanced Card Styling for Table Rows */
    .admin-table tr,
    .tickets-table tr {
        background-color: var(--bg-white);
        /* Consistent light background */
        margin-bottom: var(--spacing-lg);
        /* Increased spacing between cards for better separation */
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-light);
        /* Add a subtle shadow to each card */
        overflow: hidden;
        display: flex;
        /* Make the row a flex container */
        flex-direction: column;
        /* Stack table cells vertically */
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        /* Smooth hover effect */
        border-left: 5px solid var(--primary-color);
        /* Prominent left border for accent */
    }

    /* RTL for table rows */
    html[dir="rtl"] .admin-table tr,
    html[dir="rtl"] .tickets-table tr {
        border-left: none;
        border-right: 5px solid var(--primary-color);
    }

    .admin-table tr:hover,
    .tickets-table tr:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-medium);
    }

    .admin-table td,
    .tickets-table td {
        border-bottom: 1px dashed var(--border-color);
        /* Use a dashed separator for a subtle look */
        padding: var(--spacing-md) var(--spacing-lg);
        /* More generous padding within cells */
        text-align: left;
        /* Align cell content to left for better readability in card view */
        word-break: break-word;
        /* Allow long words in labels to break to prevent overflow */
        display: flex;
        /* Make td a flex container for label-value alignment */
        justify-content: space-between;
        /* Push label to left, value to right */
        align-items: center;
        /* Vertically center content within the cell */
    }

    /* RTL for table cells */
    html[dir="rtl"] .admin-table td,
    html[dir="rtl"] .tickets-table td {
        text-align: right;
        flex-direction: row-reverse;
        /* Reverse direction of label and content */
    }


    .admin-table td:last-child,
    .tickets-table td:last-child {
        border-bottom: none;
        /* No border for the last field in the card */
        padding-bottom: var(--spacing-md);
        /* Add bottom padding to the last field for balance */
    }

    /* Adjust column labels for card view */
    .admin-table td::before,
    .tickets-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-light);
        flex-basis: 40%;
        /* Give the label a starting width, allows it to grow/shrink relative to content */
        word-break: break-word;
        /* Allow long words in labels to break to prevent overflow */
        margin-right: var(--spacing-md);
        text-align: left;
        width: auto;
        padding-right: 0;
        position: static;
        transform: none;
    }

    /* RTL for table cell labels */
    html[dir="rtl"] .admin-table td::before,
    html[dir="rtl"] .tickets-table td::before {
        text-align: right;
        margin-right: 0;
        margin-left: var(--spacing-md);
    }


    /* Ensure content values (e.g., .table-cell-content, badges) are flexible */
    .tickets-table .table-cell-content {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
        /* Allow the content to take up available space */
        flex-shrink: 1;
        /* Allow the content to shrink if necessary */
        min-width: 0;
        /* Crucial: Allows the flex item to shrink below its intrinsic content size */
        max-width: 60%;
        /* Limit the value's width to ensure the label has space */
    }

    /* Further ensure badges/icons/buttons within cells are flexible */
    .tickets-table .status-badge,
    .tickets-table .priority-badge,
    .tickets-table .status-badge,
    .tickets-table .priority-badge {
        font-size: 0.9rem;
        padding: 0.4em 0.9em;
        flex-shrink: 0;
    }

    .admin-table .actions-cell,
    .tickets-table .actions-cell {
        justify-content: flex-end;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
        margin-top: var(--spacing-md);
        flex-wrap: wrap;
        min-width: 0;
        gap: var(--spacing-xs);
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: none;
    }

    /* RTL for action cells */
    html[dir="rtl"] .admin-table .actions-cell,
    html[dir="rtl"] .tickets-table .actions-cell {
        justify-content: flex-start;
        /* Align to the start in RTL */
    }


    .admin-table .actions-cell .btn,
    .tickets-table .actions-cell .btn {
        flex-shrink: 1;
        min-width: unset;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}
  
@media (max-width: 768px) {
    .admin-main-content {
        padding: var(--spacing-lg);
    }

    .admin-main-header h1 {
        font-size: 1.8rem;
    }

    .admin-list-section {
        padding: var(--spacing-lg);
    }

    /* Responsive Adjustments for Modals */
    .info-modal-content {
        max-width: 95%;
        padding: var(--spacing-lg);
    }
}

@media (max-width: 576px) {
    .admin-main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .admin-main-header .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .admin-main-header .header-actions .btn {
        width: 100%;
        margin-left: 0;
    }

    .controls-section {
        padding: var(--spacing-md);
    }

    .admin-list-section {
        padding: var(--spacing-md);
    }

    /* REMOVED: Specific td padding and before adjustments for smaller screens */
    /*
    .tickets-table td {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .tickets-table td::before {
        flex-basis: 90px;
        min-width: 60px;
        margin-right: var(--spacing-sm);
    }

    html[dir="rtl"] .tickets-table td::before {
        margin-right: 0;
        margin-left: var(--spacing-sm);
    }
    */

    .tickets-table .actions-cell .btn-icon {
        font-size: 0.9rem;
        /* Smaller icons for very small screens */
        padding: var(--spacing-xs);
    }
}

/* ===== DARK THEME OVERRIDES ===== */
body.dark-theme .collapsible-filters-container .ticket-controls {
    background-color: var(--bg-dark-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-dark);
}

body.dark-theme .collapsible-filters-container .ticket-controls select,
body.dark-theme .collapsible-filters-container .ticket-controls input[type="text"] {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-theme .collapsible-filters-container .ticket-controls input::placeholder {
    color: var(--text-light);
}

body.dark-theme .collapsible-filters-container .ticket-controls .search-icon {
    color: var(--text-light);
}

body.dark-theme .all-tickets-list {
    background-color: var(--bg-dark-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-dark);
}

body.dark-theme .tickets-table th {
    background-color: var(--primary-dark);
    color: var(--text-black);
    /* Changed to black for readability on gold background */
    border-color: var(--border-color);
}

body.dark-theme .tickets-table tbody tr {
    background-color: var(--bg-dark-surface);
}

body.dark-theme .tickets-table tbody tr:hover {
    background-color: var(--bg-dark);
}

/* Added for sort icon contrast in dark theme */
body.dark-theme .tickets-table th .sort-icon {
    color: var(--text-black);
    /* Changed for better contrast in dark mode */
}

body.dark-theme .tickets-table .status-badge.new,
body.dark-theme .tickets-table .status-badge.not-started {
    background-color: var(--info-dark);
    color: var(--text-white);
}

/* Corrected for readability: In-progress status badge in dark theme*/
body.dark-theme .tickets-table .status-badge.in-progress {
    background-color: var(--primary-color);
    /* Brightened to Gold */
    color: var(--text-black);
    /* Black text for readability */
}

/* Corrected for readability: Resolved status badge in dark theme*/
body.dark-theme .tickets-table .status-badge.resolved {
    background-color: var(--accent-color);
    /* Brightened to Yellow */
    color: var(--text-black);
    /* Black text for readability */
}

/* Corrected for readability: Closed status badge in dark theme*/
body.dark-theme .tickets-table .status-badge.closed {
    background-color: var(--secondary-dark);
    /* Black background */
    color: var(--text-white);
    /* White text for readability */
}

body.dark-theme .tickets-table .priority-badge.low {
    background-color: var(--info-dark);
    color: var(--text-white);
}

/* Corrected for readability: Medium priority badge in dark theme*/
body.dark-theme .tickets-table .priority-badge.medium {
    background-color: var(--warning-color);
    /* Brightened to Orange */
    color: var(--text-black);
    /* Black text for readability */
}

/* Corrected for readability: High priority badge in dark theme (kept white text as background is red)*/
body.dark-theme .tickets-table .priority-badge.high {
    background-color: var(--danger-dark);
    /* Darker red background */
    color: var(--text-white);
    /* White text for readability */
}

body.dark-theme .tickets-table .actions-cell .btn-icon {
    color: var(--text-light);
}

body.dark-theme .tickets-table .actions-cell .btn-icon:hover {
    color: var(--primary-light);
}

/* REMOVED: td::before styling for mobile card view in dark theme */
/*
body.dark-theme .tickets-table td::before {
    color: var(--text-color);
}
*/

/* Styles for Ticket Details Modal (within ticket_admin_dashboard.html) */
/* This specific modal container ensures it sits above the dashboard content */
.admin-modal-content {
    max-width: 800px;
    width: 90%;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    max-height: calc(100% - 40px);
    /* MODIFIED: Set max-height relative to backdrop height */
    overflow-y: auto;
    position: relative;
    text-align: left;
    z-index: 10002;
    /* Add this line */

}

/* RTL for admin modal content */
html[dir="rtl"] .admin-modal-content {
    text-align: right;
}

/* Close Button Positioning & Styling */
.close-modal-icon {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 20;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-light);
}

/* RTL for close modal icon */
html[dir="rtl"] .close-modal-icon {
    right: auto;
    left: var(--spacing-md);
}

.close-modal-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px;
}

.close-modal-icon:hover {
    background-color: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    transform: scale(1.1);
}

body.dark-theme .close-modal-icon {
    color: var(--text-light);
}

body.dark-theme .close-modal-icon:hover {
    background-color: rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}


/* MODIFIED: Enhanced Modal Header with Ticket ID and Copy Icon */
.modal-header-fancy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    padding-right: 40px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

/* RTL for modal header fancy */
html[dir="rtl"] .modal-header-fancy {
    padding-right: 0;
    padding-left: 40px;
    flex-direction: row-reverse; /* Reverse order of title and ticket ID display */
}

.admin-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.modal-header-fancy h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ticket-id-display {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--primary-light);
    border: 2px dotted var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
    vertical-align: middle;
}

/* RTL for ticket ID display */
html[dir="rtl"] .ticket-id-display {
    direction: ltr; /* Ensure ID itself is LTR */
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-xs); /* Adjust for copy button */
}

.copy-ticket-id-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 1rem;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* RTL for copy ticket ID button */
html[dir="rtl"] .copy-ticket-id-btn {
    order: -1; /* Move to the left of the text */
    margin-right: var(--spacing-xs);
    /* Space from ID */
}

.copy-ticket-id-btn:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

/* NEW: Layout for main ticket details (2 columns on larger screens) */
.ticket-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* RTL for ticket main grid */
html[dir="rtl"] .ticket-main-grid {
    direction: rtl; /* Ensure grid columns are ordered RTL */
}

.full-width-field {
    margin-top: var(--spacing-md);
}


/* Ensure form-groups within the grid don't have extra bottom margin */
.ticket-main-grid .form-group {
    margin-bottom: var(--spacing-md);
}

/* Make sure inputs and selects within form-groups fill their containers */
.ticket-main-grid .form-group input,
.ticket-main-grid .form-group select,
.ticket-main-grid .form-group textarea {
    width: 100%;
    padding-left: calc(var(--spacing-md) + 24px);
}

/* RTL for form inputs in grid */
html[dir="rtl"] .ticket-main-grid .form-group input,
html[dir="rtl"] .ticket-main-grid .form-group select,
html[dir="rtl"] .ticket-main-grid .form-group textarea {
    padding-left: var(--spacing-md);
    padding-right: calc(var(--spacing-md) + 24px);
    text-align: right;
}

/* Special adjustment for readonly inputs without icons (like Subject, Requester, Submitted At)*/
.ticket-main-grid .form-group input[readonly],
.ticket-main-grid .form-group textarea[readonly] {
    padding-left: var(--spacing-md);
}

/* RTL for readonly inputs in grid */
html[dir="rtl"] .ticket-main-grid .form-group input[readonly],
html[dir="rtl"] .ticket-main-grid .form-group textarea[readonly] {
    padding-right: var(--spacing-md);
    padding-left: 0;
}


/* MODIFIED: Two Values in a Row for "Actual Dates"*/
.actual-dates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* RTL for actual dates grid */
html[dir="rtl"] .actual-dates-grid {
    direction: rtl;
}

@media (min-width: 600px) {

    /* Adjust breakpoint as needed */
    .actual-dates-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Section Titles within Modal */
.modal-conditional-fields .section-title,
.attachments-section .section-title,
.comments-section .section-title {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* RTL for section titles */
html[dir="rtl"] .modal-conditional-fields .section-title,
html[dir="rtl"] .attachments-section .section-title,
html[dir="rtl"] .comments-section .section-title {
    flex-direction: row-reverse; /* Reverse icon and text order */
}

.modal-conditional-fields .section-title i,
.attachments-section .section-title i,
.comments-section .section-title i {
    color: var(--primary-color);
}

/* Attachments List Styling (within modal) */
.attachments-list-fancy {
    /* New class for the attachments container */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

/* RTL for attachments list */
html[dir="rtl"] .attachments-list-fancy {
    direction: rtl; /* Sets content direction for grid items */
}

.attachments-list-fancy .attachment-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--bg-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border-left: 5px solid var(--accent-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* RTL for attachment items */
html[dir="rtl"] .attachments-list-fancy .attachment-item {
    border-left: none;
    border-right: 5px solid var(--accent-color);
}


.attachments-list-fancy .attachment-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    background-color: var(--primary-light);
    /* Light highlight on hover */
}


.attachments-list-fancy .attachment-item .icon {
    font-size: 1.4rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.attachments-list-fancy .attachment-item a {
    flex-grow: 1;
    font-size: 0.95rem;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachments-list-fancy .attachment-item a:hover {
    color: var(--primary-dark);
    /* Darker primary on hover */
    text-decoration: underline;
    /* Underline on hover */
}

.attachments-list-fancy .attachment-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    justify-content: flex-end;
    /* Push icons to the end of the row */
    align-items: center;
    /* Vertically center items */
    margin-left: auto;
    /* Push the whole action group to the far right */
}

/* RTL for attachment actions */
html[dir="rtl"] .attachments-list-fancy .attachment-actions {
    justify-content: flex-start; /* Push icons to the start of the row */
    margin-left: 0;
    margin-right: auto; /* Push the whole action group to the far left */
}

.attachments-list-fancy .attachment-actions .btn-icon {
    font-size: 1rem;
    background-color: var(--bg-light);
    border-radius: 50%;
    color: var(--secondary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;

}

.attachments-list-fancy .attachment-actions .btn-icon:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
    box-shadow: var(--shadow-light);
}

/* NEW: Dark theme overrides for attachment-actions .btn-icon hover */
body.dark-theme .attachments-list-fancy .attachment-actions .btn-icon:hover {
    background-color: var(--primary-dark);
    /* Darker gold for background on hover */
    color: var(--text-black);
    /* Black text for contrast on darker gold */
}


/* NEW: Attachment Upload Section */
.attachment-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.attachment-upload-section:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-medium);
}

.attachment-upload-section input[type="file"] {
    width: 100%;
    /* Ensure input stretches */
}

.attachment-upload-section .btn-secondary {
    align-self: center;
    /* Center the button within the flex column */
}

.attachment-upload-section .spinner-sm {
    /* For loading spinner inside button or next to it */
    width: 20px;
    height: 20px;
    border-width: 3px;
    margin-left: var(--spacing-sm);
}

/* RTL for spinner in upload section */
html[dir="rtl"] .attachment-upload-section .spinner-sm {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

.attachment-upload-section .upload-status {
    font-size: 0.9em;
    color: var(--text-light);
    margin-top: var(--spacing-xs);
}


/* Internal Notes Section Styling */
.internal-notes-list {
    max-height: 250px;
    overflow-y: auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

/* RTL for internal notes list padding */
html[dir="rtl"] .internal-notes-list {
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
}


.internal-note-item {
    background-color: var(--bg-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.internal-note-item:last-child {
    margin-bottom: 0;
}

.internal-note-item .note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-light);
}

/* RTL for note header */
html[dir="rtl"] .internal-note-item .note-header {
    flex-direction: row-reverse;
    /* Reverse author and time */
}

.internal-note-item .note-author {
    font-weight: 600;
    color: var(--primary-color);
}

.internal-note-item .note-text {
    color: var(--text-color);
    font-size: 0.95rem;
    /* Slightly larger for readability */
    line-height: 1.5;
}

/* تحسينات الخط العربي للأزرار في وضع RTL */
html[dir="rtl"] .btn {
    font-size: 0.9rem;
    /* زيادة حجم الخط للأزرار في وضع RTL ليكون أكثر بروزًا */
    font-weight: 500;
    /* يمكن جعل الخط سميكًا قليلًا لتحسين الوضوح */
    letter-spacing: 0.02em;
    /* إضافة تباعد بسيط بين الحروف لتحسين القراءة */
    padding: var(--spacing-sm) var(--spacing-md);
    /* الحفاظ على الهوامش الداخلية */
}

/* تأكد من أن أيقونات الأزرار لا تتأثر بشكل سلبي، وإذا لزم الأمر اضبط حجمها بشكل منفصل */
html[dir="rtl"] .btn .fas,
html[dir="rtl"] .btn .lucide {
    font-size: 1.1rem;
    /* حجم الأيقونات ليتناسق مع حجم الخط الجديد */
    margin-right: 0;
    /* إزالة الهامش الأيمن الافتراضي */
    margin-left: 8px;
    /* إضافة هامش أيسر للأيقونة في وضع RTL */
}

/* تعديل خاص لأزرار التحميل/السبينر لضمان التناسق */
html[dir="rtl"] .btn .fa-spinner {
    margin-right: 0;
    margin-left: 5px;
}

/* Ensure Arabic font is applied to button text specifically */
html[dir="rtl"] .btn span,
html[dir="rtl"] .btn:not(.btn-icon) {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif;
    /* Apply Noto Sans Arabic, with Poppins as fallback */
}


/* Also ensure labels use the correct font in RTL */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .controls-section label {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important;
}

/* If any button text within filter sections uses a span, explicitly apply font */
html[dir="rtl"] .filter-toggle-btn span,
html[dir="rtl"] .btn span {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif;
}

/* Ensure Arabic font is always applied to the language toggle button text if it contains Arabic characters */
.lang-toggle-btn span {
    font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important;
}