/* LeaveMS - Main Stylesheet */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { margin:0; padding:0; }
body { width:100%; overflow-x:hidden; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8fafc; }

/* RTL support */
body.rtl { direction: rtl; text-align: right; font-family: 'Segoe UI', Tahoma, sans-serif; }
body.rtl .sidebar { left:auto; right:0; transform:translateX(100%); }
body.rtl .sidebar.open { transform:translateX(0); }
body.rtl .nav-item.active { border-left:none; border-right:3px solid white; }
body.rtl .mr-2 { margin-right:0; margin-left:0.5rem; }

/* Page wrapper */
.page-layout { display:flex; width:100%; min-height:100vh; height:100vh; max-height:100vh; overflow:hidden; }
.page-content { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.page-content > header { flex-shrink:0; }
.page-content > main { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:2rem; }

/* Sidebar */
.sidebar { transition:transform 0.3s ease; width:260px; flex-shrink:0; display:flex; flex-direction:column; height:100vh; max-height:100vh; overflow-y:auto; background:inherit; }
.nav-item { transition:all 0.2s; border-radius:10px; }
.nav-item:hover { background:rgba(255,255,255,0.12); }
.nav-item.active { background:rgba(255,255,255,0.22); border-left:3px solid white; }
body.rtl .nav-item.active { border-left:none; border-right:3px solid white; }

/* Cards */
.card { background:white; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06); }
.stat-card { background:white; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }

/* Badges */
.badge { display:inline-flex; align-items:center; white-space:nowrap; }
.badge-pending { background:#fef3c7; color:#92400e; }
.badge-approved { background:#d1fae5; color:#065f46; }
.badge-rejected { background:#fee2e2; color:#991b1b; }
.badge-sick { background:#dbeafe; color:#1e40af; }
.badge-casual { background:#d1fae5; color:#065f46; }
.badge-hajj { background:#fce7f3; color:#9d174d; }
.badge-timeback { background:#ede9fe; color:#5b21b6; }

/* Toast */
.toast { position:fixed; bottom:24px; right:24px; z-index:9999; padding:13px 20px; border-radius:10px; font-weight:500; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,0.18); transition:all 0.3s; max-width:320px; }
body.rtl .toast { right:auto; left:24px; }
.toast-success { background:#10b981; color:white; }
.toast-error { background:#ef4444; color:white; }

/* Focus */
input:focus, select:focus, textarea:focus { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,0.15); border-color:#3b82f6 !important; }
.table-row:hover { background:#f8fafc; }

/* Password field */
.pw-cell { font-family:monospace; letter-spacing:0.05em; }

/* Attachment preview */
.attach-thumb { width:80px; height:80px; object-fit:cover; border-radius:8px; border:2px solid #e5e7eb; cursor:pointer; transition:border-color 0.2s; }
.attach-thumb:hover { border-color:#3b82f6; }

/* Mobile sidebar */
@media(max-width:767px) {
  .sidebar { position:fixed; top:0; left:0; height:100vh; z-index:50; transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.2); }
  body.rtl .sidebar { left:auto; right:0; transform:translateX(100%); }
  body.rtl .sidebar.open { transform:translateX(0); }
  .hide-mobile { display:none !important; }
  .page-content > main { padding-bottom:2rem; }
}
@media(min-width:768px) {
  .sidebar { position:relative; transform:none !important; }
  #sidebar-overlay { display:none !important; }
}

/* Overflow table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Lang toggle btn */
.lang-btn { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid rgba(255,255,255,0.35); color:white; background:rgba(255,255,255,0.12); transition:all 0.2s; white-space:nowrap; }
.lang-btn:hover { background:rgba(255,255,255,0.22); }