/*!
 * EMS — Frontend stylesheet (v2 "workspace" redesign)
 * ---------------------------------------------------------------------------
 * Drop-in replacement for assets/css/frontend.css. No PHP / markup changes are
 * required: every class the templates and hr-leave-calendar.js emit is styled.
 *
 * CONTENTS
 *   1. Design tokens (brand-aware)      8. Auth pages
 *   2. Base                             9. Dashboard widgets
 *   3. Icons (CSS masks, no glyphs)    10. Employees & documents
 *   4. App shell (sidebar, header)     11. Leave management (HR)
 *   5. Surfaces & typography helpers   12. Profile & employee leave
 *   6. Buttons                         13. Calendar, notifications
 *   7. Forms, tables, badges, alerts   14. Chat, offer letter, responsive
 *
 * MULTI-TENANT BRANDING
 *   PHP injects --ems-brand (+ -soft / -light / -medium / -strong) inline on
 *   .ems-dashboard and .ems-sidebar. Surfaces stay neutral; the tenant colour
 *   is used for primary actions, active states, focus and progress only. Text
 *   that sits on the brand colour picks black/white automatically, and brand
 *   colour used as *text* is darkened, so a pale brand (yellow, lime) is still
 *   readable. Browsers without color-mix()/relative colour fall back to plain
 *   brand + white.
 *
 * INSTALL
 *   1. Save as assets/css/style.css and point ems_enqueue_frontend_assets()
 *      (ems.php) at it; bump the version string to bust the browser cache.
 *   2. Optional clean-up: delete the page-level <style> blocks in
 *      modules/offer-letter/frontend/offer-letter-generation.php (the second
 *      one; keep the first, it is used for PDF generation) and in
 *      templates/company-hr/leave/leave-request-approval-view.php. Their rules
 *      are now part of this file and would otherwise override it on those pages.
 */

/* Web font. For best performance you may instead enqueue this from PHP with
   wp_enqueue_style() and delete the @import. The stack below degrades to the
   system UI font if it cannot load. */


/* font */
/* @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Tenant brand defaults (PHP overrides these per company) */
    --ems-brand: #0f766e;
    --ems-brand-soft: rgba(15, 118, 110, 0.08);
    --ems-brand-light: rgba(15, 118, 110, 0.12);
    --ems-brand-medium: rgba(15, 118, 110, 0.22);
    --ems-brand-strong: rgba(15, 118, 110, 0.75);

    /* Type */
    --ems-font: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Neutrals */
    --ems-surface: #ffffff;
    --ems-surface-2: #f9fafb;
    --ems-surface-3: #f2f4f7;
    --ems-line: #e4e7ec;
    --ems-line-soft: #eef0f4;
    --ems-line-strong: #d0d5dd;
    --ems-text-2: #465064;
    --ems-text-3: #5b6577;
    --ems-text-4: #7a8394;

    /* Status palette (fg / bg / border) */
    --ems-ok: #067647;
    --ems-ok-bg: #ecfdf3;
    --ems-ok-line: #abefc6;
    --ems-warn: #b54708;
    --ems-warn-bg: #fffaeb;
    --ems-warn-line: #fedf89;
    --ems-bad: #b42318;
    --ems-bad-bg: #fef3f2;
    --ems-bad-line: #fecdca;
    --ems-info: #175cd3;
    --ems-info-bg: #eff8ff;
    --ems-info-line: #b2ddff;
    --ems-violet: #5925dc;
    --ems-violet-bg: #f4f3ff;
    --ems-violet-line: #d9d6fe;
    --ems-cyan: #0e7490;
    --ems-cyan-bg: #ecfeff;
    --ems-cyan-line: #a5f3fc;
    --ems-neutral: #475467;
    --ems-neutral-bg: #f2f4f7;
    --ems-neutral-line: #e4e7ec;

    /* Shape & depth */
    --ems-r-xs: 6px;
    --ems-r-sm: 8px;
    --ems-r-md: 10px;
    --ems-r-lg: 12px;
    --ems-r-xl: 16px;
    --ems-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ems-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --ems-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 0 0 1px rgba(16, 24, 40, 0.05);

    /* Layout */
    --ems-sidebar-w: 215px;
    --ems-pad: 32px;
    --ems-header-h: 68px;
    --ems-content-max: 1240px;
}

/* Tokens that depend on the tenant brand must be (re)computed wherever the
   brand is set, so they live on :root AND .ems-dashboard. */
:root,
.ems-dashboard {
    --ems-brand-ink: var(--ems-brand);
    --ems-brand-hover: var(--ems-brand);
    --ems-on-brand: #ffffff;
    --ems-canvas: #f5f6f8;
    --ems-text: #1b2130;
    --ems-ring: 0 0 0 3px var(--ems-brand-medium);
}

@supports (color: color-mix(in srgb, red, blue)) {

    :root,
    .ems-dashboard {
        --ems-brand-ink: color-mix(in srgb, var(--ems-brand) 76%, #0b1220);
        --ems-brand-hover: color-mix(in srgb, var(--ems-brand) 86%, #000000);
        --ems-canvas: color-mix(in srgb, var(--ems-brand) 2.5%, #f5f6f8);
        --ems-text: color-mix(in srgb, var(--ems-brand) 5%, #171c29);
    }
}

@supports (color: oklch(from red l c h)) {

    :root,
    .ems-dashboard {
        /* white text on dark brands, near-black text on light brands */
        --ems-on-brand: oklch(from var(--ems-brand) clamp(0, calc((0.68 - l) * 1000), 1) 0 0);
    }
}


/* ==========================================================================
   2. BASE  (scoped so the rest of a WordPress site is never affected)
   ========================================================================== */

body.ems-dashboard-body,
body.ems-login-body {
    margin: 0;
    background: var(--ems-canvas);
    color: var(--ems-text);
    font: 400 14px/1.5 var(--ems-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body:has(> .ems-dashboard),
body:has(> .ems-login-page) {
    margin: 0;
    background: var(--ems-canvas);
    color: var(--ems-text);
    font: 400 14px/1.5 var(--ems-font);
    -webkit-font-smoothing: antialiased;
}

.ems-dashboard,
.ems-login-page {
    font-family: var(--ems-font);
    color: var(--ems-text);
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)),
:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) *,
:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) *::before,
:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) *::after {
    box-sizing: border-box;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) :is(h1, h2, h3, h4) {
    margin: 0;
    color: var(--ems-text);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) :is(p, ul, ol) {
    margin: 0;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) a {
    color: var(--ems-brand-ink);
    text-decoration: none;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) img {
    max-width: 100%;
}

:where(.ems-dashboard-body, .ems-login-body, .ems-dashboard, .ems-login-page, body:has(> .ems-dashboard)) small {
    font-size: 12px;
}

/* keyboard focus: always visible, never on mouse click */
:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) :focus-visible {
    outline: 2px solid var(--ems-brand);
    outline-offset: 2px;
}

:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) ::selection {
    background: var(--ems-brand-medium);
}

:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) [hidden] {
    display: none !important;
}

:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) * {
    scrollbar-width: thin;
    scrollbar-color: #cdd2db transparent;
}

:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) ::-webkit-scrollbar-thumb {
    background: #cdd2db;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {

    :where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) *,
    :where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) *::before,
    :where(.ems-dashboard-body, .ems-login-body, body:has(> .ems-dashboard)) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   3. ICONS
   The templates use text glyphs (♧ ♙ ▦ ✓ 💬) as placeholders. They are hidden
   with font-size:0 and replaced by SVG line icons drawn through a CSS mask, so
   they inherit currentColor and need no PHP changes.
   ========================================================================== */

:root {
    --ems-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
    --ems-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --ems-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --ems-i-cal-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
    --ems-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
    --ems-i-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    --ems-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
    --ems-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --ems-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
    --ems-i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
    --ems-i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m22 4-10 10.01-3-3'/%3E%3C/svg%3E");
    --ems-i-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
    --ems-i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
    --ems-i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    --ems-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --ems-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. APP SHELL
   ========================================================================== */

.ems-dashboard {
    display: flex;
    min-height: 100vh;
    background: var(--ems-canvas);
}

#ems-email,
#ems-password {
    padding: 10px;
    border: 1px solid #111111;
    border-radius: 6px;
}

/* ---- Sidebar ------------------------------------------------------------ */

.ems-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    width: var(--ems-sidebar-w);
    padding: 14px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ems-brand);
    border-right: 1px solid var(--ems-line);
}

.ems-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.ems-sidebar-bottom {
    padding-top: 12px;
    border-top: 1px solid var(--ems-line);
}

.ems-sidebar-close {
    display: none;
}

/* workspace block: the tenant's identity */
.ems-company-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 14px;
    border-bottom: 1px solid var(--ems-line);
}

.ems-company-logo,
.ems-company-logo-placeholder {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    object-fit: contain;
}

img.ems-company-logo {
    padding: 3px;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
}

.ems-company-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ems-company-name strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}

.ems-company-name span {
    color: var(--ems-text-3);
    font-size: 12px;
    color: #ffffffd6;
}

.ems-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ems-nav-item,
.ems-logout {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--ems-r-sm);
    color: #ffffffa8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.ems-nav-item:hover,
.ems-logout:hover {
    background: rgba(223, 192, 221, 0.62);
    ;
    color: #ffffff;
    text-decoration: none;
}

.ems-nav-item:hover .ems-nav-icon {
    color: #ffffff;
}

.ems-nav-item .ems-nav-icon {
    color: #ffffffa8;
}

.ems-nav-item.active {
    font-weight: 600;
    background: var(--ems-surface-3);
    color: var(--ems-text);
}

.ems-nav-item.active .ems-nav-icon {
    color: var(--ems-text);
}

/* active marker on the sidebar's edge */
.ems-nav-item.active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ems-brand);
}

.ems-logout:hover {
    background: var(--ems-bad-bg);
    color: var(--ems-bad);
}

.ems-logout .ems-nav-icon {
    color: #ffffffa8;
}

.ems-logout:hover .ems-nav-icon {
    color: var(--ems-bad);
}


/* SIDEBAR TOGGLE BUTTON for web open and close*/
.ems-sidebar {
    overflow: visible;
}

.ems-sidebar-toggle-2 {
    position: absolute;
    top: 48%;
    right: -15px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ems-brand-medium);
    border-radius: 50%;
    background: var(--ems-surface);
    color: var(--ems-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: 0.25s ease;
}

.ems-sidebar-toggle-2:hover {
    background: var(--ems-brand);
    color: var(--ems-surface);
}

.ems-sidebar-toggle-2 i {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.25s ease;

}


/* COLLAPSED */

.ems-sidebar.is-collapsed {
    width: 78px;
}

.ems-sidebar.is-collapsed .ems-company-name {
    display: none;
}

.ems-sidebar.is-collapsed .ems-company-brand {
    justify-content: center;
}

.ems-sidebar.is-collapsed .ems-nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.ems-sidebar.is-collapsed .ems-nav-item > span:not(.ems-nav-icon) {
    display: none;
}

.ems-sidebar.is-collapsed .ems-nav-icon {
    margin: 0;
}

.ems-sidebar.is-collapsed .ems-logout {
    justify-content: center;
}

.ems-sidebar.is-collapsed .ems-logout > span:not(.ems-nav-icon) {
    display: none;
}

.ems-sidebar.is-collapsed .ems-sidebar-toggle-2 i {
    transform: rotate(180deg);
}

/* ---- Content column ----------------------------------------------------- */

.ems-dashboard-content {
    flex: 1;
    min-width: 0;
    width: calc(100% - var(--ems-sidebar-w));
    margin-left: var(--ems-sidebar-w);
    padding: 0 var(--ems-pad) 38px;
    overflow-x: clip;
}

.ems-dashboard-content> :not(header):not(.ems-sidebar-overlay) {
    max-width: var(--ems-content-max);
}

/* pages without a header bar (e.g. offer letter) still need breathing room */
.ems-dashboard-content>.ems-offer-letter-page:first-child,
.ems-dashboard-content>section:first-child {
    margin-top: 24px;
}

/* pages that hold several stacked blocks */
.ems-employee-leave-page,
.ems-leave-management-page,
.ems-leave-policy-page,
.ems-leave-type-page,
.ems-leave-balance-page,
.ems-employee-list-section,
.ems-profile-view,
.ems-notification-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ---- Page header ---------------------------------------------------------- */

.ems-dashboard-header,
.ems-chat-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--ems-header-h);
    margin: 0 calc(var(--ems-pad) * -1) 24px;
    padding: 12px var(--ems-pad);
    background: var(--ems-canvas);
    border-bottom: 1px solid var(--ems-line);
}

.ems-dashboard-header>div:first-of-type {
    min-width: 0;
}

.ems-welcome {
    margin: 0 0 2px;
    color: var(--ems-text-3);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.ems-dashboard-header h1,
.ems-dashboard-header h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.leave-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.leave-header p {
    color: var(--ems-text-3);
    font-size: 13px;
}

/* right side: bell + user */
.ems-header-profile {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
}

.ems-header-notification {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    color: var(--ems-text-2);
    box-shadow: var(--ems-shadow-xs);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.ems-header-notification:hover {
    background: var(--ems-surface-3);
    color: var(--ems-text);
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--ems-canvas);
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-sizing: content-box;
}

.ems-profile-avatar {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    font-size: 14px;
    font-weight: 600;
}

.ems-header-profile .ems-profile-avatar {
    width: 36px;
    height: 36px;
}

.ems-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-profile-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.25;
}

.ems-profile-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.ems-profile-info span {
    color: var(--ems-text-3);
    font-size: 12px;
}

/* Profile dropdown wrapper */

.ems-profile-dropdown-wrapper {
    position: relative;
}


/* Profile trigger */

.ems-profile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}


/* Prevent button styles from affecting profile */

.ems-profile-trigger:focus {
    outline: none;
}


/* Dropdown */

.ems-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 160px;
    padding: 6px;
    background: var(--ems-surface-2);
    border: 1px solid var(--ems-border-color, #e5e7eb);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}


/* Dropdown item */

.ems-profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ems-text-2);
    font-size: 14px;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}


.ems-profile-dropdown-item:hover {
    background: rgba(15, 118, 110, 0.08);
}


/* Icons */

.ems-dropdown-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}


/* Logout */

.ems-logout-item {
    color: #dc2626;
}


/* Hidden state */

.ems-profile-dropdown[hidden] {
    display: none;
}

/* ---- Mobile navigation controls (hidden on desktop) ------------------------ */

.ems-sidebar-toggle,
.ems-sidebar-overlay {
    display: none;
}

/* ---- Dashboard grid -------------------------------------------------------- */

.ems-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.ems-company-card,
.ems-calendar-card,
.ems-action-card,
.ems-profile-card-2 {
    grid-column: span 2;
}

.ems-profile-card {
    grid-column: span 3;
}

.ems-profile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* single-form pages (add / edit employee): use a comfortable form width */
.ems-dashboard-grid>.ems-profile-card:only-child {
    grid-column: 1 / -1;
    max-width: 880px;
}

/* ==========================================================================
   5. SURFACES & CARD ANATOMY
   ========================================================================== */

.ems-glass-card {
    position: relative;
    min-width: 0;
    padding: 20px 24px;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-xs);
    box-shadow: var(--ems-shadow-xs);
}

.ems-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ems-card-heading h2,
.ems-card-heading h3 {
    font-size: 16px;
    font-weight: 600;
}

