@import url("assets/vendor/fonts/google-fonts.css");

:root {
  --dwam-font-ar: "IBM Plex Sans Arabic", "Tajawal", Tahoma, Arial, sans-serif;
  --dwam-font-num: "Inter", "Segoe UI", Arial, sans-serif;
  --dwam-space-1: 4px;
  --dwam-space-2: 8px;
  --dwam-space-3: 12px;
  --dwam-space-4: 16px;
  --dwam-space-5: 20px;
  --dwam-space-6: 24px;
  --dwam-space-8: 32px;
  --dwam-radius-sm: 6px;
  --dwam-radius: 8px;
  --dwam-radius-lg: 12px;
  --dwam-shadow: 0 14px 36px rgba(15, 25, 45, .08);
  --dwam-sidebar-width: 282px;
  --dwam-platform-sidebar-width: 265px;
  --dwam-header-height: 82px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--dwam-font-ar);
  font-size: clamp(14px, .82vw, 16px);
}

body,
button,
input,
select,
textarea,
table {
  font-family: var(--dwam-font-ar);
  letter-spacing: 0;
}

input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="tel"],
input[inputmode="numeric"],
input[inputmode="decimal"],
[data-number],
[data-currency],
.latin-digits,
.amount,
.metric-number,
.kpi-number {
  font-family: var(--dwam-font-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
a,
input,
select,
textarea {
  min-width: 0;
}

button,
[role="button"],
.icon-btn,
.topbar-icon,
.row-button,
.support-button,
.management-button,
.portal-action {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(104, 66, 173, .28);
  outline-offset: 2px;
}

.app-shell,
.platform-shell,
.portal-shell,
.support-page,
.support-platform-page {
  width: 100%;
  min-width: 0;
}

.main-content,
.dashboard-main,
.platform-main,
.platform-workspace,
.portal-main,
.portal-content,
.support-main,
.support-platform-main,
.management-main {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.table-scroll,
.responsive-table,
.data-table-wrap,
.preview-table-wrap,
.support-table-wrap,
.dwam-responsive-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

table {
  max-width: 100%;
  border-spacing: 0;
}

.dwam-responsive-table-wrap table {
  width: max-content;
  min-width: 100%;
}

.data-table,
.accounts-panel table,
.management-table,
.support-table {
  width: 100%;
}

.data-table,
.management-table,
.support-table,
.dwam-responsive-table-wrap table {
  border-collapse: collapse;
}

.data-table th,
.data-table td,
.accounts-panel th,
.accounts-panel td,
.management-table th,
.management-table td,
.support-table th,
.support-table td {
  overflow-wrap: anywhere;
}

.modal,
.dialog,
.modal-dialog,
.accountability-dialog,
.support-modal,
.management-modal,
.payroll-modal,
.drawer,
.side-panel {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

.modal-layer,
.dialog-layer,
.overlay,
.modal-backdrop {
  max-width: 100vw;
  overflow: hidden;
}

.modal,
.dialog,
.modal-dialog,
.accountability-dialog,
.support-modal,
.management-modal,
.payroll-modal {
  overflow: auto;
}

.modal-card,
.dialog-card,
.drawer-panel,
.side-panel {
  min-width: 0;
}

.dwam-touch-target {
  min-width: 40px;
  min-height: 40px;
}

.dropdown,
.dropdown-menu,
.action-menu,
.popover,
.select-menu {
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(420px, calc(100dvh - 24px));
  overflow: auto;
}

.page-intro,
.support-heading,
.management-heading,
.portal-topbar,
.dashboard-header,
.topbar,
.form-actions,
.intro-actions,
.support-heading-actions,
.management-actions {
  flex-wrap: wrap;
}

.app-shell,
.platform-shell,
.portal-shell {
  overflow-x: clip;
}

.workspace,
.platform-workspace,
.portal-workspace,
.main-content,
.dashboard,
.dashboard-main,
.platform-main,
.portal-content,
.support-main,
.support-platform-main,
.management-main {
  min-width: 0;
}

.page-heading,
.page-header,
.panel-head,
.section-head,
.card-head,
.modal-card header,
.modal-card footer {
  min-width: 0;
}

.page-heading > *,
.page-header > *,
.panel-head > *,
.section-head > *,
.card-head > * {
  min-width: 0;
}

.btn,
button,
select,
input,
textarea {
  max-width: 100%;
}

.kpi-grid,
.stats-grid,
.owner-kpis,
.support-kpis,
.management-kpis,
.dashboard-cards,
.quick-operations > div,
.money-summary,
.day-summary,
.period-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.tabs,
.portal-tabs,
.support-tabs,
.management-tabs,
.attendance-tabs,
.task-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  contain: inline-size paint;
}

.tabs > *,
.portal-tabs > *,
.support-tabs > *,
.management-tabs > *,
.attendance-tabs > *,
.task-tabs > * {
  flex: 0 0 auto;
}

[dir="rtl"] .tabs,
[dir="rtl"] .portal-tabs,
[dir="rtl"] .support-tabs,
[dir="rtl"] .management-tabs,
[dir="rtl"] .attendance-tabs,
[dir="rtl"] .task-tabs {
  direction: rtl;
  justify-content: flex-start;
}

[dir="rtl"] .tabs > *,
[dir="rtl"] .portal-tabs > *,
[dir="rtl"] .support-tabs > *,
[dir="rtl"] .management-tabs > *,
[dir="rtl"] .attendance-tabs > *,
[dir="rtl"] .task-tabs > * {
  direction: rtl;
}

.form-grid,
.fields-grid,
.support-form-grid,
.management-form-grid,
.accountability-response,
.issue-facts,
.contract-strip,
.info-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.employee-picker,
.employee-picker-panel,
.employees-selector,
.bulk-employee-panel {
  width: 100%;
  max-width: 100%;
}

.employee-grid,
.employee-picker-grid,
.employee-list-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

@media (min-width: 1600px) {
  .platform-main,
  .dashboard-main,
  .support-main,
  .support-platform-main,
  .management-main {
    padding-inline: clamp(24px, 3vw, 56px);
  }
}

@media (min-width: 1025px) {
  .app-shell,
  .platform-shell,
  .portal-shell {
    display: flex;
    align-items: stretch;
    min-height: 100dvh;
  }

  .app-shell > .workspace,
  .platform-shell > .platform-workspace,
  .portal-shell > .portal-workspace,
  .app-shell > main,
  .platform-shell > main,
  .portal-shell > main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar,
  .portal-sidebar {
    flex: 0 0 var(--dwam-sidebar-width);
  }

  .platform-sidebar {
    flex: 0 0 var(--dwam-platform-sidebar-width);
  }

  .dashboard-main,
  .platform-main,
  .portal-content,
  .support-main,
  .support-platform-main,
  .management-main,
  .dashboard {
    padding-inline: clamp(18px, 1.4vw, 32px);
  }
}

@media (max-width: 1024px) {
  :root {
    --dwam-sidebar-width: 260px;
    --dwam-platform-sidebar-width: 250px;
  }

  .support-main,
  .support-platform-main,
  .management-main,
  .platform-main,
  .portal-content {
    padding: 20px;
  }

  .support-heading,
  .management-heading,
  .page-intro {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  body:not(.sidebar-open) .sidebar,
  body:not(.sidebar-open) .platform-sidebar,
  body:not(.sidebar-open) .portal-sidebar {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  body.sidebar-open .sidebar,
  body.sidebar-open .platform-sidebar,
  body.sidebar-open .portal-sidebar {
    display: flex !important;
    visibility: visible;
    pointer-events: auto;
  }

  .main-content,
  .platform-workspace,
  .portal-main {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  .sidebar,
  .platform-sidebar,
  .portal-sidebar {
    width: min(88vw, 320px);
    max-width: 100vw;
  }

  .support-main,
  .support-platform-main,
  .management-main,
  .platform-main,
  .portal-content,
  .dashboard-main {
    padding: 16px;
  }

  .support-heading h2,
  .management-heading h1,
  .page-intro h1 {
    font-size: clamp(24px, 8vw, 34px);
  }

  .support-heading p,
  .management-heading p,
  .page-intro p {
    font-size: 14px;
    line-height: 1.8;
  }

  .support-heading-actions,
  .management-actions,
  .intro-actions,
  .form-actions {
    width: 100%;
  }

  .support-heading-actions > *,
  .management-actions > *,
  .intro-actions > *,
  .form-actions > * {
    flex: 1 1 min(100%, 180px);
  }

  .support-button,
  .management-button,
  .portal-action,
  .intro-actions button,
  .intro-actions select {
    min-height: 44px;
  }

  .modal,
  .dialog,
  .modal-dialog,
  .accountability-dialog,
  .support-modal,
  .management-modal,
  .payroll-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: var(--dwam-radius);
  }

  .data-table,
  .accounts-panel table,
  .management-table,
  .support-table,
  .dwam-responsive-table-wrap table {
    min-width: 680px;
  }

  .topbar,
  .portal-topbar,
  .platform-topbar {
    gap: 12px;
  }

  .topbar-actions,
  .portal-topbar-actions,
  .platform-topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .support-main,
  .support-platform-main,
  .management-main,
  .platform-main,
  .portal-content,
  .dashboard-main {
    padding: 12px;
  }

  .icon-btn,
  .topbar-icon,
  .row-button {
    min-width: 44px;
    min-height: 44px;
  }

  .support-button,
  .management-button,
  .portal-action,
  .intro-actions button {
    width: 100%;
  }

  .support-card,
  .management-card,
  .section-card,
  .platform-panel {
    border-radius: var(--dwam-radius);
  }

  .data-table,
  .accounts-panel table,
  .management-table,
  .support-table,
  .dwam-responsive-table-wrap table {
    min-width: 720px;
  }

  .modal-card,
  .dialog-card {
    width: calc(100vw - 16px) !important;
    height: auto;
    max-height: calc(100dvh - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}