/* --- بداية القسم الداخلي 1 --- */
/**
 * Aljabareen Tables Pro Styles
 * Version: 1.0.2
 * Description: Styles for the interactive editable table, enhancing visual appeal,
 * modernizing components, improving RTL/LTR awareness, Dark Mode, selection highlighting,
 * controls, toolbar, and responsiveness.
 */

/* --- CSS Variables --- */
:root {
    /* Base Font & Colors (Light Mode - Default) */
    --ajt-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ajt-body-bg: #ffffff; /* Pure white background */
    --ajt-text-color: #212529; /* Dark gray text (Bootstrap standard) */
    --ajt-secondary-text-color: #6c757d; /* Lighter gray for secondary text */
    --ajt-muted-text-color: #868e96; /* Muted gray for less important text */
    --ajt-link-color: var(--ajt-primary-color, #0d6efd); /* Link color uses primary or fallback */
    --ajt-link-hover-color: var(--ajt-primary-hover, #0a58ca); /* Link hover uses primary hover or fallback */

    /* Container Styling */
    --ajt-container-bg: #ffffff;
    --ajt-container-border: #dee2e6; /* Standard light border */
    --ajt-container-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.08); /* Slightly softer shadow */
/* --- نهاية القسم الداخلي 1 --- */

/* --- بداية القسم الداخلي 2 --- */
    /* Table Specific Colors & Borders */
    --ajt-table-border-color: #dee2e6; /* Border around the table wrapper */
    --ajt-table-row-border-color: #e9ecef; /* Lighter border between rows */
    --ajt-header-bg: #f8f9fa; /* Very light gray header background */
    --ajt-header-text: #343a40; /* Darker text for headers */
    --ajt-header-border-color: #dee2e6; /* Bottom border for header cells */
    --ajt-filter-bg: #f1f3f5; /* Light background for filter row */
    --ajt-row-hover-bg: #f1f3f5; /* Hover background for rows */
    --ajt-row-focus-outline: 1px dashed var(--ajt-primary-color, #0d6efd); /* Dashed outline for row focus */
    --ajt-row-selected-bg: #cfe2ff; /* Light blue for selected row background */
    --ajt-cell-editing-bg: #e6f7ff; /* Slightly different blue for the cell being edited */
    --ajt-cell-nav-focus-outline: 2px solid var(--ajt-primary-color, #0d6efd); /* Solid outline for cell keyboard navigation focus */
/* --- نهاية القسم الداخلي 2 --- */

/* --- بداية القسم الداخلي 3 --- */
    /* Input, Status & Overlay Colors */
    --ajt-input-border-color: #ced4da; /* Standard input border */
    --ajt-input-focus-border-color: #86b7fe; /* Lighter blue for input focus border */
    --ajt-input-focus-shadow: 0 0 0 0.25rem rgba(var(--ajt-primary-rgb, 13, 110, 253), 0.25); /* Focus glow using primary color */
    --ajt-status-bg: #f8f9fa; /* Status bar background (matches header) */
    --ajt-status-border-color: var(--ajt-table-row-border-color); /* Status bar border (matches row border) */
    --ajt-overlay-bg: rgba(255, 255, 255, 0.85); /* Semi-transparent light overlay */
    --ajt-highlight-bg: #fff3cd; /* Yellowish highlight for search matches */
    --ajt-highlight-text: #664d03; /* Dark text for highlight background */
    --ajt-spinner-light: #e9ecef; /* Light part of the loading spinner */
    --ajt-spinner-dark: var(--ajt-primary-color, #495057); /* Main spinner color (use primary or fallback) */
/* --- نهاية القسم الداخلي 3 --- */

/* --- بداية القسم الداخلي 4 --- */
    /* Brand & Action Colors (Allow override via inline style from PHP Settings) */
    /* Primary (Default Blue) */
    --ajt-primary-color: #0d6efd;
    --ajt-primary-rgb: 13, 110, 253; /* For RGBA usage */
    --ajt-primary-hover: #0b5ed7;
    --ajt-primary-active: #0a58ca;
    --ajt-primary-contrast: #ffffff; /* Text color on primary bg */

    /* Secondary (Gray) */
    --ajt-secondary-color: #6c757d;
    --ajt-secondary-rgb: 108, 117, 125;
    --ajt-secondary-hover: #5c636a;
    --ajt-secondary-active: #565e64;
    --ajt-secondary-contrast: #ffffff;

    /* Success (Green) */
    --ajt-success-color: #198754;
    --ajt-success-rgb: 25, 135, 84;
    --ajt-success-hover: #157347;
    --ajt-success-active: #146c43;
    --ajt-success-contrast: #ffffff;

    /* Danger (Red) */
    --ajt-danger-color: #dc3545;
    --ajt-danger-rgb: 220, 53, 69;
    --ajt-danger-hover: #bb2d3b;
    --ajt-danger-active: #b02a37;
    --ajt-danger-contrast: #ffffff;

    /* Warning (Yellow) */
    --ajt-warning-color: #ffc107;
    --ajt-warning-rgb: 255, 193, 7;
    --ajt-warning-hover: #ffca2c;
    --ajt-warning-active: #ffcd39;
    --ajt-warning-contrast: #000000; /* Dark text on yellow */

    /* Info (Cyan) */
    --ajt-info-color: #0dcaf0;
    --ajt-info-rgb: 13, 202, 240;
    --ajt-info-hover: #31d2f2;
    --ajt-info-active: #3dd5f3;
    --ajt-info-contrast: #000000; /* Dark text on light cyan */

    /* Orange (for Import/Specific Actions) */
    --ajt-orange-color: #fd7e14;
    --ajt-orange-rgb: 253, 126, 20;
    --ajt-orange-hover: #e47112;
    --ajt-orange-active: #d86a10;
    --ajt-orange-contrast: #ffffff;
/* --- نهاية القسم الداخلي 4 --- */

/* --- بداية القسم الداخلي 5 --- */
    /* General Styles & Dimensions */
    --ajt-border-radius: 0.375rem; /* Default border radius (Bootstrap 5 standard) */
    --ajt-border-radius-sm: 0.25rem; /* Smaller border radius */
    --ajt-border-radius-lg: 0.5rem; /* Larger border radius */
    --ajt-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle box shadow */
    --ajt-header-sticky-top: 0; /* Adjust if WP admin bar or other fixed elements are present */
    --ajt-filter-sticky-top: 52px; /* Approx height of header row + border (adjust based on padding/font) */
    --ajt-transition-base: all 0.2s ease-in-out; /* Standard transition for effects */

    /* Toolbar Specific Variables */
    --ajt-toolbar-bg: #f8f9fa; /* Matches header background */
    --ajt-toolbar-border: #dee2e6; /* Standard light border */
    --ajt-toolbar-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Toolbar shadow */
    --ajt-toolbar-button-hover-bg: #e2e6ea; /* Hover background for toolbar buttons */
    --ajt-toolbar-button-active-bg: var(--ajt-primary-active, #0a58ca); /* Use primary active color for active toolbar buttons */
    --ajt-toolbar-button-active-contrast: var(--ajt-primary-contrast, #ffffff); /* Contrast color for active toolbar buttons */
}
/* --- نهاية القسم الداخلي 5 --- */

/* --- بداية القسم الداخلي 6 --- */
/* --- Dark Mode Variable Overrides --- */
/* Applied when .ajt-dark-mode is on body or the container */
body.ajt-dark-mode,
.ajt-container.ajt-dark-mode
{
    /* Dark Mode Palette */
    --ajt-body-bg: #212529; /* Dark background (Bootstrap dark color) */
    --ajt-text-color: #e9ecef; /* Light text (near white) */
    --ajt-secondary-text-color: #adb5bd; /* Lighter gray text */
    --ajt-muted-text-color: #6c757d; /* Muted gray text */
    --ajt-link-color: #6ea8fe; /* Lighter blue link */
    --ajt-link-hover-color: #9ec5fe; /* Even lighter blue link hover */
    --ajt-container-bg: #343a40; /* Slightly lighter dark container */
    --ajt-container-border: #495057; /* Darker border */
    --ajt-container-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.3); /* More prominent shadow on dark */

    /* Table Specific Colors (Dark Mode) */
    --ajt-table-border-color: #495057; /* Matches container border */
    --ajt-table-row-border-color: #454b51; /* Slightly lighter border between rows */
    --ajt-header-bg: #343a40; /* Matches container bg */
    --ajt-header-text: #e9ecef; /* Matches main text color */
    --ajt-header-border-color: #5a6168; /* Darker header bottom border */
    --ajt-filter-bg: #2c3034; /* Slightly darker filter row bg */
    --ajt-row-hover-bg: #3b4045; /* Dark hover background */
    /* Use primary color variable for focus outline (already defined) */
    --ajt-row-focus-outline: 1px dashed var(--ajt-link-color); /* Use link color for dashed outline */
    --ajt-row-selected-bg: #0d47a1; /* Darker blue selection background */
    --ajt-cell-editing-bg: #1565c0; /* Slightly lighter blue for editing background */
    --ajt-cell-nav-focus-outline: 2px solid var(--ajt-link-color); /* Use link color for solid focus outline */
/* --- نهاية القسم الداخلي 6 --- */

/* --- بداية القسم الداخلي 7 --- */
    /* Input & Status Colors (Dark Mode) */
    --ajt-input-border-color: #5a6168; /* Darker input border */
    --ajt-input-focus-border-color: var(--ajt-link-color); /* Match link color for focus */
    --ajt-input-focus-shadow: 0 0 0 0.25rem rgba(var(--ajt-primary-rgb, 13, 110, 253), 0.35); /* Use primary RGB with adjusted alpha */
    --ajt-status-bg: #343a40; /* Matches header/container bg */
    --ajt-status-border-color: var(--ajt-table-row-border-color); /* Matches row border */
    --ajt-overlay-bg: rgba(0, 0, 0, 0.75);   /* Darker overlay */
    --ajt-highlight-bg: #4e342e; /* Darker yellow/brown highlight background */
    --ajt-highlight-text: #ffccbc; /* Light text for highlight */
    --ajt-spinner-light: #495057; /* Darker light part of spinner */
    --ajt-spinner-dark: var(--ajt-link-color, #cccccc); /* Main spinner color (use link color or fallback) */
/* --- نهاية القسم الداخلي 7 --- */

/* --- بداية القسم الداخلي 8 --- */
    /* Toolbar (Dark Mode) */
    --ajt-toolbar-bg: #343a40; /* Matches header/container bg */
    --ajt-toolbar-border: #5a6168; /* Darker border */
    --ajt-toolbar-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Slightly more prominent */
    --ajt-toolbar-button-hover-bg: #495057; /* Darker hover */
    /* Use primary color for active toolbar buttons (variables already set) */
    /* --ajt-toolbar-button-active-bg: var(--ajt-primary-active); */
    /* --ajt-toolbar-button-active-contrast: var(--ajt-primary-contrast); */

    /* Specific Button Overrides for Dark Mode */
    /* Ensure secondary buttons have good contrast */
    --ajt-secondary-color: #5a6168; /* Darker grey button */
    --ajt-secondary-hover: #6c757d;
    --ajt-secondary-active: #7d858c;
    --ajt-secondary-contrast: #e9ecef; /* Light text on dark grey */

    /* Update select dropdown arrow color for dark mode */
    /* Handled via specific selector below for better targeting */
} /* End of dark mode variable overrides */

/* Specific element adjustments for dark mode */
body.ajt-dark-mode .ajt-pagination-controls .control-button:disabled,
.ajt-container.ajt-dark-mode .ajt-pagination-controls .control-button:disabled {
    background-color: #495057; /* Darker disabled background */
    border-color: #495057;
    color: #6c757d; /* Muted text */
    opacity: 0.65;
}
body.ajt-dark-mode .table-controls fieldset,
.ajt-container.ajt-dark-mode .table-controls fieldset { /* Corrected selector typo */
     background-color: rgba(255, 255, 255, 0.04); /* Slightly lighter background for fieldset */
     border-color: var(--ajt-container-border); /* Use dark border color */
}
body.ajt-dark-mode .ajt-table thead th.sortable:hover,
.ajt-container.ajt-dark-mode .ajt-table thead th.sortable:hover {
    background-color: rgba(255, 255, 255, 0.06); /* Subtle hover on sortable headers */
}
/* Ensure filter inputs match dark background */
body.ajt-dark-mode .ajt-filter-input,
.ajt-container.ajt-dark-mode .ajt-filter-input {
    background-color: var(--ajt-body-bg); /* Match dark body bg */
    color: var(--ajt-text-color);
    border-color: var(--ajt-input-border-color);
}
body.ajt-dark-mode .ajt-filter-input::placeholder,
.ajt-container.ajt-dark-mode .ajt-filter-input::placeholder {
    color: var(--ajt-muted-text-color); /* Use muted text color */
}
/* Ensure text in editing cell is readable */
body.ajt-dark-mode .ajt-container:not(.ajt-read-only) .ajt-table tbody td[contenteditable="true"]:focus,
.ajt-container.ajt-dark-mode:not(.ajt-read-only) .ajt-table tbody td[contenteditable="true"]:focus {
    color: var(--ajt-text-color); /* Ensure light text on dark editing bg */
}
/* Select dropdown arrow color */
body.ajt-dark-mode select.ajt-language-select,
.ajt-container.ajt-dark-mode select.ajt-language-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Light arrow */
     border-color: var(--ajt-secondary-color); /* Match secondary button border */
     background-color: var(--ajt-secondary-color); /* Match secondary button bg */
     color: var(--ajt-secondary-contrast); /* Match secondary button text */
 }
 body.ajt-dark-mode select.ajt-language-select:hover,
 .ajt-container.ajt-dark-mode select.ajt-language-select:hover {
     background-color: var(--ajt-secondary-hover);
     border-color: var(--ajt-secondary-hover);
 }
/* Dark mode for Swal Popups (handled via body class) */
body.ajt-dark-mode .swal2-popup {
    background: var(--ajt-container-bg) !important;
    color: var(--ajt-text-color) !important;
}
body.ajt-dark-mode .swal2-title {
    color: var(--ajt-text-color) !important;
}
body.ajt-dark-mode .swal2-html-container,
body.ajt-dark-mode .swal2-content { /* Older Swal versions */
    color: var(--ajt-text-color) !important;
}
body.ajt-dark-mode .swal2-input,
body.ajt-dark-mode .swal2-textarea,
body.ajt-dark-mode .swal2-select {
    background-color: var(--ajt-body-bg) !important;
    color: var(--ajt-text-color) !important;
    border-color: var(--ajt-input-border-color) !important;
}
body.ajt-dark-mode .swal2-input:focus,
body.ajt-dark-mode .swal2-textarea:focus,
body.ajt-dark-mode .swal2-select:focus {
     border-color: var(--ajt-input-focus-border-color) !important;
     box-shadow: var(--ajt-input-focus-shadow) !important;
}
body.ajt-dark-mode .swal2-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; /* Light arrow */
}
/* Dark mode Swal buttons */
body.ajt-dark-mode .swal2-confirm {
    background-color: var(--ajt-primary-color) !important;
    color: var(--ajt-primary-contrast) !important;
}
body.ajt-dark-mode .swal2-cancel {
     background-color: var(--ajt-secondary-color) !important;
     color: var(--ajt-secondary-contrast) !important;
}
body.ajt-dark-mode .swal2-deny {
     background-color: var(--ajt-danger-color) !important;
     color: var(--ajt-danger-contrast) !important;
}
/* --- نهاية القسم الداخلي 8 --- */

/* --- بداية القسم الداخلي 9 --- */
/* --- Utility Classes --- */
.visually-hidden { /* Keep this standard utility */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Utility to completely hide elements */
.ajt-hidden {
    display: none !important;
}
/* --- نهاية القسم الداخلي 9 --- */

/* --- بداية القسم الداخلي 10 --- */
/* --- Main Container Styling --- */
.ajt-container {
    font-family: var(--ajt-font-family);
    font-size: 0.95rem; /* Base font size */
    line-height: 1.6;
    margin: 2rem auto; /* Center container with margin */
    padding: 1.5rem; /* Inner spacing */
    background-color: var(--ajt-container-bg);
    color: var(--ajt-text-color);
    border: 1px solid var(--ajt-container-border);
    box-shadow: var(--ajt-container-shadow);
    border-radius: var(--ajt-border-radius-lg); /* Slightly larger radius for container */
    max-width: 98%; /* Prevent touching screen edges */
    box-sizing: border-box;
    position: relative; /* For positioning overlay & toolbar */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Loading Overlay --- */
.ajt-loading-overlay {
    position: absolute;
    inset: 0; /* Modern way to set top, right, bottom, left to 0 */
    background-color: var(--ajt-overlay-bg);
    z-index: 1050; /* High z-index */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--ajt-border-radius-lg); /* Match container radius */
    transition: background-color 0.3s ease, opacity 0.2s ease-out;
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Allow clicks through when hidden */
    backdrop-filter: blur(2px); /* Optional subtle blur */
}
/* Make overlay visible when needed (JS removes display:none style) */
.ajt-loading-overlay:not([style*="display: none"]) {
    opacity: 1;
    pointer-events: auto; /* Block clicks when visible */
}

/* Loading Spinner */
.ajt-spinner {
    border: 4px solid var(--ajt-spinner-light);
    border-top-color: var(--ajt-spinner-dark); /* Use primary or fallback dark spinner color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: ajt-spin 1s linear infinite;
    margin-bottom: 1rem;
}

/* Loading Text */
.ajt-loading-text {
    font-weight: 500;
    color: var(--ajt-text-color);
    transition: color 0.3s ease;
}

/* Spinner Animation */
@keyframes ajt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- نهاية القسم الداخلي 10 --- */
/* --- بداية القسم الداخلي 11 --- */
/* Swal Dark Mode Popups (already defined in section 8) */
/* No new styles needed here, just a placeholder section */
/* --- نهاية القسم الداخلي 11 --- */

/* --- بداية القسم الداخلي 12 --- */
/* Dark mode Swal Inputs & Select (already defined in section 8) */
/* No new styles needed here, just a placeholder section */
/* --- نهاية القسم الداخلي 12 --- */

/* --- بداية القسم الداخلي 13 --- */
/* --- Top Bar Layout --- */
/* Container for search, filter toggle, autosave, language, dark mode */
.table-top-bar {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Distribute space, or use flex-start/flex-end as needed */
    align-items: center; /* Vertically align items in the middle */
    gap: 0.75rem 1rem; /* Vertical (row) gap, Horizontal (column) gap */
    margin-bottom: 1.25rem; /* Space below the top bar */
    padding-bottom: 1rem; /* Padding below content before border */
    border-bottom: 1px solid var(--ajt-container-border);
    transition: border-color 0.3s ease;
}
/* --- نهاية القسم الداخلي 13 --- */

/* --- بداية القسم الداخلي 14 --- */
/* Search Controls Container (Input + Clear Button) */
.search-controls {
    display: flex; /* Align input and button horizontally */
    align-items: center; /* Vertically align */
    flex-grow: 1; /* Allow search to take available horizontal space */
    flex-basis: 250px; /* Minimum base width before growing */
    min-width: 220px; /* Absolute minimum width */
    max-width: 480px; /* Prevent it from becoming excessively wide */
    order: 1; /* Default visual order */
}

/* Container for top action buttons (Filter, Autosave, Dark Mode) */
.table-controls.top-controls {
     display: flex;
     flex-wrap: wrap; /* Allow buttons to wrap if space is limited */
     gap: 0.6rem; /* Space between buttons */
     order: 2; /* Default visual order */
     align-items: center; /* Align buttons vertically */
}

/* Container for language switcher */
.language-switcher-container {
    order: 3; /* Default visual order */
    position: relative; /* For positioning dropdown if needed */
    margin-inline-start: auto; /* Push language to the end in LTR, start in RTL */
}
/* RTL specific override for language switcher position */
[dir="rtl"] .language-switcher-container {
     margin-inline-start: 0; /* Reset LTR push */
     margin-inline-end: auto; /* Push to the end (left) in RTL */
}

/* --- نهاية القسم الداخلي 14 --- */

/* --- بداية القسم الداخلي 15 --- */
/* Search Input Field */
.ajt-search-input {
    padding: 0.5rem 0.8rem;
    /* LTR specific radius - overridden by [dir="rtl"] */
    border-start-start-radius: var(--ajt-border-radius); /* Logical property for top-left/top-right */
    border-end-start-radius: var(--ajt-border-radius); /* Logical property for bottom-left/bottom-right */
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border: 1px solid var(--ajt-input-border-color);
    /* LTR specific border - overridden by [dir="rtl"] */
    border-inline-end: none; /* Logical property for border-right/border-left */
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1; /* Input takes remaining space within search-controls */
    min-width: 150px;
    background-color: var(--ajt-body-bg);
    color: var(--ajt-text-color);
    /* Standard transitions */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    /* Match button height using calc based on line-height, padding, and border */
    /* Ensure buttons and inputs have same height for alignment */
    min-height: calc(1.5em + 1rem + 2px); /* Match button padding + line height + border */
    box-sizing: border-box; /* Include padding and border in height */
    appearance: none; /* Remove default search styling (esp. Safari) */
    -webkit-appearance: none;
}
/* Remove focus outline, use box-shadow */
.ajt-search-input:focus {
    border-color: var(--ajt-input-focus-border-color);
    box-shadow: var(--ajt-input-focus-shadow);
    outline: none;
    z-index: 2; /* Ensure focus shadow is above adjacent clear button */
    position: relative; /* Needed for z-index */
}
/* Clear default search cancel button on WebKit */
.ajt-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* RTL Specific styles for search input using logical properties */
[dir="rtl"] .ajt-search-input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--ajt-border-radius);
    border-end-end-radius: var(--ajt-border-radius);
    border-inline-end: 1px solid var(--ajt-input-border-color); /* Add border on the right (end in RTL) */
    border-inline-start: none; /* Remove border on the left (start in RTL) */
}
/* --- نهاية القسم الداخلي 15 --- */
/* --- بداية القسم الداخلي 16 --- */
/* --- General Button Styling --- */
/* Base styles for most buttons */
.control-button {
    display: inline-flex; /* Use flex for icon/text alignment */
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* Default padding */
    font-size: 0.9rem; /* Slightly smaller font */
    font-weight: 500; /* Medium weight */
    line-height: 1.5; /* Standard line height */
    text-align: center;
    text-decoration: none; /* Remove underline from links styled as buttons */
    white-space: nowrap; /* Prevent text wrapping */
    vertical-align: middle; /* Align with adjacent inline elements */
    cursor: pointer;
    user-select: none; /* Prevent text selection on buttons */
    border: 1px solid transparent; /* Base border */
    border-radius: var(--ajt-border-radius); /* Use default radius */
    transition: var(--ajt-transition-base); /* Use standard transition */
    box-shadow: var(--ajt-box-shadow); /* Subtle shadow */

    /* Default Color Scheme (Primary) */
    background-color: var(--ajt-primary-color);
    border-color: var(--ajt-primary-color);
    color: var(--ajt-primary-contrast);
}
/* Hover State */
.control-button:not(:disabled):hover { /* Apply hover only if not disabled */
    background-color: var(--ajt-primary-hover);
    border-color: var(--ajt-primary-hover);
    filter: brightness(1.05); /* Slight visual feedback */
}
/* Active State (Pressed) / Toggled On (.active class) */
.control-button:not(:disabled):active,
.control-button:not(:disabled).active {
    background-color: var(--ajt-primary-active);
    border-color: var(--ajt-primary-active);
    transform: translateY(1px); /* Subtle press effect */
    box-shadow: none; /* Remove shadow when pressed */
    filter: brightness(1);
}
/* Focus State (Keyboard Navigation) - Use :focus-visible */
.control-button:focus-visible {
     outline: 2px solid var(--ajt-input-focus-border-color); /* Use input focus color */
     outline-offset: 2px;
     /* Optional: Combine focus shadow with base shadow if desired */
     box-shadow: var(--ajt-input-focus-shadow), var(--ajt-box-shadow);
     z-index: 1; /* Ensure outline is visible */
     position: relative;
}
/* Disabled State */
.control-button:disabled {
    background-color: var(--ajt-secondary-color); /* Use secondary as default disabled */
    border-color: var(--ajt-secondary-color);
    color: var(--ajt-secondary-contrast);
    cursor: not-allowed;
    opacity: 0.65; /* Standard disabled opacity */
    box-shadow: none; /* Remove shadow */
    transform: none; /* Remove active transform */
    filter: none; /* Remove brightness filter */
}
/* --- نهاية القسم الداخلي 16 --- */

/* --- بداية القسم الداخلي 17 --- */
/* Button Icons (Dashicons) Styling */
.control-button .dashicons {
    /* LTR default margin: Space after icon */
    margin-inline-end: 0.4em;
    /* Pull icon slightly closer to the start edge */
    margin-inline-start: -0.2em;
    vertical-align: text-bottom; /* Align icon baseline better */
    font-size: 1.2em; /* Make icon slightly larger than button text */
    height: 1em; /* Maintain consistent height */
    width: 1em;
    line-height: 1; /* Prevent extra spacing */
    /* Ensure icon color matches button text color by default */
    /* color: currentColor; */ /* Let parent color rule */
}
/* Remove margin if icon is the only child (icon-only button) */
.control-button .dashicons:only-child {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* --- Specific Button Colors & Styles --- */

/* Clear Search Button (Warning Color) */
.clear-button {
    background-color: var(--ajt-warning-color);
    border-color: var(--ajt-warning-color);
    color: var(--ajt-warning-contrast);
    padding: 0.5rem 0.8rem; /* Match input vertical padding */
    /* LTR default radius - connected to input */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--ajt-border-radius);
    border-end-end-radius: var(--ajt-border-radius);
    margin-inline-start: -1px; /* Overlap border with input using logical property */
    z-index: 1; /* Sit slightly above input border */
    position: relative;
     min-height: calc(1.5em + 1rem + 2px); /* Match input height */
     box-sizing: border-box;
}
.clear-button:not(:disabled):hover {
    background-color: var(--ajt-warning-hover);
    border-color: var(--ajt-warning-hover);
}
.clear-button:not(:disabled):active {
    background-color: var(--ajt-warning-active);
    border-color: var(--ajt-warning-active);
}
/* RTL Specific radius/margin for clear button using logical properties */
[dir="rtl"] .clear-button {
    border-start-start-radius: var(--ajt-border-radius);
    border-end-start-radius: var(--ajt-border-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-start: 0;
    margin-inline-end: -1px; /* Overlap border on the left (end in RTL) */
}
/* --- نهاية القسم الداخلي 17 --- */

/* --- بداية القسم الداخلي 18 --- */
/* Delete Buttons (Danger Color) */
.delete-button,
#ajt-delete-selected-rows-btn,
#ajt-delete-column-btn
{
    background-color: var(--ajt-danger-color);
    border-color: var(--ajt-danger-color);
    color: var(--ajt-danger-contrast);
}
.delete-button:not(:disabled):hover,
#ajt-delete-selected-rows-btn:not(:disabled):hover,
#ajt-delete-column-btn:not(:disabled):hover {
    background-color: var(--ajt-danger-hover);
    border-color: var(--ajt-danger-hover);
}
.delete-button:not(:disabled):active,
#ajt-delete-selected-rows-btn:not(:disabled):active,
#ajt-delete-column-btn:not(:disabled):active {
    background-color: var(--ajt-danger-active);
    border-color: var(--ajt-danger-active);
}
/* Specific styling for bulk delete button when disabled */
#ajt-delete-selected-rows-btn:disabled {
     /* Inherits general disabled styles (secondary color, opacity) */
     /* Can override here if needed, e.g., lower opacity further */
     /* opacity: 0.5; */
}

/* Save Button (Success Color) */
.save-button,
#ajt-save-table-btn
{
    background-color: var(--ajt-success-color);
    border-color: var(--ajt-success-color);
    color: var(--ajt-success-contrast);
}
.save-button:not(:disabled):hover,
#ajt-save-table-btn:not(:disabled):hover {
    background-color: var(--ajt-success-hover);
    border-color: var(--ajt-success-hover);
}
.save-button:not(:disabled):active,
#ajt-save-table-btn:not(:disabled):active {
    background-color: var(--ajt-success-active);
    border-color: var(--ajt-success-active);
}
/* Style for Save button when there are unsaved changes (pulsing effect) */
.save-button.unsaved-changes {
    animation: ajt-pulse-save 1.5s infinite;
    /* Use success color for the pulse shadow */
    box-shadow: 0 0 0 0 rgba(var(--ajt-success-rgb), 0.5);
}
/* Dark mode pulse needs higher contrast */
.ajt-dark-mode .save-button.unsaved-changes {
    box-shadow: 0 0 0 0 rgba(var(--ajt-success-rgb), 0.7);
}
/* Pulse Animation for Save Button */
@keyframes ajt-pulse-save {
    0% { box-shadow: 0 0 0 0 rgba(var(--ajt-success-rgb), 0.5); }
    70% { box-shadow: 0 0 0 0.7rem rgba(var(--ajt-success-rgb), 0); } /* Increased pulse size */
    100% { box-shadow: 0 0 0 0 rgba(var(--ajt-success-rgb), 0); }
}
/* --- نهاية القسم الداخلي 18 --- */