.ems-card-heading p {
    margin-top: 2px;
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-template-heading,
.ems-leave-heading,
.ems-leave-heading-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* small "section" captions – rendered in sentence case rather than SHOUTING */
.ems-card-label,
.emp-cnt-label {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: lowercase;
}

.ems-card-label::first-letter,
.emp-cnt-label::first-letter {
    text-transform: uppercase;
}

/* heading that is only a caption (e.g. profile edit sections) becomes the title */
.ems-card-heading .ems-card-label:only-child {
    color: var(--ems-text);
    font-size: 15px;
    font-weight: 600;
}

.ems-card-heading h2+p,
.ems-card-label+h2,
.ems-card-label+h3 {
    margin-top: 2px;
}

/* KPI tiles */
.ems-stat-card,
.emp-cnt-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.ems-stat-icon,
.emp-cnt-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    border-radius: var(--ems-r-sm);
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

.ems-stat-text,
.ems-stat-number {
    margin-top: 2px;
    text-transform: capitalize;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ems-stat-description,
.emp-cnt-description {
    color: var(--ems-text-3);
    font-size: 13px;
}

/* key/value blocks inside cards */
.ems-company-details,
.ems-profile-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
}

.ems-company-details span,
.ems-profile-details span {
    display: block;
    margin-bottom: 2px;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-company-details strong,
.ems-profile-details strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
    color: var(--ems-brand);
}

.ems-action-card,
.ems-leave-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ems-action-card h2,
.ems-action-card h3 {
    font-size: 16px;
}

.ems-action-card p,
.ems-leave-content p {
    max-width: 46ch;
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-action-card .ems-primary-button,
.ems-leave-content .ems-primary-button {
    margin-top: auto;
}

.ems-action-card .ems-card-label+h2 {
    margin-top: 0;
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

/* one base for every button-like control */
.ems-primary-button,
.ems-primary-button-pf,
.ems-secondary-button,
.ems-red-btn,
.ems-reset-button,
.ems-submit-button,
.ems-login-button,
.ems-leave-toggle-button,
.ems-calendar-holiday-modal-submit,
.ems-calendar-holiday-modal-cancel,
.ems-calendar-today-btn,
.ems-leave-calendar-navigation button,
.ems-chat-create,
.ems-chat-cancel,
.ems-chat-send,
.ems-chat-create-group,
.ems-chat-edit-group,
.ems-edit-button,
.ems-policy-edit,
.ems-policy-activate,
.ems-policy-deactivate,
.ems-leave-type-activate,
.ems-document-view-button,
.ems-document-verify-button,
.ems-document-reject-button,
.ems-edit-holiday,
.ems-delete-button,
.ems-cancel-button,
.notification-take-action-btn,
.ems-notification-mark-btn,
.ems-offer-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    color: var(--ems-text);
    box-shadow: var(--ems-shadow-xs);
    font: 600 14px/1 var(--ems-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.ems-primary-button:hover,
.ems-primary-button-pf:hover,
.ems-secondary-button:hover,
.ems-red-btn:hover,
.ems-reset-button:hover,
.ems-submit-button:hover,
.ems-login-button:hover,
.ems-leave-toggle-button:hover,
.ems-calendar-holiday-modal-submit:hover,
.ems-calendar-holiday-modal-cancel:hover,
.ems-calendar-today-btn:hover,
.ems-leave-calendar-navigation button:hover,
.ems-chat-create:hover,
.ems-chat-cancel:hover,
.ems-chat-send:hover,
.ems-chat-create-group:hover,
.ems-chat-edit-group:hover,
.ems-edit-button:hover,
.ems-policy-edit:hover,
.ems-policy-activate:hover,
.ems-policy-deactivate:hover,
.ems-leave-type-activate:hover,
.ems-document-view-button:hover,
.ems-document-verify-button:hover,
.ems-document-reject-button:hover,
.ems-edit-holiday:hover,
.ems-delete-button:hover,
.ems-cancel-button:hover,
.notification-take-action-btn:hover,
.ems-notification-mark-btn:hover,
.ems-offer-actions button:hover {
    text-decoration: none;
}

/* secondary (default look above) – hover */
.ems-secondary-button:hover,
.ems-red-btn:hover,
.ems-reset-button:hover,
.ems-calendar-holiday-modal-cancel:hover,
.ems-calendar-today-btn:hover,
.ems-leave-calendar-navigation button:hover,
.ems-chat-cancel:hover,
.ems-chat-create-group:hover,
.ems-chat-edit-group:hover,
.ems-primary-button-pf:hover,
.ems-edit-button:hover,
.ems-policy-edit:hover,
.ems-document-view-button:hover,
.ems-edit-holiday:hover,
.notification-take-action-btn:hover,
.ems-notification-mark-btn:hover {
    background: var(--ems-surface-3);
    border-color: var(--ems-line-strong);
    color: var(--ems-text);
}

/* primary */
.ems-primary-button,
.ems-submit-button,
.ems-login-button,
.ems-leave-toggle-button,
.ems-calendar-holiday-modal-submit,
.ems-chat-create,
.ems-chat-send,
#ems-open-direct-chat,
.ems-offer-actions .ems-primary-button {
    border-color: var(--ems-brand);
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    box-shadow: var(--ems-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ems-primary-button:hover,
.ems-submit-button:hover,
.ems-login-button:hover,
.ems-leave-toggle-button:hover,
.ems-calendar-holiday-modal-submit:hover,
.ems-chat-create:hover,
.ems-chat-send:hover,
#ems-open-direct-chat:hover,
.ems-offer-actions .ems-primary-button:hover {
    border-color: var(--ems-brand-hover);
    background: var(--ems-brand-hover);
    color: var(--ems-on-brand);
}

/* compact controls used inside tables and toolbars */
.ems-edit-button,
.ems-policy-edit,
.ems-policy-activate,
.ems-policy-deactivate,
.ems-leave-type-activate,
.ems-document-view-button,
.ems-document-verify-button,
.ems-document-reject-button,
.ems-edit-holiday,
.ems-delete-button,
.ems-cancel-button,
.notification-take-action-btn,
.ems-notification-mark-btn,
.ems-calendar-today-btn,
.ems-chat-edit-group,
.ems-primary-button-pf {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.ems-primary-button-pf {
    margin: 0 auto;
}

/* success */
.ems-policy-activate,
.ems-leave-type-activate,
.ems-document-verify-button {
    border-color: var(--ems-ok-line);
    color: var(--ems-ok);
}

.ems-policy-activate:hover,
.ems-leave-type-activate:hover,
.ems-document-verify-button:hover {
    background: var(--ems-ok-bg);
    border-color: var(--ems-ok-line);
    color: var(--ems-ok);
}

/* destructive */
.ems-policy-deactivate,
.ems-delete-button,
.ems-document-reject-button,
.ems-cancel-button {
    border-color: var(--ems-bad-line);
    color: var(--ems-bad);
}

.ems-policy-deactivate:hover,
.ems-delete-button:hover,
.ems-document-reject-button:hover,
.ems-cancel-button:hover {
    background: var(--ems-bad-bg);
    border-color: var(--ems-bad-line);
    color: var(--ems-bad);
}

/* templates ship a few inline colours on these buttons; keep the system consistent */
.ems-edit-holiday[style] {
    background-color: var(--ems-surface) !important;
    color: var(--ems-text) !important;
}

.ems-leave-type-activate[style] {
    height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid var(--ems-ok-line) !important;
    background: var(--ems-surface) !important;
    font: 600 13px/1 var(--ems-font) !important;
}

/* full-width call to action on auth pages */
.ems-login-button {
    width: 100%;
    height: 40px;
}

.ems-primary-button:disabled,
.ems-secondary-button:disabled,
.ems-submit-button:disabled,
.ems-chat-send:disabled,
.ems-chat-create:disabled,
.ems-offer-actions button:disabled,
.ems-leave-calendar-navigation button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ems-primary-button:active,
.ems-submit-button:active,
.ems-login-button:active,
.ems-chat-send:active {
    transform: translateY(0.5px);
}

.ems-leave-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.18s ease;
}

.ems-leave-toggle-button.is-open .ems-leave-toggle-icon {
    transform: rotate(45deg);
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

.ems-template-form
.ems-employee-form,
.ems-leave-policy-form,
.ems-leave-type-form,
.ems-employee-profile-form,
.ems-offer-form {
    width: 100%;
}

.ems-form-row,
.ems-form-grid,
.ems-leave-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.ems-form-row {
    margin-bottom: 18px;
}

.ems-form-grid+.ems-form-group,
.ems-form-grid+.ems-form-actions {
    margin-top: 18px;
}

.ems-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ems-form-group.full {
    grid-column: 1 / -1;
}

.ems-form-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.ems-form-section>h3 {
    margin-bottom: 14px;
    font-size: 14px;
}

.ems-card-heading.ems-form-heading {
    margin: 28px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--ems-line-soft);
}

:is(.ems-form-group, .ems-login-form > div, .ems-calendar-holiday-form-group, .ems-chat-modal-box, .ems-profile-picture-upload)>label,
.ems-chat-form-label {
    display: block;
    color: var(--ems-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.ems-login-form label,
.ems-calendar-holiday-form-group label {
    display: block;
    color: var(--ems-text);
    font-size: 13px;
    font-weight: 600;
}

.ems-form-group small,
.ems-duration-info,
.ems-profile-picture-upload small {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
    line-height: 1.4;
}

/* text-like fields */
:is(.ems-form-group, .ems-login-form, .ems-calendar-holiday-form-group, .ems-chat-modal-box, .ems-reject-box, .ems-status-filter-form, .ems-document-filters):is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"], [type="range"], [type="submit"], [type="button"]),
.ems-chat-input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background-color: var(--ems-surface);
    color: var(--ems-text);
    box-shadow: var(--ems-shadow-xs);
    font: 400 14px/1.4 var(--ems-font);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

:is(.ems-form-group, .ems-calendar-holiday-form-group, .ems-reject-box, .ems-chat-modal-box) textarea,
.ems-chat-input {
    height: auto;
    min-height: 96px;
    padding: 9px 12px;
    resize: vertical;
}

.ems-chat-input {
    min-height: 40px;
    max-height: 120px;
    resize: none;
}

.chat-card-p {
    color: var(--ems-text-3);
    font-size: 13px
}

:is(.ems-form-group, .ems-calendar-holiday-form-group, .ems-status-filter-form, .ems-document-filters) select {
    padding-right: 36px;
    /* background-image: var(--ems-i-chevron-down); */
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
}

:is(.ems-form-group, .ems-login-form, .ems-calendar-holiday-form-group, .ems-chat-modal-box, .ems-reject-box, .ems-status-filter-form, .ems-document-filters):is(input, select, textarea)::placeholder,
.ems-chat-input::placeholder {
    color: var(--ems-text-4);
}

:is(.ems-form-group, .ems-login-form, .ems-calendar-holiday-form-group, .ems-chat-modal-box, .ems-reject-box, .ems-status-filter-form, .ems-document-filters):is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"]):hover,
.ems-chat-input:hover {
    border-color: #b8bfcb;
}

:is(.ems-form-group, .ems-login-form, .ems-calendar-holiday-form-group, .ems-chat-modal-box, .ems-reject-box, .ems-status-filter-form, .ems-document-filters):is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"]):focus,
.ems-chat-input:focus {
    border-color: var(--ems-brand);
    outline: none;
    box-shadow: var(--ems-ring);
}

:is(.ems-form-group, .ems-login-form, .ems-calendar-holiday-form-group, .ems-chat-modal-box):is(input, select, textarea):disabled,
:is(.ems-form-group, .ems-login-form) input[readonly] {
    background-color: var(--ems-surface-3);
    color: var(--ems-text-3);
    box-shadow: none;
    cursor: not-allowed;
}

:is(.ems-form-group, .ems-login-form) input:user-invalid {
    border-color: var(--ems-bad);
}

:is(.ems-form-group) input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    cursor: pointer;
}

/* checkboxes & radios */
:is(.ems-form-group, .ems-calendar-holiday-form-group, .ems-chat-modal-box) input[type="checkbox"],
:is(.ems-form-group, .ems-calendar-holiday-form-group, .ems-chat-modal-box) input[type="radio"],
.ems-chat-employee-option input,
.ems-chat-edit-member input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ems-brand);
    cursor: pointer;
}

.ems-calendar-holiday-form-group input,
.ems-calendar-holiday-form-group select,
.ems-calendar-holiday-form-group textarea
{
    padding: 8px;
    border-radius: 6px;
    border: 1px solid black;
}



.ems-form-group label:has(> input[type="checkbox"]),
.ems-calendar-holiday-form-group label:has(> input[type="checkbox"]),
.ems-calendar-holiday-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 500;
    cursor: pointer;
}

/* file inputs */
.ems-form-group input[type="file"],
.ems-document-card input[type="file"],
.ems-profile-picture-upload input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface-2);
    color: var(--ems-text-3);
    font: 400 13px/1.4 var(--ems-font);
}

.ems-form-group input[type="file"]::file-selector-button,
.ems-document-card input[type="file"]::file-selector-button,
.ems-profile-picture-upload input[type="file"]::file-selector-button {
    height: 28px;
    margin-right: 12px;
    padding: 0 12px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-xs);
    background: var(--ems-surface);
    color: var(--ems-text);
    font: 600 13px/1 var(--ems-font);
    cursor: pointer;
}

.ems-form-actions,
.ems-form-actions-btn,
.ems-document-filter-actions,
.ems-leave-actions,
.ems-submit-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ems-form-actions {
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-submit-wrapper {
    justify-content: flex-end;
    margin-top: 20px;
}

.ems-form-actions-btn {
    align-self: flex-end;
}

/* ================ template form css ================ */

/* Individual form row */
.ems-template-form .ems-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Labels */
.ems-template-form .ems-form-row > label {
    display: block;
    color: var(--ems-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Inputs and select */
.ems-template-form input[type="text"],
.ems-template-form input[type="file"],
.ems-template-form select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background-color: var(--ems-surface);
    color: var(--ems-text);
    box-shadow: var(--ems-shadow-xs);
    font: 400 14px/1.4 var(--ems-font);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}

/* Select arrow */
.ems-template-form select {
    padding-right: 36px;
    background-image: var(--ems-i-chevron-down);
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* File input */
.ems-template-form input[type="file"] {
    padding: 7px 10px;
    cursor: pointer;
}

/* Placeholder */
.ems-template-form input::placeholder {
    color: var(--ems-text-4);
}

/* Hover */
.ems-template-form input[type="text"]:hover,
.ems-template-form input[type="file"]:hover,
.ems-template-form select:hover {
    border-color: #b8bfcb;
}

/* Focus */
.ems-template-form input[type="text"]:focus,
.ems-template-form input[type="file"]:focus,
.ems-template-form select:focus {
    border-color: var(--ems-brand);
    outline: none;
    box-shadow: var(--ems-ring);
}

/* Help text */
.ems-template-form .ems-form-row small {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
    line-height: 1.4;
}

/* Selected file */
#ems-template-file-row {
    grid-column: 1 / -1;
}

#ems-template-file-name {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--ems-line-soft);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface-3);
    color: var(--ems-text-2);
    font-size: 13px;
    box-sizing: border-box;
}

/* Custom document type */
#ems-custom-document-type-row {
    grid-column: 1 / -1;
}

/* Message */
.ems-letter-template-message {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: var(--ems-r-sm);
    font-size: 13px;
    line-height: 1.4;
}

/* Form actions */
.ems-template-form .ems-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* Buttons */
.ems-template-form .ems-primary-button,
.ems-template-form .ems-secondary-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--ems-r-sm);
    font: 600 13px/1 var(--ems-font);
    cursor: pointer;
    transition: all 0.12s ease;
}

/* Primary button */
.ems-template-form .ems-primary-button {
    border: 1px solid var(--ems-brand);
    background: var(--ems-brand);
    color: #fff;
}

/* Secondary button */
.ems-template-form .ems-secondary-button {
    border: 1px solid var(--ems-line-strong);
    background: var(--ems-surface);
    color: var(--ems-text);
}

/* Button hover */
.ems-template-form .ems-primary-button:hover {
    filter: brightness(0.95);
}

.ems-template-form .ems-secondary-button:hover {
    background: var(--ems-surface-3);
}

/* Responsive */
@media (max-width: 768px) {

    .ems-profile-info {
        display: none;
    }

    .ems-profile-head-heading {
        display:none;
    }

    .ems-template-form .ems-form-grid {
        grid-template-columns: 1fr;
    }

    #ems-template-file-row,
    #ems-custom-document-type-row,
    .ems-letter-template-message,
    .ems-template-form .ems-form-actions {
        grid-column: 1;
    }

    .ems-template-form .ems-form-actions {
        justify-content: stretch;
    }

    .ems-template-form .ems-primary-button,
    .ems-template-form .ems-secondary-button {
        flex: 1;
    }
}


/* ==========================================================================
   8. TABLES, BADGES, EMPTY STATES, PAGINATION
   ========================================================================== */

.ems-table-wrapper,
.ems-document-table-wrapper,
.ems-leave-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-xs);
    box-shadow: var(--ems-shadow-xs);
}

.ems-glass-card .ems-table-wrapper,
.ems-glass-card .ems-document-table-wrapper,
.ems-glass-card .ems-leave-table-wrapper {
    box-shadow: none;
}

.ems-employee-table,
.ems-data-table,
.ems-leave-table,
.ems-document-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ems-text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ems-employee-table {
    min-width: 880px;
}

.ems-data-table {
    min-width: 860px;
}

.ems-leave-table {
    min-width: 860px;
}

.ems-employee-document-table {
    min-width: 1000px;
}

.ems-employee-table th,
.ems-data-table th,
.ems-leave-table th,
.ems-document-table th {
    padding: 10px 16px;
    background: var(--ems-surface-2);
    border-bottom: 1px solid var(--ems-line);
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
}

.ems-employee-table td,
.ems-data-table td,
.ems-leave-table td,
.ems-document-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ems-line-soft);
    vertical-align: middle;
    line-height: 1.4;
}

.ems-employee-table tbody tr:last-child td,
.ems-data-table tbody tr:last-child td,
.ems-leave-table tbody tr:last-child td,
.ems-document-table tbody tr:last-child td {
    border-bottom: 0;
}

