/* Tweaks on top of AdminLTE — keep the stock look, fix accessibility + mobile. */
#content { min-height: 60vh; outline: none; }

/* --- Accessibility ------------------------------------------------------- */
.skip-link { position: absolute; top: .5rem; inset-inline-start: 1rem; z-index: 2000; background: #fff; padding: .5rem 1rem;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; box-shadow: 0 0 0 3px #80bdff; }
/* Visible keyboard focus everywhere (Bootstrap's is faint on some elements). */
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible { box-shadow: 0 0 0 .2rem rgba(26,115,232,.45); }
.sr-only-focusable:focus { position: static; width: auto; height: auto; }
.text-muted { color: #5c6670 !important; } /* ≥ 4.5:1 on white and on #f4f6f9 */

/* Visually-hidden labels inside scrolling tables must be clipped by the table
   wrapper, not by an outer positioned ancestor (they'd widen the page on phones). */
.table-responsive { position: relative; }

/* License-gated nav items (see app.js): grayed out with a lock icon rather
   than hidden, so admins can see what their plan doesn't include. */
.nav-sidebar .feature-locked > .nav-link { opacity: .6; }

.nav-lang { width: auto; max-width: 9rem; }

/* Toasts */
.toast-host { position: fixed; top: 70px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 32px)); }
.toast-host .alert { margin: 0; }