/* --- بداية القسم الداخلي 19 --- */
/* Toggle Buttons (Autosave, Filter, DarkMode) - Default state (Secondary Color) */
.autosave-button,
.filter-toggle-button,
.dark-mode-toggle {
    background-color: var(--ajt-secondary-color);
    border-color: var(--ajt-secondary-color);
    color: var(--ajt-secondary-contrast);
}
.autosave-button:not(:disabled):hover,
.filter-toggle-button:not(:disabled):hover,
.dark-mode-toggle:not(:disabled):hover {
    background-color: var(--ajt-secondary-hover);
    border-color: var(--ajt-secondary-hover);
}
.autosave-button:not(:disabled):active,
.filter-toggle-button:not(:disabled):active,
.dark-mode-toggle:not(:disabled):active {
    background-color: var(--ajt-secondary-active);
    border-color: var(--ajt-secondary-active);
}

/* Active state for Toggle Buttons (when feature is ON) - Use Info Color */
.autosave-button.active,
.filter-toggle-button.active {
    background-color: var(--ajt-info-color);
    border-color: var(--ajt-info-color);
    color: var(--ajt-info-contrast);
    /* Override active state styles from general button */
    transform: none;
    box-shadow: var(--ajt-box-shadow); /* Restore default shadow */
}
/* Hover state when toggle is active */
.autosave-button.active:not(:disabled):hover,
.filter-toggle-button.active:not(:disabled):hover {
    background-color: var(--ajt-info-hover);
    border-color: var(--ajt-info-hover);
    filter: brightness(1.05);
}
/* Active (pressed) state when toggle is already active */
.autosave-button.active:not(:disabled):active,
.filter-toggle-button.active:not(:disabled):active {
    background-color: var(--ajt-info-active);
    border-color: var(--ajt-info-active);
    transform: translateY(1px);
    box-shadow: none;
    filter: brightness(1);
}