.ems-employee-table tbody tr,
.ems-data-table tbody tr,
.ems-leave-table tbody tr {
    transition: background-color 0.1s ease;
}

.ems-employee-table tbody tr:hover td,
.ems-data-table tbody tr:hover td,
.ems-leave-table tbody tr:hover td {
    background: var(--ems-surface-2);
}

.ems-data-table td,
.ems-data-table th {
    white-space: nowrap;
}

.ems-data-table td p,
.ems-leave-table td p,
.ems-employee-table td p {
    font-weight: 600;
}

.ems-data-table td small,
.ems-leave-table td small,
.ems-employee-table td small,
.ems-table-secondary {
    display: block;
    margin-top: 1px;
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 400;
}

.ems-data-table td a {
    font-weight: 600;
}

.ems-leave-table td {
    white-space: normal;
}

/* name cell: avatar + name/meta */
.ems-employee-name,
.ems-table-employee {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ems-employee-name strong,
.ems-table-employee strong {
    display: block;
    font-weight: 600;
}

.ems-employee-name span,
.ems-table-employee span {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-policy-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ems-policy-actions form {
    display: inline-flex;
    margin: 0;
}

.ems-leave-actions form {
    margin: 0;
}

/* ---- Status pills ---------------------------------------------------------- */

.ems-status-badge,
.ems-employee-status,
.ems-leave-status,
.ems-document-status,
.ems-data-table .ems-status,
.ems-calendar-tooltip-status,
.ems-profile-status,
.ems-leave-year,
.ems-leave-code,
.ems-notification-type,
.ems-offer-template-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--ems-neutral-line);
    border-radius: 999px;
    background: var(--ems-neutral-bg);
    color: var(--ems-neutral);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

.ems-status-badge,
.ems-employee-status,
.ems-leave-status,
.ems-document-status,
.ems-data-table .ems-status,
.ems-calendar-tooltip-status,
.ems-profile-status {
    width: fit-content;
}

.ems-status-badge::before,
.ems-employee-status::before,
.ems-leave-status::before,
.ems-document-status::before,
.ems-data-table .ems-status::before,
.ems-calendar-tooltip-status::before,
.ems-profile-status::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ems-leave-status strong {
    font-weight: inherit;
}

/* default badge (company status etc.) takes the tenant tint */
.ems-status-badge {
    border-color: var(--ems-brand-medium);
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

.ems-leave-year,
.ems-leave-code,
.ems-notification-type,
.ems-offer-template-badge {
    height: 22px;
    border-color: var(--ems-line);
}

/* positive */
:is(.ems-status-badge, .ems-employee-status, .ems-leave-status, .ems-document-status, .ems-data-table .ems-status, .ems-calendar-tooltip-status, .ems-profile-status):is(.ems-status-active, .ems-status-approved, .ems-status-verified, .ems-status-success, .ems-document-status-verified,
    .active, .approved, .verified, .success) {
    border-color: var(--ems-ok-line);
    background: var(--ems-ok-bg);
    color: var(--ems-ok);
}

/* attention */
:is(.ems-status-badge, .ems-employee-status, .ems-leave-status, .ems-document-status, .ems-data-table .ems-status, .ems-calendar-tooltip-status):is(.ems-status-pending, .ems-status-on_leave, .ems-status-on-leave, .ems-document-status-pending,
    .pending, .on_leave) {
    border-color: var(--ems-warn-line);
    background: var(--ems-warn-bg);
    color: var(--ems-warn);
}

/* negative */
:is(.ems-status-badge, .ems-employee-status, .ems-leave-status, .ems-document-status, .ems-data-table .ems-status, .ems-calendar-tooltip-status):is(.ems-status-rejected, .ems-status-terminated, .ems-status-failed, .ems-document-status-rejected,
    .rejected, .terminated, .error) {
    border-color: var(--ems-bad-line);
    background: var(--ems-bad-bg);
    color: var(--ems-bad);
}

/* muted */
:is(.ems-status-badge, .ems-employee-status, .ems-leave-status, .ems-document-status, .ems-data-table .ems-status, .ems-calendar-tooltip-status):is(.ems-status-inactive, .ems-status-cancelled, .ems-status-resigned, .ems-status-suspended,
    .inactive, .cancelled, .resigned) {
    border-color: var(--ems-neutral-line);
    background: var(--ems-neutral-bg);
    color: var(--ems-neutral);
}

.ems-calendar-tooltip-status.holiday {
    border-color: var(--ems-info-line);
    background: var(--ems-info-bg);
    color: var(--ems-info);
}

.ems-rejection-reason {
    max-width: 260px;
    margin-top: 6px;
    color: var(--ems-bad);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

/* ---- Empty states ---------------------------------------------------------- */

.ems-empty-state,
.ems-leave-empty,
.ems-notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 24px;
    text-align: center;
}

td.ems-empty-state {
    display: table-cell;
    padding: 44px 24px;
}

.ems-empty-state>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ems-empty-state h2,
.ems-empty-state h3,
.ems-notification-empty h2,
.ems-notification-empty h3 {
    font-size: 16px;
}

.ems-empty-state p,
.ems-leave-empty,
.ems-notification-empty p,
td.ems-empty-state span {
    max-width: 46ch;
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-empty-state .ems-primary-button {
    margin-top: 10px;
}

.ems-empty-icon,
.ems-notification-empty-icon,
.ems-chat-welcome-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: var(--ems-r-lg);
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

.ems-empty-icon::before,
.ems-chat-welcome-icon::before {
    width: 1.375rem;
    height: 1.375rem;
}

.ems-notification-empty-icon svg {
    width: 22px;
    height: 22px;
}

.ems-leave-empty {
    padding: 28px 16px;
}

.ems-employee-table-card {
    min-width: 0;
}

.ems-employee-table-card>.ems-empty-state {
    background: var(--ems-surface);
    border: 1px dashed var(--ems-line-strong);
    border-radius: var(--ems-r-lg);
}

/* ---- Pagination ------------------------------------------------------------ */

.ems-leave-pagination,
.ems-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.ems-pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ems-line-strong);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    color: var(--ems-text-2);
    box-shadow: var(--ems-shadow-xs);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

a.ems-pagination-button:hover {
    background: var(--ems-surface-3);
    color: var(--ems-text);
    text-decoration: none;
}

.ems-pagination-button.active {
    border-color: var(--ems-brand);
    background: var(--ems-brand);
    color: var(--ems-on-brand);
}

.ems-pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--ems-text-3);
    font-weight: 600;
}

.ems-pagination-info,
.ems-documents-footer {
    margin-top: 12px;
    color: var(--ems-text-3);
    font-size: 13px;
    text-align: center;
}

.ems-documents-footer {
    padding: 14px 4px 0;
    text-align: right;
}

/* ---- Alerts ---------------------------------------------------------------- */

.ems-success-message,
.ems-document-success-message,
.ems-offer-success-message,
.ems-login-success,
.ems-leave-message,
.ems-login-error,
.ems-offer-error-message,
.ems-calendar-error {
    padding: 12px 16px;
    border: 1px solid var(--ems-ok-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-ok-bg);
    color: var(--ems-ok);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.ems-success-message::before,
.ems-document-success-message::before,
.ems-offer-success-message::before,
.ems-login-success::before,
.ems-leave-message::before,
.ems-login-error::before,
.ems-offer-error-message::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 8px -3px 0;
    background-color: currentColor;
    -webkit-mask: var(--ems-i-check-circle) center / contain no-repeat;
    mask: var(--ems-i-check-circle) center / contain no-repeat;
}

.ems-login-error,
.ems-offer-error-message,
.ems-leave-message.error,
.ems-calendar-error {
    border-color: var(--ems-bad-line);
    background: var(--ems-bad-bg);
    color: var(--ems-bad);
}

.ems-login-error::before,
.ems-offer-error-message::before,
.ems-leave-message.error::before {
    -webkit-mask-image: var(--ems-i-alert-circle);
    mask-image: var(--ems-i-alert-circle);
}

.ems-success-message,
.ems-document-success-message {
    margin-bottom: 0;
}

/* ---- Progress -------------------------------------------------------------- */

.ems-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ems-surface-3);
}

.ems-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--ems-brand);
    transition: width 0.4s ease;
}

/* ==========================================================================
   9. AUTH PAGES  (login · forgot password · reset / activate)
   ========================================================================== */

.ems-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    background: var(--ems-canvas);
}

.ems-login-card {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-xl);
    box-shadow: var(--ems-shadow-xs), 0 16px 40px -16px rgba(16, 24, 40, 0.16);
}

.ems-login-card h1 {
    margin-bottom: 6px;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.ems-login-card>p {
    margin-bottom: 24px;
    color: var(--ems-text-3);
    font-size: 14px;
}

.ems-login-success,
.ems-login-error {
    margin-bottom: 18px;
}

.ems-login-success a {
    font-weight: 600;
    text-decoration: underline;
}

.ems-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ems-login-form>div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ems-login-form>p {
    margin-top: -6px;
    font-size: 13px;
    text-align: right;
}

.ems-login-form>p a {
    font-weight: 600;
}

.ems-login-form>p:last-child {
    margin: 0;
    text-align: center;
}

.ems-login-form>.ems-login-button {
    margin-top: 4px;
}


/* ==========================================================================
   10. DASHBOARD WIDGETS
   ========================================================================== */

/* profile summary tile */
.ems-profile-dash,
.ems-glass-card:has(> .ems-profile-photo) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.ems-profile-photo {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 3px solid var(--ems-surface);
    border-radius: 50%;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    box-shadow: 0 0 0 1px var(--ems-line);
    font-size: 30px;
    font-weight: 600;
}

.ems-profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-profile-btn {
    display: flex;
    justify-content: center;
}

.ems-company-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ems-company-card>.ems-company-details {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ems-line-soft);
}

/* month widget */
.ems-calendar-card {
    display: flex;
    flex-direction: column;
}

.ems-calendar-title-row {
    margin-bottom: 12px;
}

.ems-calendar-title-row h3 {
    font-size: 16px;
}

.ems-calendar-controls {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ems-calendar-month {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.ems-calendar-arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    color: var(--ems-text-2);
    font: 500 18px/1 var(--ems-font);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ems-calendar-arrow:hover {
    background: var(--ems-surface-3);
}

.ems-calendar-weekdays,
.ems-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ems-calendar-weekdays span {
    display: grid;
    place-items: center;
    height: 26px;
    color: var(--ems-text-3);
    font-size: 11px;
    font-weight: 600;
}

.ems-calendar-days {
    flex: 1 1 auto;
    grid-auto-rows: minmax(32px, 1fr);
    gap: 2px 0;
}

.ems-calendar-days span {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 32px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ems-calendar-days span::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 32px;
    height: 32px;
    margin: auto;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.12s ease;
}

.ems-calendar-days span:not(.ems-calendar-current-day):not(.ems-calendar-other-month):hover::before {
    background: var(--ems-surface-3);
}

.ems-calendar-days .ems-calendar-current-day {
    color: var(--ems-on-brand);
    font-weight: 600;
}

.ems-calendar-days .ems-calendar-current-day::before {
    background: var(--ems-brand);
}

.ems-calendar-days .ems-calendar-other-month {
    color: var(--ems-text-4);
    pointer-events: none;
}

/* the templates use <br> as spacers inside these cards; in a flex column they
   only add dead space */
.ems-leave-content>br,
.emp-cnt-card>br,
.ems-stat-card>br,
.ems-action-card>br {
    display: none;
}

/* ---- Dashboard layout (desktop) ---------------------------------------------
   The calendar is the tallest card, so it spans TWO grid rows on the right and
   the cards beside it stack two-high. Every row is then sized by real content
   instead of by the calendar, so no card is left with dead space.
   Cards that would sit alone on a row take the full width instead.            */
@media (min-width: 1101px) {

    .ems-dashboard-grid>.ems-calendar-card {
        grid-column: 4 / 6;
        grid-row: span 2;
    }

    /* HR dashboard: "Your profile" closes the grid as a full-width strip */
    .ems-dashboard-grid>.ems-profile-card-2 {
        grid-column: 1 / -1;
    }

    /* Employee dashboard: the final quick-action becomes a full-width banner */
    .ems-dashboard-grid>.ems-action-card:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px 24px;
    }

    .ems-dashboard-grid>.ems-action-card:last-child> :not(.ems-primary-button) {
        grid-column: 1;
    }

    .ems-dashboard-grid>.ems-action-card:last-child>.ems-primary-button {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        margin-top: 0;
    }
}

/* ---- Dashboard layout (tablet) ------------------------------------------------
   The grid is two columns wide here. Single-column cards (profile photo, KPI
   tiles) would leave a half-empty row, so they become compact full-width rows. */
@media (min-width: 769px) and (max-width: 1100px) {

    .ems-dashboard-grid>.ems-profile-dash,
    .ems-dashboard-grid>.ems-glass-card:has(> .ems-profile-photo),
    .ems-dashboard-grid>.ems-stat-card,
    .ems-dashboard-grid>.emp-cnt-card {
        grid-column: 1 / -1;
    }

    .ems-dashboard-grid>.ems-profile-dash,
    .ems-dashboard-grid>.ems-glass-card:has(> .ems-profile-photo) {
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        text-align: left;
    }

    .ems-dashboard-grid>.ems-glass-card:has(> .ems-profile-photo)>.ems-primary-button-pf {
        margin: 0;
    }

    .ems-dashboard-grid>.ems-profile-dash .ems-profile-photo,
    .ems-dashboard-grid>.ems-glass-card:has(> .ems-profile-photo) .ems-profile-photo {
        width: 72px;
        height: 72px;
        font-size: 26px;
    }

    .ems-dashboard-grid>.ems-stat-card,
    .ems-dashboard-grid>.emp-cnt-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
    }

    .ems-dashboard-grid>.ems-stat-card> :not(.ems-stat-icon),
    .ems-dashboard-grid>.emp-cnt-card> :not(.emp-cnt-icon) {
        grid-column: 2;
    }

    .ems-dashboard-grid>.ems-stat-card>.ems-stat-icon,
    .ems-dashboard-grid>.emp-cnt-card>.emp-cnt-icon {
        grid-row: 1 / span 3;
        width: 44px;
        height: 44px;
        margin: 0;
    }
}


/* ==========================================================================
   11. EMPLOYEES & DOCUMENTS
   ========================================================================== */

.ems-employee-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font-size: 13px;
    font-weight: 600;
}

.ems-employee-table td strong {
    font-weight: 600;
}

.ems-employee-table td a {
    font-weight: 600;
}

/* HR documents: one card that owns filters + table + footer */
.ems-documents-page {
    padding: 0;
    overflow: hidden;
}

.ems-document-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ems-line);
}

.ems-document-filters .ems-form-group {
    flex: 0 1 200px;
    min-width: 160px;
}

.ems-document-filters .docx-search {
    flex: 1 1 260px;
}

.ems-document-filters input,
.ems-document-filters select {
    height: 36px;
}

.ems-documents-page .ems-document-table-wrapper {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ems-documents-page .ems-documents-footer {
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--ems-line);
}

.ems-employee-document-table td {
    vertical-align: top;
}

