body {
    padding-bottom: 40px;
}
/* ========== Theme Tokens ========== */
:root {
    --bg: #f5f6f8; /* app background */
    --surface: #ffffff; /* cards / table surface */
    --sidebar-bg: #f7f8fb; /* sidebar background */
    --sidebar-border: #e6e8ee;
    --sidebar-hover: #eef0f6;
    --sidebar-active: #e3e6ef;
    --text: #1f2937; /* primary text */
    --muted: #6b7280; /* secondary text */
    --primary: #6c757d; /* neutral primary (gray) */
    --primary-hover: #5c636a;
    --header: #343a40; /* dark header for tables/navbar text on light */
    --danger: #dc3545;
    --warning: #f59e0b;
}

/* ========== Global ========== */
html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
}

/* Ensure container spacing plays nice with sidebar layout */
.container-fluid > .row > .col-lg-10 main {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    padding: 16px;
}

/* ========== Navbar (top) ========== */
.navbar.bg-light {
    background: #f8f9fb !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

/* ========== Sidebar ========== */
.sidebar {
    /* Use sticky so it stays visible when scrolling the main column */
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: calc(100vh - 56px); /* subtract approx. navbar height */
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding-left: 0;
    padding-right: 0;
}

.sidebar .nav-link {
    white-space: nowrap;
    color: var(--text);
    border-radius: 10px;
    padding: 10px 20px 10px 20px; 
    margin: 4px 0;
    font-weight: 500;
    text-align: left;
    transition: background .15s ease, color .15s ease, transform .06s ease;
}
.sidebar .nav {
    padding-left: 2px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



        .sidebar .nav-link:hover {
            background: var(--sidebar-hover);
            color: #111827;
        }

        .sidebar .nav-link.active {
            background: var(--sidebar-active);
            font-weight: 600;
        }

        .sidebar .nav-link i {
            opacity: .9;
        }

/* ========== Buttons (neutral primary theme) ========== */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

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

/* Keep warning/danger aligned with Bootstrap but refine */
.btn-warning {
    color: #1f2937;
    border: none;
}

.btn-danger {
    border: none;
}

/* ========== Tables (DataTables + Bootstrap table) ========== */
.table {
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

    .table thead th {
        background: var(--header);
        color: #fff;
        vertical-align: middle;
        text-align: center;
        border-color: var(--header);
    }

    .table tbody tr:hover {
        background: #f2f4f8;
    }

/* Action cell: keep buttons in a row */
#bookingsTable td:last-child {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* Column filters (tfoot inputs) */
#bookingsTable tfoot input {
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    padding: 6px 8px;
    font-size: .9rem;
    width: 100%;
}

/* DataTables buttons (export) align with theme */
.dt-buttons .btn {
    border-radius: 8px !important;
    font-weight: 500;
}

/* Pagination spacing tighter */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 2px !important;
    padding: 4px 8px !important;
}

/* Info text right-aligned option if needed */
.dataTables_info {
    color: var(--muted);
}

/* ========== Modals ========== */
.modal-content {
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.18);
    border: 0;
}

.modal-header {
    background: linear-gradient(180deg, #f9fafb, #eef1f6);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

#deleteConfirmModal .modal-header {
    background: #fee2e2;
}
#deleteModal .modal-header {
    background: #fee2e2;
}

/* ========== Forms ========== */
.form-label {
    font-weight: 600;
    color: var(--muted);
}

.form-control {
    border-radius: 10px;
    border-color: #d0d5dd;
}

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 .25rem rgba(108,117,125,.15);
    }

/* ========== Footer ========== */
footer {
    background: #f7f8fb !important;
    border-top: 1px solid var(--sidebar-border) !important;
}
/* Align DataTables buttons and remove bottom gap */
.dt-tools .dt-buttons {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 !important;
}

.dt-tools .dt-button.btn,
.dt-tools .btn {
    margin: 0 !important;
}

/* Page header (title + actions) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* key to keep all buttons on same baseline */
    gap: .75rem;
    border-bottom: 1px solid #e6e8ee;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* Toolbar container for DataTables buttons */
.dt-tools .dt-buttons {
    display: inline-flex;
    gap: .5rem;
}

/* Make Export buttons and New Booking the same height */
.dt-buttons .btn,
#btnAddBooking.btn {
    height: 32px; /* matches btn-sm height */
    line-height: 1;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* Ensure right area in navbar actually pushes right */
@media (min-width: 992px) {
    .navbar .navbar-collapse {
        display: flex !important;
    }

    .navbar .navbar-collapse > .ms-auto {
        margin-left: auto !important;
    }
}

