.search-input-styled {
    font-size: 16px;
    padding: 12px 16px !important;
    height: 48px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all .25s;
    font-family: var(--font-base);
}
.search-input-styled:focus {
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
}
.per-page-select {
    font-size: 14px;
    padding: 10px 14px !important;
    height: 48px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-base);
    cursor: pointer;
    transition: all .25s;
}
.per-page-select:focus { border-color: var(--gradient-start); box-shadow: 0 0 0 4px rgba(102,126,234,0.15); outline: none; }
.per-page-select:hover { background: var(--table-hover); }
/* ===== Fonts ===== */
/* All font-face declarations now in fonts.css (imported first in header.php) */

/* ===== CSS Variables for Theme ===== */
:root {
    /* Light Theme Colors */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 22px;
    --space-6: 28px;
    --space-8: 40px;
    /* Font Sizes */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 18px;
    --fs-lg: 22px;
    --fs-xl: 28px;
    /* Focus */
    --focus-outline: 2px solid var(--gradient-start);
    
    /* Navigation */
    --nav-bg: #2c3e50;
    --nav-hover: #34495e;
    --nav-text: #ffffff;
    
    /* Table */
    --table-header-bg: #f8f9fa;
    --table-border: #dee2e6;
    --table-hover: #f8f9fa;
    
    /* Button Colors */
    --btn-primary: #667eea;
    --btn-primary-hover: #5568d3;
    --btn-success: #28a745;
    --btn-success-hover: #218838;
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-secondary: #6c757d;
    --btn-secondary-hover: #5a6268;
    /* Font Stacks */
    --font-base: 'Vazirmatn','Shabnam','Sahel','Samim','Segoe UI',Tahoma,Arial,sans-serif;
    --font-heading: 'Shabnam','Vazirmatn','Sahel','Samim','Segoe UI',Tahoma,Arial,sans-serif;
    --font-alt: 'Sahel','Shabnam','Vazirmatn','Samim','Segoe UI',Tahoma,Arial,sans-serif;
}

[data-theme="dark"] {
    /* Dark Theme Colors */
    --bg-primary: #1a1d23;
    --bg-secondary: #242831;
    --bg-card: #2d3139;
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --border-color: #3d424a;
    --shadow: rgba(0, 0, 0, 0.3);
    
    /* Navigation */
    --nav-bg: #1a1d23;
    --nav-hover: #2d3139;
    --nav-text: #e9ecef;
    
    /* Table */
    --table-header-bg: #2d3139;
    --table-border: #3d424a;
    --table-hover: #353942;
    
    /* Keep buttons same in dark mode */
}

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