.ems-document-employee {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ems-document-employee>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ems-document-employee strong {
    font-weight: 600;
}

.ems-document-employee span,
.ems-employee-detail-list span {
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-employee-detail-list,
.ems-employee-documents {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ems-employee-detail-list>div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ems-employee-detail-list strong {
    font-weight: 500;
    font-size: 13px;
}

.ems-employee-documents {
    gap: 8px;
}

.ems-employee-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface-2);
}

.ems-employee-document-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ems-employee-document-info strong {
    font-size: 13px;
    font-weight: 600;
}

.ems-employee-document-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.ems-employee-document-actions form {
    display: inline-flex;
    margin: 0;
}

.ems-no-document {
    display: inline-flex;
    color: var(--ems-text-4);
    font-size: 13px;
}


/* ==========================================================================
   12. LEAVE MANAGEMENT (HR)
   ========================================================================== */

/* hub */
.ems-leave-management-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ems-leave-management-grid .ems-glass-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 168px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ems-leave-management-grid .ems-glass-card:hover {
    border-color: var(--ems-line-strong);
    box-shadow: var(--ems-shadow-sm);
}

.ems-leave-management-grid .ems-glass-card h3 {
    font-size: 16px;
}

.ems-leave-management-grid .ems-glass-card p {
    max-width: 38ch;
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-leave-management-grid .ems-primary-button {
    margin-top: auto;
    border-color: var(--ems-line-strong);
    background: var(--ems-surface);
    color: var(--ems-brand-ink);
    box-shadow: var(--ems-shadow-xs);
}

.ems-leave-management-grid .ems-primary-button:hover {
    border-color: var(--ems-brand);
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

/* summary tiles above tables */
.ems-leave-summary-grid,
.ems-holiday-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

.ems-leave-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ems-holiday-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ems-leave-summary-grid .ems-glass-card,
.ems-holiday-grid .ems-glass-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
}

.ems-leave-summary-grid .ems-glass-card :is(h2, h3, strong),
.ems-holiday-grid .ems-glass-card :is(h2, h3, strong) {
    margin-top: 2px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ems-leave-summary-grid .ems-glass-card p,
.ems-holiday-grid .ems-glass-card p,
.ems-leave-summary-grid .ems-glass-card>span:last-child,
.ems-holiday-grid .ems-glass-card>span:last-child {
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-leave-summary-grid .ems-glass-card>.ems-card-label,
.ems-holiday-grid .ems-glass-card>.ems-card-label {
    font-size: 12px;
}

/* policy / type list header */
.ems-leave-policy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ems-leave-policy-title {
    display: grid;
    gap: 2px;
}

.ems-leave-policy-title h2 {
    font-size: 16px;
}

.ems-leave-policy-title p {
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-leave-policy-form-card,
.ems-leave-type-form-card {
    width: 100%;
}

.ems-leave-policy-form-card .ems-card-heading,
.ems-leave-type-form-card .ems-card-heading {
    display: block;
    margin-bottom: 20px;
}

.ems-leave-policy-form-card .ems-card-heading h2,
.ems-leave-type-form-card .ems-card-heading h2 {
    margin-bottom: 2px;
}

/* balances filter: [year] ............ [search] [year select] [Apply] [Reset] */
.ems-leave-balance-page .ems-glass-card>.ems-card-heading {
    flex-wrap: wrap;
    margin: 0;
}

.ems-leave-balance-page .ems-card-heading>p {
    margin: 0 auto 0 0;
    color: var(--ems-text-2);
    font-size: 14px;
    font-weight: 500;
}

.ems-leave-balance-page .ems-card-heading>.ems-card-label {
    display: none;
}

.ems-leave-balance-page form.ems-form-grid {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

.ems-leave-balance-page form.ems-form-grid .ems-form-group {
    flex: 0 1 260px;
    min-width: 170px;
}

.ems-leave-balance-page .ems-form-actions-btn,
.ems-form-actions-btn[style] {
    height: auto !important;
}

/* approval: reject reason panel & status filter */
.ems-reject-box {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface-2);
    white-space: normal;
}

.ems-reject-box textarea {
    min-height: 72px;
    margin-bottom: 10px;
}

.ems-status-filter-form {
    flex: none;
}

.ems-status-filter-form select {
    height: 34px;
    min-width: 140px;
    border-radius: 8px;
    padding: 2px;
}

.ems-edit-holiday-box {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface-2);
    white-space: normal;
}

.ems-leave-actions {
    flex-wrap: nowrap;
}

/* ==========================================================================
   13. PROFILE  (view + edit)
   ========================================================================== */

.ems-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "pic info action"
        "meta meta meta";
    align-items: center;
    gap: 20px 24px;
}

.ems-profile-hero-picture {
    display: grid;
    grid-area: pic;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border: 3px solid var(--ems-surface);
    border-radius: 50%;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    box-shadow: 0 0 0 1px var(--ems-line);
    font-size: 34px;
    font-weight: 600;
}

.ems-profile-hero-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-profile-hero-info {
    grid-area: info;
    min-width: 0;
}

.ems-profile-hero-info h2 {
    margin: 2px 0 4px;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.ems-profile-designation {
    color: var(--ems-text);
    font-weight: 500;
}

.ems-profile-department {
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-profile-hero>.ems-primary-button {
    grid-area: action;
    align-self: start;
}

.ems-profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    grid-area: meta;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-profile-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ems-profile-meta-item span {
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-profile-meta-item strong {
    font-size: 14px;
    font-weight: 600;
}

.ems-profile-meta-item .ems-profile-status {
    font-size: 12px;
}

/* read-only detail sections */
.ems-profile-display-section>.ems-card-heading:not(:first-child),
.ems-profile-display-section>.ems-address-columns+.ems-card-heading {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-profile-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

.ems-profile-detail span {
    display: block;
    margin-bottom: 2px;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-profile-detail strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ems-address-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ems-address-block {
    padding: 16px 18px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface-2);
}

.ems-address-block h3 {
    margin-bottom: 6px;
    font-size: 13px;
}

.ems-address-block p {
    color: var(--ems-text-2);
    font-size: 14px;
    line-height: 1.55;
}

.ems-address-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ems-address-meta span {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ems-surface-3);
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-document-display-grid,
.ems-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ems-document-display-card,
.ems-document-card {
    padding: 14px 16px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface);
}

.ems-document-display-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ems-document-display-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ems-document-display-card strong {
    font-size: 14px;
}

.ems-document-display-card span {
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-document-display-card a {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ems-profile-completion-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 20px;
}

.ems-profile-completion-display .ems-progress {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.ems-completion-display-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ems-completion-display-value span {
    color: var(--ems-text-3);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

/* edit form */
.ems-profile-edit .ems-glass-card+.ems-glass-card,
.ems-employee-profile-form>.ems-glass-card+.ems-glass-card {
    margin-top: 20px;
}

.ems-profile-edit h3 {
    margin: 26px 0 14px;
    font-size: 14px;
}

.ems-profile-section {
    margin: 0;
}

.ems-profile-next-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

/* =========================================
   PROFILE SECTION ACCORDION
========================================= */

.ems-profile-display-section .ems-card-heading,
.ems-profile-section .ems-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.ems-section-toggle {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ems-brand, #0F766E);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ems-section-toggle:hover {
    background: var(--ems-brand-soft, rgba(15, 118, 110, 0.08));
    border-color: var(--ems-brand-medium, rgba(15, 118, 110, 0.22));
}

.ems-profile-display-section.is-collapsed > *:not(.ems-card-heading),
.ems-profile-section.is-collapsed > *:not(.ems-card-heading) {
    display: none;
}

.ems-profile-display-section.is-collapsed .ems-card-heading,
.ems-profile-section.is-collapsed .ems-card-heading {
    margin-bottom: 0;
}

.ems-document-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ems-surface-2);
}

.ems-document-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ems-document-card-title strong {
    font-size: 14px;
}

.ems-document-card-title span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ems-warn-bg);
    color: var(--ems-warn);
    font-size: 11px;
    font-weight: 600;
}

.ems-existing-document {
    padding: 8px 10px;
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    font-size: 13px;
}

.ems-existing-document span {
    color: var(--ems-text-3);
}

.ems-profile-picture-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface-2);
}

.ems-profile-upload-preview {
    display: grid;
    flex: none;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font-weight: 600;
}

.ems-profile-upload-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-profile-picture-upload>div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}


/* ==========================================================================
   14. EMPLOYEE LEAVE
   ========================================================================== */

.ems-employee-leave-page>.ems-leave-section+.ems-leave-section,
.ems-employee-leave-page>.ems-glass-card+.ems-leave-section {
    margin-top: 0;
}

.ems-leave-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ems-leave-section-title h2,
.ems-leave-section-title h3 {
    font-size: 16px;
}

.ems-leave-section:not(.ems-glass-card) {
    display: block;
}

.ems-leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ems-leave-balance-card {
    padding: 16px 18px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-lg);
    background: var(--ems-surface);
}

.ems-leave-balance-card h3 {
    margin-bottom: 10px;
    font-size: 14px;
}

.ems-leave-des-ttl {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ems-leave-code {
    text-transform: uppercase;
}

.ems-balance-number {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ems-balance-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-balance-detail strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ems-balance-detail span {
    display: block;
    color: var(--ems-text-3);
    font-size: 11px;
}

.ems-leave-apply-card {
    padding-top: 4px;
}

.ems-leave-message {
    margin-bottom: 0;
}

.ems-leave-section>.ems-leave-table-wrapper,
.ems-leave-section-title+.ems-leave-table-wrapper {
    margin-top: 0;
}

.ems-leave-section:not(.ems-glass-card)>.ems-leave-section-title {
    margin-bottom: 12px;
}

.ems-leave-table td .ems-cancel-button {
    margin-top: 0;
}

.ems-leave-table td form {
    margin: 0;
}


/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

.ems-notifications-page .ems-notification-content {
    max-width: 880px;
}

.ems-notification-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ems-notification-list-header h2 {
    font-size: 16px;
}

.ems-notification-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-lg);
    box-shadow: var(--ems-shadow-xs);
}

.ems-notification-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ems-line-soft);
    transition: background-color 0.12s ease;
}

.ems-notification-card:last-child {
    border-bottom: 0;
}

.ems-notification-card:hover {
    background: var(--ems-surface-2);
}

.ems-notification-unread {
    background: var(--ems-brand-soft);
}

.ems-notification-unread::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--ems-brand);
}

.ems-notification-unread:hover {
    background: var(--ems-brand-light);
}

.ems-notification-card-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ems-r-sm);
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

.ems-notification-card-icon svg {
    width: 18px;
    height: 18px;
}

.ems-notification-card-details {
    flex: 1;
    min-width: 0;
}

.ems-notification-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ems-notification-card-title {
    font-size: 14px;
    font-weight: 600;
}

.ems-notification-unread-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ems-brand);
}

.ems-notification-card-message {
    margin-top: 2px;
    color: var(--ems-text-2);
    font-size: 13px;
    line-height: 1.5;
}

.ems-notification-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-notification-card-meta a {
    display: inline-flex;
}

.ems-notification-card-meta button {
    height: 28px;
}

.ems-notification-empty {
    min-height: 280px;
    justify-content: center;
    background: var(--ems-surface);
    border: 1px dashed var(--ems-line-strong);
    border-radius: var(--ems-r-lg);
}

.ems-notification-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   15. LEAVE CALENDAR  (markup built by hr-leave-calendar.js)
   ========================================================================== */

.ems-leave-calendar-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    width: 100%;
}

.ems-leave-calendar-card {
    min-width: 0;
}

.ems-leave-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ems-leave-calendar-month {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ems-leave-calendar-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ems-leave-calendar-navigation button {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.ems-calendar-role-info {
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--ems-info-line);
    border-radius: var(--ems-r-sm);
    background: var(--ems-info-bg);
    color: var(--ems-info);
    font-size: 13px;
}

.ems-calendar-loading,
.ems-calendar-error {
    display: none;
    margin-bottom: 12px;
}

.ems-calendar-loading {
    padding: 10px 12px;
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-calendar-loading.active,
.ems-calendar-error.active {
    display: block;
}

.ems-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-line);
}

.ems-calendar-day-name {
    padding: 10px 6px;
    background: var(--ems-surface-2);
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.ems-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 104px;
    padding: 6px 6px 8px;
    overflow: hidden;
    background: var(--ems-surface);
}

.ems-calendar-day.empty {
    background: var(--ems-surface-2);
}

.ems-calendar-day.other-month {
    background: var(--ems-surface-2);
    color: var(--ems-text-4);
}

.ems-calendar-date {
    display: inline-grid;
    align-self: flex-start;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border-radius: 999px;
    color: var(--ems-text-2);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ems-calendar-day.today .ems-calendar-date {
    background: var(--ems-brand);
    color: var(--ems-on-brand);
}

.ems-calendar-event {
    display: block;
    width: 100%;
    padding: 3px 6px;
    overflow: hidden;
    border-left: 3px solid var(--ems-neutral-line);
    border-radius: 4px;
    background: var(--ems-neutral-bg);
    color: var(--ems-neutral);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ems-calendar-event:hover {
    filter: brightness(0.97);
}

.ems-calendar-event.approved {
    border-left-color: #12b76a;
    background: var(--ems-ok-bg);
    color: var(--ems-ok);
}

.ems-calendar-event.pending {
    border-left-color: #f79009;
    background: var(--ems-warn-bg);
    color: var(--ems-warn);
}

.ems-calendar-event.rejected {
    border-left-color: #f04438;
    background: var(--ems-bad-bg);
    color: var(--ems-bad);
}

.ems-calendar-event.cancelled {
    border-left-color: #98a2b3;
    background: var(--ems-neutral-bg);
    color: var(--ems-text-3);
    text-decoration: line-through;
}

.ems-calendar-event.company-holiday {
    border-left-color: var(--ems-brand);
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
}

.ems-calendar-event.festival {
    border-left-color: #7a5af8;
    background: var(--ems-violet-bg);
    color: var(--ems-violet);
}

.ems-calendar-event.national {
    border-left-color: #2e90fa;
    background: var(--ems-info-bg);
    color: var(--ems-info);
}

.ems-calendar-event.other-holiday {
    border-left-color: #667085;
    background: var(--ems-surface-3);
    color: var(--ems-text-2);
}

.ems-calendar-event.friday-wfh {
    border-left-color: #06aed4;
    background: var(--ems-cyan-bg);
    color: var(--ems-cyan);
}

/* legend */
.ems-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ems-text-2);
    font-size: 12px;
}

.ems-calendar-legend-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ems-neutral-line);
}

.ems-calendar-legend-dot.holiday {
    background: var(--ems-brand);
}

.ems-calendar-legend-dot.approved {
    background: #12b76a;
}

.ems-calendar-legend-dot.pending {
    background: #f79009;
}

.ems-calendar-legend-dot.rejected {
    background: #f04438;
}

.ems-calendar-legend-dot.friday-wfh {
    background: #06aed4;
}

/* holiday list beside the calendar */
.ems-calendar-holiday-info .ems-card-heading {
    display: block;
}

.ems-calendar-holiday-info .leave-header h2 {
    font-size: 16px;
}

.ems-calendar-holiday-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ems-calendar-holiday-item {
    padding: 10px 12px;
    border: 1px solid var(--ems-line);
    border-left: 3px solid var(--ems-brand);
    border-radius: var(--ems-r-sm);
    background: var(--ems-surface);
}

.ems-calendar-holiday-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.ems-calendar-holiday-item span,
.ems-calendar-holiday-item small {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
}

/* hover card */
.ems-calendar-tooltip {
    position: fixed;
    z-index: 999999;
    display: none;
    width: 280px;
    max-width: calc(100vw - 20px);
    padding: 14px;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-lg);
    pointer-events: none;
}

.ems-calendar-tooltip.active {
    display: block;
}

.ems-calendar-tooltip::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--ems-line);
    border-bottom: 1px solid var(--ems-line);
    background: var(--ems-surface);
    transform: translateX(-50%) rotate(45deg);
}

.ems-calendar-tooltip.tooltip-below::after {
    top: -7px;
    bottom: auto;
    border: 0;
    border-top: 1px solid var(--ems-line);
    border-left: 1px solid var(--ems-line);
}

.ems-calendar-tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ems-calendar-tooltip-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font-size: 13px;
    font-weight: 600;
}

.ems-calendar-tooltip-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-calendar-tooltip-name {
    min-width: 0;
}

.ems-calendar-tooltip-name strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.ems-calendar-tooltip-name span {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-calendar-tooltip-title {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ems-line-soft);
    font-size: 14px;
    font-weight: 600;
}

.ems-calendar-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

.ems-calendar-tooltip-label {
    flex: none;
    width: 64px;
    color: var(--ems-text-3);
}

.ems-calendar-tooltip-value {
    color: var(--ems-text);
    font-weight: 500;
}

/* add-holiday dialog (HR) */
.ems-calendar-holiday-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ems-calendar-holiday-modal.active {
    display: flex;
}

.ems-calendar-holiday-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
}

.ems-calendar-holiday-modal-content {
    position: relative;
    z-index: 2;
    width: min(480px, 100%);
    max-height: calc(100vh - 32px);
    padding: 22px 24px;
    overflow-y: auto;
    border-radius: var(--ems-r-xl);
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-lg);
    animation: emsDialogIn 0.16s ease-out;
}

.ems-calendar-holiday-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ems-calendar-holiday-modal-header h2 {
    font-size: 17px;
}

.ems-calendar-holiday-modal-close,
.ems-chat-modal-close,
.ems-offer-preview-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ems-r-sm);
    background: transparent;
    color: var(--ems-text-3);
    font: 400 22px/1 var(--ems-font);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.ems-calendar-holiday-modal-close:hover,
.ems-chat-modal-close:hover,
.ems-offer-preview-close:hover {
    background: var(--ems-surface-3);
    color: var(--ems-text);
}

.ems-calendar-holiday-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.ems-calendar-holiday-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

@keyframes emsDialogIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   16. CHAT
   ========================================================================== */

.ems-dashboard-content:has(> .ems-chat-page) {
    padding-bottom: 24px;
}

.ems-chat-header {
    margin-bottom: 20px;
}

.ems-chat-search-wrapper {
    position: relative;
    width: min(420px, 45vw);
}

.ems-chat-search {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-sizing: border-box;
}