/* Dark Mode Toggle Icon Specifics */
/* Make icon slightly larger, ensure color matches button text */
.dark-mode-toggle .ajt-dark-mode-icon {
    font-size: 1.3em;
    line-height: 1;
    vertical-align: middle;
    margin: 0; /* Remove default Dashicon margins */
    color: var(--ajt-secondary-contrast) !important; /* Ensure icon color is correct */
}
/* --- نهاية القسم الداخلي 19 --- */

/* --- بداية القسم الداخلي 20 --- */
/* Export / Import Buttons */
/* Export Buttons (Info Color) */
.export-button {
    background-color: var(--ajt-info-color);
    border-color: var(--ajt-info-color);
    color: var(--ajt-info-contrast);
}
.export-button:not(:disabled):hover {
    background-color: var(--ajt-info-hover);
    border-color: var(--ajt-info-hover);
}
.export-button:not(:disabled):active {
    background-color: var(--ajt-info-active);
    border-color: var(--ajt-info-active);
}

/* Import Buttons (Orange Color) */
.import-button {
    background-color: var(--ajt-orange-color);
    border-color: var(--ajt-orange-color);
    color: var(--ajt-orange-contrast);
}
.import-button:not(:disabled):hover {
    background-color: var(--ajt-orange-hover);
    border-color: var(--ajt-orange-hover);
}
.import-button:not(:disabled):active {
    background-color: var(--ajt-orange-active);
    border-color: var(--ajt-orange-active);
}