/* Keep header buttons on one line and tidy */
#bookingsToolbarGroup {
    white-space: nowrap;
}

#bookingsToolbarGroup .dt-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0;
}

#bookingsToolbarGroup .dt-buttons .btn {
    margin: 0 !important;
}

/* Keep header buttons on one line and tidy */
#pageToolbar .btn-toolbar {
    flex-wrap: nowrap;
}

#pageToolbar .btn-group {
    flex-wrap: nowrap;
}

#pageToolbar .btn {
    margin: 0 !important;
}

#bookingsToolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
}
/* sidebar avatar centered */
.sidebar .profile-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
}

.sidebar .profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block; /* تضمین مرکز شدن با flex */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}



/* toolbar buttons (Export/Print) – light */
#pageToolbar .dt-buttons .btn,
#bookingsToolbar .btn {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    color: #24292f;
}

#pageToolbar .dt-buttons .btn:hover,
#bookingsToolbar .btn:hover {
    background-color: #eef1f4;
}

/* keep spacing */
#pageToolbar, #bookingsToolbar {
    gap: .5rem;
}

#pageToolbar .dt-buttons {
    gap: .5rem;
}

/* Keep header toolbar buttons tidy and spaced */
#pageToolbar .btn, #rulesToolbar .btn, #bookingsToolbar .btn {
    margin: 0 !important;
}

#pageToolbar .btn + .btn,
#rulesToolbar .btn + .btn,
#bookingsToolbar .btn + .btn {
    margin-left: .5rem !important;
}

/* Make export buttons clearly lighter than primary */
#bookingsToolbar .btn.btn-outline-secondary,
#rulesToolbar .btn.btn-outline-secondary {
    background: #fff;
    border-color: #cfd4da;
}

#bookingsToolbar, #rulesToolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
}


/* unified toolbar buttons (export/print/new) */
.toolbar-group, #bookingsToolbar, #rulesToolbar, #pageToolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
}

    .toolbar-group .btn, #bookingsToolbar .btn, #rulesToolbar .btn, #pageToolbar .btn {
        border-radius: 8px;
    }

/* action buttons hover inside tables (edit/delete) */
.table .btn-warning:hover {
    filter: brightness(0.95);
}

.table .btn-danger:hover {
    filter: brightness(0.95);
}

/* DataTables footer filters spacing */
.dataTables_wrapper tfoot input,
.dataTables_wrapper tfoot select {
    width: 100%;
    box-sizing: border-box;
}

/* Center labels inside toolbar & DataTables buttons */
#bookingsToolbar .btn,
#rulesToolbar .btn,
.dt-buttons .btn,
.btn-dt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; /* prevents baseline sag */
    padding-top: .175rem; /* keep a balanced vertical padding */
    padding-bottom: .175rem;
}

    /* In case DataTables wraps text in a <span>, normalize it too */
    .dt-buttons .btn > span,
    #bookingsToolbar .btn > span,
    #rulesToolbar .btn > span {
        line-height: 1 !important;
    }

    /* Icons inside buttons stay visually centered with text */
    #bookingsToolbar .btn i,
    #rulesToolbar .btn i,
    .dt-buttons .btn i {
        vertical-align: middle;
    }

/* ---------- Unify toolbar button size (match Bookings) ---------- */
#bookingsToolbar .btn,
#rulesToolbar .btn,
.dt-buttons .btn,
.btn-dt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .875rem; 
    line-height: 1.2 !important;
    padding: .25rem .55rem; 
    border-radius: .375rem;
}

    #bookingsToolbar .btn > span,
    #rulesToolbar .btn > span,
    .dt-buttons .btn > span {
        line-height: 1.2 !important;
    }

    #bookingsToolbar .btn i,
    #rulesToolbar .btn i,
    .dt-buttons .btn i {
        vertical-align: middle;
    }


.page-title {
    margin-bottom: .5rem;
}

.app-main .alert {
    margin-top: .25rem;
    margin-bottom: .75rem;
}

.toolbar-row {
    margin-top: .25rem;
    margin-bottom: .5rem;
    gap: .5rem;
}

    .toolbar-row .dt-buttons {
        margin: 0 !important;
    }

.toolbar-group {
    gap: .5rem;
    margin: 0 !important;
}

#rulesToolbar .btn:hover,
#bookingsToolbar .btn:hover,
.dt-buttons .btn:hover {
    filter: brightness(1.05);
}

#rulesToolbar .btn:focus,
#bookingsToolbar .btn:focus,
.dt-buttons .btn:focus {
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}