.ems-chat-search::placeholder {
    color: #9ca3af;
}

.ems-chat-search:focus {
    border-color: var(--ems-brand);
    box-shadow: 0 0 0 3px var(--ems-brand-light);
}

.ems-chat-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.ems-chat-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    display: none;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
    z-index: 1000;
}

.ems-chat-search-results.active {
    display: block;
}

.ems-chat-search-section {
    padding: 9px 10px 6px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ems-chat-search-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ems-chat-search-item:hover {
    background: var(--ems-brand-soft);
}

.ems-chat-search-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand);
    font-size: 12px;
    font-weight: 700;
}

.ems-chat-search-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ems-chat-search-info strong {
    overflow: hidden;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-chat-search-info span {
    overflow: hidden;
    color: #9ca3af;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-chat-search-empty {
    padding: 24px 12px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}

.ems-chat-header>div:first-of-type {
    min-width: 0;
}

.ems-chat-header p {
    color: var(--ems-text-2);
    font-size: 14px;
    font-weight: 500;
}

.ems-chat-header-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.ems-chat-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none !important;
    height: calc(100vh - 112px);
    height: calc(100dvh - 112px);
    min-height: 420px;
}

.ems-chat-container {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background: var(--ems-surface);
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-lg);
    box-shadow: var(--ems-shadow-xs);
}

.ems-chat-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--ems-line);
}

.ems-chat-sidebar-title {
    flex: none;
    padding: 16px 18px 8px;
}

.ems-chat-sidebar-title span {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 600;
    text-transform: lowercase;
}

.ems-chat-sidebar-title span::first-letter {
    text-transform: uppercase;
}

.ems-chat-list {
    flex: 1;
    min-height: 0;
    padding: 4px 8px 8px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ems-chat-empty-list {
    padding: 24px 12px;
    color: var(--ems-text-3);
    font-size: 13px;
    text-align: center;
}

.ems-chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 5px;
    margin: 3px 0px;
    border: var(--ems-brand);
    border-radius: var(--ems-r-md);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ems-chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ems-chat-item:hover {
    background: var(--ems-surface-2);
}

.ems-chat-item.active {
    background: var(--ems-brand-soft);
}

.ems-chat-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.ems-chat-item-info {
    flex: 1;
    min-width: 0;
}

.ems-chat-item-top,
.ems-chat-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.ems-chat-item-name {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ems-chat-item-time {
    flex: none;
    color: var(--ems-text-4);
    font-size: 11px;
}

.ems-chat-item-preview {
    min-width: 0;
    overflow: hidden;
    color: var(--ems-text-3);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ems-chat-unread {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
    font-size: 11px;
    font-weight: 700;
}

/* conversation pane */
.ems-chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ems-surface);
}

#ems-active-chat {
    min-height: 0;
}

.ems-chat-welcome {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.ems-chat-welcome-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 380px;
}

.ems-chat-welcome-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
}

.ems-chat-welcome h2 {
    margin-bottom: 4px;
    font-size: 17px;
}

.ems-chat-welcome p {
    color: var(--ems-text-3);
    font-size: 13px;
}

.ems-chat-main-header {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ems-line);
}

.ems-chat-mobile-back {
    display: none;
}

.ems-chat-main-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.ems-chat-main-title {
    display: flex;
    flex: 1;
    justify-content: space-between;
    min-width: 0;
    align-items: center
}

.ems-chat-main-title strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ems-chat-main-title span {
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-chat-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ems-surface-2);
}

.ems-chat-message {
    display: flex;
    flex: none;
    width: 100%;
}

.ems-chat-message.mine {
    justify-content: flex-end;
}

.ems-chat-message-content {
    max-width: min(70%, 520px);
    padding: 9px 13px;
    border: 1px solid var(--ems-line);
    border-radius: 14px 14px 14px 4px;
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-xs);
}

.ems-chat-message.mine .ems-chat-message-content {
    border-color: var(--ems-brand);
    border-radius: 14px 14px 4px 14px;
    background: var(--ems-brand);
    color: var(--ems-on-brand);
}

.ems-chat-message-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ems-chat-message-time {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    opacity: 0.65;
}

.ems-chat-input-area {
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ems-surface);
    border-top: 1px solid var(--ems-line);
}

.ems-chat-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ems-chat-send {
    flex: none;
    min-width: 76px;
    height: 40px;
}

/* dialogs (new group / edit group / new chat) */
.ems-chat-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.55);
}

.ems-chat-modal.active {
    display: flex;
}

.ems-chat-modal-box {
    width: min(480px, 100%);
    max-height: calc(100vh - 32px);
    padding: 22px 24px;
    overflow-y: auto;
    border-radius: var(--ems-r-xl);
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-lg);
    animation: emsDialogIn 0.16s ease-out;
}

.ems-chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ems-chat-modal-header h2 {
    font-size: 17px;
}

.ems-chat-form-label {
    margin: 14px 0 6px;
}

.ems-chat-employees {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-md);
}

.ems-chat-employee-option,
.ems-chat-edit-member,
.ems-chat-direct-employee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--ems-r-sm);
    cursor: pointer;
}

.ems-chat-employee-option:hover,
.ems-chat-edit-member:hover,
.ems-chat-direct-employee:hover {
    background: var(--ems-surface-2);
}

.ems-chat-direct-employee {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ems-text);
    font: inherit;
    text-align: left;
}

.ems-chat-employee-info {
    min-width: 0;
}

.ems-chat-employee-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.ems-chat-employee-info span {
    display: block;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-chat-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ems-line-soft);
}

.ems-group-members-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: var(--ems-surface);
    color: var(--ems-text-3);
    font-size: 12px;
    font-weight: 600;
}


.ems-chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ems-chat-message-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ems-brand-light);
    color: var(--ems-brand);
    font-size: 11px;
    font-weight: 600;
}

.ems-chat-message-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-chat-message-sender {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ems-brand);
}


/* chat refresh button */
.ems-chat-refresh {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--ems-brand-light);
    color: var(--ems-brand);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.ems-chat-refresh:hover {
    background: var(--ems-brand-medium);
}

.ems-chat-refreshing {
    animation: ems-chat-refresh-spin 0.5s linear;
}

@keyframes ems-chat-refresh-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media(max-width: 1000px) {
    .ems-chat-refresh {
        width: 30px;
        height: 60px;
        border: none;
        border-radius: 50%;
        background: var(--ems-brand-light);
        color: var(--ems-brand);
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   17. OFFER LETTER MODULE
   ========================================================================== */

.ems-offer-letter-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.ems-offer-template-card,
.ems-offer-form-card {
    width: 100%;
}

.ems-offer-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

/* the letter itself is a document, so it keeps a serif face */
.ems-offer-paper {
    width: 100%;
    max-width: 850px;
    min-height: 560px;
    margin: 0 auto;
    padding: 56px 64px;
    border: 1px solid var(--ems-line);
    border-radius: 6px;
    background: #ffffff;
    color: #222222;
    box-shadow: var(--ems-shadow-xs), 0 24px 48px -24px rgba(16, 24, 40, 0.2);
    font-family: Georgia, "Times New Roman", serif;
}

.ems-offer-paper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ems-offer-company {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ems-offer-logo {
    width: 150px;
    max-width: 150px;
    height: auto;
}

.ems-offer-company-placeholder {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ems-brand-light);
    color: var(--ems-brand-ink);
    font: 700 18px/1 var(--ems-font);
}

.ems-offer-company strong {
    display: block;
    font-size: 20px;
}

.ems-offer-company span {
    display: block;
    margin-top: 3px;
    color: #777777;
    font: 400 12px/1.3 var(--ems-font);
}

.ems-offer-paper-divider {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: #dddddd;
}

.ems-offer-paper-date {
    margin-bottom: 30px;
    color: #555555;
    font: 400 14px/1.4 var(--ems-font);
}

.ems-offer-paper-recipient {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.7;
}

.ems-offer-paper-body {
    font-size: 16px;
    line-height: 1.85;
}

.ems-offer-paper-body p {
    margin: 0 0 18px;
}

.ems-offer-paper-body strong {
    color: #111111;
}

.ems-offer-paper-signature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 44px;
    font-size: 15px;
}

.ems-offer-template-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 12px 16px;
    border-radius: var(--ems-r-md);
    background: var(--ems-brand-soft);
    color: var(--ems-text-2);
    font-size: 13px;
}

.ems-offer-actions .ems-primary-button {
    min-width: 150px;
}

.ems-offer-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(16, 24, 40, 0.6);
}

.ems-offer-preview-modal.is-open {
    display: flex;
}

.ems-offer-preview-dialog {
    width: 100%;
    max-width: 950px;
    max-height: 92vh;
    padding: 20px;
    overflow: auto;
    border-radius: var(--ems-r-xl);
    background: var(--ems-surface-3);
    box-shadow: var(--ems-shadow-lg);
    animation: emsDialogIn 0.16s ease-out;
}

.ems-offer-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ems-offer-preview-header strong {
    font-size: 15px;
}

.ems-offer-preview-close {
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-xs);
}


.ems-template-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    cursor: pointer;
}

.ems-template-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ems-template-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: 0.2s ease;
}

.ems-template-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ems-template-toggle input:checked + .ems-template-toggle-slider {
    background: var(--ems-brand);
}

.ems-template-toggle input:checked + .ems-template-toggle-slider::before {
    transform: translateX(22px);
}

.ems-template-toggle input:disabled + .ems-template-toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ====================== Notiication Settings ===================== */
.ems-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ems-notification-title h2 {
    font-size: 16px;
}


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {

    .ems-leave-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* tablet & below: sidebar becomes an off-canvas drawer */
@media (max-width: 1100px) {

    :root,
    .ems-dashboard {
        --ems-pad: 24px;
    }

    .ems-dashboard {
        width: 100%;
    }

    .ems-dashboard-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .ems-sidebar {
        width: 280px;
        max-width: 88vw;
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .ems-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        box-shadow: var(--ems-shadow-lg);
        transition: transform 0.22s ease, visibility 0s;
        z-index: 1300;
    }

    .ems-nav-item.active::before {
        left: -12px;
    }

    .ems-sidebar-close {
        position: absolute;
        top: 12px;
        right: 10px;
        z-index: 10;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: var(--ems-r-sm);
        background: transparent;
        color: var(--ems-text-3);
        font: 400 22px/1 var(--ems-font);
        cursor: pointer;
    }

    .ems-sidebar-close:hover {
        background: var(--ems-surface-3);
        color: var(--ems-text);
    }

    .ems-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: block;
        background: rgba(16, 24, 40, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    body.ems-sidebar-open .ems-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.2s ease, visibility 0s;
    }

    body.ems-sidebar-open {
        overflow: hidden;
    }

    .ems-sidebar-toggle {
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--ems-line);
        border-radius: var(--ems-r-sm);
        background: var(--ems-surface);
        box-shadow: var(--ems-shadow-xs);
        cursor: pointer;
    }

    .ems-sidebar-toggle span {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: var(--ems-text-2);
    }

    .ems-dashboard-header,
    .ems-chat-header {
        justify-content: flex-start;
    }

    .ems-dashboard-header>.ems-header-profile,
    .ems-chat-header>.ems-header-profile,
    .ems-chat-header>.ems-chat-header-actions {
        margin-left: auto;
    }

    .ems-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .ems-company-card,
    .ems-calendar-card,
    .ems-action-card,
    .ems-profile-card,
    .ems-profile-card-2 {
        grid-column: span 2;
    }

    .ems-leave-calendar-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .ems-profile-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-leave-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-holiday-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .ems-form-row,
    .ems-form-grid,
    .ems-leave-form-grid,
    .ems-document-display-grid,
    .ems-document-grid,
    .ems-address-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .ems-form-group.full {
        grid-column: auto;
    }

    .ems-profile-hero {
        grid-template-areas:
            "pic info"
            "action action"
            "meta meta";
    }

    .ems-profile-hero>.ems-primary-button {
        justify-self: stretch;
    }

    .ems-leave-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    :root,
    .ems-dashboard {
        --ems-pad: 16px;
        --ems-header-h: 60px;
    }

    .ems-dashboard-grid,
    .ems-leave-management-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ems-company-card,
    .ems-calendar-card,
    .ems-action-card,
    .ems-profile-card,
    .ems-profile-card-2 {
        grid-column: auto;
    }

    .ems-glass-card {
        padding: 16px;
    }

    .ems-company-details,
    .ems-profile-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-holiday-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ems-profile-info span {
        display: none;
    }

    .ems-header-profile {
        gap: 8px;
    }

    .ems-dashboard-header h1,
    .ems-dashboard-header h2 {
        font-size: 18px;
    }

    .leave-header p {
        display: none;
    }

    .ems-leave-heading-2,
    .ems-card-heading,
    .ems-leave-section-title,
    .ems-leave-policy {
        flex-wrap: wrap;
    }

    .ems-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ems-form-actions>* {
        width: 100%;
    }

    .ems-submit-wrapper .ems-submit-button {
        width: 100%;
    }

    .ems-profile-hero-meta {
        gap: 12px 28px;
    }

    .ems-balance-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-document-filters .ems-form-group,
    .ems-document-filters .docx-search {
        flex: 1 1 100%;
    }

    .ems-notification-card {
        padding: 14px 16px;
    }

    .ems-calendar-day {
        min-height: 74px;
        padding: 4px;
    }

    .ems-calendar-event {
        padding: 1px 4px;
        font-size: 10px;
    }

    .ems-offer-paper {
        padding: 32px 24px;
    }

    .ems-offer-actions {
        flex-direction: column-reverse;
    }

    .ems-offer-actions button {
        width: 100%;
    }

    .ems-calendar-holiday-modal-actions button {
        flex: 1;
    }

    .ems-login-card {
        padding: 24px 20px;
    }

    /* ---- chat becomes list -> conversation ---- */
    .ems-chat-page {
        height: calc(100vh - 92px);
        height: calc(100dvh - 92px);
    }

    .ems-chat-header {
        flex-wrap: wrap;
    }

    .ems-chat-header p {
        display: none;
    }

    .ems-chat-container {
        position: relative;
        display: block;
    }

    .ems-chat-sidebar {
        width: 100%;
        height: 100%;
        border-right: 0;
    }

    .ems-chat-main {
        position: absolute;
        inset: 0;
        z-index: 10;
        transform: translateX(100%);
        transition: transform 0.22s ease;
    }

    .ems-chat-container.ems-mobile-chat-open .ems-chat-main {
        transform: translateX(0);
    }

    .ems-chat-mobile-back {
        display: grid;
        flex: none;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: var(--ems-text-2);
        cursor: pointer;
    }

    .ems-chat-mobile-back a {
        color: inherit;
    }

    .ems-chat-message-content {
        max-width: 85%;
    }

    .ems-chat-messages {
        padding: 16px;
    }

    .ems-chat-modal-box {
        padding: 18px;
    }
}

@media (max-width: 480px) {

    .ems-leave-summary-grid,
    .ems-company-details,
    .ems-profile-details,
    .ems-profile-details-grid {
        grid-template-columns: minmax(2, 1fr);
    }

    .ems-notification-card-icon {
        display: none;
    }

    .ems-chat-header-actions {
        width: 100%;
    }

    .ems-chat-header-actions>* {
        flex: 1;
    }
}

@media print {

    .ems-sidebar,
    .ems-sidebar-toggle,
    .ems-header-profile {
        display: none !important;
    }

    .ems-dashboard-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 768px) {

    .ems-chat-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .ems-chat-search {
        height: 40px;
    }

}

@media (max-width: 520px) {

    .ems-chat-search-wrapper {
        width: 100%;
    }

}

.ems-people-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 284px;
    gap: 18px;
    align-items: start;
}

.ems-people-main {
    min-width: 0;
}

.ems-people-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.ems-people-eyebrow,
.ems-directory-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--ems-brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ems-people-total span {
    color: #52727b;
    font-size: 11px;
    line-height: 1.2;
}

.ems-people-total strong {
    margin-top: 3px;
    color: #12333c;
    font-size: 18px;
    font-weight: 700;
}

.ems-people-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ems-employee-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e4ebea;
    border-radius: var(--ems-r-xs);
    background: #fff;
    box-shadow: 0 5px 18px rgba(22, 47, 52, .045);
    scroll-margin-top: 28px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.ems-employee-card:hover {
    border-color: rgba(15, 118, 110, .22);
    box-shadow: 0 10px 26px rgba(22, 47, 52, .08);
    transform: translateY(-2px);
}

.ems-employee-card.is-focused {
    border-color: var(--ems-brand);
    box-shadow:
        0 0 0 3px var(--ems-brand-light),
        0 12px 28px rgba(22, 47, 52, .09);
}

.profile-workspace {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
    flex-direction: column;
}

.ems-employee-card-menu {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #24464e;
}