/* Language Select Dropdown Styling (Style like a secondary button) */
select.ajt-language-select {
    /* Use logical properties for padding */
    padding-inline-start: 1rem; /* Space for text */
    padding-inline-end: 2.5rem; /* More space for arrow */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--ajt-secondary-color); /* Match secondary button */
    color: var(--ajt-secondary-contrast);
    border: 1px solid var(--ajt-secondary-color);
    border-radius: var(--ajt-border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: var(--ajt-transition-base);
    /* Remove default appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom arrow using SVG - Default (Light Text/Dark BG) Arrow Color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* White arrow */
    background-repeat: no-repeat;
    /* LTR arrow position using logical property */
    background-position: right 0.75rem center;
    /* background-position: inline-end 0.75rem center; */ /* Not fully supported everywhere yet */
    background-size: 16px 12px; /* Arrow size */
    /* Match button height */
    min-height: calc(1.5em + 1rem + 2px);
    box-sizing: border-box;
    box-shadow: var(--ajt-box-shadow);
}
/* Hover state for select */
select.ajt-language-select:not(:disabled):hover {
    background-color: var(--ajt-secondary-hover);
    border-color: var(--ajt-secondary-hover);
}
/* Focus state for select */
select.ajt-language-select:focus-visible {
    outline: 2px solid var(--ajt-input-focus-border-color);
    outline-offset: 2px;
    box-shadow: var(--ajt-input-focus-shadow), var(--ajt-box-shadow);
    border-color: var(--ajt-input-focus-border-color); /* Optional: change border on focus */
    z-index: 1;
    position: relative;
}
/* RTL Specific styles for select arrow */
[dir="rtl"] select.ajt-language-select {
     background-position: left 0.75rem center; /* Position arrow on the left for RTL */
     /* padding-inline-start: 2.5rem; */ /* Swap padding if using logical properties */
     /* padding-inline-end: 1rem; */
}
/* --- نهاية القسم الداخلي 20 --- */
/* --- بداية القسم الداخلي 21 --- */
/* --- Table Status Area --- */
/* Container for autosave status, countdown, last saved time */
.table-status {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: space-between; /* Space out items */
    align-items: center;
    gap: 0.75rem 1.5rem; /* Row gap, column gap */
    margin-bottom: 1.25rem; /* Space below status bar */
    padding: 0.75rem 1.25rem; /* Padding inside */
    background-color: var(--ajt-status-bg);
    border: 1px solid var(--ajt-status-border-color);
    border-radius: var(--ajt-border-radius);
    font-size: 0.875rem; /* Slightly smaller text */
    color: var(--ajt-secondary-text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Specific status elements */
.ajt-autosave-status {
    font-weight: 500;
    color: var(--ajt-text-color); /* Use main text color for status */
    transition: color 0.3s ease;
}
.ajt-countdown-timer {
    font-weight: bold;
    color: var(--ajt-primary-color); /* Use primary color for countdown */
    min-width: 110px; /* Ensure space */
    text-align: center;
    transition: color 0.3s ease;
}
.last-saved-status {
    /* Use logical properties for alignment and margin */
    text-align: end; /* Aligns right in LTR, left in RTL */
    flex-grow: 1; /* Take remaining space */
    margin-inline-start: 1em; /* Margin on the left in LTR, right in RTL */
}
.last-saved-time {
    font-weight: 500;
    color: var(--ajt-text-color); /* Use main text color */
    margin-inline-start: 0.5em; /* Space before time */
    transition: color 0.3s ease;
}

/* --- Basic Cell Formatting Toolbar --- */
.ajt-cell-toolbar {
    position: absolute; /* Positioned by JS relative to container */
    z-index: 1001; /* Above table content, below loading overlay */
    background-color: var(--ajt-toolbar-bg);
    border: 1px solid var(--ajt-toolbar-border);
    border-radius: var(--ajt-border-radius-sm);
    box-shadow: var(--ajt-toolbar-shadow);
    padding: 0.25rem;
    display: flex; /* Arrange buttons horizontally */
    gap: 0.25rem; /* Space between buttons */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
    /* Initially hidden */
    display: none;
}
.ajt-toolbar-button {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--ajt-border-radius-sm);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    color: var(--ajt-secondary-text-color);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ajt-toolbar-button .dashicons {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}
.ajt-toolbar-button:hover {
    background-color: var(--ajt-toolbar-button-hover-bg);
    color: var(--ajt-text-color);
}
/* Style for active format (e.g., Bold button when text is bold) */
.ajt-toolbar-button.active {
    background-color: var(--ajt-toolbar-button-active-bg); /* Use defined active bg */
    color: var(--ajt-toolbar-button-active-contrast); /* Use defined active contrast */
    border-color: transparent; /* Remove border for active */
}
/* --- نهاية القسم الداخلي 21 --- */

/* --- بداية القسم الداخلي 22 --- */
/* --- Table Wrapper --- */
/* Provides horizontal scrolling */
.table-wrapper {
    max-width: 100%;
    overflow-x: auto; /* Enable horizontal scrollbar if needed */
    border: 1px solid var(--ajt-table-border-color);
    border-radius: var(--ajt-border-radius);
    margin-bottom: 1.25rem; /* Space below table */
    background-color: var(--ajt-container-bg); /* Ensure bg for scrollbar area */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Subtle inner shadow */
}

/* --- Table General --- */
.ajt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 650px; /* Prevent excessive narrowing, forces scroll */
    table-layout: auto; /* Allow columns to adjust */
    /* Text alignment is handled based on [dir] attribute */
    text-align: start; /* Use logical property for default alignment */
}

/* --- Table Header --- */
.ajt-table thead th {
    background-color: var(--ajt-header-bg);
    color: var(--ajt-header-text);
    padding: 0.8rem 1rem; /* Header padding */
    border-width: 0 0 2px 0; /* Bottom border only */
    border-style: solid;
    border-color: var(--ajt-header-border-color);
    text-align: inherit; /* Inherit alignment from table/container */
    font-weight: 600; /* Bolder header text */
    position: sticky; /* Sticky header */
    top: var(--ajt-header-sticky-top); /* Stick to top of scroll container */
    z-index: 10; /* Above body */
    white-space: nowrap; /* Prevent header wrapping */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    vertical-align: bottom; /* Align text to bottom */
    cursor: default;
}
/* Style for sortable headers */
.ajt-table thead th.sortable { cursor: pointer; }
.ajt-table thead th.sortable:hover { background-color: rgba(0,0,0,0.03); }
/* Dark mode hover handled in section 8 */

/* Sort Icons */
.ajt-table thead th .sort-icon {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 0.5em; /* Use logical property for margin */
    opacity: 0.4; /* Dim inactive icon */
    transition: opacity 0.2s ease;
    font-size: 1em;
    width: 1em;
    height: 1em;
    color: currentColor;
}
/* Make sorted icon fully opaque */
.ajt-table thead th.sort-asc .sort-icon,
.ajt-table thead th.sort-desc .sort-icon { opacity: 1; }
/* Keep unsorted icon dimmed */
.ajt-table thead th.sort-none .sort-icon { opacity: 0.4; }

/* Header Select-All Column Styling */
.ajt-table thead th.ajt-select-all-th {
    width: 3em; /* Fixed width */
    text-align: center;
    cursor: default;
    padding-inline-start: 0.5rem; padding-inline-end: 0.5rem; /* Logical padding */
    position: sticky; /* Keep sticky like other headers */
    top: var(--ajt-header-sticky-top);
    z-index: 11; /* Above regular headers */
}
.ajt-select-all-checkbox {
    vertical-align: middle;
    cursor: pointer;
    margin: 0; /* Reset default margins */
}
/* --- نهاية القسم الداخلي 22 --- */

/* --- بداية القسم الداخلي 23 --- */
/* --- Filter Row --- */
.ajt-filter-row td {
    padding: 0.4rem 0.5rem; /* Smaller padding */
    background-color: var(--ajt-filter-bg);
    border-width: 0 0 1px 0; /* Bottom border only */
    border-style: solid;
    border-color: var(--ajt-table-border-color);
    position: sticky; /* Sticky filter row */
    top: var(--ajt-filter-sticky-top); /* Stick below main header */
    z-index: 9; /* Below header, above body */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Placeholder cell in filter row (aligns with select-all header) */
.ajt-filter-select-all-placeholder { background-color: var(--ajt-filter-bg); }

/* Filter Input Fields */
.ajt-filter-input {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--ajt-input-border-color);
    border-radius: var(--ajt-border-radius-sm);
    font-size: 0.85rem; /* Smaller font for filter inputs */
    box-sizing: border-box;
    background-color: var(--ajt-body-bg);
    color: var(--ajt-text-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    min-height: calc(1.5em + 0.6rem + 2px); /* Consistent height */
}
.ajt-filter-input::placeholder {
    color: var(--ajt-muted-text-color);
    opacity: 0.8;
}
.ajt-filter-input:focus { /* Matches search input focus */
    border-color: var(--ajt-input-focus-border-color);
    box-shadow: var(--ajt-input-focus-shadow);
    outline: none;
    z-index: 2; /* Above other filter inputs if overlapping slightly */
    position: relative;
}

/* --- Table Body --- */
.ajt-table tbody tr {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--ajt-table-row-border-color);
}
.ajt-table tbody tr:last-child {
    border-bottom: none; /* Remove border from last row */
}

/* Table Data Cells */
.ajt-table tbody td {
    padding: 0.7rem 1rem; /* Cell padding */
    border: none; /* Borders handled by TR */
    font-weight: 500; /* <<< التعديل المطلوب: زيادة سماكة الخط */
    color: var(--ajt-text-color);
    transition: background-color 0.2s ease, color 0.3s ease, outline 0.1s ease;
    overflow-wrap: break-word; /* Allow long words to break */
    word-wrap: break-word; /* Legacy */
    vertical-align: middle; /* Vertically center content */
    position: relative; /* For focus outline offset */
    text-align: inherit; /* Inherit LTR/RTL alignment */
    /* dir attribute set by JS based on this.currentDir */
}
/* Explicit RTL/LTR text alignment for cells using CSS */
[dir="ltr"] .ajt-table tbody td { text-align: left; }
[dir="rtl"] .ajt-table tbody td { text-align: right; }

/* Row Checkbox Cell Styling */
.ajt-table tbody td.ajt-row-select-td {
     width: 3em; /* Match header checkbox column width */
     text-align: center;
     padding-inline-start: 0.5rem; padding-inline-end: 0.5rem; /* Logical padding */
}
.ajt-row-select-checkbox {
    vertical-align: middle;
    cursor: pointer;
    margin: 0; /* Reset default margins */
}
/* --- نهاية القسم الداخلي 23 --- */

/* --- بداية القسم الداخلي 24 --- */
/* Row States (Hover, Focus, Selection) */
/* Style TD on hover for better background consistency */
.ajt-container:not(.ajt-read-only) .ajt-table tbody tr:hover td {
    background-color: var(--ajt-row-hover-bg);
}
/* Selected Row Style */
.ajt-table tbody tr.ajt-row-selected td {
    background-color: var(--ajt-row-selected-bg) !important; /* Use important to override hover */
}
/* Focused Row Style (via keyboard nav or click) */
.ajt-table tbody tr.row-focused {
     /* Use outline for row focus indication */
     outline: var(--ajt-row-focus-outline);
     outline-offset: -1px; /* Bring outline inside row border */
     z-index: 1; /* Ensure visible over selection */
     position: relative;
}

/* Editable Cell States */
.ajt-container:not(.ajt-read-only) .ajt-table tbody td[contenteditable="true"] {
    cursor: text; /* Indicate editable */
}
/* Cell actively being edited (has browser focus) */
.ajt-container:not(.ajt-read-only) .ajt-table tbody td[contenteditable="true"]:focus {
    background-color: var(--ajt-cell-editing-bg) !important; /* Override hover/select */
    outline: var(--ajt-cell-nav-focus-outline); /* Use specific nav outline */
    outline-offset: -2px; /* Offset within the cell */
    box-shadow: inset 0 0 4px rgba(var(--ajt-primary-rgb), 0.2); /* Subtle inner glow */
    z-index: 2; /* Above row focus */
    /* Text color handled by dark mode specific rule */
}
/* Cell focused via keyboard navigation (has .cell-focused class added by JS) */
.ajt-container:not(.ajt-read-only) .ajt-table tbody td.cell-focused {
    /* Only apply the outline/shadow for keyboard focus, background comes from row state */
    outline: var(--ajt-cell-nav-focus-outline);
    outline-offset: -2px;
    box-shadow: inset 0 0 5px rgba(var(--ajt-primary-rgb), 0.3);
    z-index: 2; /* Above row focus */
}

/* Read-Only Mode Overrides */
.ajt-container.ajt-read-only .ajt-table tbody td {
    cursor: default !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.ajt-container.ajt-read-only .ajt-table tbody tr:hover td {
    background-color: inherit !important; /* Prevent hover effect */
}
.ajt-container.ajt-read-only .ajt-table tbody tr.row-focused {
    outline: none !important; /* Remove focus outline */
}
.ajt-container.ajt-read-only .ajt-table tbody tr.ajt-row-selected td {
    background-color: inherit !important; /* Remove selection background */
}

/* --- Drag and Drop Styles (Using SortableJS classes) --- */
/* Style for the placeholder where the item will drop */
.sortable-ghost {
    opacity: 0.4;
    background-color: #c8ebfb; /* Light blue placeholder */
}
.ajt-dark-mode .sortable-ghost {
    background-color: #0a3d62; /* Dark blue placeholder */
}
/* Style for the item being dragged */
.sortable-drag {
    opacity: 0.9 !important; /* Make slightly transparent */
    background-color: #eef !important; /* Light background */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.ajt-dark-mode .sortable-drag {
    background-color: #454b51 !important; /* Dark background */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
/* Ensure table cells keep layout while row is dragged */
.ajt-table tbody tr.sortable-ghost td {
     border-style: dashed !important; /* Dashed border for placeholder cells */
     border-color: var(--ajt-primary-color) !important;
     background-color: transparent !important; /* Ensure placeholder background doesn't override this */
}
/* Apply cursor while dragging rows/columns */
.ajt-table tbody tr,
.ajt-table thead th.sortable /* Apply to sortable headers for column dragging */
{
    cursor: grab; /* Indicate draggable */
}
/* Cursor when actively dragging */
.sortable-drag {
    cursor: grabbing !important;
}
/* Prevent text selection during drag */
.sortable-dragging * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* --- نهاية القسم الداخلي 24 --- */

/* --- بداية القسم الداخلي 25 --- */
/* --- Filter Highlighting --- */
/* Style for text matched by search/filter (JS wraps matches in <mark>) */
mark.ajt-highlight {
    background-color: var(--ajt-highlight-bg);
    color: var(--ajt-highlight-text);
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    box-shadow: 0 0 0 1px var(--ajt-highlight-bg); /* Ensure background covers edges */
    font-weight: 600; /* Make highlighted text slightly bolder */
}

/* --- No Results Message --- */
.ajt-no-results {
    color: var(--ajt-muted-text-color);
    font-style: italic;
    text-align: center;
    padding: 1.5rem; /* Provide adequate spacing */
}

/* --- Pagination Controls --- */
.ajt-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 0.5rem 1rem; /* Space between items */
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ajt-container-border);
    transition: border-color 0.3s ease;
    font-size: 0.9rem;
}
.ajt-page-info {
    color: var(--ajt-secondary-text-color);
    transition: color 0.3s ease;
    margin: 0 0.5rem; /* Add horizontal margin around page info */
}
.ajt-total-rows-info {
    color: var(--ajt-muted-text-color);
    margin-inline-start: 1rem; /* Use logical property */
    transition: color 0.3s ease;
}
/* Style pagination buttons (Prev/Next) - Use Secondary style */
.ajt-pagination-controls .control-button {
    padding: 0.3rem 0.8rem; /* Smaller padding */
    font-size: 0.85rem;
    background-color: var(--ajt-secondary-color);
    border-color: var(--ajt-secondary-color);
    color: var(--ajt-secondary-contrast);
}
.ajt-pagination-controls .control-button:not(:disabled):hover {
    background-color: var(--ajt-secondary-hover);
    border-color: var(--ajt-secondary-hover);
}
.ajt-pagination-controls .control-button:not(:disabled):active {
    background-color: var(--ajt-secondary-active);
    border-color: var(--ajt-secondary-active);
}
/* Disabled pagination button style (Light mode) */
.ajt-pagination-controls .control-button:disabled {
    background-color: #e9ecef; /* Light gray background */
    border-color: #e9ecef;
    color: #adb5bd; /* Muted text */
    opacity: 1; /* Use color/bg to indicate disabled */
    cursor: default;
    box-shadow: none;
    transform: none;
}
/* Dark mode disabled pagination buttons handled in section 8 */

/* --- Bottom Controls (Fieldsets) --- */
.table-controls.bottom-controls,
.table-controls.export-import-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center fieldsets */
    align-items: flex-start; /* Align tops of fieldsets */
    gap: 1.5rem; /* Space between fieldsets */
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ajt-container-border);
    transition: border-color 0.3s ease;
}
/* Fieldset styling */
.table-controls fieldset {
    border: 1px solid var(--ajt-container-border);
    border-radius: var(--ajt-border-radius);
    padding: 1rem 1.5rem 1.25rem;
    margin: 0; /* Remove default margin */
    display: flex;
    flex-wrap: wrap; /* Allow buttons inside to wrap */
    gap: 0.75rem; /* Space between buttons */
    align-items: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    background-color: rgba(0,0,0,0.01); /* Subtle background */
}
/* Dark mode fieldset handled in section 8 */
/* Legend styling */
.table-controls legend {
    padding: 0 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ajt-text-color);
    transition: color 0.3s ease;
    margin-inline-start: 0.5rem; /* Use logical property */
}