/* ---- Force same size & vertical centering for ALL toolbar buttons ---- */
#bookingsToolbar .dt-button.btn,
#rulesToolbar .dt-button.btn,
.dt-buttons .dt-button.btn,
#bookingsToolbar .btn,
#rulesToolbar .btn {
    height: 32px !important;
    padding: .25rem .6rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

    /* If DataTables wraps the label in a <span>, normalize it */
    #bookingsToolbar .dt-button.btn > span,
    #rulesToolbar .dt-button.btn > span,
    .dt-buttons .dt-button.btn > span {
        line-height: 1 !important;
    }

    /* Keep icons aligned with text */
    #bookingsToolbar .btn i,
    #rulesToolbar .btn i,
    .dt-buttons .btn i {
        vertical-align: middle !important;
    }

/* Smaller in-table action buttons to match Bookings */
#rulesTable .btn.btn-sm,
#upcomingTable .btn.btn-sm,
#historyTable .btn.btn-sm {
    padding: .25rem .5rem !important;
    line-height: 1 !important;
}

/* Tight, consistent spacing (title / alert / toolbar / table) */
.app-main h3.page-title {
    margin-bottom: .5rem !important;
}

.app-main .alert {
    margin-top: .25rem !important;
    margin-bottom: .5rem !important;
}

    /* If markup has .mb-3 on the alert, override it */
    .app-main .alert.mb-3 {
        margin-bottom: .5rem !important;
    }

.toolbar-row,
#rulesToolbar,
#bookingsToolbar {
    margin-bottom: .25rem !important;
    gap: .5rem !important;
}

/* Light, unified export/print buttons */
.btn-dt {
    background: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
    padding: .25rem .6rem !important;
}

.btn-dt-success {
    background: #e8f5e9 !important;
    border-color: #b7e1be !important;
}

.btn-dt-danger {
    background: #fdecea !important;
    border-color: #f5c2c7 !important;
}

.btn-dt-dark {
    background: #f1f3f5 !important;
    border-color: #ced4da !important;
}

.btn-dt:hover {
    background: #e9ecef !important;
    color: #111 !important;
}


/* --- Toolbar button spacing (global) --- */
#rulesToolbar,
#bookingsToolbar,
.toolbar-group,
.dt-buttons {
    gap: .9rem !important; /* wider space between buttons */
}

    /* keep buttons compact and vertically centered */
    #rulesToolbar .btn,
    #bookingsToolbar .btn,
    .dt-buttons .btn {
        padding: .3rem .7rem; /* same feel as Bookings */
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

/* --- Extra space below the info banner (blue box) --- */
.app-main .alert {
    margin-bottom: 1.25rem !important; /* more room before toolbar/table */
}

/* --- Space between toolbar row and the DataTables area --- */
/* DataTables wraps the table in a .dataTables_wrapper div */
.toolbar-row + .dataTables_wrapper,
#rulesToolbar + .dataTables_wrapper,
#bookingsToolbar + .dataTables_wrapper {
    margin-top: .8rem !important; /* gap between buttons and table */
}

/* optional: tidy title spacing a bit */
.page-title {
    margin-bottom: .6rem !important;
}
/* Bigger gaps between export/print buttons */
#rulesToolbar,
#bookingsToolbar,
.toolbar-group,
.dt-buttons {
    gap: 1.15rem !important; /* was ~0.9rem */
}

/* More space below the blue info banner */
.app-main .alert {
    margin-bottom: 1.6rem !important; /* was ~1.25rem */
}

/* More space between the toolbar row and the table */
.toolbar-row + .dataTables_wrapper,
#rulesToolbar + .dataTables_wrapper,
#bookingsToolbar + .dataTables_wrapper {
    margin-top: 1.1rem !important; /* was ~0.8rem */
}

/* Keep buttons vertically centered and tidy */
#rulesToolbar .btn,
#bookingsToolbar .btn,
.dt-buttons .btn {
    padding: .32rem .72rem;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Profile page: match spacing & look with other pages */
.profile-page .page-title {
    margin-bottom: 0.75rem !important;
}

.profile-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    background: var(--surface, #fff);
}

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

@media (min-width: 992px) {
    .profile-card .card-body {
        padding: 1.25rem;
    }
}

/* Form controls look */
.profile-form .form-label {
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.profile-form .form-control {
    border-radius: 10px;
    border-color: #d0d5dd;
}

    .profile-form .form-control:focus {
        border-color: var(--primary, #6c757d);
        box-shadow: 0 0 0 .25rem rgba(108,117,125,.15);
    }

/* Action row */
.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}

/* Optional avatar block (only if you have it) */
.profile-avatar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .profile-avatar img {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    .profile-avatar .btn {
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        padding: .25rem .55rem;
    }