/* Alhadaya Mall identity layer for the ESS portal (/ess/*). Loaded after app.css; overrides via added .ahm-ess-* classes only. */ :root { /* Real value is set by app.js from #ess-bottom-nav's rendered height (already includes its own safe-area padding). This is only the pre-JS / no-JS fallback: ~64px bar + ~24px home-indicator inset. Deliberately on :root, not .ahm-ess-shell/body -- app.js overrides this via an inline style on , and an inline style only beats rules on that same element, so a same-property rule on body/.ahm-ess-shell would out-cascade the inherited JS-measured value. */ --ahm-nav-h: 88px; } /* Bottom nav must stay pinned to the *viewport* edge, never an inner scroll container. transform/filter/perspective/contain on any of these ancestors would re-root position:fixed to that ancestor instead of the viewport -- keep this defensive reset even though nothing here sets them today, so a future utility class added to html/body/.ahm-ess-shell can't silently reintroduce the bug. */ html, body, .ahm-ess-shell { transform: none; filter: none; perspective: none; contain: none; } html, body { /* Stops iOS rubber-band overscroll from flashing a gap below the fixed nav at the top/bottom of the document. */ overscroll-behavior-y: none; } .ahm-ess-shell { --ahm-purple: #682098; --ahm-purple-dark: #40125E; --ahm-purple-soft: #F4EDF9; --ahm-mint: #60B8A8; --ahm-mint-dark: #398C81; --ahm-mint-soft: #EAF7F4; --ahm-canvas: #F8F7FA; --ahm-surface: #FFFFFF; --ahm-ink: #30253A; --ahm-muted: #6B6872; --ahm-border: #E3DDE8; --ahm-warning: #C67A18; --ahm-warning-soft: #FFF5DB; --ahm-danger: #C9454F; --ahm-danger-soft: #FDEBEC; --ahm-radius: 14px; --ahm-shadow: 0 6px 20px rgba(71, 34, 97, .08); /* Redesign tokens (feature/ess-redesign): additional roles layered onto the same Alhadaya Mall purple/mint brand -- no new hues introduced. */ --ahm-ink-2: #6B6685; --ahm-ink-3: #9B96B0; --ahm-line: #ECEAF4; --ahm-green: #16A34A; --ahm-green-bg: #EAF7EF; --ahm-red: #DC2626; --ahm-red-bg: #FDECEC; --ahm-radius-lg: 22px; --ahm-radius-md: 16px; --ahm-shadow-sm: 0 1px 2px rgba(30, 27, 46, .05), 0 4px 14px rgba(30, 27, 46, .05); --ahm-shadow-md: 0 8px 28px rgba(76, 29, 149, .16); } html.dark .ahm-ess-shell { --ahm-ink-2: #A79FC2; --ahm-ink-3: #8B84A6; --ahm-line: #362B47; --ahm-green-bg: color-mix(in srgb, var(--ahm-green) 20%, transparent); --ahm-red-bg: color-mix(in srgb, var(--ahm-red) 20%, transparent); } /* Canvas + type */ .ahm-ess-shell { background: var(--ahm-canvas); color: var(--ahm-ink); } /* Header / hero (home + attendance top cards) */ .ahm-ess-header, .ahm-ess-hero { background: linear-gradient(135deg, var(--ahm-purple), var(--ahm-purple-dark)); border-radius: var(--ahm-radius); box-shadow: var(--ahm-shadow); } /* 4.1: native date/datetime pickers render their internal segments LTR even inside an RTL document, so the day/month/year (or date/time) groups print reversed unless the input box itself is forced ltr. */ input[type="date"], input[type="time"], input[type="datetime-local"] { dir: ltr; text-align: end; } /* Bottom nav */ .ahm-ess-nav { border-top-color: var(--ahm-border); width: 100%; } @media (min-width: 640px) { .ahm-ess-nav { max-width: 32rem; margin-inline: auto; } } .ahm-ess-nav-item--active { color: var(--ahm-purple); } html.dark .ahm-ess-nav-item--active { color: color-mix(in srgb, var(--ahm-mint) 80%, white); background: color-mix(in srgb, var(--ahm-mint) 15%, transparent) !important; } /* 4.2: extra 24px so the last element in the page clears the bar instead of touching it -- --ahm-nav-h already includes the bar's own safe-area-inset-bottom (see the JS-measured comment on :root above). */ .ahm-ess-main--with-nav { padding-bottom: calc(var(--ahm-nav-h) + 24px); } /* 4.4: keep the top safe-area reserved on header-less pages (error.html) without it living on an ancestor of the sticky header -- see base.html. */ .ahm-ess-main--top-safe { padding-top: env(safe-area-inset-top); } /* Hide (not translate) the bar while a field has focus -- it would be covered by the keyboard/native picker anyway, and this avoids the jump/flicker some iOS Safari versions produce for fixed elements during keyboard animation. */ body.ess-kb-open .ahm-ess-nav { display: none; } /* Cards: radius/shadow/border only -- background stays on Tailwind's bg-white/dark:bg-slate-900 utilities so dark mode is untouched. */ .ahm-ess-card { border-radius: var(--ahm-radius); box-shadow: var(--ahm-shadow); border-color: var(--ahm-border); } /* Buttons */ .ahm-ess-btn-primary { background: var(--ahm-purple); border-radius: var(--ahm-radius); } .ahm-ess-btn-primary:hover { background: var(--ahm-purple-dark); } .ahm-ess-btn-success { background: var(--ahm-mint); border-radius: var(--ahm-radius); } .ahm-ess-btn-success:hover { background: var(--ahm-mint-dark); } .ahm-ess-btn-danger { background: var(--ahm-danger); border-radius: var(--ahm-radius); } /* Chips / filter tabs */ .ahm-ess-chip { border-radius: 999px; border-color: var(--ahm-border); } .ahm-ess-chip--active { background: var(--ahm-purple) !important; } /* Status badges */ .ahm-ess-badge--pending { background: var(--ahm-warning-soft); color: var(--ahm-warning); } .ahm-ess-badge--approved { background: var(--ahm-mint-soft); color: var(--ahm-mint-dark); } .ahm-ess-badge--rejected { background: var(--ahm-danger-soft); color: var(--ahm-danger); } .ahm-ess-badge--neutral { border-radius: 999px; } html.dark .ahm-ess-badge--pending { background: color-mix(in srgb, var(--ahm-warning) 22%, transparent); color: #F3C877; } html.dark .ahm-ess-badge--approved { background: color-mix(in srgb, var(--ahm-mint) 22%, transparent); color: #8FDCCB; } html.dark .ahm-ess-badge--rejected { background: color-mix(in srgb, var(--ahm-danger) 22%, transparent); color: #F0A0A6; } /* Manager "حالة الفريق الآن": two states distinct from pending(late)/rejected (confirmed-absent) -- an open attendance past shift-end+grace, and an absent employee whose shift hasn't ended yet (not yet a confirmed absence). */ .ahm-ess-badge--no-checkout { background: var(--ahm-danger-soft); color: var(--ahm-warning); } .ahm-ess-badge--pending-punch { background: #EEEDF2; color: var(--ahm-ink-2); } html.dark .ahm-ess-badge--no-checkout { background: color-mix(in srgb, var(--ahm-danger) 18%, transparent); color: #F3C877; } html.dark .ahm-ess-badge--pending-punch { background: color-mix(in srgb, var(--ahm-ink-2) 20%, transparent); color: var(--ahm-ink-2); } .team-status-tile--active { box-shadow: 0 0 0 2px var(--ahm-purple) inset; } /* FAB */ .ahm-ess-fab { background: var(--ahm-purple); box-shadow: var(--ahm-shadow); } /* 4.3: extra clearance so the last card in a list clears the floating "+" button (56px) + its 16px gap above the bottom nav, on top of the base .ahm-ess-main--with-nav padding. */ .ahm-ess-fab-clearance { margin-bottom: 72px; } /* Bottom sheets (reject/verdict dialogs) */ .ahm-ess-sheet { border-radius: var(--ahm-radius) var(--ahm-radius) 0 0; } /* Native date/time inputs inherit dir="rtl" from , which reverses day/month/year order -- force LTR digit order regardless of document direction. */ input[type="date"], input[type="time"], input[type="datetime-local"] { direction: ltr; text-align: end; } /* Isolates a numeric/date fragment from the surrounding RTL Arabic run so digits, decimals and dashes don't reorder relative to adjacent text. */ .num { unicode-bidi: isolate; } /* FAB wrapper: corner-floating button >=640px (unchanged); on narrow screens it previously covered request cards scrolling underneath it, so it becomes a centered button straddling the bottom nav's top edge instead, out of the scrolling content's path entirely. */ .ahm-ess-fab-wrap { position: fixed; z-index: 30; bottom: calc(var(--ahm-nav-h, 88px) + 16px); inset-inline-end: 1.25rem; } @media (max-width: 639px) { .ahm-ess-fab-wrap { inset-inline-end: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--ahm-nav-h, 88px) - 28px); } } /* Alerts / banners on Home */ .ahm-ess-alert--warning { background: var(--ahm-warning-soft); border-color: var(--ahm-warning); color: var(--ahm-warning); } .ahm-ess-alert--danger { background: var(--ahm-danger-soft); border-color: var(--ahm-danger); color: var(--ahm-danger); } .ahm-ess-alert--info { background: var(--ahm-purple-soft); border-color: var(--ahm-purple); color: var(--ahm-purple-dark); } html.dark .ahm-ess-alert--warning { background: color-mix(in srgb, var(--ahm-warning) 20%, transparent); color: #F3C877; } html.dark .ahm-ess-alert--danger { background: color-mix(in srgb, var(--ahm-danger) 20%, transparent); color: #F0A0A6; } html.dark .ahm-ess-alert--info { background: color-mix(in srgb, var(--ahm-purple) 25%, transparent); color: #D9C6EE; } /* Attendance calendar day cells */ .ess-daycell { aspect-ratio: 1 / 1; min-height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .ess-daycell--present { background: var(--ahm-mint-soft); color: var(--ahm-mint-dark); } .ess-daycell--late { background: var(--ahm-warning-soft); color: var(--ahm-warning); } .ess-daycell--absent { background: var(--ahm-danger-soft); color: var(--ahm-danger); } .ess-daycell--leave { background: var(--ahm-purple-soft); color: var(--ahm-purple); } .ess-daycell--off { background: transparent; color: var(--ahm-ink-3); } .ess-daycell--future { background: transparent; color: var(--ahm-ink-3); opacity: .35; } .ess-daycell--today { box-shadow: 0 0 0 2px var(--ahm-purple) inset; } html.dark .ess-daycell--present { background: color-mix(in srgb, var(--ahm-mint) 22%, transparent); color: #8FDCCB; } html.dark .ess-daycell--late { background: color-mix(in srgb, var(--ahm-warning) 22%, transparent); color: #F3C877; } html.dark .ess-daycell--absent { background: color-mix(in srgb, var(--ahm-danger) 22%, transparent); color: #F0A0A6; } html.dark .ess-daycell--leave { background: color-mix(in srgb, var(--ahm-purple) 25%, transparent); color: #D9C6EE; } /* Leave-balance progress bar */ .ahm-ess-progress-bar { background: var(--ahm-purple); } /* Onboarding wizard progress dots (templates/hr/onboarding_form.html) */ .ahm-ess-step-dot--active { background: var(--ahm-purple); } .ahm-ess-step-dot--done { background: var(--ahm-mint); cursor: pointer; } html.dark .ahm-ess-step-dot--active { background: color-mix(in srgb, var(--ahm-purple) 70%, white); } html.dark .ahm-ess-step-dot--done { background: color-mix(in srgb, var(--ahm-mint) 70%, white); } /* Request/EOS wizard numbered-circle stepper (templates/eos_new.html, templates/requests_new.html). */ .ahm-ess-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; } .ahm-ess-step-connector { position: absolute; top: 13px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--ahm-border); z-index: 0; } .ahm-ess-step-circle { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--ahm-border); color: var(--ahm-muted); } .ahm-ess-step-circle--active { background: var(--ahm-purple); color: #fff; } .ahm-ess-step-circle--done { background: var(--ahm-mint); color: #fff; cursor: pointer; } .ahm-ess-step-label { font-size: 10px; color: var(--ahm-muted); text-align: center; } .ahm-ess-step-label--active { color: var(--ahm-purple); font-weight: 700; } .ahm-ess-step-label--done { color: var(--ahm-mint-dark); } html.dark .ahm-ess-step-circle--active { background: color-mix(in srgb, var(--ahm-purple) 70%, white); } html.dark .ahm-ess-step-circle--done { background: color-mix(in srgb, var(--ahm-mint) 70%, white); } /* Runtime-injected toast / notification states (mirrors app.js edits) */ .ahm-ess-toast--success { background: var(--ahm-mint-dark); } .ahm-ess-toast--error { background: var(--ahm-danger); } .ahm-ess-toast--info { background: var(--ahm-purple-dark); } .ahm-ess-notif-item--unread { background: var(--ahm-purple-soft); } .ahm-ess-notif-dot { background: var(--ahm-purple); } html.dark .ahm-ess-notif-item--unread { background: color-mix(in srgb, var(--ahm-purple) 18%, transparent); } /* Mobile-first (360-390px) is the default above. Desktop refinements only. */ @media (min-width: 768px) { .ahm-ess-shell main > div { max-width: 42rem; } .ahm-ess-card { padding-inline: 1.25rem; } } @media (min-width: 1024px) { .ahm-ess-shell main > div { max-width: 56rem; } } /* ------------------------------------------------------------------ */ /* Monthly attendance report (/ess/attendance/report) */ /* ------------------------------------------------------------------ */ /* Status badges: present/success reuses --ahm-mint, warning/late reuses --ahm-warning, absent/rejected reuses --ahm-danger (same tokens as the rest of the portal, no new hues), rest/future days are neutral grey. */ .ess-report-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .ess-report-badge--present { background: var(--ahm-mint-soft); color: var(--ahm-mint-dark); } .ess-report-badge--leave { background: var(--ahm-purple-soft); color: var(--ahm-purple); } .ess-report-badge--late { background: var(--ahm-warning-soft); color: var(--ahm-warning); } .ess-report-badge--incomplete{ background: var(--ahm-warning-soft); color: var(--ahm-warning); } .ess-report-badge--absent { background: var(--ahm-danger-soft); color: var(--ahm-danger); } .ess-report-badge--pending_today, .ess-report-badge--future, .ess-report-badge--day_off, .ess-report-badge--holiday, .ess-report-badge--not_scheduled { background: #EEEDF2; color: var(--ahm-ink-2); } html.dark .ess-report-badge--present { background: color-mix(in srgb, var(--ahm-mint) 22%, transparent); color: #8FDCCB; } html.dark .ess-report-badge--leave { background: color-mix(in srgb, var(--ahm-purple) 25%, transparent); color: #D9C6EE; } html.dark .ess-report-badge--late { background: color-mix(in srgb, var(--ahm-warning) 22%, transparent); color: #F3C877; } html.dark .ess-report-badge--incomplete { background: color-mix(in srgb, var(--ahm-warning) 22%, transparent); color: #F3C877; } html.dark .ess-report-badge--absent { background: color-mix(in srgb, var(--ahm-danger) 22%, transparent); color: #F0A0A6; } html.dark .ess-report-badge--pending_today, html.dark .ess-report-badge--future, html.dark .ess-report-badge--day_off, html.dark .ess-report-badge--holiday, html.dark .ess-report-badge--not_scheduled { background: color-mix(in srgb, var(--ahm-ink-2) 20%, transparent); color: var(--ahm-ink-2); } .ess-report-signal--late { color: var(--ahm-warning); } .ess-report-signal--early { color: var(--ahm-warning); } .ess-report-table { display: none; } @media (min-width: 768px) { .ess-report-days-cards { display: none; } .ess-report-table { display: table; width: 100%; border-collapse: collapse; font-size: 12px; } .ess-report-table th, .ess-report-table td { padding: .5rem .6rem; text-align: center; border-bottom: 1px solid var(--ahm-border); white-space: nowrap; } .ess-report-table thead th { background: var(--ahm-purple-soft); color: var(--ahm-purple-dark); font-weight: 700; position: sticky; top: 0; } html.dark .ess-report-table thead th { background: color-mix(in srgb, var(--ahm-purple) 22%, transparent); color: #D9C6EE; } html.dark .ess-report-table th, html.dark .ess-report-table td { border-bottom-color: var(--ahm-line); } } /* ------------------------------------------------------------------ */ /* HR Workspace dashboard (/ess/hr/, /ess/hr/attention) */ /* ------------------------------------------------------------------ */ /* "تحتاج إجراء مني" KPI tile -- purple ring only, same brand color as everywhere else (.team-status-tile--active, .ess-daycell--today), never a new hue -- this is what makes that one tile visually the most prominent of the four, as required, without introducing a new color. */ .hr-kpi-action { box-shadow: 0 0 0 2px var(--ahm-purple) inset, var(--ahm-shadow); } /* "يحتاج انتباهك" table/cards -- identical responsive technique to .ess-report-table/.ess-report-days-cards above (table only from 768px, stacked cards below it). */ .hr-attn-table { display: none; } @media (min-width: 768px) { .hr-attn-cards { display: none; } .hr-attn-table { display: table; width: 100%; border-collapse: collapse; font-size: 12px; } .hr-attn-table th, .hr-attn-table td { padding: .55rem .6rem; text-align: center; border-bottom: 1px solid var(--ahm-border); } .hr-attn-table thead th { background: var(--ahm-purple-soft); color: var(--ahm-purple-dark); font-weight: 700; } html.dark .hr-attn-table thead th { background: color-mix(in srgb, var(--ahm-purple) 22%, transparent); color: #D9C6EE; } html.dark .hr-attn-table th, html.dark .hr-attn-table td { border-bottom-color: var(--ahm-line); } } /* "الطلبات حسب النوع" mini bar chart -- reuses the purple/mint pair only. */ .hr-kind-bar { background: var(--ahm-purple); border-radius: 999px; height: 8px; } .hr-trend-bar--received { background: var(--ahm-purple-soft); } .hr-trend-bar--completed { background: var(--ahm-mint); } html.dark .hr-trend-bar--received { background: color-mix(in srgb, var(--ahm-purple) 30%, transparent); } /* Print: report table only, A4 landscape, everything else stripped. */ @media print { .ess-report-no-print, .ahm-ess-header, #ess-bottom-nav, #toast-container, #day-popover, #day-popover-backdrop { display: none !important; } .ahm-ess-main--with-nav { padding-bottom: 0 !important; } body, .ahm-ess-shell { background: #fff !important; color: #000 !important; } .ahm-ess-shell main > div { max-width: none !important; padding: 0 !important; } .ess-report-days-cards { display: none !important; } .ess-report-table { display: table !important; width: 100% !important; font-size: 10px; } .ess-report-table th, .ess-report-table td { border: 1px solid #ccc; color: #000 !important; } .ess-report-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: A4 landscape; margin: 10mm; } } /* ------------------------------------------------------------------ */ /* Unified pager (templates/partials/pagination.html) */ /* ------------------------------------------------------------------ */ .ahm-ess-pager-btn--disabled { opacity: .4; pointer-events: none; cursor: not-allowed; } /* ------------------------------------------------------------------ */ /* HR workspace sidebar mobile nav (templates/hr/base_hr.html) */ /* Edge fade hints that the horizontal scroller has more items, since */ /* there is no visible scrollbar on touch devices. */ /* ------------------------------------------------------------------ */ .ahm-ess-hr-nav-fade--start, .ahm-ess-hr-nav-fade--end { position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; } .ahm-ess-hr-nav-fade--start { inset-inline-start: 0; } .ahm-ess-hr-nav-fade--end { inset-inline-end: 0; } .ahm-ess-hr-nav-fade--start { background: linear-gradient(to right, var(--ahm-purple), transparent); } .ahm-ess-hr-nav-fade--end { background: linear-gradient(to left, var(--ahm-purple), transparent); } [dir="rtl"] .ahm-ess-hr-nav-fade--start { background: linear-gradient(to left, var(--ahm-purple), transparent); } [dir="rtl"] .ahm-ess-hr-nav-fade--end { background: linear-gradient(to right, var(--ahm-purple), transparent); } @media (min-width: 768px) { .ahm-ess-hr-nav-fade--start, .ahm-ess-hr-nav-fade--end { display: none; } } /* ------------------------------------------------------------------ */ /* Request-list filter chip rows (templates/requests_list.html) */ /* Hide the native scrollbar on the horizontal filter-chip rows and */ /* hint at more content off-screen with an edge fade, mirroring */ /* .ahm-ess-hr-nav-fade above for the HR sidebar nav. */ /* ------------------------------------------------------------------ */ .ahm-ess-chip-row { scrollbar-width: none; -ms-overflow-style: none; } .ahm-ess-chip-row::-webkit-scrollbar { display: none; } .ahm-ess-chip-fade--start, .ahm-ess-chip-fade--end { position: absolute; top: 0; bottom: .5rem; width: 20px; pointer-events: none; } .ahm-ess-chip-fade--start { inset-inline-start: 0; background: linear-gradient(to right, var(--ahm-canvas), transparent); } .ahm-ess-chip-fade--end { inset-inline-end: 0; background: linear-gradient(to left, var(--ahm-canvas), transparent); } [dir="rtl"] .ahm-ess-chip-fade--start { background: linear-gradient(to left, var(--ahm-canvas), transparent); } [dir="rtl"] .ahm-ess-chip-fade--end { background: linear-gradient(to right, var(--ahm-canvas), transparent); } html.dark .ahm-ess-chip-fade--start { background: linear-gradient(to right, #020617, transparent); } html.dark .ahm-ess-chip-fade--end { background: linear-gradient(to left, #020617, transparent); } [dir="rtl"] html.dark .ahm-ess-chip-fade--start, html.dark[dir="rtl"] .ahm-ess-chip-fade--start { background: linear-gradient(to left, #020617, transparent); } [dir="rtl"] html.dark .ahm-ess-chip-fade--end, html.dark[dir="rtl"] .ahm-ess-chip-fade--end { background: linear-gradient(to right, #020617, transparent); }