.ems-employee-card-body {
    position: relative;
    padding: 0 18px 16px;
}

.ems-employee-card-avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ems-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 3px 12px rgba(20, 50, 55, .10);
}

.ems-employee-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-employee-card-identity h2 {
    margin: 0;
    color: #12333c;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
}

.ems-employee-card-email {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: #527683;
    font-size: 12px;
    text-decoration: none;
}

.ems-employee-card-email svg {
    flex: 0 0 auto;
}

.ems-employee-card-email span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-employee-card-divider {
    height: 1px;
    background: #edf0ef;
}

.ems-employee-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0px;
}

.ems-employee-detail-row {
    display: grid;
    grid-template-columns: 18px minmax(70px, 1fr) minmax(80px, 1fr);
    align-items: center;
    gap: 7px;
}

.ems-employee-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #527b84;
    font-size: 13px;
    font-weight: 600;
}

.ems-employee-detail-label {
    color: #62808a;
    font-size: 11px;
    line-height: 1.3;
}

.ems-employee-detail-row strong {
    min-width: 0;
    overflow: hidden;
    color: #173c46;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-people-directory {
    position: sticky;
    top: 20px;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e4e9e8;
    border-radius: var(--ems-r-xs);
    background: #fff;
    box-shadow: 0 5px 18px rgba(22, 47, 52, .045);
}

.ems-directory-header {
    padding: 20px 20px 15px;
}

.ems-directory-header h2 {
    margin: 0;
    color: #12333c;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 23px;
    font-weight: 700;
}

.ems-directory-header p {
    margin: 4px 0 0;
    color: #67808a;
    font-size: 12px;
}

.ems-directory-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #dcdfe3;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 4px;
}

.ems-directory-search i {
    flex-shrink: 0;
    font-size: 15px;
    color: #6b7280;
}


.ems-directory-search input::placeholder {
    color: #9ca3af;
}

.ems-directory-search:focus-within {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}
.ems-directory-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 0 12px 12px;
}

.ems-directory-list::-webkit-scrollbar {
    width: 5px;
}

.ems-directory-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccd9d6;
}

.ems-directory-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    width: 100%;
    min-height: 68px;
    gap: 11px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-bottom-color: #edf0ef;
    border-radius: 10px;
    outline: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.ems-directory-item:last-child {
    border-bottom-color: transparent;
}

.ems-directory-item:hover {
    background: #f7faf9;
}

.ems-directory-item.is-selected {
    border-color: var(--ems-brand-light);
    background: var(--ems-brand-soft);
}

.ems-directory-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    background: #e2ece9;
    color: #21525b;
    font-size: 12px;
    font-weight: 700;
}

.ems-directory-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-directory-person {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ems-directory-person strong {
    overflow: hidden;
    color: #173b45;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-person span {
    margin-top: 4px;
    overflow: hidden;
    color: #567985;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-person small {
    margin-top: 3px;
    overflow: hidden;
    color: #789099;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16434e;
}

.ems-directory-empty,
.ems-people-grid-empty,
.ems-people-empty-card {
    text-align: center;
}

.ems-directory-empty {
    padding: 25px 20px;
}

.ems-directory-empty strong,
.ems-people-grid-empty strong {
    display: block;
    color: #294b54;
    font-size: 13px;
}

.ems-directory-empty p,
.ems-people-grid-empty p {
    margin: 5px 0 0;
    color: #789099;
    font-size: 11px;
}

.ems-people-grid-empty {
    padding: 50px 20px;
    border: 1px solid #e4ebea;
    border-radius: 14px;
    background: #fff;
}

.ems-people-empty-card {
    padding: 70px 30px;
    border: 1px solid #e4ebea;
    border-radius: 16px;
    background: #fff;
}

.ems-people-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 15px;
    border-radius: 16px;
    color: var(--ems-brand);
    background: var(--ems-brand-soft);
}

.ems-people-empty-card h2 {
    margin: 0;
    color: #173b45;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 25px;
}

.ems-people-empty-card p {
    margin: 7px 0 0;
    color: #6b838b;
    font-size: 13px;
}

@media (max-width: 1250px) {

    .ems-people-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    .ems-people-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1050px) {

    .ems-people-main {
        display: none;
    }

    .ems-people-layout {
        grid-template-columns: 1fr;
    }

    .ems-people-directory {
        position: static;
    }

    .ems-directory-list {
        max-height: 480px;
    }

}

@media (max-width: 700px) {

    .ems-people-page {
        padding: 18px 14px 30px;
    }

    .ems-people-heading {
        align-items: flex-start;
    }

    .ems-people-heading h1 {
        font-size: 28px;
    }

    .ems-people-total {
        min-width: 95px;
    }

    .ems-people-card-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .ems-people-heading {
        flex-direction: column;
        gap: 12px;
    }

    .ems-people-total {
        align-items: flex-start;
    }

    .ems-employee-detail-row {
        grid-template-columns: 18px 105px minmax(0, 1fr);
    }

}


.ems-profile-completion {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border: 1px solid var(--ems-brand-light);
    border-radius: 4px;
    grid-column: span 1;
    background: var(--ems-surface);
    justify-content: center;
}

.ems-profile-completion-ring {
    width: 122px;
    height: 122px;
    flex: 0 0 122px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--ems-brand) var(--profile-progress),
            var(--ems-brand-light) var(--profile-progress));
}

.ems-profile-completion-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #ffffff;
}

.ems-profile-completion-value {
    position: relative;
    z-index: 1;
    font-size: 17px;
    font-weight: 600;
    color: var(--ems-brand);
}

.ems-profile-completion-value span {
    display: flex;
    justify-content: center;
}

.ems-profile-completion-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ems-profile-completion-info .ems-card-label {
    margin: 0;
}

.ems-profile-completion-info h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
}

.ems-profile-completion-status {
    font-size: 12px;
    color: #667085;
}

@media (max-width: 600px) {

    .ems-profile-completion {
        padding: 18px;
        gap: 14px;
    }

    .ems-profile-completion-ring {
        width: 100px;
        height: 100px;
        flex-basis: 100px;
    }

    .ems-profile-completion-value {
        font-size: 15px;
    }
}


/* Employee leave apply calnedar form */
.ems-leave-calendar {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: var(--ems-surface);
    max-width: 420px;
}

.ems-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.ems-calendar-header button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--ems-brand);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.ems-calendar-header strong {
    font-size: 16px;
}

.ems-calendar-weekdays,
.ems-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.ems-calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #777;
    padding: 6px 0;
}

.ems-calendar-day {
    min-height: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    background: var(--ems-surface);
    cursor: pointer;
    font-size: 13px;
}

.ems-calendar-day:hover:not(:disabled) {
    background: var(--ems-brand-light);
    border-color: var(--ems-brand);
}

.ems-calendar-day.is-selected {
    background: var(--ems-brand);
    color: #fff;
    border-color: var(--ems-brand);
    font-weight: 600;
}

.ems-calendar-day.is-today {
    border: 2px solid var(--ems-brand);
}

.ems-calendar-day.is-disabled {
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

.ems-calendar-empty {
    height: 38px;
}

.ems-calendar-selected {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #666;
}

#ems_selected_dates_display {
    cursor: pointer;
    background: #fff;
}




/* =========================================================
   COMPACT EMPLOYEE SUMMARY
   ========================================================= */

.ems-calendar-employee-summary {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin-top: 10px;
    padding-left: 2px;
    cursor: pointer;
}


/* =========================================================
   SMALL PROFILE AVATARS
   ========================================================= */

.ems-calendar-mini-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;

    border-radius: 50%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ebe7df;

    border: 2px solid #ffffff;

    color: #5f5a52;

    font-size: 11px;
    font-weight: 700;

    margin-right: -7px;

    position: relative;

    box-sizing: border-box;
}


.ems-calendar-mini-avatar:nth-child(1) {
    z-index: 3;
}


.ems-calendar-mini-avatar:nth-child(2) {
    z-index: 2;
}


.ems-calendar-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   +N BUTTON
   ========================================================= */

.ems-calendar-more-button {
    width: 30px;
    height: 30px;
    min-width: 30px;

    margin-left: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f0ede7;

    color: #4d4942;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 5;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.ems-calendar-more-button:hover {
    background: #e4dfd6;

    transform: translateY(-1px);
}


/* =========================================================
   EMPLOYEE POPUP
   ========================================================= */

.ems-calendar-employee-popup {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--ems-surface);
    border: 1px solid #e6e1d9;
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(40, 36, 30, 0.18);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(5px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s ease;

    overflow: visible;
}


.ems-calendar-employee-popup.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   POPUP ARROW
   ========================================================= */

.ems-calendar-employee-popup::before {
    content: "";

    position: absolute;

    top: var(
        --ems-employee-popup-arrow-top,
        30px
    );

    width: 13px;
    height: 13px;

    background: var(--ems-surface);

    border-left: 1px solid #e6e1d9;
    border-bottom: 1px solid #e6e1d9;

    transform: translateY(-50%) rotate(45deg);

    z-index: -1;
}


.ems-calendar-employee-popup.right::before {
    left: -7px;
}


.ems-calendar-employee-popup.left::before {
    right: -7px;

    transform:
        translateY(-50%)
        rotate(225deg);
}


/* =========================================================
   POPUP HEADER
   ========================================================= */

.ems-calendar-employee-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #eeeae4;
}


.ems-calendar-employee-popup-header > div {
    display: flex;
    flex-direction: column;
}


.ems-calendar-employee-popup-header strong {
    font-size: 14px;

    font-weight: 700;

    color: var(--ems-text);
}


.ems-calendar-employee-popup-count {
    font-size: 11px;

    color: var(--ems-text-3);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.ems-calendar-employee-popup-close {
    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f3f0eb;

    color: #6d675e;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}


.ems-calendar-employee-popup-close:hover {
    background: #e8e3db;
}


/* =========================================================
   EMPLOYEE LIST
   ========================================================= */

.ems-calendar-employee-popup-list {
    max-height: 390px;

    overflow-y: auto;

    padding: 5px 0;
}


.ems-calendar-employee-popup-list::-webkit-scrollbar {
    width: 5px;
}


.ems-calendar-employee-popup-list::-webkit-scrollbar-thumb {
    background: #d8d2c8;

    border-radius: 10px;
}


.ems-calendar-employee-popup-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px;
    border-bottom: 1px solid #f1eee9;
}

.ems-calendar-employee-popup-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.ems-calendar-employee-popup-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ece8e1;
    color: #625d54;

    font-size: 13px;

    font-weight: 700;
}


.ems-calendar-employee-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   EMPLOYEE INFO
   ========================================================= */

.ems-calendar-employee-popup-info {
    display: flex;
    justify-content: space-between;
    flex: 1;
}


.ems-calendar-employee-popup-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ems-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.ems-calendar-employee-popup-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}


.ems-calendar-employee-popup-type {
    font-size: 11px;
    color: var(--ems-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}


/* =========================================================
   STATUS
   ========================================================= */

.ems-calendar-employee-popup-status {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 3px 7px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    text-transform: capitalize;
}


.ems-calendar-employee-popup-status.approved {
    background: #edf4ed;

    color: #4e7651;
}


.ems-calendar-employee-popup-status.pending {
    background: #faf2df;

    color: #98702e;
}


.ems-calendar-employee-popup-status.rejected {
    background: #f8eaea;

    color: #a25858;
}


.ems-calendar-employee-popup-status.cancelled {
    background: #eeeeee;

    color: #777168;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .ems-calendar-employee-popup {
        width: 320px;

        max-width:
            calc(100vw - 20px);
    }


    .ems-calendar-employee-popup-list {
        max-height: 350px;
    }

}











.ems-people-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 254px;
    gap: 12px;
    align-items: start;
}


.ems-people-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ems-people-eyebrow,
.ems-directory-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--ems-brand);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ems-people-total span {
    color: var(--ems-text-3);
    font-size: 11px;
    line-height: 1.2;
}

.ems-people-total strong {
    margin-top: 2px;
    background: linear-gradient(135deg, var(--ems-brand-ink), var(--ems-brand));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-weight: 700;
}

.ems-employee-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-lg);
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-xs);
    scroll-margin-top: 19px;
    transition:
        border-color var(--ems-t-fast) var(--ems-ease),
        box-shadow var(--ems-t-fast) var(--ems-ease),
        transform var(--ems-t-fast) var(--ems-ease);
}

.ems-employee-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ems-brand), var(--ems-brand-hover), transparent);
    opacity: 0;
    transition: opacity var(--ems-t-fast) var(--ems-ease);
}

.ems-employee-card:hover {
    border-color: var(--ems-brand-medium);
    box-shadow: 0 14px 28px -14px var(--ems-brand-medium), var(--ems-shadow-sm);
    transform: translateY(-3px);
}

.ems-employee-card:hover::before {
    opacity: 1;
}

.ems-employee-card.is-focused {
    border-color: var(--ems-brand);
    box-shadow:
        0 0 0 3px var(--ems-brand-light),
        0 12px 28px -14px var(--ems-brand-medium);
}

.profile-workspace {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 7px;
}

.ems-employee-card-menu {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ems-r-sm);
    color: var(--ems-text-3);
    transition: background-color var(--ems-t-fast) var(--ems-ease), color var(--ems-t-fast) var(--ems-ease);
}

.ems-employee-card-menu:hover {
    background: var(--ems-brand-soft);
    color: var(--ems-brand-ink);
}

.ems-employee-card-body {
    position: relative;
    padding: 0 12px 11px;
}

.ems-employee-card:hover .ems-employee-card-avatar {
    box-shadow: 0 0 0 3px var(--ems-brand-light), var(--ems-shadow-sm);
}

.ems-employee-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-employee-card-identity h2 {
    margin: 0;
    color: var(--ems-text);
    font-family: var(--ems-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ems-employee-card-email {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    color: var(--ems-text-3);
    font-size: 12px;
    text-decoration: none;
}

.ems-employee-card-email svg {
    flex: 0 0 auto;
}

.ems-employee-card-email span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-employee-card-divider {
    height: 1px;
    background: var(--ems-line-soft);
}

.ems-employee-card-details {
    display: flex;
    flex-direction: column;
}

.ems-employee-detail-row {
    display: grid;
    grid-template-columns: 18px minmax(70px, 1fr) minmax(80px, 1fr);
    align-items: center;
    gap: 5px;
}

.ems-employee-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ems-brand-ink);
    font-size: 13px;
    font-weight: 600;
}

.ems-employee-detail-label {
    color: var(--ems-text-4);
    font-size: 11px;
    line-height: 1.3;
}

.ems-employee-detail-row strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ems-text-2);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-people-directory {
    position: sticky;
    top: 20px;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--ems-line);
    border-radius: var(--ems-r-lg);
    background: var(--ems-surface);
    box-shadow: var(--ems-shadow-xs);
}

.ems-directory-header {
    padding: 14px 14px 10px;
    background: linear-gradient(180deg, var(--ems-brand-soft), transparent);
}

.ems-directory-header h2 {
    margin: 0;
    color: var(--ems-text);
    font-family: var(--ems-font);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ems-directory-header p {
    margin: 3px 0 0;
    color: var(--ems-text-3);
    font-size: 12px;
}

.ems-directory-search {
    position: relative;
}

.ems-directory-search svg {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--ems-text-4);
    transform: translateY(-50%);
    pointer-events: none;
}

.ems-directory-search input {
    width: 100%;
    border: none;
    border-radius: var(--ems-r-sm);
    outline: none;
    background: var(--ems-surface-2);
    color: var(--ems-text);
    font-size: 12px;
    transition:
        border-color var(--ems-t-fast) var(--ems-ease),
        box-shadow var(--ems-t-fast) var(--ems-ease),
        background-color var(--ems-t-fast) var(--ems-ease);
}

.ems-directory-search input::placeholder {
    color: var(--ems-text-4);
}

.ems-directory-search input:focus {
    background: var(--ems-surface);
    border-color: var(--ems-brand);
    box-shadow: 0 0 0 3px var(--ems-brand-light);
}

.ems-directory-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 0 8px 8px;
}

.ems-directory-list::-webkit-scrollbar {
    width: 5px;
}

.ems-directory-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: var(--ems-line-strong);
}

.ems-directory-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    width: 100%;
    min-height: 68px;
    gap: 7px;
    padding: 7px 5px;
    border: 1px solid transparent;
    border-bottom-color: var(--ems-line-soft);
    border-radius: var(--ems-r-sm);
    outline: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--ems-t-fast) var(--ems-ease),
        border-color var(--ems-t-fast) var(--ems-ease),
        transform var(--ems-t-fast) var(--ems-ease);
}

.ems-directory-item:last-child {
    border-bottom-color: transparent;
}

.ems-directory-item:hover {
    background: var(--ems-surface-2);
    transform: translateX(2px);
}