/* --- Login Box Styling --- */
.ajt-login-prompt {
    border: 1px solid var(--ajt-container-border);
    border-radius: var(--ajt-border-radius-lg); /* Match container */
    padding: 2rem;
    margin: 2rem auto;
    text-align: center;
    background-color: var(--ajt-status-bg); /* Use status background */
    max-width: 500px;
    box-shadow: var(--ajt-container-shadow);
    color: var(--ajt-text-color); /* Ensure text color matches mode */
}
.ajt-login-prompt h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 1.3em;
}
.ajt-login-prompt p {
    margin-bottom: 1.5rem;
    font-size: 1em;
}
.ajt-login-prompt .ajt-login-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ajt-login-prompt .ajt-login-button {
    /* Inherits .control-button styles */
    /* Adjust size if needed */
    padding: 0.6rem 1.2rem;
    font-size: 1em;
    margin: 0; /* Reset any inherited margins */
}
.ajt-login-prompt .ajt-login-button.secondary {
    background-color: var(--ajt-secondary-color);
    border-color: var(--ajt-secondary-color);
    color: var(--ajt-secondary-contrast);
}
.ajt-login-prompt .ajt-login-button.secondary:hover {
    background-color: var(--ajt-secondary-hover);
    border-color: var(--ajt-secondary-hover);
}
.ajt-login-prompt .ajt-back-link {
    margin-top: 1.5rem;
    font-size: 0.9em;
}
.ajt-login-prompt .ajt-back-link a {
    color: var(--ajt-link-color);
    text-decoration: none;
}
.ajt-login-prompt .ajt-back-link a:hover {
    color: var(--ajt-link-hover-color);
    text-decoration: underline;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) { /* Medium screens / Tablets */
     .ajt-table { font-size: 0.875rem; }
     .ajt-table thead th, .ajt-table tbody td { padding: 0.6rem 0.8rem; }
     /* Adjust sticky top offset if needed based on actual header height */
     :root { --ajt-filter-sticky-top: 48px; /* Example adjustment */ }
     .table-status { gap: 0.5rem 1rem; padding: 0.6rem 1rem; }
     /* Adjust checkbox column width */
     .ajt-table thead th.ajt-select-all-th, .ajt-table tbody td.ajt-row-select-td {
         width: 2.5em;
         padding-inline-start: 0.3rem; padding-inline-end: 0.3rem;
     }
}