/* Notification bell */
.notif-menu { max-width: min(380px, calc(100vw - 16px)); }
.notif-item { white-space: normal; }
.notif-item.unread { font-weight: 600; border-left: 3px solid #007bff; }

/* --- Tasks kanban -------------------------------------------------------- */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { flex: 1 1 0; min-width: 260px; background: #f4f6f9; border-radius: .35rem; padding: .5rem; }
.kanban-col.drag-over { outline: 2px dashed #007bff; }
.kanban-col h2 { font-weight: 700; text-transform: uppercase; font-size: .8rem; color: #454d55; margin: .25rem 0 .5rem; }
.kanban-card { background: #fff; border: 1px solid #d5d9de; border-radius: .35rem; padding: .5rem .6rem; margin-bottom: .5rem; cursor: grab; }
.kanban-card:focus-visible { outline: 3px solid #1a73e8; }
.kanban-card.priority-high { border-left: 4px solid #dc3545; }
.kanban-card.priority-normal { border-left: 4px solid #007bff; }
.kanban-card.priority-low { border-left: 4px solid #6c757d; }

/* --- Chat ---------------------------------------------------------------- */
.chat-wrap { display: flex; height: calc(100vh - 180px); min-height: 420px; border: 1px solid #dee2e6; border-radius: .35rem; overflow: hidden; background:#fff; }
.chat-channels { width: 280px; flex: 0 0 280px; border-right: 1px solid #dee2e6; overflow-y: auto; }
.chat-channels .channel { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .8rem; cursor: pointer; border-bottom: 1px solid #f1f1f1; color: inherit; }
.chat-channels .channel:hover { background: #f6f8fa; }
.chat-channels .channel.active { background: #e9f2ff; }
.chat-channels .channel .preview { font-size: .8rem; color: #5c6670; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; background:#f8f9fb; }
.chat-msg { margin-bottom: .75rem; }
.chat-msg .meta { font-size: .75rem; color: #5c6670; }
.chat-msg .bubble { display:inline-block; background:#fff; border:1px solid #d5d9de; border-radius:.5rem; padding:.4rem .6rem; margin-top:.15rem; white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.chat-msg.mine .bubble { background:#daf1e0; border-color:#c3e6cb; }
.chat-input { border-top: 1px solid #dee2e6; padding: .5rem; display: flex; gap: .5rem; }
.chat-typing { min-height: 1rem; font-size: .75rem; color:#5c6670; padding: 0 1rem; }
.chat-back { display: none; }
.unread-badge { font-size:.7rem; }

/* --- Misc components ------------------------------------------------------ */
.page-actions .btn { margin-bottom: .25rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.filter-bar .form-control { width: auto; min-width: 10rem; }
.stat-label { font-size: .8rem; color: #5c6670; }
tr.row-warning { background: #fff8e1; }

/* --- Responsive ----------------------------------------------------------- */
/* Touch devices: comfortable tap targets for the dense xs/sm row actions. */
@media (pointer: coarse) {
  .btn-xs, .btn-sm, .btn-group-sm > .btn { min-height: 40px; min-width: 40px; padding: .4rem .6rem; font-size: .9rem; }
  .nav-sidebar .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
}

@media (max-width: 767.98px) {
  .content-wrapper .content { padding-left: .25rem; padding-right: .25rem; }
  /* Tables scroll inside their .table-responsive wrapper instead of stretching the page. */
  .table-responsive { max-width: 100%; }
  .card, .card-body { min-width: 0; }
  .page-header { flex-direction: column; align-items: flex-start !important; }
  .page-header .page-actions { margin-top: .5rem; }
  .filter-bar .form-control { min-width: 0; flex: 1 1 100%; }
  .btn-group.flex-wrap-sm { flex-wrap: wrap; }
  .modal-dialog { margin: .5rem; }
  .toast-host { top: auto; bottom: 16px; right: 8px; left: 8px; max-width: none; }

  /* Chat: channel list and conversation become two screens. */
  .chat-wrap { height: calc(100vh - 150px); }
  .chat-channels { width: 100%; flex: 1 1 100%; border-right: 0; }
  .chat-main { display: none; }
  .chat-wrap.show-conversation .chat-channels { display: none; }
  .chat-wrap.show-conversation .chat-main { display: flex; }
  .chat-back { display: inline-block; }

  .kanban { flex-direction: column; }
  .kanban-col { min-width: 0; }
  .fc .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
  .fc .fc-toolbar-title { font-size: 1.1rem; }
}

/* --- Right-to-left (Arabic) ----------------------------------------------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .main-sidebar { left: auto; right: 0; }
@media (min-width: 992px) {
  [dir="rtl"] .content-wrapper, [dir="rtl"] .main-header, [dir="rtl"] .main-footer { margin-left: 0 !important; margin-right: 250px; }
  [dir="rtl"].sidebar-collapse .content-wrapper, [dir="rtl"].sidebar-collapse .main-header, [dir="rtl"].sidebar-collapse .main-footer,
  [dir="rtl"] .sidebar-collapse .content-wrapper, [dir="rtl"] .sidebar-collapse .main-header, [dir="rtl"] .sidebar-collapse .main-footer { margin-right: 4.6rem; }
}
@media (max-width: 991.98px) {
  [dir="rtl"] .main-sidebar { transform: translateX(250px); }
  [dir="rtl"] .sidebar-open .main-sidebar { transform: translateX(0); }
}
[dir="rtl"] .nav-sidebar .nav-link > .nav-icon { margin-left: .2rem; margin-right: 0; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
[dir="rtl"] .toast-host { right: auto; left: 16px; }
[dir="rtl"] .chat-channels { border-right: 0; border-left: 1px solid #dee2e6; }
[dir="rtl"] .chat-channels .channel { text-align: right; }
[dir="rtl"] .kanban-card.priority-high, [dir="rtl"] .kanban-card.priority-normal, [dir="rtl"] .kanban-card.priority-low { border-left-width: 1px; border-right-width: 4px; border-right-style: solid; }
[dir="rtl"] .kanban-card.priority-high { border-right-color: #dc3545; }
[dir="rtl"] .kanban-card.priority-normal { border-right-color: #007bff; }
[dir="rtl"] .kanban-card.priority-low { border-right-color: #6c757d; }
[dir="rtl"] .notif-item.unread { border-left: 0; border-right: 3px solid #007bff; }
[dir="rtl"] .input-group > .form-control:not(:last-child) { border-radius: 0 .25rem .25rem 0; }

/* Login / account pages */
.login-page .login-box { width: min(380px, calc(100vw - 32px)); }
.account-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* Two-step sign-in (mfa.js) */
.mfa-code { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-recovery { columns: 2; column-gap: 1rem; font-size: 1.05rem; }
.mfa-recovery li { break-inside: avoid; padding: .1rem 0; }
.mfa-qr { max-width: 100%; height: auto; }
.btn.mfa-choice, .login-card-body .btn.mfa-choice { display: flex; justify-content: flex-start; align-items: center; white-space: normal; height: auto; min-height: 0; padding: .6rem .85rem; line-height: 1.35; text-align: left; }
.btn.mfa-choice small { opacity: .85; font-weight: normal; }