.ems-directory-item.is-selected {
    border-color: var(--ems-brand-light);
    background: var(--ems-brand-soft);
}

.ems-directory-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ems-brand-hover), var(--ems-brand));
    color: var(--ems-on-brand);
    font-size: 12px;
    font-weight: 600;
}

.ems-directory-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ems-directory-person {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ems-directory-person strong {
    overflow: hidden;
    color: var(--ems-text);
    font-family: var(--ems-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-person span {
    margin-top: 3px;
    overflow: hidden;
    color: var(--ems-text-3);
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-person small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--ems-text-4);
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-directory-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ems-text-4);
    transition: transform var(--ems-t-fast) var(--ems-ease), color var(--ems-t-fast) var(--ems-ease);
}

.ems-directory-item:hover .ems-directory-arrow {
    color: var(--ems-brand);
    transform: translateX(2px);
}

.ems-directory-empty,
.ems-people-grid-empty,
.ems-people-empty-card {
    text-align: center;
}

.ems-directory-empty {
    padding: 17px 14px;
}

.ems-directory-empty strong,
.ems-people-grid-empty strong {
    display: block;
    color: var(--ems-text);
    font-size: 13px;
}

.ems-directory-empty p,
.ems-people-grid-empty p {
    margin: 3px 0 0;
    color: var(--ems-text-4);
    font-size: 11px;
}

.ems-people-grid-empty {
    padding: 34px 14px;
    border: 1px dashed var(--ems-line-strong);
    border-radius: var(--ems-r-lg);
    background: var(--ems-surface-2);
}

.ems-people-empty-card {
    padding: 48px 20px;
    border: 1px dashed var(--ems-line-strong);
    border-radius: var(--ems-r-xl);
    background: var(--ems-surface-2);
}

.ems-people-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: var(--ems-r-lg);
    color: var(--ems-brand);
    background: var(--ems-brand-soft);
    animation: ems-pulse-ring 1.8s var(--ems-ease-out) infinite;
}

.ems-people-empty-card h2 {
    margin: 0;
    color: var(--ems-text);
    font-family: var(--ems-font);
    font-size: 18px;
    font-weight: 600;
}

.ems-people-empty-card p {
    margin: 5px 0 0;
    color: var(--ems-text-3);
    font-size: 13px;
}

@media (max-width: 1250px) {

    .ems-people-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    .ems-people-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1050px) {

    .ems-people-layout {
        grid-template-columns: 1fr;
    }

    .ems-people-directory {
        position: static;
    }

    .ems-directory-list {
        max-height: 480px;
    }

}

@media (max-width: 700px) {

    .ems-people-page {
        padding: 12px 10px 20px;
    }

    .ems-people-heading {
        align-items: flex-start;
    }

    .ems-people-heading h1 {
        font-size: 23px;
    }

    .ems-people-total {
        min-width: 95px;
    }

    .ems-people-card-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .ems-people-heading {
        flex-direction: column;
        gap: 8px;
    }

    .ems-people-total {
        align-items: flex-start;
    }

    .ems-employee-detail-row {
        grid-template-columns: 18px 105px minmax(0, 1fr);
    }

}

/* ==========================================================================
   15. MOTION SYSTEM — entrance + hover micro-interactions
   Applied generically via attribute selectors so every "*-card" / "*-modal"
   surface in the templates gets it with zero markup changes. Respects the
   prefers-reduced-motion block already defined near the top of this file.
   ========================================================================== */

@keyframes ems-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ems-pop-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ems-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ems-pulse-ring {
    0% {
        box-shadow: 0 0 0 0 var(--ems-brand-medium);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

/* main content area + KPI/employee/document/leave/notification cards fade
   up on load — cheap "alive" feel without per-template JS */
.ems-dashboard-main>*,
[class$="-card"],
[class*="-card "],
[class*="-card:"],
.ems-stat-card,
.emp-cnt-card,
.ems-employee-card,
.ems-document-card,
.ems-notification-card,
.ems-leave-balance-card,
.ems-glass-card {
    animation: ems-fade-up var(--ems-t-slow) var(--ems-ease-out) both;
}

/* stagger KPI tiles / grid cards so they don't all land at once */
.ems-stat-card:nth-child(2),
.ems-employee-card:nth-child(2),
.ems-document-card:nth-child(2) {
    animation-delay: 0.03s;
}

.ems-stat-card:nth-child(3),
.ems-employee-card:nth-child(3),
.ems-document-card:nth-child(3) {
    animation-delay: 0.06s;
}

.ems-stat-card:nth-child(4),
.ems-employee-card:nth-child(4),
.ems-document-card:nth-child(4) {
    animation-delay: 0.09s;
}

.ems-stat-card:nth-child(n+5),
.ems-employee-card:nth-child(n+5),
.ems-document-card:nth-child(n+5) {
    animation-delay: 0.12s;
}

/* modals/overlays pop in instead of just appearing */
[class*="-modal-box"],
[class*="-modal-content"],
.ems-chat-modal-box,
.ems-offer-preview-modal,
.ems-calendar-holiday-modal-content {
    animation: ems-pop-in var(--ems-t) var(--ems-ease-out) both;
}

/* hoverable surfaces: quiet lift + brand-tinted border, no layout shift
   (glass-card is excluded here — it also wraps full-width form panels,
   where a lift-on-hover would feel like a bug rather than a feature) */
.ems-stat-card,
.emp-cnt-card,
.ems-employee-card,
.ems-document-card,
.ems-document-display-card,
.ems-notification-card,
.ems-leave-balance-card,
.ems-action-card,
.ems-offer-template-card,
.ems-company-card {
    transition: transform var(--ems-t-fast) var(--ems-ease), box-shadow var(--ems-t-fast) var(--ems-ease),
        border-color var(--ems-t-fast) var(--ems-ease);
}

.ems-stat-card:hover,
.emp-cnt-card:hover,
.ems-employee-card:hover,
.ems-document-card:hover,
.ems-document-display-card:hover,
.ems-notification-card:hover,
.ems-leave-balance-card:hover,
.ems-action-card:hover,
.ems-offer-template-card:hover,
.ems-company-card:hover {
    transform: translateY(-2px);
    border-color: var(--ems-brand-medium);
    box-shadow: var(--ems-shadow-sm);
}

/* table rows: quick highlight sweep instead of an instant flat swap */
.ems-data-table tbody tr,
.ems-employee-table tbody tr,
.ems-document-table tbody tr,
.ems-leave-table tbody tr {
    transition: background-color var(--ems-t-fast) var(--ems-ease);
}

/* spinners already in the markup pick this up automatically */
.ems-spinner,
[class*="-spinner"],
[class*="-loading"] {
    animation: ems-spin 0.7s linear infinite;
}

/* focus/active ping on primary actions – reinforces brand without shouting */
.ems-primary-button:focus-visible,
.ems-submit-button:focus-visible,
.ems-login-button:focus-visible {
    animation: ems-pulse-ring 0.6s var(--ems-ease-out);
}

@media (prefers-reduced-motion: reduce) {

    .ems-dashboard-main>*,
    [class$="-card"],
    .ems-stat-card,
    .emp-cnt-card,
    .ems-employee-card,
    .ems-document-card,
    .ems-notification-card,
    .ems-leave-balance-card,
    .ems-glass-card,
    [class*="-modal-box"],
    [class*="-modal-content"] {
        animation: none;
    }

    .ems-stat-card:hover,
    .emp-cnt-card:hover,
    .ems-employee-card:hover,
    .ems-document-card:hover,
    .ems-notification-card:hover,
    .ems-leave-balance-card:hover,
    .ems-action-card:hover,
    .ems-glass-card:hover {
        transform: none;
    }
}


.ems-offer-letter-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.ems-offer-paper {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    color: #222222;
    padding: 55px 65px;
    border-radius: 6px;
    box-shadow:
        0 20px 60px rgba(0,
            0,
            0,
            0.08);
    font-family:
        Georgia,
        'Times New Roman',
        serif;
    box-sizing: border-box;
}

.ems-offer-paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ems-offer-company {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ems-offer-company-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ems-brand-light);
    color: var(--ems-brand);
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.ems-offer-company strong {
    display: block;
    font-size: 20px;
}

.ems-offer-company span {
    display: block;
    margin-top: 3px;
    color: #777777;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.ems-offer-paper-divider {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: #dddddd;
}

.ems-offer-paper-date {
    margin-bottom: 30px;
    font-family:
        Arial,
        sans-serif;
    font-size: 14px;
    color: #555555;
}

.ems-offer-paper-recipient {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.7;
}

.ems-offer-paper-body {
    font-size: 16px;
    line-height: 1.85;
}

.ems-offer-paper-body p {
    margin: 0 0 18px;
}

.ems-offer-paper-body strong {
    color: #111111;
}

.ems-offer-paper-signature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 45px;
    font-size: 15px;
}

.ems-offer-form {
    width: 100%;
}


.ems-form-row {
    display: grid;
    grid-template-columns:
        repeat(2,
            minmax(0,
                1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.ems-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ems-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
}

.ems-form-group input,
.ems-form-group select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #ffffff;
    color: #222222;
    outline: none;
    box-sizing: border-box;
}

.ems-form-group input:focus,
.ems-form-group select:focus {
    border-color: var(--ems-brand);
    box-shadow: 0 0 0 3px var(--ems-brand-light);
}

.ems-offer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #eeeeee;
}

.ems-offer-actions button {
    min-width: 150px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.ems-offer-actions button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ems-secondary-button {
    background: #ffffff;
    color: var(--ems-brand);
    border: 1px solid var(--ems-brand);
}

.ems-primary-button {
    background: var(--ems-brand);
    color: #ffffff;
    border: 1px solid var(--ems-brand);
}

.ems-offer-template-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 850px;
    margin: 18px auto 0;
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--ems-brand-soft);
    color: #555555;
    font-family: Arial, sans-serif;
    font-size: 13px;
    box-sizing: border-box;
}

.ems-offer-template-info p {
    margin: 0;
}

.ems-offer-success-message {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--ems-brand-light);
    border: 1px solid var(--ems-brand-medium);
    color: var(--ems-brand);
    font-size: 14px;
    font-weight: 600;
}

.ems-offer-error-message {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #fff3f3;
    border: 1px solid #e5baba;
    color: #a33a3a;
    font-size: 14px;
    font-weight: 600;
}

.ems-offer-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background:
        rgba(0,
            0,
            0,
            0.65);
    box-sizing: border-box;
}

.ems-offer-preview-modal.is-open {
    display: flex;
}

.ems-offer-preview-dialog {
    width: 100%;
    max-width: 950px;
    max-height: 92vh;
    overflow: auto;
    background: #f4f4f4;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
}

.ems-offer-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.ems-offer-preview-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    font-size: 20px;
}

@media (max-width: 768px) {
    .ems-form-row {
        grid-template-columns:
            1fr;
    }

    .ems-offer-paper {
        padding: 35px 25px;
    }

    .ems-offer-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .ems-offer-actions button {
        flex: 1;
    }

}


/* ==========================================================================
   1. PAGE FOUNDATION
   ========================================================================== */

