@import url("/assets/timesheet_saas/css/font-awesome.min.css");

/* 🚀 SERVER-SIDE INSTANT PADDING: Bypasses JS execution delay to eliminate layout shifts */
body.saas-layout-active, body.saas-locked-in,
body[data-path="timesheet-entries"],
body[data-path="timesheet-app"],
body[data-path="approvals"],
body[data-path="action-center"],
body[data-path="reporting"],
body[data-path="timesheet-projects"] {
    padding-left: 240px !important;
    background-color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#ts-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: #252422;
    color: #94a3b8;
    display: none;
    flex-direction: column;
    z-index: 99999;
    border-right: 1px solid #1e293b;
}

.sb-header { padding: 24px; border-bottom: 1px solid #1e293b; }
.sb-header h2 { color: #f8fafc; font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
.sb-menu { flex: 1; padding: 20px 12px; overflow-y: auto; }
.sb-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #EB5E28; font-weight: 700; margin: 16px 12px 8px 12px; }
.sb-item { display: flex; align-items: center; padding: 10px 12px; color: #CCC5B9; font-size: 13px; font-weight: 500; border-radius: 6px; text-decoration: none !important; margin-bottom: 4px; transition: all 0.2s ease; }
.sb-item i { width: 20px; margin-right: 10px; font-size: 14px; }
.sb-item:hover { background: #403D39; color: #FFFCF2; }
.sb-item.active { background: #EB5E28; color: #ffffff; font-weight: 600; }
.sb-footer { padding: 16px; background: #141412; border-top: 1px solid #EB5E28; font-size: 12px; }
#sb-user { color: #CCC5B9; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.sb-logout { color: #EB5E28; cursor: pointer; font-weight: 500; }
.sb-logout:hover { text-decoration: underline; }

.badge-status { padding: 4px 8px; font-size: 11px; font-weight: 600; border-radius: 4px; display: inline-block; }
.status-Approved, .status-Approve { background: #dcfce7; color: #166534; }
.status-Rejected, .status-Reject { background: #fee2e2; color: #991b1b; }
.status-Submitted, .status-Pending { background: #fef9c3; color: #854d0e; }
.status-Draft { background: #e2e8f0; color: #334155; }
.status-Revoke-Requested { background: #f3e8ff; color: #6b21a8; }

/* 🚀 CSS GLOBAL ANNIHILATOR: PRE-BLOCKS FRAPPE NATIVE ELEMENTS */
body.saas-locked-in .standard-sidebar,
body.saas-locked-in .sidebar-container,
body.saas-locked-in .layout-side-section,
body.saas-locked-in .navbar,
body.saas-locked-in #navbar,
body.saas-locked-in .sidebar-gutter,
body.saas-locked-in .form-sidebar-resizer,
body.saas-locked-in .body-sidebar-container,
body.saas-locked-in .body-sidebar,
body.saas-locked-in .list-sidebar,
body[data-path="timesheet-entries"] .standard-sidebar,
body[data-path="timesheet-entries"] .sidebar-container,
body[data-path="timesheet-entries"] .layout-side-section,
body[data-path="timesheet-entries"] .navbar,
body[data-path="timesheet-entries"] #navbar,
body[data-path="timesheet-entries"] .body-sidebar-container,
body[data-path="timesheet-entries"] .body-sidebar,
body[data-path="timesheet-entries"] .list-sidebar,
body[data-path="timesheet-app"] .standard-sidebar,
body[data-path="timesheet-app"] .sidebar-container,
body[data-path="timesheet-app"] .layout-side-section,
body[data-path="timesheet-app"] .navbar,
body[data-path="timesheet-app"] #navbar,
body[data-path="timesheet-app"] .body-sidebar-container,
body[data-path="timesheet-app"] .body-sidebar,
body[data-path="timesheet-app"] .list-sidebar,
body[data-path="approvals"] .standard-sidebar,
body[data-path="approvals"] .sidebar-container,
body[data-path="approvals"] .layout-side-section,
body[data-path="approvals"] .navbar,
body[data-path="approvals"] #navbar,
body[data-path="approvals"] .body-sidebar-container,
body[data-path="approvals"] .body-sidebar,
body[data-path="approvals"] .list-sidebar,
body[data-path="action-center"] .standard-sidebar,
body[data-path="action-center"] .sidebar-container,
body[data-path="action-center"] .layout-side-section,
body[data-path="action-center"] .navbar,
body[data-path="action-center"] #navbar,
body[data-path="action-center"] .body-sidebar-container,
body[data-path="action-center"] .body-sidebar,
body[data-path="action-center"] .list-sidebar,
body[data-path="reporting"] .standard-sidebar,
body[data-path="reporting"] .sidebar-container,
body[data-path="reporting"] .layout-side-section,
body[data-path="reporting"] .navbar,
body[data-path="reporting"] #navbar,
body[data-path="reporting"] .body-sidebar-container,
body[data-path="reporting"] .body-sidebar,
body[data-path="reporting"] .list-sidebar,
body[data-path="timesheet-projects"] .standard-sidebar,
body[data-path="timesheet-projects"] .sidebar-container,
body[data-path="timesheet-projects"] .layout-side-section,
body[data-path="timesheet-projects"] .navbar,
body[data-path="timesheet-projects"] #navbar,
body[data-path="timesheet-projects"] .body-sidebar-container,
body[data-path="timesheet-projects"] .body-sidebar,
body[data-path="timesheet-projects"] .list-sidebar {
    display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; opacity: 0 !important; flex-basis: 0 !important;
}

body.saas-locked-in .layout-main-section-wrapper,
body.saas-locked-in .layout-main-section,
body.saas-locked-in #page-desktop,
body.saas-locked-in .page-container,
body[data-path="timesheet-entries"] .layout-main-section-wrapper,
body[data-path="timesheet-entries"] .layout-main-section,
body[data-path="timesheet-entries"] #page-desktop,
body[data-path="timesheet-entries"] .page-container,
body[data-path="timesheet-app"] .layout-main-section-wrapper,
body[data-path="timesheet-app"] .layout-main-section,
body[data-path="timesheet-app"] #page-desktop,
body[data-path="timesheet-app"] .page-container,
body[data-path="approvals"] .layout-main-section-wrapper,
body[data-path="approvals"] .layout-main-section,
body[data-path="approvals"] #page-desktop,
body[data-path="approvals"] .page-container,
body[data-path="action-center"] .layout-main-section-wrapper,
body[data-path="action-center"] .layout-main-section,
body[data-path="action-center"] #page-desktop,
body[data-path="action-center"] .page-container,
body[data-path="reporting"] .layout-main-section-wrapper,
body[data-path="reporting"] .layout-main-section,
body[data-path="reporting"] #page-desktop,
body[data-path="reporting"] .page-container,
body[data-path="timesheet-projects"] .layout-main-section-wrapper,
body[data-path="timesheet-projects"] .layout-main-section,
body[data-path="timesheet-projects"] #page-desktop,
body[data-path="timesheet-projects"] .page-container {
    flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important;
}

body.saas-locked-in .layout-main-section,
body[data-path="timesheet-entries"] .layout-main-section,
body[data-path="timesheet-app"] .layout-main-section,
body[data-path="approvals"] .layout-main-section,
body[data-path="action-center"] .layout-main-section,
body[data-path="reporting"] .layout-main-section,
body[data-path="timesheet-projects"] .layout-main-section {
    border: none !important; box-shadow: none !important; padding-top: 15px !important;
}

.sb-badge { background: #dc3545; color: white; border-radius: 12px; padding: 2px 8px; font-size: 10px; font-weight: 700; margin-left: auto; display: inline-block; }

.mobile-sidebar-toggle { display: none; }
@media (max-width: 768px) {
    body.saas-locked-in, body.saas-layout-active { padding-left: 0 !important; }
    #ts-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 2px 0 8px rgba(0,0,0,0.5); }
    #ts-sidebar.mobile-open { transform: translateX(0); }
    .mobile-sidebar-toggle { display: flex !important; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: 20px; z-index: 100000; background: #EB5E28; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); cursor: pointer; }
}

/* =========================================================================
   🚀 SYSTEM LOCALIZATION & RTL MIRRORING OVERRIDES (BLINK-FREE GATES)
   ========================================================================= */

/* Triggers instantly on server-load based on native HTML dir and body path tags */
html[dir="rtl"] body.saas-layout-active,
html[dir="rtl"] body.saas-locked-in,
body[dir="rtl"].saas-layout-active,
body[dir="rtl"].saas-locked-in,
html[dir="rtl"] body[data-path="timesheet-entries"],
html[dir="rtl"] body[data-path="timesheet-app"],
html[dir="rtl"] body[data-path="approvals"],
html[dir="rtl"] body[data-path="action-center"],
html[dir="rtl"] body[data-path="reporting"],
html[dir="rtl"] body[data-path="timesheet-projects"],
body[dir="rtl"][data-path="timesheet-entries"],
body[dir="rtl"][data-path="timesheet-app"],
body[dir="rtl"][data-path="approvals"],
body[dir="rtl"][data-path="action-center"],
body[dir="rtl"][data-path="reporting"],
body[dir="rtl"][data-path="timesheet-projects"] {
    padding-right: 240px !important;
    padding-left: 0 !important;
}

/* Forces the custom sidebar to lock to the right of the screen immediately */
html[dir="rtl"] body.saas-layout-active #ts-sidebar,
html[dir="rtl"] body.saas-locked-in #ts-sidebar,
html[dir="rtl"] body #ts-sidebar,
body[dir="rtl"] #ts-sidebar {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid #1e293b !important;
    border-right: none !important;
}

html[dir="rtl"] body #floating-action-bell,
body[dir="rtl"] #floating-action-bell {
    left: 20px !important;
    right: auto !important;
}

html[dir="rtl"] body .sb-item i,
body[dir="rtl"] .sb-item i {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] body .sb-badge,
body[dir="rtl"] .sb-badge {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] body .mobile-sidebar-toggle,
body[dir="rtl"] .mobile-sidebar-toggle {
    left: 20px !important;
    right: auto !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] body.saas-locked-in,
    html[dir="rtl"] body.saas-layout-active,
    body[dir="rtl"].saas-locked-in,
    body[dir="rtl"].saas-layout-active,
    html[dir="rtl"] body[data-path="timesheet-entries"],
    html[dir="rtl"] body[data-path="timesheet-app"],
    html[dir="rtl"] body[data-path="approvals"],
    html[dir="rtl"] body[data-path="action-center"],
    html[dir="rtl"] body[data-path="reporting"],
    html[dir="rtl"] body[data-path="timesheet-projects"],
    body[dir="rtl"][data-path="timesheet-entries"],
    body[dir="rtl"][data-path="timesheet-app"],
    body[dir="rtl"][data-path="approvals"],
    body[dir="rtl"][data-path="action-center"],
    body[dir="rtl"][data-path="reporting"],
    body[dir="rtl"][data-path="timesheet-projects"] {
        padding-right: 0 !important;
    }
    html[dir="rtl"] body #ts-sidebar,
    body[dir="rtl"] #ts-sidebar {
        transform: translateX(100%) !important;
    }
    html[dir="rtl"] body #ts-sidebar.mobile-open,
    body[dir="rtl"] #ts-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
}

/* Document & Grid Alignments */
html[dir="rtl"] body .text-right, body[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] body .text-left, body[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] body th, html[dir="rtl"] body td, body[dir="rtl"] th, body[dir="rtl"] td { text-align: right; }
html[dir="rtl"] body th.text-right, html[dir="rtl"] body td.text-right, body[dir="rtl"] th.text-right, body[dir="rtl"] td.text-right { text-align: left !important; }
html[dir="rtl"] body th.text-center, html[dir="rtl"] body td.text-center, body[dir="rtl"] th.text-center, body[dir="rtl"] td.text-center { text-align: center !important; }
html[dir="rtl"] body .float-right, body[dir="rtl"] .float-right { float: left !important; }
html[dir="rtl"] body .float-left, body[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] body .mr-2, body[dir="rtl"] .mr-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] body .ml-2, body[dir="rtl"] .ml-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] body .mr-3, body[dir="rtl"] .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] body .ml-3, body[dir="rtl"] .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; }