body {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    direction: rtl;
    text-align: right;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Header ===== */
.main-header {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 8px var(--shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h1 {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.separator { color: rgba(255,255,255,0.5); }

.btn-logout {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 6px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.btn-logout:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }

/* ===== Theme Toggle Button ===== */
.theme-toggle {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.theme-toggle:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }

.theme-icon { font-size: 20px; }

/* ===== Navigation ===== */
.main-nav {
    background: var(--nav-bg);
    box-shadow: 0 2px 6px var(--shadow);
    transition: background-color 0.3s ease;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 0;
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: all 0.3s;
}

.nav-toggle:hover, .nav-toggle:focus-visible {
    background: rgba(255,255,255,0.3);
    outline: none;
    transform: translateY(-2px);
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: block;
    color: var(--nav-text);
    padding: 16px 22px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.nav-menu > li > a:hover {
    background: var(--nav-hover);
    transform: translateY(-2px);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-card);
    min-width: 220px;
    box-shadow: 0 4px 12px var(--shadow);
    list-style: none;
    z-index: 1000;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.dropdown:hover .dropdown-menu {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu li a {
    display: block;
    padding: 12px 22px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background: var(--table-hover);
    color: var(--gradient-start);
    padding-right: 28px;
}

.nav-menu > li > a:focus-visible,
.dropdown-menu li a:focus-visible,
.btn:focus-visible,
.btn-logout:focus-visible,
.theme-toggle:focus-visible,
.nav-toggle:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 3px;
}

/* ===== Main Content ===== */
.main-content {
    min-height: calc(100vh - 200px);
    padding: 35px 0;
}

/* ===== Footer ===== */
.main-footer {
    background: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    padding: 25px 0;
    margin-top: 50px;
    transition: background-color 0.3s ease;
}

/* ===== Login Page ===== */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.login-box {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 45px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.login-box h1 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.login-box h2 {
    text-align: center;
    margin-bottom: 35px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-alt);
}

/* ===== Forms ===== */
.form-group {
    margin-bottom: 22px;
}

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

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Vazirmatn', sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 15px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
}

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

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

.btn-success {
    background: var(--btn-success);
    color: white;
}

.btn-success:hover {
    background: var(--btn-success-hover);
}

.btn-danger {
    background: var(--btn-danger);
    color: white;
}

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

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

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
}

.btn-block {
    width: 100%;
    display: block;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* ===== Alerts ===== */
.alert {
    padding: 14px 22px;
    border-radius: 8px;
    margin-bottom: 22px;
    border-left: 4px solid;
    font-weight: 500;
}

.alert-success {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

.alert-warning {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* ===== Tables ===== */
.table-container {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
    margin-top: 22px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table thead {
    background: var(--table-header-bg);
}

table th {
    padding: 14px;
    text-align: right;
    font-weight: 600;
    border-bottom: 2px solid var(--table-border);
    color: var(--text-primary);
}

table td {
    padding: 14px;
    border-bottom: 1px solid var(--table-border);
    color: var(--text-primary);
}

table tr:hover {
    background: var(--table-hover);
}

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

.table-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

/* ===== Dashboard ===== */
.dashboard h2 {
    margin-bottom: 25px;
    color: var(--text-primary);
    font-weight: 700;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 35px 0;
}

.stat-card {
    background: var(--bg-card);
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow);
    text-align: center;
    transition: all 0.3s;
}

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

.stat-card h3 {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 500;
    font-family: var(--font-alt);
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quick-links {
    background: var(--bg-card);
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow);
    margin-top: 35px;
}

.quick-links h3 {
    margin-bottom: 22px;
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-heading);
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.quick-link-btn {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: white;
    padding: 22px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
    font-weight: 500;
}

.quick-link-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(102,126,234,0.4);
}

/* ===== Card ===== */
.card {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow);
    padding: 28px;
    margin-bottom: 22px;
    transition: background-color 0.3s ease;
}

.card-header {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.card-header h2 {
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-heading);
}

/* ===== Search Box ===== */
.search-box {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.search-box input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.pagination a,
.pagination span {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: all 0.3s;
    font-weight: 500;
}

.pagination a:hover {
    background: var(--gradient-start);
    color: white;
    border-color: var(--gradient-start);
    transform: translateY(-2px);
}

.pagination .active {
    background: var(--gradient-start);
    color: white;
    border-color: var(--gradient-start);
}

/* ===== Utilities ===== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-20 {
    margin-top: 22px;
}

.mb-20 {
    margin-bottom: 22px;
}

/* Font utility classes */
.font-shabnam { font-family:'Shabnam', var(--font-base) !important; }
.font-sahel { font-family:'Sahel', var(--font-base) !important; }
.font-samim { font-family:'Samim', var(--font-base) !important; }

.login-footer {
    text-align: center;
    margin-top: 22px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ===== View Details (for view pages) ===== */
.view-details {
    padding: 10px;
}

.view-section {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

.view-section:last-child {
    border-bottom: none;
}

.view-section h3 {
    color: var(--gradient-start);
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-heading);
}

.view-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 12px;
}

.view-item {
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.view-item strong {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
}

.view-item span {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
}

.btn-action {
    text-decoration: none;
    font-size: 20px;
    margin: 0 4px;
    transition: transform 0.2s;
    display: inline-block;
}

.btn-action:hover {
    transform: scale(1.2);
}

/* ===== Print Styles ===== */
@media print {
    .main-header,
    .main-nav,
    .main-footer,
    .btn,
    .search-box,
    .theme-toggle {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        box-shadow: none;
    }
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }
    
    .nav-menu {
        flex-direction: column;
        display: none;
        width: 100%;
        background: var(--nav-bg);
        border-top: 1px solid var(--border-color);
    }
    .nav-menu.open {
        display: flex;
    }
    .nav-menu > li > a {
        padding: 14px 18px;
    }
    .nav-toggle {
        display: block;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .link-grid {
        grid-template-columns: 1fr;
    }
}

/* Accessibility */
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--gradient-start); color: #fff; }
body[data-theme="dark"] ::selection { background: var(--gradient-end); }

/* ===== Utilities (Spacing, Display, Flex, Grid) ===== */
[class*="m-"], [class*="p-"] { /* utility marker: ensures match specificity */ margin: initial; }
.m-0 { margin:0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.d-flex { display:flex !important; }
.flex-center { display:flex; justify-content:center; align-items:center; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.flex-wrap { flex-wrap:wrap !important; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.text-muted { color: var(--text-secondary) !important; }
.fw-bold { font-weight:700 !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-md { font-size: var(--fs-md) !important; }
.fs-lg { font-size: var(--fs-lg) !important; }

/* ===== Tablet Breakpoint (≤992px) ===== */
@media (max-width: 992px) {
    .header-content h1 { font-size: 20px; }
    .user-info { flex-wrap: wrap; gap: var(--space-2); }
    .dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
    .quick-link-btn { padding: 18px; }
}

/* ===== Responsive Tables ===== */
.table-responsive { width:100%; overflow-x:auto; }
.table-responsive table { min-width: 700px; }
.table-responsive::-webkit-scrollbar { height:8px; }
.table-responsive::-webkit-scrollbar-track { background: var(--bg-secondary); }
.table-responsive::-webkit-scrollbar-thumb { background: var(--gradient-start); border-radius:4px; }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ===== Dark Mode Refinements ===== */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .quick-links { box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
[data-theme="dark"] .btn:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.6); }

/* ===== High Contrast Theme ===== */
[data-theme="contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-card: #000000;
    --text-primary: #ffffff;
    --text-secondary: #dddddd;
    --border-color: #ffffff;
    --shadow: rgba(255,255,255,0.3);
    --gradient-start: #ffcc00;
    --gradient-end: #ff6600;
    --nav-bg: #000000;
    --nav-hover: #222222;
    --nav-text: #ffffff;
    --table-header-bg: #111111;
    --table-border: #ffffff;
    --table-hover: #1a1a1a;
}
[data-theme="contrast"] .btn-primary { background: #ff6600; }
[data-theme="contrast"] .btn-primary:hover { background:#e65c00; }
[data-theme="contrast"] .btn-danger { background:#ff0033; }
[data-theme="contrast"] .btn-danger:hover { background:#d6002b; }

/* ===== Status Helper Classes ===== */
.is-disabled { pointer-events: none; opacity:0.55; }
.is-loading { position:relative; }
.is-loading:after {
    content:""; position:absolute; inset:0; background: rgba(255,255,255,0.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.spinner { width:24px; height:24px; border:3px solid var(--border-color); border-top-color: var(--gradient-start); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast Notifications ===== */
.toast-container { position: fixed; bottom: var(--space-4); right: var(--space-4); display:flex; flex-direction:column; gap: var(--space-2); z-index:2000; }
.toast { background: var(--bg-card); color: var(--text-primary); padding: var(--space-3) var(--space-4); border-radius:8px; box-shadow:0 4px 12px var(--shadow); font-size: var(--fs-sm); border:1px solid var(--border-color); opacity:0; transform: translateY(10px); animation: toast-in .4s forwards; }
.toast.success { border-color: #28a745; }
.toast.error { border-color: #dc3545; }
@keyframes toast-in { to { opacity:1; transform: translateY(0); } }
@keyframes toast-out { to { opacity:0; transform: translateY(10px); } }

/* ===== Form Validation ===== */
.form-error { color:#dc3545; font-size: var(--fs-xs); margin-top: var(--space-1); }
.invalid { border-color:#dc3545 !important; box-shadow:0 0 0 3px rgba(220,53,69,0.25) !important; }

/* ===== Enhanced Search Box ===== */
.search-box-enhanced {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: var(--space-3);
}

.search-input-styled {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input-styled:focus {
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.1);
}

.search-results-count {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 var(--space-2);
}

/* ===== Icon Buttons (Inline Actions) ===== */
.table-actions-inline {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    padding: var(--space-2) 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: white;
    font-weight: 500;
    line-height: 1;
}

.btn-icon-edit {
    background-color: #007bcd;
}

.btn-icon-edit:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 205, 0.3);
}

.btn-icon-view {
    background-color: #17a2b8;
}

.btn-icon-view:hover {
    background-color: #138496;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

.btn-icon-delete {
    background-color: #dc3545;
}

.btn-icon-delete:hover {
    background-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.icon-edit, .icon-delete, .icon-view {
    display: block;
}

/* ===== Pagination ===== */
.pagination-container {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: var(--fs-base);
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    text-decoration: none;
    font-family: var(--font-base);
}

.pagination-btn:hover:not(.pagination-btn-active):not(.pagination-btn-disabled) {
    background-color: var(--gradient-start);
    color: white;
    border-color: var(--gradient-start);
}

.pagination-btn-active {
    background-color: var(--gradient-start);
    color: white;
    border-color: var(--gradient-start);
    cursor: default;
}

.pagination-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-secondary);
}

.pagination-ellipsis {
    color: var(--text-secondary);
    padding: 0 var(--space-1);
}

.pagination-info {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-align: center;
}

/* ===== Comment: Production Minified CSS ===== */
/* For production consider loading style.min.css after this file. */

/* ===== Inline Action Buttons (Owners Table) ===== */
.table-actions-inline { display:flex; gap:6px; align-items:center; }
.btn-icon { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:6px; text-decoration:none; font-size:16px; background: var(--bg-secondary); border:1px solid var(--border-color); transition:all .25s; }
.btn-icon:hover { box-shadow:0 2px 6px var(--shadow); transform:translateY(-2px); }
.btn-icon-view { color:#3498db; }
.btn-icon-edit { color:#f39c12; }
.btn-icon-delete { color:#e74c3c; }
.btn-icon-delete:hover { background:#e74c3c; color:#fff; }
.btn-icon-view:hover { background:#3498db; color:#fff; }
.btn-icon-edit:hover { background:#f39c12; color:#fff; }
.per-page-select { min-width:110px; }

/* ===== Readonly Input Fields ===== */
input[readonly],
textarea[readonly] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    cursor: not-allowed;
    opacity: 0.85;
}

[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly] {
    background-color: #1a1d23;
    color: #e9ecef;
    border-color: #3d424a;
}

[data-theme="contrast"] input[readonly],
[data-theme="contrast"] textarea[readonly] {
    background-color: #0a0a0a;
    color: #ffffff;
    border-color: #333333;
}

/* ===== Searchable Combobox ===== */
.combobox-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.combobox-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-base);
    transition: all 0.3s ease;
}

.combobox-input:focus {
    outline: none;
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px var(--shadow);
}

.combobox-dropdown.show {
    display: block;
}

.combobox-option {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.combobox-option:hover,
.combobox-option.selected {
    background-color: var(--table-hover);
    color: var(--gradient-start);
    padding-right: 28px;
}

.combobox-option:last-child {
    border-bottom: none;
}

.combobox-no-results {
    padding: 10px 14px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
}