.ems-notification-settings-page {
    width: 100%;
    max-width: var(--ems-content-max, 1240px);
    margin: 0 auto;
    padding: 0 0 48px;
    color: var(--ems-text, #1b2130);
}


/* ==========================================================================
   2. PAGE HEADER
   ========================================================================== */

.ems-notification-settings-page .ems-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
    padding: 24px 26px;

    background: var(--ems-surface, #ffffff);
    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: var(--ems-r-xl, 16px);

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 4px 12px rgba(16, 24, 40, 0.03);
}

.ems-notification-title {
    min-width: 0;
}

.ems-notification-title h2 {
    margin: 0 0 5px;
    color: var(--ems-text, #1b2130);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.025em;
}

.ems-notification-title p {
    margin: 0;
    color: var(--ems-text-3, #5b6577);
    font-size: 13px;
    line-height: 1.55;
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.ems-notification-settings-page .ems-primary-button,
.ems-notification-settings-page .ems-secondary-button,
.ems-notification-settings-page .ems-danger-button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 9px;

    min-height: 38px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.ems-notification-settings-page .ems-primary-button {
    color: var(--ems-on-brand, #ffffff);
    background: var(--ems-brand, #0f766e);
    border-color: var(--ems-brand, #0f766e);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.ems-notification-settings-page .ems-primary-button:hover {
    background: var(--ems-brand-hover, #0f766e);
    border-color: var(--ems-brand-hover, #0f766e);
    box-shadow: 0 3px 8px var(--ems-brand-light);
    transform: translateY(-1px);
}

.ems-notification-settings-page .ems-primary-button:active {
    transform: translateY(0);
}

.ems-notification-settings-page .ems-primary-button span {
    font-size: 18px;
    font-weight: 400;
    line-height: 0;
    margin-top: -1px;
}

.ems-notification-settings-page .ems-secondary-button {
    color: var(--ems-text-2, #465064);
    background: var(--ems-surface, #ffffff);
    border-color: var(--ems-line, #e4e7ec);
}

.ems-notification-settings-page .ems-secondary-button:hover {
    color: var(--ems-brand-ink, #0f766e);
    border-color: var(--ems-brand-medium, rgba(15, 118, 110, 0.22));
    background: var(--ems-brand-soft, rgba(15, 118, 110, 0.08));
}

.ems-notification-settings-page .ems-danger-button {
    color: var(--ems-bad, #b42318);
    background: var(--ems-surface, #ffffff);
    border-color: var(--ems-line, #e4e7ec);
}

.ems-notification-settings-page .ems-danger-button:hover {
    color: #912018;
    background: var(--ems-bad-bg, #fef3f2);
    border-color: var(--ems-bad-line, #fecdca);
}

.ems-notification-settings-page button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   4. CREATE / EDIT FORM
   ========================================================================== */

.ems-notification-settings-form {
    margin-bottom: 24px;
}

.ems-notification-settings-form>.ems-glass-card {
    overflow: hidden;

    background: var(--ems-surface, #ffffff);
    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: var(--ems-r-xl, 16px);

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 10px 24px rgba(16, 24, 40, 0.04);
}


/* Form header */

.ems-notification-settings-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 26px;

    border-bottom: 1px solid var(--ems-line-soft, #eef0f4);
    background:
        linear-gradient(180deg,
            var(--ems-surface, #ffffff),
            var(--ems-surface-2, #f9fafb));
}

.ems-notification-settings-form-header h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--ems-text, #1b2130);
}

.ems-notification-settings-form-header p {
    margin: 0;
    color: var(--ems-text-4, #7a8394);
    font-size: 12.5px;
}

.ems-notification-settings-close {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: 8px;

    color: var(--ems-text-3, #5b6577);
    background: var(--ems-surface, #ffffff);

    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.ems-notification-settings-close:hover {
    color: var(--ems-text, #1b2130);
    border-color: var(--ems-line-strong, #d0d5dd);
    background: var(--ems-surface-3, #f2f4f7);
}


/* ==========================================================================
   5. FORM FIELDS
   ========================================================================== */

.ems-notification-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    padding: 26px;
}

.ems-notification-settings-field {
    min-width: 0;
}

.ems-notification-settings-field.ems-notification-settings-full {
    grid-column: 1 / -1;
}

.ems-notification-settings-field label {
    display: block;
    margin: 0 0 7px;

    color: var(--ems-text-2, #465064);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.ems-notification-settings-field input,
.ems-notification-settings-field select,
.ems-notification-settings-field textarea {
    width: 100%;

    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: 9px;

    background: var(--ems-surface, #ffffff);
    color: var(--ems-text, #1b2130);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}

.ems-notification-settings-field input,
.ems-notification-settings-field select {
    height: 42px;
    padding: 0 12px;
}

.ems-notification-settings-field textarea {
    min-height: 108px;
    padding: 11px 12px;
    resize: vertical;
}

.ems-notification-settings-field input::placeholder,
.ems-notification-settings-field textarea::placeholder {
    color: #98a0af;
}

.ems-notification-settings-field input:hover,
.ems-notification-settings-field select:hover,
.ems-notification-settings-field textarea:hover {
    border-color: var(--ems-line-strong, #d0d5dd);
}

.ems-notification-settings-field input:focus,
.ems-notification-settings-field select:focus,
.ems-notification-settings-field textarea:focus {
    outline: none;

    border-color: var(--ems-brand, #0f766e);
    box-shadow: var(--ems-ring, 0 0 0 3px rgba(15, 118, 110, 0.22));
}

.ems-notification-settings-field select {
    appearance: auto;
    cursor: pointer;
}

.ems-notification-settings-input-group {
    display: flex;
    align-items: stretch;
}

.ems-notification-settings-input-group input {
    border-radius: 9px 0 0 9px;
}

.ems-notification-settings-input-group span {
    min-width: 64px;
    padding: 0 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ems-text-3, #5b6577);
    background: var(--ems-surface-3, #f2f4f7);

    border: 1px solid var(--ems-line, #e4e7ec);
    border-left: 0;
    border-radius: 0 9px 9px 0;

    font-size: 12px;
}


/* ==========================================================================
   6. CONDITIONAL FIELDS
   ========================================================================== */

.ems-notification-custom-type,
#ems-notification-trigger-days-wrapper,
#ems-notification-repeat-wrapper {
    animation: emsNotificationFieldIn 0.16s ease;
}

@keyframes emsNotificationFieldIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   7. FORM FEEDBACK
   ========================================================================== */

.ems-notification-settings-feedback {
    margin: 0 26px 18px;
    padding: 11px 13px;

    border-radius: 9px;

    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}

.ems-notification-settings-feedback.is-success {
    color: var(--ems-ok, #067647);
    background: var(--ems-ok-bg, #ecfdf3);
    border: 1px solid var(--ems-ok-line, #abefc6);
}

.ems-notification-settings-feedback.is-error {
    color: var(--ems-bad, #b42318);
    background: var(--ems-bad-bg, #fef3f2);
    border: 1px solid var(--ems-bad-line, #fecdca);
}


/* ==========================================================================
   8. FORM ACTIONS
   ========================================================================== */

.ems-notification-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    padding: 17px 26px;

    border-top: 1px solid var(--ems-line-soft, #eef0f4);
    background: var(--ems-surface-2, #f9fafb);
}


/* ==========================================================================
   9. NOTIFICATION RULE LIST
   ========================================================================== */

.ems-notification-settings-section {
    width: 100%;
}

.ems-notification-settings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ems-notification-settings-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;

    padding: 21px 22px;

    background: var(--ems-surface, #ffffff);
    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: var(--ems-r-lg, 12px);

    box-shadow: var(--ems-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.ems-notification-settings-item:hover {
    border-color: var(--ems-line-strong, #d0d5dd);

    box-shadow:
        0 4px 12px rgba(16, 24, 40, 0.06),
        0 1px 3px rgba(16, 24, 40, 0.04);

    transform: translateY(-1px);
}

.ems-notification-settings-item-content {
    flex: 1 1 auto;
    min-width: 0;
}


/* ==========================================================================
   10. RULE HEADING
   ========================================================================== */

.ems-notification-settings-item-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 8px;
}

.ems-notification-settings-item-heading h3 {
    margin: 0;

    color: var(--ems-text, #1b2130);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.012em;
}


/* ==========================================================================
   11. ENABLED / DISABLED STATUS
   ========================================================================== */

.ems-notification-settings-status {
    display: inline-flex;
    align-items: center;

    min-height: 23px;
    padding: 0 8px;

    border-radius: 999px;

    font-size: 10.5px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.ems-notification-settings-status.is-active {
    color: var(--ems-ok, #067647);
    background: var(--ems-ok-bg, #ecfdf3);
    border: 1px solid var(--ems-ok-line, #abefc6);
}

.ems-notification-settings-status.is-inactive {
    color: var(--ems-neutral, #475467);
    background: var(--ems-neutral-bg, #f2f4f7);
    border: 1px solid var(--ems-neutral-line, #e4e7ec);
}


/* ==========================================================================
   12. RULE META
   ========================================================================== */

.ems-notification-settings-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 14px;
}

.ems-notification-settings-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    padding: 0 9px;

    color: var(--ems-text-3, #5b6577);
    background: var(--ems-surface-3, #f2f4f7);

    border: 1px solid var(--ems-line-soft, #eef0f4);
    border-radius: 7px;

    font-size: 11px;
    font-weight: 500;
}

.ems-notification-settings-meta span:first-child {
    color: var(--ems-brand-ink, #0f766e);
    background: var(--ems-brand-soft, rgba(15, 118, 110, 0.08));
    border-color: var(--ems-brand-light, rgba(15, 118, 110, 0.12));
}


/* ==========================================================================
   13. NOTIFICATION PREVIEW
   ========================================================================== */

.ems-notification-settings-preview {
    max-width: 820px;

    padding: 13px 15px;

    background: var(--ems-surface-2, #f9fafb);
    border: 1px solid var(--ems-line-soft, #eef0f4);
    border-left: 3px solid var(--ems-brand, #0f766e);
    border-radius: 8px;
}

.ems-notification-settings-preview strong {
    display: block;

    margin-bottom: 4px;

    color: var(--ems-text-2, #465064);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.ems-notification-settings-preview p {
    margin: 0;

    color: var(--ems-text-3, #5b6577);

    font-size: 12px;
    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   14. ITEM ACTIONS
   ========================================================================== */

.ems-notification-settings-item-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    max-width: 330px;
}


/* ==========================================================================
   15. EMPTY STATE
   ========================================================================== */

.ems-notification-settings-empty {
    padding: 58px 28px;
    text-align: center;

    background: var(--ems-surface, #ffffff);
    border: 1px solid var(--ems-line, #e4e7ec);
    border-radius: var(--ems-r-xl, 16px);

    box-shadow: var(--ems-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.ems-notification-settings-empty h3 {
    margin: 0 0 7px;

    color: var(--ems-text, #1b2130);
    font-size: 16px;
    font-weight: 650;
}

.ems-notification-settings-empty p {
    max-width: 480px;
    margin: 0 auto 20px;

    color: var(--ems-text-3, #5b6577);
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================================
   16. GLASS CARD NORMALIZATION
   ========================================================================== */

.ems-notification-settings-page .ems-glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ==========================================================================
   17. ACCESSIBILITY
   ========================================================================== */

.ems-notification-settings-page:is(button,
    input,
    select,
    textarea):focus-visible {
    outline: 2px solid var(--ems-brand, #0f766e);
    outline-offset: 2px;
}

.ems-notification-settings-page button:focus:not(:focus-visible),
.ems-notification-settings-page input:focus:not(:focus-visible),
.ems-notification-settings-page select:focus:not(:focus-visible),
.ems-notification-settings-page textarea:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   18. TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .ems-notification-settings-page {
        padding-bottom: 36px;
    }

    .ems-notification-settings-page .ems-page-header {
        padding: 21px 22px;
    }

    .ems-notification-settings-fields {
        gap: 17px;
        padding: 22px;
    }

    .ems-notification-settings-form-header {
        padding: 20px 22px;
    }

    .ems-notification-settings-actions {
        padding: 16px 22px;
    }

    .ems-notification-settings-feedback {
        margin-left: 22px;
        margin-right: 22px;
    }

    .ems-notification-settings-item {
        gap: 20px;
        padding: 19px;
    }

    .ems-notification-settings-item-actions {
        max-width: 280px;
    }
}


/* ==========================================================================
   19. MOBILE
   ========================================================================== */

@media (max-width: 760px) {

    .ems-notification-settings-page {
        padding: 0 0 28px;
    }

    .ems-notification-settings-page .ems-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 17px;

        padding: 19px;
        margin-bottom: 18px;
    }

    .ems-notification-title h2 {
        font-size: 19px;
    }

    .ems-notification-settings-page .ems-page-header .ems-primary-button {
        width: 100%;
    }

    .ems-notification-settings-fields {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 19px;
    }

    .ems-notification-settings-field.ems-notification-settings-full {
        grid-column: auto;
    }

    .ems-notification-settings-form-header {
        padding: 18px 19px;
    }

    .ems-notification-settings-actions {
        padding: 15px 19px;
        flex-wrap: wrap;
    }

    .ems-notification-settings-actions button {
        flex: 1 1 auto;
    }

    .ems-notification-settings-feedback {
        margin-left: 19px;
        margin-right: 19px;
    }

    .ems-notification-settings-item {
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }

    .ems-notification-settings-item-actions {
        width: 100%;
        max-width: none;

        justify-content: flex-start;
    }

    .ems-notification-settings-item-actions button {
        flex: 1 1 auto;
    }

    .ems-notification-settings-preview {
        max-width: none;
    }
}


/* ==========================================================================
   20. SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .ems-notification-settings-page .ems-page-header {
        padding: 17px;
        border-radius: 12px;
    }

    .ems-notification-settings-title {
        min-width: 0;
    }

    .ems-notification-title h2 {
        font-size: 18px;
    }

    .ems-notification-settings-form>.ems-glass-card {
        border-radius: 12px;
    }

    .ems-notification-settings-fields {
        padding: 17px;
    }

    .ems-notification-settings-form-header {
        padding: 17px;
    }

    .ems-notification-settings-actions {
        padding: 14px 17px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ems-notification-settings-actions button {
        width: 100%;
    }

    .ems-notification-settings-item {
        padding: 16px;
        border-radius: 11px;
    }

    .ems-notification-settings-item-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .ems-notification-settings-meta {
        align-items: flex-start;
        /* flex-direction: column; */
    }

    .ems-notification-settings-meta span {
        width: fit-content;
    }

    .ems-notification-settings-item-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ems-notification-settings-item-actions button {
        width: 100%;
    }

    .ems-notification-settings-empty {
        padding: 42px 20px;
    }
}


/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .ems-notification-settings-page *,
    .ems-notification-settings-page *::before,
    .ems-notification-settings-page *::after {
        animation: none !important;
        transition: none !important;
    }
}




/* employee workspace popup css */
.ems-employee-modal[hidden] {
    display: none !important;
}

.ems-employee-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ems-employee-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(3px);
}

.ems-employee-modal-content {
    position: relative;
    z-index: 1;
    width: min(320px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.ems-employee-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px;
    border-bottom: 1px solid #eef0f3;
}

.ems-employee-modal-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.ems-employee-modal-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: #f5f5f7;
    color: #4b5563;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ems-employee-modal-close:hover {
    background: var(--ems-brand-light);
    color: var(--ems-brand);
}

.ems-employee-modal-body {
    padding: 20px;
}

.ems-employee-modal-body .ems-employee-card-body {
    padding: 0;
}

body.ems-employee-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .ems-directory-filters {
        grid-template-columns: 1fr;
    }

    .ems-employee-modal {
        padding: 12px;
    }

    .ems-employee-modal-content {
        max-height: calc(100vh - 24px);
        border-radius: 15px;
    }
}
























/* =========================================================
   THEME TOGGLE
   ========================================================= */

.ems-theme-toggle {
    position: relative;
    width: 40px;
    height: 23px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: none;
}

.ems-theme-toggle-track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: #e4e7ec;
    border: 1px solid #d0d5dd;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.ems-theme-toggle-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
    transform: translateX(0);
    transition: transform 0.2s ease;
}

/* DARK MODE TOGGLE ON */

.ems-dark-mode .ems-theme-toggle-track {
    background: #1f2937;
    border-color: #374151;
}

.ems-dark-mode .ems-theme-toggle-thumb {
    transform: translateX(19px);
    background: #111827;
}





/* ==========================================================================
   DARK MODE — color-only override
   ---------------------------------------------------------------------------
   DELETE the entire `@scope (body.ems-dark-mode) { ... }` block in your
   stylesheet (the ~1900-line duplicate of the whole file) and paste this in
   its place instead.

   Why this works: every surface/text/border/status color in the base (light)
   stylesheet is already read from a CSS variable (--ems-surface, --ems-text,
   --ems-line, --ems-ok, --ems-warn, etc.). This block redefines ONLY those
   variables for .ems-dark-mode. Nothing else in the file needs to change —
   padding, gap, font-size, border-radius, box-shadow shape, and animations
   are never re-declared here, so they simply carry over unchanged from the
   light theme. The only things that visually change on toggle are
   background-color, color and border-color (plus gradients/tints that are
   themselves built from these same color tokens, e.g. --ems-ok-bg).
   ========================================================================== */

body.ems-dark-mode {
    /* Neutral surface scale */
    --ems-surface: #14161c;
    --ems-surface-2: #1a1d24;
    --ems-surface-3: #22262f;
    --ems-line: #2a2e38;
    --ems-line-soft: #21242c;
    --ems-line-strong: #3a3f4b;
    --ems-text-2: #c7cbd4;
    --ems-text-3: #9a9fac;
    --ems-text-4: #6d7383;

    /* Status palette (fg / bg / border) */
    --ems-ok: #34d399;
    --ems-ok-bg: rgba(52, 211, 153, 0.12);
    --ems-ok-line: rgba(52, 211, 153, 0.35);
    --ems-warn: #fbbf24;
    --ems-warn-bg: rgba(251, 191, 36, 0.12);
    --ems-warn-line: rgba(251, 191, 36, 0.35);
    --ems-bad: #f87171;
    --ems-bad-bg: rgba(248, 113, 113, 0.12);
    --ems-bad-line: rgba(248, 113, 113, 0.35);
    --ems-info: #60a5fa;
    --ems-info-bg: rgba(96, 165, 250, 0.12);
    --ems-info-line: rgba(96, 165, 250, 0.35);
    --ems-violet: #a78bfa;
    --ems-violet-bg: rgba(167, 139, 250, 0.12);
    --ems-violet-line: rgba(167, 139, 250, 0.35);
    --ems-cyan: #22d3ee;
    --ems-cyan-bg: rgba(34, 211, 238, 0.12);
    --ems-cyan-line: rgba(34, 211, 238, 0.35);
    --ems-neutral: #aab0bd;
    --ems-neutral-bg: rgba(170, 176, 189, 0.12);
    --ems-neutral-line: rgba(170, 176, 189, 0.3);
}

/* Brand-derived tokens are set on the same two selectors used for light mode
   (:root, .ems-dashboard), so we need to match/beat that specificity here:
   "body.ems-dark-mode .ems-dashboard" > ".ems-dashboard" alone. */
body.ems-dark-mode,
body.ems-dark-mode .ems-dashboard {
    --ems-brand-ink: var(--ems-brand);
    --ems-brand-hover: var(--ems-brand);
    --ems-on-brand: #ffffff;
    --ems-canvas: #0a0b0f;
    --ems-text: #f2f3f5;
}

@supports (color: color-mix(in srgb, red, blue)) {

    body.ems-dark-mode,
    body.ems-dark-mode .ems-dashboard {
        /* brand mixed toward white (not black) so brand-colored text/icons
           stay readable on a dark surface */
        --ems-brand-ink: color-mix(in srgb, var(--ems-brand) 65%, #f2f3f5);
        --ems-brand-hover: color-mix(in srgb, var(--ems-brand) 88%, #ffffff);
        --ems-canvas: color-mix(in srgb, var(--ems-brand) 4%, #0a0b0f);
        --ems-text: color-mix(in srgb, var(--ems-brand) 4%, #f2f3f5);
    }
}

/* --ems-on-brand via oklch (section 1 of the base file) already derives from
   var(--ems-brand) alone, so it doesn't need a dark-specific override — it
   produces the same correct result in both themes automatically. */


/* ==========================================================================
   The only spots in the base stylesheet that used hardcoded hex colors
   instead of tokens (so they wouldn't otherwise flip with the theme).
   Only background-color / color / border-color are touched below.
   ========================================================================== */

body.ems-dark-mode .ems-chat-search {
    background-color: var(--ems-surface);
    color: var(--ems-text);
    border-color: var(--ems-line);
}

body.ems-dark-mode .ems-chat-search::placeholder {
    color: var(--ems-text-4);
}

body.ems-dark-mode .ems-chat-search-results {
    background-color: var(--ems-surface);
    border-color: var(--ems-line);
}

body.ems-dark-mode .ems-chat-search-section,
body.ems-dark-mode .ems-chat-search-info span,
body.ems-dark-mode .ems-chat-search-empty {
    color: var(--ems-text-4);
}

body.ems-dark-mode .ems-chat-search-info strong {
    color: var(--ems-text);
}

/* Intentionally left unchanged in dark mode (not bugs):
   - .ems-offer-paper and its children: the offer letter is a printed
     document and stays white/black in both themes.
   - .ems-sidebar and .ems-company-brand text: the sidebar is always
     var(--ems-brand), not a themeable neutral, in both themes. */

body.ems-dark-mode .ems-sidebar {
    background: var(--ems-surface);
}

body.ems-dark-mode .ems-chat-item {
    background: var(--ems-surface);
    border: 1px solid var(--ems-brand);
}

body.ems-dark-mode .ems-chat-item-name {
    color: #ffffff;
}

body.ems-dark-mode .ems-employee-modal-content {
    background-color: var(--ems-surface);
}

body.ems-dark-mode input {
    background-color: var(--ems-surface);
    opacity: 1;
    color: #fff;
}

body.ems-dark-mode select {
    background-color: var(--ems-surface);
    color: #fff;
}

body.ems-dark-mode textarea {
    background-color: var(--ems-surface);
    color: #fff;
}

body.ems-dark-mode .ems-secondary-button {
    background-color: var(--ems-surface);
    color: #fff;
}

body.ems-dark-mode .ems-leave-balance-page form.ems-form-grid .ems-form-group {
    min-width: 100px;
}