@media (max-width: 768px) { /* Small screens / Tablets */
    .ajt-container { padding: 1rem; margin: 1rem auto; font-size: 0.9rem; }
    /* Stack top bar items */
    .table-top-bar { flex-direction: column; align-items: stretch; gap: 1rem; }
    .search-controls { max-width: none; order: 1; } /* Full width search */
    .table-controls.top-controls { flex-direction: row; flex-wrap: wrap; justify-content: center; order: 2; margin: 0; }
    .language-switcher-container { order: 3; align-self: center; margin: 0.5rem 0 0 0; margin-inline-start: 0; margin-inline-end: 0; } /* Center language switcher */
    /* Stack status items */
    .ajt-container:not(.ajt-read-only) .table-status { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; }
    .ajt-container:not(.ajt-read-only) .last-saved-status { text-align: start; width: 100%; margin-inline-start: 0; }
    .ajt-container:not(.ajt-read-only) .ajt-countdown-timer { text-align: start; min-width: auto; }
    /* Stack pagination */
    .ajt-pagination-controls { flex-direction: column; gap: 0.75rem; }
    .ajt-total-rows-info { margin-inline-start: 0; }
    /* Stack bottom control fieldsets and buttons within them */
    .table-controls.bottom-controls, .table-controls.export-import-controls { flex-direction: column; align-items: stretch; gap: 1rem; }
    .table-controls fieldset { padding: 0.75rem 1rem; flex-direction: column; align-items: stretch; }
    .table-controls fieldset .control-button { justify-content: center; width: 100%; } /* Make buttons full width */
    /* Adjust table size/padding */
    .ajt-table { min-width: auto; font-size: 0.85rem; } /* Allow table to shrink more */
    .ajt-table thead th, .ajt-table tbody td { padding: 0.5rem 0.6rem; }
     /* Recalculate sticky top */
    :root { --ajt-filter-sticky-top: 44px; /* Example adjustment */ }
    .ajt-filter-input { font-size: 0.8rem; }
    /* Narrower checkbox column */
    .ajt-table thead th.ajt-select-all-th, .ajt-table tbody td.ajt-row-select-td {
         width: 2.2em;
         padding-inline-start: 0.2rem; padding-inline-end: 0.2rem;
     }
}

@media (max-width: 576px) { /* Extra small screens / Phones */
    .ajt-container { padding: 0.75rem; margin: 0.75rem auto; }
    /* Reduce button/input/select sizes */
    .control-button { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
    select.ajt-language-select { font-size: 0.85rem; padding-top: 0.4rem; padding-bottom: 0.4rem; min-height: calc(1.5em + 0.8rem + 2px); }
    .ajt-search-input { font-size: 0.85rem; padding-top: 0.4rem; padding-bottom: 0.4rem; min-height: calc(1.5em + 0.8rem + 2px); }
    .clear-button { padding-top: 0.4rem; padding-bottom: 0.4rem; min-height: calc(1.5em + 0.8rem + 2px); }
    .ajt-filter-input { padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.75rem; min-height: calc(1.5em + 0.4rem + 2px); }
    /* Reduce status bar font/padding */
    .table-status { font-size: 0.8rem; padding: 0.6rem 0.75rem; }
    /* Reduce fieldset padding/legend size */
    .table-controls fieldset { padding: 0.6rem 0.8rem; }
    .table-controls legend { font-size: 0.9rem; }
    /* Narrowest checkbox column */
    .ajt-table thead th.ajt-select-all-th, .ajt-table tbody td.ajt-row-select-td { width: 2em; }
    /* Adjust login prompt */
    .ajt-login-prompt { padding: 1.5rem; }
    .ajt-login-prompt h2 {font-size: 1.2em;}
    .ajt-login-prompt p {font-size: 0.95em;}
    .ajt-login-prompt .ajt-login-button { font-size: 0.9em; padding: 0.5rem 1rem;}
}
/* --- نهاية القسم الداخلي 25 --- */