@import url('/css/navigation.css');

:root {
  --bg: #f4efe6;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: #fffdf8;
  --ink: #132238;
  --muted: #546274;
  --line: rgba(19, 34, 56, 0.12);
  --brand: #0f766e;
  --brand-deep: #0c4a6e;
  --accent: #f59e0b;
  --shadow: 0 24px 80px rgba(19, 34, 56, 0.12);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

/* Deep, enterprise HRMS visual language with light work surfaces. */
.portal-body { background: radial-gradient(circle at 92% 2%, rgba(68,118,255,.14), transparent 26%), linear-gradient(135deg, #f3f7fd 0%, #f9fbff 55%, #f4f8f7 100%); }
.side-menu { color: #dbe8ff; background: linear-gradient(180deg, #101e3b 0%, #132a52 52%, #153554 100%); border-right: 0; box-shadow: 12px 0 34px rgba(8,22,48,.14); }.side-menu .brand-mark { color: #fff; }.side-menu .brand-mark small { color: #a9c0e6; }.side-menu .brand-logo { background: linear-gradient(135deg, #ffad4d, #ff7a5c); }.menu-link,.menu-group-toggle,.submenu-link { color: #b6cae9; }.menu-glyph { color: #7eb2ff; }.menu-link:hover,.menu-group-toggle:hover,.menu-link.active,.menu-group.open .menu-group-toggle { color: #fff; background: rgba(126,178,255,.15); }.submenu-link:hover,.submenu-link.active { color: #fff; background: rgba(255,173,77,.16); }.sidebar-user { border-top-color: rgba(255,255,255,.14); }.sidebar-user small { color: #9eb8dc; }.user-avatar { color: #183763; background: #d9e8ff; }.topbar { color: #e9f2ff; background: linear-gradient(100deg, #11254a, #163965); border-bottom: 0; }.topbar-kicker { color: #aac6ec; }.topbar-action { color: #143b72; background: #dceaff; }
.crm-welcome { position: relative; padding: 1.45rem 1.7rem; overflow: hidden; border-radius: 22px; color: #edf4ff; background: linear-gradient(115deg, #142b52, #1e4e78); box-shadow: 0 18px 42px rgba(25,55,98,.18); }.crm-welcome::after { content: ""; position: absolute; right: -4rem; bottom: -5rem; width: 230px; height: 230px; border: 30px solid rgba(132,185,255,.16); border-radius: 50%; }.crm-welcome h1 { position: relative; z-index: 1; color: #fff; }.crm-welcome p { position: relative; z-index: 1; color: #c4d7ef; }.crm-welcome .eyebrow { color: #94c6ff; }.crm-actions { position: relative; z-index: 1; }.crm-welcome .btn-soft { color: #e8f2ff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }.crm-welcome .btn-brand { background: linear-gradient(135deg, #ff9a4a, #f56d58); box-shadow: none; }.crm-card { box-shadow: 0 14px 32px rgba(24,58,95,.07); }.crm-kpi-card { border-top: 3px solid #78aaff; }.crm-kpi-card:nth-child(2) { border-top-color: #65c7a4; }.crm-kpi-card:nth-child(3) { border-top-color: #f6b657; }.crm-kpi-card:nth-child(4) { border-top-color: #ad92e9; }
.dialog-card { width: min(100%, 820px); max-height: min(86vh, 800px); overflow-y: auto; border: 1px solid #dbe6f2; background: #fdfefe; }.dialog-card p { margin-bottom: 1.25rem; }.hrms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1rem; }.dialog-card label { color: #40566a; font-size: .86rem; }.dialog-card label > span b { color: #e36d55; }.dialog-card input,.dialog-card textarea,.dialog-card select { width: 100%; padding: .7rem .75rem; border: 1px solid #d9e3ed; border-radius: 10px; outline: none; background: #fff; color: #1d3851; font: inherit; }.dialog-card input:focus,.dialog-card textarea:focus,.dialog-card select:focus { border-color: #5d91e8; box-shadow: 0 0 0 3px rgba(93,145,232,.13); }.form-field-wide { grid-column: 1 / -1; }.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.3rem; }

@media (max-width: 767.98px) { .hrms-form-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; } }
.employee-lookup-status { min-height: 1.3rem; margin: .2rem 0 .75rem; color: #4d647a; font-size: .88rem; }.employee-document-select { padding: 1.4rem; border-radius: 20px; }.employee-document-picker { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(340px, 1.25fr) auto; gap: .65rem 1rem; align-items: end; margin: 0; padding: 1.25rem 1.4rem; background: linear-gradient(135deg, #eef6ff, #f7fbff); }.employee-document-picker-copy { display: grid; gap: .28rem; padding-bottom: .45rem; }.employee-document-picker-copy strong { color: #193c62; font-size: 1.08rem; }.employee-document-picker-copy small { color: #71879a; font-size: .8rem; }.employee-document-picker label { min-width: 0; }.employee-document-picker input { min-height: 52px; padding: .85rem 1rem; font-size: 1rem; box-shadow: 0 4px 14px rgba(28, 74, 112, .08); }.employee-document-picker .employee-lookup-status { grid-column: 2; margin: 0; }.employee-document-picker .btn { min-height: 52px; padding-inline: 1.15rem; white-space: nowrap; }@media(max-width:980px){.employee-document-picker{grid-template-columns:1fr 1fr}.employee-document-picker-copy{grid-column:1/-1}.employee-document-picker .employee-lookup-status{grid-column:1/-1}.employee-document-picker .btn{width:auto}}@media(max-width:600px){.employee-document-select{padding:.85rem}.employee-document-picker{grid-template-columns:1fr;padding:1rem}.employee-document-picker .employee-lookup-status{grid-column:auto}.employee-document-picker .btn{width:100%}}
.onboarding-employee-picker { margin-bottom: 1rem; }
.ai-assistant-page { display: grid; gap: 1.25rem; }.ai-assistant-card { max-width: 900px; padding: 1.3rem; border: 1px solid #dbe6f2; border-radius: 18px; background: #fff; box-shadow: 0 14px 32px rgba(24,58,95,.07); }.ai-conversation { display: grid; gap: .75rem; max-height: 420px; overflow-y: auto; margin: .8rem 0; }.ai-message { max-width: 80%; padding: .85rem 1rem; border-radius: 14px; }.ai-message strong { display: block; margin-bottom: .25rem; font-size: .78rem; }.ai-message p { margin: 0; line-height: 1.5; }.ai-message-assistant { color: #173954; background: #edf5ff; }.ai-message-user { justify-self: end; color: #fff; background: #1d6974; }.ai-assistant-form textarea { width: 100%; margin-top: .35rem; padding: .78rem; border: 1px solid #d9e3ed; border-radius: 10px; font: inherit; resize: vertical; }.ai-assistant-form button { margin-top: .65rem; }.ai-email-option { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #cfe1fb; border-radius: 12px; background: linear-gradient(115deg, #f2f8ff, #edfdf8); }.ai-email-option strong,.ai-email-option small { display: block; }.ai-email-option strong { color: #244d79; font-size: .86rem; }.ai-email-option small { margin-top: .2rem; color: #68809a; font-size: .75rem; }.ai-email-option > div:last-child { display: flex; gap: .55rem; align-items: center; }.ai-email-option input { width: 145px; padding: .55rem .65rem; border: 1px solid #bcd1e7; border-radius: 8px; font: inherit; }.ai-email-option .btn { margin-top: 0; white-space: nowrap; }.ai-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; color: #4d647a; font-size: .86rem; }.ai-suggestions button { padding: .35rem .55rem; border: 1px solid #d7e3ee; border-radius: 999px; color: #31557d; background: #f7fbff; font: inherit; cursor: pointer; }.ai-disclaimer { margin: 1rem 0 0; color: #697d8f; font-size: .8rem; }
.ai-action-link { display: inline-block; margin-top: .7rem; padding: .48rem .75rem; border-radius: 8px; color: #fff; background: #1b7180; font-size: .86rem; font-weight: 700; text-decoration: none; }

/* Company identity and document-branding workspace. */
.brand-image { object-fit: contain; padding: 3px; background: #fff; }
.letter-logo { overflow: hidden; background: #edf3ff; }.letter-logo img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.company-page { display: grid; gap: 1.45rem; }.company-hero { background: linear-gradient(115deg, #f8fbff, #e7f4f1); }.company-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .75fr); gap: 1.25rem; align-items: start; }.company-form-card { display: grid; gap: 1.4rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 22px; }.company-form-card h2,.company-preview h2 { margin: .35rem 0 .55rem; color: #19344e; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.35rem; font-weight: 720; }.company-form-card p { margin: 0; color: #708397; line-height: 1.6; }.company-form { display: grid; gap: 1rem; }.company-form small { display: block; margin-top: .4rem; color: #71879a; font-size: .74rem; }.company-form [data-valmsg-for] { color: #bd4e4e; font-size: .75rem; }.company-preview { padding: 1.55rem; border: 1px solid #dfe9f1; border-radius: 22px; background: linear-gradient(160deg, #fff 0%, #f5f9ff 100%); box-shadow: 0 14px 30px rgba(24,58,95,.06); }.document-preview-card { display: grid; gap: 1.05rem; margin-top: 1.2rem; padding: 1.25rem; border: 1px solid #e1e8ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 18px rgba(30,62,91,.05); }.preview-letter-head { display: grid; grid-template-columns: 46px 1fr; gap: .7rem; align-items: center; padding-bottom: .95rem; border-bottom: 2px solid #2c628d; }.preview-logo { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 9px; color: #3b6fca; background: #eaf1ff; font-size: .78rem; font-weight: 800; }.preview-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }.preview-letter-head strong,.preview-letter-head small { display: block; }.preview-letter-head strong { color: #294660; font-size: .82rem; }.preview-letter-head small { margin-top: .18rem; color: #8495a5; font-size: .7rem; }.preview-line { width: 82%; height: 7px; border-radius: 99px; background: #eaf0f5; }.preview-line.wide { width: 100%; }.preview-line.short { width: 48%; }.document-preview-card p { margin: .25rem 0 0; color: #72869a; font-size: .76rem; line-height: 1.55; }.branding-note { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #e1eaf1; }.branding-note strong { color: #426079; font-size: .78rem; }.branding-note span { position: relative; padding-left: 1rem; color: #6e8295; font-size: .78rem; }.branding-note span::before { content: ""; position: absolute; left: 0; top: .4rem; width: 6px; height: 6px; border-radius: 50%; background: #64bd9e; }
@media (max-width: 850px) { .company-layout { grid-template-columns: 1fr; }.company-preview { order: -1; } }

/* Elevated company settings workspace. */
.company-page { max-width: 1280px; margin: 0 auto; gap: 1.25rem; }.company-hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 2rem; min-height: 220px; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; color: #fff; background: linear-gradient(118deg, #102948 0%, #174c73 58%, #1c6b7b 100%); box-shadow: 0 22px 48px rgba(22,62,95,.2); }.company-hero::before,.company-hero::after { content: ""; position: absolute; border: 1px solid rgba(183,224,249,.16); border-radius: 50%; }.company-hero::before { width: 310px; height: 310px; right: -80px; top: -170px; }.company-hero::after { width: 210px; height: 210px; right: 130px; bottom: -170px; }.company-hero-copy,.company-hero-status { position: relative; z-index: 1; }.company-hero .eyebrow { color: #a9d7ed; }.company-hero h1 { margin: .35rem 0 .6rem; color: #fff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 760; line-height: 1.05; letter-spacing: -.06em; }.company-hero p { max-width: 610px; margin: 0; color: #c5ddec; line-height: 1.65; }.company-hero-status { display: flex; gap: .75rem; align-items: center; min-width: 205px; padding: .9rem 1rem; border: 1px solid rgba(211,237,255,.22); border-radius: 14px; background: rgba(5,34,63,.24); backdrop-filter: blur(8px); }.company-hero-status small,.company-hero-status strong { display: block; }.company-hero-status small { color: #a8c6df; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }.company-hero-status strong { margin-top: .2rem; color: #fff; font-size: .82rem; }.hero-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #6ee0b1; box-shadow: 0 0 0 5px rgba(110,224,177,.13); }.company-tabs { display: flex; gap: 1.7rem; padding: 0 .4rem; overflow-x: auto; border-bottom: 1px solid #dfe8f0; }.company-tabs a { position: relative; padding: .7rem 0 .85rem; color: #71859a; font-size: .82rem; font-weight: 720; text-decoration: none; white-space: nowrap; }.company-tabs a.active { color: #285f9b; }.company-tabs a.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 99px; background: #3a7bd5; }.company-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 1.4rem; align-items: start; }.company-panel { padding: clamp(1.3rem, 3vw, 2.1rem); border: 1px solid #e1e9f2; border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 14px 32px rgba(24,58,95,.06); }.section-heading { display: grid; grid-template-columns: 38px 1fr; gap: .9rem; align-items: start; padding-bottom: 1.35rem; border-bottom: 1px solid #e9eff5; }.section-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #396fbb; background: #e9f1ff; font-size: .7rem; font-weight: 800; }.section-heading h2,.branding-coverage h2 { margin: .3rem 0 .45rem; color: #1b3852; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.35rem; font-weight: 740; letter-spacing: -.025em; }.section-heading p { margin: 0; color: #71869a; font-size: .86rem; line-height: 1.55; }.company-form { margin-top: 1.35rem; }.form-section { padding: 1.2rem 0; border-bottom: 1px solid #e9eff5; }.form-section h3 { margin: 0 0 .95rem; color: #33516b; font-size: .86rem; font-weight: 780; }.form-section > p { margin: -.5rem 0 1rem; color: #778b9f; font-size: .78rem; }.company-form label > span:first-child { color: #486278; font-weight: 700; }.company-form input { min-height: 43px; border-color: #dbe5ee; }.company-form input::placeholder { color: #acb9c5; }.branding-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.8fr); gap: 1.2rem; align-items: center; }.logo-upload { position: relative; display: flex !important; gap: .75rem; align-items: center; padding: .9rem; border: 1px dashed #8aa9d1; border-radius: 13px; color: #486b91; background: #f7faff; cursor: pointer; transition: border-color .16s ease, background .16s ease; }.logo-upload:hover { border-color: #3f78c5; background: #eff6ff; }.logo-upload input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }.logo-upload > span:last-child { display: grid; gap: .18rem; }.logo-upload strong { color: #396394; font-size: .8rem; }.logo-upload small { color: #8197ad; font-size: .69rem; }.upload-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #fff; background: #477fc9; font-size: 1.2rem; }.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; }.form-actions p { margin: 0; color: #8497a9; font-size: .75rem; }.form-actions p span { color: #dd6752; font-weight: 800; }.form-actions .btn { padding: .7rem 1rem; }.form-actions .btn span { margin-left: .3rem; font-size: 1.1rem; }.company-sidebar { display: grid; gap: 1.15rem; }.document-preview-card,.branding-coverage { padding: 1.3rem; border: 1px solid #dfe8f1; border-radius: 20px; background: linear-gradient(160deg, #fff, #f6faff); box-shadow: 0 12px 28px rgba(24,58,95,.055); }.preview-card-title { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }.preview-badge { padding: .25rem .5rem; border-radius: 99px; color: #2f7566; background: #e5f7f0; font-size: .65rem; font-weight: 800; }.preview-paper { display: grid; gap: .8rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e0e6ed; border-radius: 8px; background: #fff; box-shadow: 0 7px 16px rgba(27,57,87,.07); }.preview-ref { display: flex; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid #e7edf2; color: #8191a1; font-size: .62rem; }.preview-signature { display: grid; gap: .25rem; padding-top: .45rem; color: #7a8e9e; font-size: .63rem; }.preview-signature b { color: #526d83; font-size: .68rem; }.document-preview-card > p { margin: .9rem 0 0; color: #75899d; font-size: .75rem; line-height: 1.55; }.branding-coverage { background: #fff; }.branding-coverage > div { display: grid; grid-template-columns: 29px 1fr; gap: .65rem; align-items: center; padding: .8rem 0; border-top: 1px solid #ebf0f5; }.coverage-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #5f83b3; background: #edf3fb; font-size: .6rem; font-weight: 800; }.branding-coverage p { margin: 0; }.branding-coverage strong,.branding-coverage small { display: block; }.branding-coverage strong { color: #405d75; font-size: .8rem; }.branding-coverage small { margin-top: .15rem; color: #8a9aaa; font-size: .69rem; }
@media (max-width: 900px) { .company-layout { grid-template-columns: 1fr; }.company-sidebar { grid-template-columns: 1fr 1fr; }.company-hero { min-height: 190px; }.company-hero-status { align-self: flex-end; } }
@media (max-width: 640px) { .company-page { gap: 1rem; }.company-hero { display: grid; align-items: start; min-height: 0; padding: 1.4rem; border-radius: 20px; }.company-hero h1 { font-size: 2rem; }.company-hero-status { min-width: 0; width: 100%; }.company-tabs { gap: 1.15rem; }.company-panel,.document-preview-card,.branding-coverage { border-radius: 16px; }.company-panel { padding: 1.15rem; }.section-heading { grid-template-columns: 32px 1fr; }.section-number { width: 30px; height: 30px; }.branding-section { grid-template-columns: 1fr; }.form-actions { align-items: stretch; flex-direction: column; }.form-actions .btn { width: 100%; }.company-sidebar { grid-template-columns: 1fr; }.hrms-form-grid { gap: .85rem; } }

/* Current company record and resilient field sizing. */
.company-form .hrms-form-grid > label { min-width: 0; }.company-form input { max-width: 100%; box-sizing: border-box; }.company-record-card { padding: 1.3rem; border: 1px solid #dfe8f1; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(24,58,95,.055); }.record-card-heading { display: flex; justify-content: space-between; gap: .7rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid #e8eef4; }.record-card-heading h2 { max-width: 215px; margin: .3rem 0 0; overflow-wrap: anywhere; color: #23435f; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.05rem; font-weight: 750; }.record-active { padding: .28rem .52rem; border-radius: 99px; color: #257460; background: #e5f8f0; font-size: .65rem; font-weight: 800; }.company-record-card dl { display: grid; gap: .85rem; margin: 1rem 0; }.company-record-card dl div { display: grid; gap: .18rem; }.company-record-card dt { color: #8294a5; font-size: .67rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }.company-record-card dd { margin: 0; overflow-wrap: anywhere; color: #506b82; font-size: .8rem; }.record-card-actions { display: flex; gap: .65rem; align-items: center; padding-top: 1rem; border-top: 1px solid #e8eef4; }.record-card-actions .btn { padding: .52rem .7rem; font-size: .74rem; }.record-card-actions form { margin: 0; }.delete-company { padding: .5rem .1rem; border: 0; color: #c95858; background: transparent; font-size: .74rem; font-weight: 750; }.delete-company:hover { color: #a53d3d; text-decoration: underline; }
@media (max-width: 900px) { .company-record-card { grid-column: 1 / -1; }.company-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.company-record-card { grid-row: 1; } }
@media (max-width: 640px) { .company-sidebar { grid-template-columns: 1fr; }.company-record-card { grid-column: auto; }.record-card-actions { justify-content: space-between; }.company-form input { font-size: 16px; } }

/* Dashboard refinement: an executive HR command-centre with a calm, focused hierarchy. */
.crm-dashboard { gap: 1.5rem; }
.crm-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2rem; min-height: 184px; padding: 2rem 2.15rem; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: linear-gradient(118deg, #10284c 0%, #174c73 58%, #1b6680 100%); box-shadow: 0 24px 50px rgba(20,53,91,.21); }
.crm-welcome::before { content: ""; position: absolute; width: 245px; height: 245px; right: 21%; top: -170px; border-radius: 50%; background: rgba(121,195,217,.12); }
.welcome-copy { position: relative; z-index: 1; max-width: 630px; }
.crm-welcome h1 { margin: .45rem 0 .6rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 750; line-height: 1.08; letter-spacing: -.055em; }
.crm-welcome p { max-width: 610px; font-size: .95rem; line-height: 1.65; }
.hero-summary { position: relative; z-index: 1; min-width: 154px; padding: 1rem 1.1rem; border: 1px solid rgba(202,230,255,.19); border-radius: 16px; background: rgba(7,28,59,.18); backdrop-filter: blur(6px); }
.hero-summary-label { display: block; color: #a7c9ed; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-summary strong { display: block; margin-top: .6rem; color: #fff; font-size: .9rem; }.hero-summary small { display: block; margin-top: .25rem; color: #b9d2e8; font-size: .72rem; }
.hero-avatars { display: flex; margin-top: .7rem; }.hero-avatars i,.hero-avatars b { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; border: 2px solid #1a4e72; border-radius: 50%; color: #234a6d; background: #d9ebff; font-size: .55rem; font-style: normal; font-weight: 800; }.hero-avatars i:nth-child(2) { color: #166656; background: #c9f3e6; }.hero-avatars i:nth-child(3) { color: #714b96; background: #eadbff; }.hero-avatars b { color: #fff; background: #f18a5e; }
.crm-actions { display: flex; flex-direction: column; align-items: stretch; min-width: 146px; }.crm-welcome .btn { justify-content: center; padding: .65rem .85rem; font-size: .8rem; font-weight: 750; }.crm-welcome .btn-brand span { margin-right: .25rem; font-size: 1rem; line-height: .8; }
.crm-kpi-card { min-height: 135px; padding: 1.35rem; border: 1px solid #e2eaf3; border-top: 0; border-radius: 18px; transition: transform .18s ease, box-shadow .18s ease; }.crm-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(28,66,104,.11); }.crm-kpi-card::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: .8rem; border-radius: 99px; background: #6b9fff; }.crm-kpi-card:nth-child(2)::before { background: #5dc59b; }.crm-kpi-card:nth-child(3)::before { background: #edb45e; }.crm-kpi-card:nth-child(4)::before { background: #a889de; }.crm-kpi-card::after { opacity: .68; }.crm-kpi-card strong { margin: .2rem 0 .35rem; font-size: 2.15rem; }.crm-kpi-card small { color: #6d879d; font-weight: 600; }
.crm-card { border: 1px solid #e3ebf3; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(24,58,95,.065); }.crm-card-heading { margin-bottom: 1.25rem; }.crm-card-heading h2,.insight-copy h2 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 720; letter-spacing: -.025em; }.crm-card-heading > a,.full-link,.table-link { color: #3b6fca; }.crm-card-heading > a:hover,.full-link:hover,.table-link:hover { color: #f07654; }
.crm-table td { padding: .92rem 0; }.avatar { border-radius: 10px; color: #3c68b8; background: linear-gradient(135deg, #e3edff, #f0f5ff); }.employee-status { border: 1px solid transparent; }.employee-status.active { border-color: #c9eddf; }.approvals-card { background: linear-gradient(155deg, #fff 0%, #fbfcff 70%, #f5f9ff 100%); }.approval-count { width: 36px; height: 36px; border-radius: 12px; color: #e86f4d; background: #fff0e9; }.approval-item { padding: .55rem; margin: 0 -.55rem; border-radius: 12px; transition: background .16s ease; }.approval-item:hover { background: #f3f7fc; }.full-link { padding-top: .9rem; border-top: 1px solid #edf1f6; }
.pipeline-card { background: linear-gradient(155deg, #fff 0%, #f9fbff 100%); }.schedule-card { background: linear-gradient(155deg, #fff 0%, #fbfffd 100%); }.pipeline-bar { height: 7px; }.schedule-line { box-shadow: 0 0 0 4px rgba(105,168,238,.11); }
.analytics-grid .crm-card { min-height: 305px; }.bar-chart i { background: #edf3f9; }.bar-chart b { background: linear-gradient(180deg, #79baff, #3e71cb); box-shadow: 0 4px 10px rgba(62,113,203,.19); }.donut-ring { box-shadow: inset 0 0 0 1px #eef3f7; }.crm-insight-row { border: 1px solid #d7e8e6; border-radius: 20px; background: linear-gradient(105deg, #e7f7f2 0%, #ecf4ff 100%); }.insight-action { color: #fff; background: linear-gradient(135deg, #1d726b, #277e9a); box-shadow: 0 8px 18px rgba(30,105,109,.18); }.insight-action:hover { color: #fff; transform: translateY(-1px); }
@media (max-width: 1060px) { .crm-welcome { grid-template-columns: 1fr auto; }.crm-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }.hero-summary { grid-column: 2; grid-row: 1; } }
@media (max-width: 767.98px) { .crm-welcome { display: grid; grid-template-columns: 1fr; gap: 1.1rem; padding: 1.45rem; }.hero-summary { grid-column: auto; grid-row: auto; }.crm-actions { flex-direction: column; align-items: stretch; }.crm-kpi-card { min-height: 125px; padding: 1.1rem; }.crm-kpi-card strong { font-size: 1.85rem; } }

.analytics-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.25rem; }.bar-chart { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: .9rem; height: 220px; padding-top: .6rem; }.bar-chart > div { display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; height: 100%; text-align: center; color: #6f8295; font-size: .72rem; }.bar-chart i { display: flex; align-items: end; height: 100%; border-radius: 9px 9px 4px 4px; background: #edf2f7; }.bar-chart b { width: 100%; border-radius: inherit; background: linear-gradient(180deg, #79b2ff, #3d6fcb); }.bar-chart strong { color: #254461; font-size: .78rem; }.donut-stat { display: flex; align-items: center; justify-content: center; gap: 1.8rem; min-height: 220px; }.donut-ring { display: grid; place-content: center; width: 145px; height: 145px; border-radius: 50%; text-align: center; background: radial-gradient(circle, #fff 55%, transparent 56%), conic-gradient(#5bbd9a 0 93%, #e6edf5 93% 100%); }.donut-ring strong { color: #24445c; font-size: 1.8rem; }.donut-ring span { color: #778a9c; font-size: .74rem; }.attendance-legend { display: grid; gap: .8rem; }.attendance-legend span { display: grid; grid-template-columns: 9px 1fr auto; gap: .45rem; align-items: center; color: #64798d; font-size: .82rem; }.attendance-legend i { width: 9px; height: 9px; border-radius: 50%; }.legend-present { background: #5bbd9a; }.legend-leave { background: #ffbd62; }.legend-absent { background: #eb8792; }.attendance-legend b { color: #2a4962; }
.record-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }.record-actions form { margin: 0; }.record-actions button { padding: .25rem .45rem; border: 0; border-radius: 7px; color: #54708c; background: #edf3fa; font-size: .72rem; font-weight: 700; }.record-actions .danger-action { color: #b95050; background: #fff0f0; }.letter-ready a { text-decoration: underline; }.reports-page { display: grid; gap: 1.25rem; }.report-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }.report-summary-grid article { padding: 1.2rem; border-radius: 17px; border: 1px solid #e2ebf3; background: #fff; box-shadow: 0 12px 28px rgba(37,68,97,.05); }.report-summary-grid span,.report-summary-grid strong { display: block; }.report-summary-grid span { color: #708599; font-size: .82rem; }.report-summary-grid strong { margin-top: .4rem; color: #1c416c; font-size: 1.8rem; }.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }.report-bars { display: grid; gap: .8rem; }.report-bars > div { display: grid; grid-template-columns: 110px 1fr 30px; gap: .65rem; align-items: center; color: #657b8f; font-size: .83rem; }.report-bars i { height: 9px; overflow: hidden; border-radius: 99px; background: #eaf0f5; }.report-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4d84db,#7db6ff); }.report-bars.warm b { background: linear-gradient(90deg,#ff9859,#f8c27a); }.report-bars strong { color: #2b4964; text-align: right; }.report-records { display: grid; gap: .65rem; }.report-records > div { display: grid; grid-template-columns: 1.2fr .6fr 1fr auto; gap: .8rem; align-items: center; padding: .8rem 0; border-top: 1px solid #ecf1f5; }.report-records strong { color: #29455e; }.report-records span,.report-records small { color: #788b9d; font-size: .8rem; }
.lifecycle-page { display: grid; gap: 1.25rem; }.lifecycle-form { display: grid; gap: 1.15rem; }.lifecycle-form section { padding: 1.45rem; border: 1px solid #e2eaf3; border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(30,58,95,.05); }.lifecycle-form h2 { margin: 0 0 1rem; color: #1c3d66; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; }.lifecycle-form label > span { display: block; margin-bottom: .4rem; color: #405a74; font-size: .83rem; font-weight: 700; }.lifecycle-form input,.lifecycle-form select { width: 100%; padding: .7rem .75rem; border: 1px solid #d8e3ee; border-radius: 9px; background: #fff; color: #223f59; }.lifecycle-form input:focus,.lifecycle-form select:focus { outline: 0; border-color: #5c91e8; box-shadow: 0 0 0 3px rgba(92,145,232,.13); }.lifecycle-form em,.validation-summary { color: #b64c4c; font-size: .78rem; font-style: normal; }.validation-summary ul { margin: 0; padding: .8rem 1.1rem; border-radius: 10px; background: #fff0f0; }.lifecycle-flow { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.2rem; border-radius: 14px; color: #46647f; background: #eef5ff; font-size: .82rem; font-weight: 750; }.lifecycle-flow span { padding: .42rem .7rem; border-radius: 999px; color: #214b82; background: #fff; }.lifecycle-flow i { flex: 1; height: 2px; background: #a9c9ee; }
.employee-profile-page,.onboarding-page { display: grid; gap: 1.25rem; }.employee-search { display: flex; align-items: end; gap: .8rem; padding: 1.1rem; border-radius: 15px; background: #eef5ff; }.employee-search label { flex: 1; color: #395773; font-size: .82rem; font-weight: 700; }.employee-search input { display: block; width: 100%; margin-top: .38rem; padding: .7rem .8rem; border: 1px solid #ccdbeb; border-radius: 9px; background: #fff; }.profile-card,.onboarding-employee,.start-onboarding,.onboarding-tasks { padding: 1.45rem; border: 1px solid #e1eaf2; border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(30,58,95,.05); }.profile-title,.onboarding-employee { display: flex; align-items: center; gap: .8rem; }.profile-title h2 { margin: 0; color: #1c3e65; font-family: Georgia, "Times New Roman", serif; }.profile-title p,.onboarding-employee small { display: block; margin: .18rem 0 0; color: #71879a; }.profile-title .employee-status,.onboarding-employee .employee-status { margin-left: auto; }.profile-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 1.35rem 0; padding: 1rem 0; border-top: 1px solid #e7eef4; border-bottom: 1px solid #e7eef4; }.profile-grid span,.profile-grid strong { display: block; }.profile-grid span { color: #788c9f; font-size: .75rem; }.profile-grid strong { margin-top: .25rem; color: #2a4761; }.profile-links { display: flex; flex-wrap: wrap; gap: .7rem; }.profile-links a { padding: .55rem .75rem; border-radius: 9px; color: #285c9b; background: #edf4ff; font-size: .82rem; font-weight: 700; }.start-onboarding p { color: #6b8194; }.onboarding-tasks { display: grid; gap: .75rem; }.onboarding-task { display: grid; grid-template-columns: minmax(180px,1.3fr) minmax(160px,1fr) auto auto; gap: .8rem; align-items: center; padding: .9rem 0; border-top: 1px solid #e8eef3; }.onboarding-task strong,.onboarding-task small { display: block; }.onboarding-task strong { color: #2a4862; }.onboarding-task small { margin-top: .15rem; color: #8092a1; font-size: .75rem; }.onboarding-task input[type=text] { padding: .55rem .65rem; border: 1px solid #d5e1ec; border-radius: 8px; }.task-toggle { color: #3c5e79; font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* Quotation generator */
.quotation-page{display:grid;gap:1.25rem;max-width:1440px;margin:0 auto}.quotation-hero{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;padding:2rem 2.3rem;border-radius:24px;color:#fff;background:linear-gradient(120deg,#112b4d,#176078 65%,#2a876f);box-shadow:0 20px 42px rgba(20,67,88,.2)}.quotation-hero .eyebrow{color:#aee6dc}.quotation-hero h1{margin:.35rem 0 .55rem;color:#fff;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.045em}.quotation-hero p{max-width:650px;margin:0;color:#d0e6ea}.quotation-hero-badge{display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(5,39,61,.24)}.quotation-hero-badge>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#225848;background:#b9f0dd}.quotation-hero-badge small,.quotation-hero-badge strong{display:block}.quotation-hero-badge small{color:#add2d6;font-size:.67rem;text-transform:uppercase}.quotation-hero-badge strong{margin-top:.15rem;font-size:.79rem}.quotation-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(450px,.94fr);gap:1.25rem;align-items:start}.quotation-editor{padding:1.65rem;border:1px solid #dfe8ee;border-radius:20px;background:#fff;box-shadow:0 14px 30px rgba(19,58,81,.06)}.quotation-section-title{display:flex;gap:.75rem;align-items:center;margin-bottom:1.1rem}.quotation-section-title>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#3773a5;background:#eaf3ff;font-size:.7rem;font-weight:800}.quotation-section-title h2{margin:0;color:#203f58;font-size:1.02rem}.quotation-section-title p{margin:.15rem 0 0;color:#7b8e9e;font-size:.77rem}.quotation-section-title.compact{margin:1.7rem 0 1rem;padding-top:1.45rem;border-top:1px solid #e9eef3}.add-line{margin-left:auto;border:0;border-radius:8px;padding:.48rem .7rem;color:#24649a;background:#e9f3ff;font-weight:750;font-size:.76rem}.quotation-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.quotation-form-grid label{color:#486278;font-size:.78rem;font-weight:700}.quotation-form-grid label span{display:block;margin-bottom:.35rem}.quotation-form-grid input,.quotation-form-grid select,.quotation-form-grid textarea,.quote-line input{width:100%;padding:.68rem .7rem;border:1px solid #d9e4ed;border-radius:9px;color:#213e56;background:#fff;font:inherit}.quotation-form-grid textarea{resize:vertical}.quotation-form-grid .wide{grid-column:1/-1}.quote-line-head,.quote-line{display:grid;grid-template-columns:minmax(0,1.8fr) .58fr .8fr .78fr 28px;gap:.55rem;align-items:center}.quote-line-head{padding:0 .15rem .45rem;color:#8295a5;font-size:.68rem;font-weight:800;text-transform:uppercase}.quote-line{padding:.48rem 0;border-top:1px solid #edf1f4}.quote-line strong{color:#284e6e;font-size:.79rem;text-align:right}.remove-line{border:0;color:#b35252;background:none;font-size:1.35rem;line-height:1}.quote-note-fields{margin-top:1.15rem}.quotation-preview-wrap{position:sticky;top:1.1rem}.quote-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-bottom:.75rem}.quotation-paper{min-height:780px;padding:2.1rem;border:1px solid #dbe4e8;background:#fff;box-shadow:0 22px 48px rgba(23,49,70,.13);color:#31495d}.quote-brand{display:flex;gap:.75rem;align-items:center;padding-bottom:1rem;border-bottom:3px solid #226c77}.quote-brand img{width:46px;height:46px;object-fit:contain}.quote-brand strong,.quote-brand small{display:block}.quote-brand strong{color:#19475e;font-size:1.04rem}.quote-brand small{margin-top:.18rem;color:#8292a0;font-size:.67rem}.quote-document-title{display:flex;justify-content:space-between;gap:1rem;padding:1.45rem 0}.quote-document-title>div span,.quote-client>span{display:block;color:#2c777c;font-size:.68rem;font-weight:850;letter-spacing:.14em}.quote-document-title>div strong{display:block;margin-top:.32rem;color:#203d54;font-size:1.15rem}.quote-document-title dl{display:grid;grid-template-columns:repeat(2,auto);gap:.25rem 1rem;margin:0;text-align:right}.quote-document-title dt{color:#8493a0;font-size:.64rem}.quote-document-title dd{margin:.15rem 0 0;color:#405c70;font-size:.7rem;font-weight:750}.quote-client{display:grid;gap:.2rem;max-width:50%;padding:.9rem 1rem;border-radius:8px;background:#f1f8f7}.quote-client strong{margin-top:.15rem;color:#254a5d;font-size:.84rem}.quote-client small{color:#718492;font-size:.68rem}.quote-preview-table{width:100%;margin-top:1.5rem;border-collapse:collapse;font-size:.71rem}.quote-preview-table th{padding:.62rem .35rem;color:#eef7f7;background:#245c69;text-align:left}.quote-preview-table th:not(:first-child),.quote-preview-table td:not(:first-child){text-align:right}.quote-preview-table td{padding:.65rem .35rem;border-bottom:1px solid #e8eef1;color:#4a6173}.quote-total{display:grid;gap:.4rem;width:48%;margin:1rem 0 0 auto}.quote-total>div{display:flex;justify-content:space-between;color:#607688;font-size:.73rem}.quote-total .grand{margin-top:.25rem;padding-top:.65rem;border-top:2px solid #2c6c77;color:#183f52;font-size:.9rem;font-weight:800}.quote-foot{display:grid;gap:.8rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #e3eaee;color:#708392;font-size:.67rem;line-height:1.5}.quote-foot p{margin:0}.quote-foot b{color:#405d70}.quote-foot>div{display:grid;gap:.85rem;justify-items:end;margin-top:.9rem;color:#667c8c}.quote-foot>div strong{color:#34566b;font-size:.69rem}@media(max-width:1050px){.quotation-layout{grid-template-columns:1fr}.quotation-preview-wrap{position:static}.quotation-paper{max-width:720px;margin:auto}}@media(max-width:650px){.quotation-hero{display:grid;padding:1.45rem}.quotation-form-grid{grid-template-columns:1fr}.quote-line-head{display:none}.quote-line{grid-template-columns:1fr 1fr 1fr 28px}.quote-line input:first-child{grid-column:1/-1}.quote-line strong{grid-column:1/4;text-align:left}.quotation-paper{padding:1.2rem}.quote-client{max-width:100%}}@media print{body>*:not(.app-shell){display:none}.side-menu,.topbar,.portal-footer,.quotation-hero,.quotation-editor,.quote-actions{display:none!important}.app-content,.portal-main,.quotation-page,.quotation-layout,.quotation-preview-wrap{display:block!important;margin:0!important;padding:0!important;background:#fff!important}.quotation-paper{box-shadow:none!important;border:0!important;width:100%!important;max-width:none!important;min-height:0!important}.quotation-preview-wrap{position:static!important}}
.quotation-history{padding:1.4rem;border:1px solid #dfe8ee;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(19,58,81,.05)}
.payslip-download-page .employee-module-card{display:grid;gap:1.25rem}.payslip-download{padding:.45rem .7rem;font-size:.76rem;white-space:nowrap}
.document-workspace { display: grid; gap: 1.35rem; }.document-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.document-toolbar h1 { margin: .35rem 0; color: #19344e; font-family: Georgia, "Times New Roman", serif; }.document-toolbar p { margin: 0; color: #778b9e; }.document-toolbar > div:last-child { display: flex; gap: .7rem; }.letter-paper { width: min(100%, 860px); min-height: 940px; margin: 0 auto; padding: 3.4rem 4rem 2.4rem; color: #273d52; background: #fff; box-shadow: 0 18px 55px rgba(22,48,78,.16); }.letter-header { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding-bottom: 1.35rem; border-bottom: 2px solid #dbe8f7; }.letter-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1b4476, #3475be); font-weight: 800; }.letter-header strong,.letter-header span { display: block; }.letter-header strong { color: #15375f; }.letter-header span { margin-top: .15rem; color: #71879b; font-size: .78rem; }.letter-meta { text-align: right; }.letter-meta span { font-size: .72rem; }.letter-body { padding-top: 2.3rem; line-height: 1.78; }.letter-subject { display: block; margin-bottom: 2rem; color: #163a66; font-weight: 800; }.letter-detail-grid,.payslip-employee { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 1.7rem 0; padding: 1.2rem; border: 1px solid #e2ebf3; border-radius: 12px; background: #f8fbff; }.letter-detail-grid span,.payslip-employee span { display: block; color: #73889c; font-size: .74rem; }.letter-detail-grid strong,.payslip-employee strong { display: block; margin-top: .2rem; color: #29455f; font-size: .88rem; }.signature-block { display: grid; gap: .2rem; margin-top: 4rem; }.signature-block span,.signature-block small { color: #71879b; font-size: .8rem; }.signature-block strong { margin-top: 1.5rem; }.letter-footer { margin-top: 3.3rem; padding-top: 1rem; border-top: 1px solid #e6edf3; color: #8494a3; font-size: .72rem; text-align: center; }.payslip-title { display: flex; justify-content: space-between; align-items: start; padding: 2rem 0 1.2rem; }.payslip-title h2 { margin: 0; color: #153b67; font-family: Georgia, "Times New Roman", serif; }.payslip-title span { color: #778b9e; font-size: .82rem; }.payslip-title > strong { padding: .65rem .8rem; border-radius: 10px; color: #196c58; background: #e6f8f0; }.salary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.salary-grid section { padding: 1.15rem; border: 1px solid #e0e9f1; border-radius: 12px; }.salary-grid h3 { margin: 0 0 .6rem; color: #1d466f; font-size: 1rem; }.salary-grid section div { display: flex; justify-content: space-between; padding: .56rem 0; color: #6e8396; font-size: .84rem; border-top: 1px solid #eff3f6; }.salary-grid section div:last-child { color: #294965; font-weight: 800; }.net-pay-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1rem 1.15rem; color: #35556c; background: #eef6ff; font-size: .84rem; }.net-pay-row strong { color: #174a80; font-size: 1rem; }
@media (max-width: 767.98px) { .analytics-grid { grid-template-columns: 1fr; }.donut-stat { justify-content: flex-start; }.document-toolbar { align-items: stretch; flex-direction: column; }.document-toolbar > div:last-child { flex-wrap: wrap; }.letter-paper { min-height: auto; padding: 1.7rem; }.letter-header { grid-template-columns: auto 1fr; }.letter-meta { grid-column: 1 / -1; text-align: left; }.letter-detail-grid,.payslip-employee,.salary-grid { grid-template-columns: 1fr; }.payslip-title,.net-pay-row { align-items: start; flex-direction: column; } }
@media print { .side-menu,.topbar,.portal-footer,.no-print { display: none !important; }.app-shell { display: block; }.app-content .portal-main { padding: 0; }.letter-paper { width: 100%; min-height: 0; padding: 1.5cm; box-shadow: none; }.portal-body { background: #fff; } }

/* Refined company profile: keeps the record readable before the edit form. */
.company-profile-page { max-width: 1360px; }
.company-hero-refined { min-height: 196px; align-items: center; }
.company-hero-refined h1 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -.045em; }
.company-hero-actions { position: relative; z-index: 1; display: grid; justify-items: end; gap: .8rem; }
.hero-edit-link { display: inline-flex; gap: .5rem; align-items: center; padding: .7rem .9rem; border: 1px solid rgba(228,244,255,.26); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font-size: .79rem; font-weight: 750; text-decoration: none; }
.hero-edit-link:hover { color: #fff; background: rgba(255,255,255,.2); }
.company-profile-page .company-panel { background: #fff; }
.company-profile-page .company-sidebar { position: sticky; top: 1.25rem; }
.company-record-card { position: relative; overflow: hidden; }
.company-record-card::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, #58a4eb, #54c49b); }
.company-card-brand { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1rem; overflow: hidden; border: 1px solid #dbe8f5; border-radius: 14px; color: #31639d; background: linear-gradient(135deg, #eaf3ff, #f2fbf7); font-size: .82rem; font-weight: 850; }
.company-card-brand img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.company-profile-page .company-form input { width: 100%; padding: .68rem .75rem; border: 1px solid #d9e3ed; border-radius: 10px; outline: none; background: #fff; color: #1d3851; font: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
.company-profile-page .company-form input:focus { border-color: #5d91e8; box-shadow: 0 0 0 3px rgba(93,145,232,.13); }
.company-profile-page .company-form label { display: grid; gap: .42rem; font-size: .84rem; }
.company-profile-page .form-section { padding: 1.35rem 0; }
@media (max-width: 900px) { .company-profile-page .company-sidebar { position: static; } }
@media (max-width: 640px) { .company-hero-actions { width: 100%; justify-items: stretch; }.hero-edit-link { justify-content: center; }.company-profile-page .company-form input { min-height: 46px; font-size: 16px; }.company-record-card { padding: 1.15rem; } }

/* Payroll review workflow */
.payroll-page { display: grid; gap: 1.35rem; }.payroll-form { display: grid; gap: 1.15rem; }.payroll-selection,.payroll-preview { padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid #e1e9f1; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(27,57,87,.055); }.payroll-selection { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 1rem; }.payroll-selection > .hrms-form-grid,.payroll-selection-actions { grid-column: 2; }.payroll-selection > .hrms-form-grid { margin-top: 1.25rem; }.payroll-selection h2,.payroll-preview h2 { margin: .25rem 0 .45rem; color: #193b59; font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: 1.3rem; }.payroll-selection p { margin: 0; color: #75889a; font-size: .84rem; line-height: 1.55; }.payroll-step { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #386fc0; background: #eaf2ff; font-size: .7rem; font-weight: 850; }.payroll-selection label { display: grid; gap: .42rem; color: #486278; font-size: .84rem; font-weight: 700; }.payroll-selection label b { color: #dd6752; }.payroll-selection input { width: 100%; min-height: 44px; padding: .68rem .75rem; border: 1px solid #d9e3ed; border-radius: 10px; outline: none; color: #1d3851; font: inherit; }.payroll-selection input:focus { border-color: #5d91e8; box-shadow: 0 0 0 3px rgba(93,145,232,.13); }.payroll-selection-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }.payroll-preview { border-color: #dbe9e4; background: linear-gradient(145deg,#fff,#f5fbf8); }.payroll-preview-heading,.payroll-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.payroll-employee { display: flex; gap: .8rem; align-items: center; margin: 1.1rem 0; padding: .95rem 0; border-top: 1px solid #e3eee9; border-bottom: 1px solid #e3eee9; }.payroll-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; color: #267763; background: #e0f5ed; font-size: .78rem; font-weight: 850; }.payroll-employee strong,.payroll-employee small { display: block; }.payroll-employee strong { color: #28475f; font-size: .93rem; }.payroll-employee small { margin-top: .17rem; color: #7d91a0; font-size: .75rem; }.payroll-salary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }.payroll-salary-grid > div { padding: .85rem; border: 1px solid #e1ebe8; border-radius: 12px; background: rgba(255,255,255,.75); }.payroll-salary-grid span,.payroll-salary-grid strong { display: block; }.payroll-salary-grid span { color: #8295a1; font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }.payroll-salary-grid strong { margin-top: .35rem; color: #2d5562; font-size: .94rem; }.payroll-salary-grid .payroll-gross { border-color: #b8dfd1; background: #e8f8f1; }.payroll-gross strong { color: #16705c; }.payroll-preview-footer { margin-top: 1rem; }.payroll-preview-footer p { margin: 0; color: #6e8792; font-size: .8rem; }.payroll-preview-footer .btn:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 760px) { .payroll-selection { grid-template-columns: 1fr; }.payroll-selection > .hrms-form-grid,.payroll-selection-actions { grid-column: auto; }.payroll-selection-actions { justify-content: stretch; }.payroll-selection-actions .btn { width: 100%; }.payroll-salary-grid { grid-template-columns: 1fr 1fr; }.payroll-preview-footer { align-items: stretch; flex-direction: column; }.payroll-preview-footer .btn { width: 100%; } }
@media (max-width: 480px) { .payroll-salary-grid { grid-template-columns: 1fr; }.payroll-selection input { min-height: 46px; font-size: 16px; } }

/* Role-based sign-in and employee self-service portal. */
.login-body { min-height: 100vh; margin: 0; color: #19344e; background: #edf4f5; font-family: Inter,ui-sans-serif,system-ui,sans-serif; }.login-shell { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); min-height: 100vh; }.login-intro { display: grid; align-content: center; gap: 1rem; padding: clamp(2rem,8vw,7rem); color: #f4fffc; background: radial-gradient(circle at 83% 14%,rgba(99,211,178,.22),transparent 25%),linear-gradient(135deg,#0e2d4a,#105d68); }.login-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #0d4b55; background: #ffe0a7; font-weight: 900; }.login-intro h1 { max-width: 540px; margin: 0; font-family: Georgia,serif; font-size: clamp(2.5rem,5vw,4.7rem); letter-spacing: -.06em; line-height: 1; }.login-intro p { max-width: 440px; margin: 0; color: #c6e5e3; font-size: 1.05rem; line-height: 1.65; }.login-points { display: grid; gap: .65rem; margin-top: 1.2rem; color: #d8efed; font-size: .88rem; }.login-card { display: grid; align-content: center; gap: 1.2rem; padding: clamp(2rem,6vw,5.5rem); background: #fff; }.login-card h2 { margin: .3rem 0; font-family: Georgia,serif; font-size: 2rem; }.login-card p { margin: 0; color: #71869a; }.login-card form { display: grid; gap: 1rem; }.login-card form > label { display: grid; gap: .4rem; color: #4b6479; font-size: .82rem; font-weight: 700; }.login-card input:not([type=radio]) { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid #d8e4ed; border-radius: 10px; font: inherit; box-sizing: border-box; }.login-card input:focus { outline: 0; border-color: #4b90d2; box-shadow: 0 0 0 3px rgba(75,144,210,.14); }.login-role { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }.login-role label { position: relative; cursor: pointer; }.login-role input { position: absolute; opacity: 0; }.login-role span { display: grid; gap: .15rem; padding: .75rem; border: 1px solid #dbe6ed; border-radius: 11px; }.login-role b { font-size: .86rem; }.login-role small { color: #8093a2; font-size: .7rem; }.login-role input:checked + span { border-color: #3f9983; color: #166b5a; background: #edfaf5; box-shadow: inset 0 0 0 1px #3f9983; }.login-submit { justify-content: center; min-height: 48px; }.login-hint { padding: .8rem; border-radius: 10px; background: #f5f8fb; font-size: .72rem; line-height: 1.55; }
.employee-body { min-height: 100vh; margin: 0; background: #f4f7f8; color: #1d3951; font-family: Inter,ui-sans-serif,system-ui,sans-serif; }.employee-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 100vh; }.employee-sidebar { display: flex; flex-direction: column; padding: 1.25rem .85rem; color: #c4d5e7; background: #102a49; }.employee-logo { display: flex; gap: .65rem; align-items: center; padding: .45rem .6rem 1.5rem; color: #fff; text-decoration: none; }.employee-logo > span,.employee-profile-mini > span,.employee-module-person > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #16485e; background: #f5c56d; font-size: .72rem; font-weight: 900; }.employee-logo b { font-size: .88rem; }.employee-logo small { display: block; margin-top: .15rem; color: #89a7ca; font-size: .57rem; letter-spacing: .1em; }.employee-sidebar nav { display: grid; gap: .18rem; }.employee-sidebar nav a { padding: .66rem .7rem; border-radius: 9px; color: #bcd0e6; font-size: .81rem; font-weight: 650; text-decoration: none; }.employee-sidebar nav a:hover,.employee-sidebar nav a.active { color: #fff; background: rgba(120,168,220,.17); }.employee-sidebar form { margin-top: auto; }.employee-sidebar button { width: 100%; padding: .65rem; border: 0; border-radius: 9px; color: #f1c5c5; background: rgba(230,117,117,.12); font: inherit; font-size: .78rem; cursor: pointer; }.employee-content { min-width: 0; }.employee-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.4rem,4vw,3.2rem); border-bottom: 1px solid #e2eaee; background: rgba(255,255,255,.8); }.employee-topbar span,.employee-topbar strong { display: block; }.employee-topbar span { color: #8195a7; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }.employee-topbar strong { margin-top: .18rem; font-size: .85rem; }.employee-topbar a { color: #39747e; font-size: .8rem; font-weight: 700; text-decoration: none; }.employee-content main { max-width: 1320px; padding: clamp(1.25rem,3vw,2.5rem); margin: 0 auto; }.employee-dashboard,.employee-module { display: grid; gap: 1.25rem; }.employee-welcome { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.4rem,3vw,2.4rem); overflow: hidden; border-radius: 22px; color: #fff; background: linear-gradient(115deg,#155565,#117580); }.employee-welcome h1,.employee-module h1 { margin: .3rem 0 .55rem; font-family: Georgia,serif; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.045em; }.employee-welcome p { max-width: 550px; margin: 0; color: #c8e9e7; }.employee-profile-mini { display: flex; gap: .7rem; align-items: center; min-width: 230px; padding: .85rem; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(6,49,56,.2); }.employee-profile-mini > span { background: #d8f0e6; }.employee-profile-mini strong,.employee-profile-mini small { display: block; }.employee-profile-mini strong { font-size: .83rem; }.employee-profile-mini small { margin-top: .18rem; color: #b8ddd9; font-size: .69rem; }.employee-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.employee-quick a { display: flex; gap: .55rem; align-items: center; padding: .85rem; border: 1px solid #e1e9ed; border-radius: 13px; color: #426075; background: #fff; font-size: .78rem; font-weight: 700; text-decoration: none; }.employee-quick b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #287663; background: #e6f7ef; }.employee-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .9rem; }.employee-stat-grid article,.employee-card,.employee-module-card { padding: 1.1rem; border: 1px solid #e2eaed; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(28,57,73,.035); }.employee-stat-grid span,.employee-stat-grid strong,.employee-stat-grid small { display: block; }.employee-stat-grid span { color: #8496a4; font-size: .7rem; text-transform: uppercase; }.employee-stat-grid strong { margin: .45rem 0; color: #28516a; font-size: 1.25rem; }.employee-stat-grid small { color: #7e919f; font-size: .71rem; }.employee-dashboard-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }.employee-card h2 { margin: .3rem 0 1rem; font-family: Georgia,serif; }.employee-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }.employee-card dt { color: #8b9baa; font-size: .66rem; text-transform: uppercase; }.employee-card dd { margin: .25rem 0 1rem; color: #3c586c; font-size: .8rem; font-weight: 700; }.employee-card a { color: #227566; font-size: .78rem; font-weight: 750; text-decoration: none; }.employee-card-tint { background: linear-gradient(135deg,#e8f7f1,#eff6ff); }.employee-card p { color: #638093; line-height: 1.6; }.employee-module header { padding: 1.5rem 0 .6rem; }.employee-module header p { max-width: 620px; margin: 0; color: #71889a; line-height: 1.6; }.employee-module-card { display: grid; gap: 1.2rem; }.employee-module-person { display: flex; gap: .7rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #e6edf0; }.employee-module-person strong,.employee-module-person small { display: block; }.employee-module-person small { margin-top: .18rem; color: #8093a2; font-size: .73rem; }.employee-module-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }.employee-module-links a { display: grid; grid-template-columns: 22px 1fr; gap: .25rem .55rem; align-items: center; padding: .85rem; border: 1px solid #e2eaed; border-radius: 11px; color: #38566b; font-size: .82rem; font-weight: 700; text-decoration: none; }.employee-module-links a span { grid-row: span 2; color: #3d9882; }.employee-module-links small { color: #92a1ac; font-size: .65rem; font-weight: 500; }
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-intro{min-height:280px}.employee-shell{grid-template-columns:1fr}.employee-sidebar{display:none}.employee-quick,.employee-stat-grid{grid-template-columns:repeat(2,1fr)}.employee-dashboard-grid{grid-template-columns:1fr}}@media(max-width:580px){.login-intro{padding:2rem}.login-card{padding:2rem 1.4rem}.employee-welcome{align-items:stretch;flex-direction:column}.employee-profile-mini{min-width:0}.employee-quick,.employee-stat-grid,.employee-card dl,.employee-module-links{grid-template-columns:1fr}.employee-content main{padding:1rem}.employee-welcome{padding:1.3rem}.employee-welcome h1,.employee-module h1{font-size:2rem}}

.topbar-tools { display: flex; align-items: center; gap: .55rem; }.topbar-tools form { margin: 0; }.topbar-logout { padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #eaf3ff; background: transparent; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }.topbar-logout:hover { background: rgba(255,255,255,.12); }
.letter-paper { position: relative; overflow: hidden; border-top: 5px solid #1e567e; }.letter-watermark { position: absolute; top: 46%; left: 50%; z-index: 0; width: 120%; color: #164d75; opacity: .055; font-family: Georgia,serif; font-size: clamp(3rem,8vw,6.5rem); font-weight: 700; text-align: center; white-space: nowrap; pointer-events: none; transform: translate(-50%,-50%) rotate(-28deg); }.letter-paper > :not(.letter-watermark) { position: relative; z-index: 1; }.letter-header { padding-top: .3rem; }.letter-body p { max-width: 720px; color: #314c63; }.letter-subject { padding-bottom: .65rem; border-bottom: 1px solid #d9e5ef; font-size: .92rem; letter-spacing: .02em; }.signature-block { min-width: 240px; padding-top: 1rem; border-top: 1px solid #dce7ef; }

/* Refined salary statement: compact hierarchy, clear attendance logic, and strong pay emphasis. */
.payslip-paper { width: min(100%, 960px); min-height: 0; padding: 0 0 2.2rem; border: 0; border-radius: 22px; background: #f8fbff; box-shadow: 0 24px 65px rgba(20,48,82,.16); }.payslip-paper .letter-header { grid-template-columns: auto 1fr auto; padding: 1.7rem 2rem; border: 0; color: #e9f2ff; background: radial-gradient(circle at 88% 14%,rgba(104,196,242,.25),transparent 24%),linear-gradient(120deg,#102947,#174a75 58%,#126e78); }.payslip-paper .letter-header strong { color: #fff; font-size: 1.1rem; }.payslip-paper .letter-header span { color: #c7dcf2; }.payslip-paper .letter-logo { color: #173b60; background: linear-gradient(135deg,#eef9ff,#9cdce4); }.payslip-paper .letter-meta span { color: #bcd5ec; }.payslip-paper .letter-watermark { color: #1a6385; opacity: .045; }.payslip-body { padding: 1.7rem 2rem 0; }.payslip-paper .payslip-title { align-items: center; padding: 0 0 1.35rem; }.payslip-kicker { color: #3681aa !important; font-size: .68rem !important; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.payslip-paper .payslip-title h2 { margin: .25rem 0 .3rem; color: #163a62; font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: clamp(1.7rem,3vw,2.25rem); letter-spacing: -.04em; }.payslip-paper .payslip-title > strong { display: grid; gap: .16rem; min-width: 145px; padding: .9rem 1rem; border: 1px solid #bde6d8; border-radius: 14px; color: #136b56; background: linear-gradient(135deg,#e7fbf2,#d7f6e9); box-shadow: 0 8px 18px rgba(16,113,91,.08); font-size: 1.25rem; text-align: right; }.payslip-paper .payslip-title > strong small { color: #39836f; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.payslip-paper .payslip-employee { grid-template-columns: 1.35fr 1fr 1fr 1.2fr; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid #dbe8f3; border-radius: 15px; background: rgba(255,255,255,.82); }.payslip-paper .payslip-employee > div { min-height: 83px; padding: 1rem; border-right: 1px solid #e5eef5; }.payslip-paper .payslip-employee > div:last-child { border-right: 0; }.payslip-paper .payslip-employee span { color: #7990a6; font-size: .65rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }.payslip-paper .payslip-employee strong { color: #1e405f; font-size: .87rem; overflow-wrap: anywhere; }.payslip-attendance { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 1.15rem 0; overflow: hidden; border: 1px solid #d4e8e5; border-radius: 15px; background: linear-gradient(105deg,#edf9f6,#eff7ff); }.payslip-attendance > div { padding: 1rem 1.1rem; border-right: 1px solid #d7ebe7; }.payslip-attendance > div:last-of-type { border-right: 0; }.payslip-attendance span,.payslip-attendance strong,.payslip-attendance small { display: block; }.payslip-attendance span { color: #4d7a78; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.payslip-attendance strong { margin: .2rem 0; color: #165b63; font-size: 1.55rem; }.payslip-attendance small { color: #66858d; font-size: .68rem; line-height: 1.35; }.payslip-attendance p { grid-column: 1 / -1; margin: 0; padding: .72rem 1.1rem; border-top: 1px solid #d7ebe7; color: #527487; background: rgba(255,255,255,.65); font-size: .75rem; line-height: 1.5; }.payslip-paper .salary-grid { gap: 1rem; }.payslip-paper .salary-grid section { padding: 0; overflow: hidden; border: 1px solid #dce8f1; border-radius: 15px; background: rgba(255,255,255,.9); }.payslip-paper .salary-grid h3 { display: flex; gap: .55rem; align-items: center; margin: 0; padding: 1rem 1.1rem; color: #244b6d; background: #f4f8fc; font-size: .9rem; }.payslip-paper .salary-grid h3 i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; color: #1c8270; background: #dff5ec; font-style: normal; }.payslip-paper .salary-grid section:nth-child(2) h3 i { color: #ae6655; background: #fff0eb; }.payslip-paper .salary-grid section div { margin: 0 1.1rem; padding: .78rem 0; color: #678096; font-size: .8rem; }.payslip-paper .salary-grid section .salary-total { margin: 0; padding: .9rem 1.1rem; color: #1c476b; background: #f7fbff; }.payslip-paper .net-pay-row { align-items: center; margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: 15px; color: #dff7ee; background: linear-gradient(110deg,#125365,#16706d); box-shadow: 0 12px 24px rgba(18,83,101,.14); }.payslip-paper .net-pay-row span,.payslip-paper .net-pay-row small { display: block; }.payslip-paper .net-pay-row span { font-size: .92rem; font-weight: 800; }.payslip-paper .net-pay-row small { margin-top: .15rem; color: #b6dfd8; font-size: .7rem; }.payslip-paper .net-pay-row strong { color: #fff; font-size: 1.5rem; }.payslip-paper .letter-footer { margin: 1.7rem 2rem 0; }
@media (max-width: 760px) { .payslip-paper .letter-header { grid-template-columns: auto 1fr; padding: 1.25rem; }.payslip-paper .letter-meta { grid-column: 1 / -1; }.payslip-body { padding: 1.25rem; }.payslip-paper .payslip-employee,.payslip-attendance { grid-template-columns: 1fr 1fr; }.payslip-paper .payslip-employee > div:nth-child(2) { border-right: 0; }.payslip-paper .payslip-employee > div:nth-child(-n+2) { border-bottom: 1px solid #e5eef5; }.payslip-attendance > div:nth-child(2) { border-right: 0; }.payslip-attendance > div:last-of-type { grid-column: 1 / -1; border-top: 1px solid #d7ebe7; }.payslip-paper .letter-footer { margin: 1.4rem 1.25rem 0; } }
@media (max-width: 500px) { .payslip-paper .payslip-title { align-items: stretch; flex-direction: column; }.payslip-paper .payslip-title > strong { text-align: left; }.payslip-paper .payslip-employee,.payslip-attendance { grid-template-columns: 1fr; }.payslip-paper .payslip-employee > div { border-right: 0; border-bottom: 1px solid #e5eef5; }.payslip-paper .payslip-employee > div:last-child { border-bottom: 0; }.payslip-attendance > div { border-right: 0; border-bottom: 1px solid #d7ebe7; }.payslip-attendance > div:last-of-type { border-top: 0; } }
.employee-welcome::after { content:""; position:absolute; right:3rem; top:2rem; width:86px; height:86px; border-radius:50%; background:rgba(255,255,255,.13); box-shadow:0 14px 28px rgba(3,44,52,.3); }.employee-welcome { position:relative; }.employee-welcome > * { position:relative; z-index:1; }.employee-module-card select,.employee-module-card input,.employee-module-card textarea { width:100%; box-sizing:border-box; padding:.68rem .75rem; border:1px solid #d9e3ed; border-radius:10px; font:inherit; }.employee-module-card label { display:grid; gap:.4rem; color:#486278; font-size:.82rem; font-weight:700; }.employee-module-card small { color:#8797a4; font-size:.68rem; font-weight:500; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body.portal-body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Aptos, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 22%),
    linear-gradient(180deg, #fcf7ef 0%, #f1f5f9 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.portal-shell {
  max-width: 1240px;
}

.portal-nav {
  padding: 1rem 0;
  background: transparent;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 700;
}

.brand-mark strong,
.brand-mark small {
  display: block;
}

.brand-mark small {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 14px 30px rgba(12, 74, 110, 0.25);
}

.nav-links {
  gap: 0.4rem;
}

.nav-link {
  color: var(--muted);
  padding: 0.75rem 1rem !important;
  border-radius: 999px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
}

.btn-nav,
.btn-brand,
.btn-ghost {
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
}

.btn-nav,
.btn-brand {
  color: white;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 14px 28px rgba(12, 74, 110, 0.22);
}

.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.portal-main {
  padding: 1rem 0 4rem;
}

.hero-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5rem;
  align-items: stretch;
}

.hero-copy,
.hero-panel,
.dashboard-strip,
.module-card,
.workflow-card,
.insight-panel,
.role-card,
.architecture-card,
.compact-page .module-card {
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow);
}

.hero-copy,
.hero-panel,
.dashboard-strip,
.insight-panel {
  border-radius: var(--radius-xl);
}

.hero-copy {
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.hero-copy::after {
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  filter: blur(10px);
}

.eyebrow,
.section-heading span,
.strip-label,
.workflow-owner,
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--brand-deep);
  font-weight: 700;
}

.hero-copy h1,
.section-heading h1,
.section-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
}

.hero-copy h1 {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 0.95;
  margin: 1rem 0;
  max-width: 10ch;
}

.hero-tagline {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 46rem;
}

.hero-summary,
.dashboard-strip p,
.module-card p,
.workflow-card p,
.insight-list p,
.architecture-card p {
  color: var(--muted);
  line-height: 1.65;
}

.hero-actions,
.hero-pill-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.hero-actions {
  margin: 2rem 0 1.2rem;
}

.hero-pill-row span {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(19, 34, 56, 0.08);
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-panel {
  padding: 1.4rem;
}

.hero-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.hero-panel-grid,
.module-grid,
.role-grid,
.architecture-grid {
  display: grid;
  gap: 1rem;
}

.hero-panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-card,
.module-card,
.workflow-card,
.role-card,
.architecture-card {
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.stat-card {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(19, 34, 56, 0.08);
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
}

.stat-label {
  font-weight: 700;
  margin: 0.2rem 0 0.4rem;
}

.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.5rem 1.7rem;
}

.dashboard-strip strong {
  display: block;
  margin: 0.35rem 0;
  font-size: 1.15rem;
}

.content-section {
  margin-top: 2rem;
}

.section-heading {
  margin-bottom: 1rem;
}

.section-heading h2,
.section-heading h1 {
  margin-top: 0.4rem;
  font-size: clamp(2rem, 3vw, 3rem);
}

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

.module-card ul,
.role-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.module-card li,
.role-card li {
  margin-bottom: 0.55rem;
}

.lifecycle-track {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0.75rem;
}

.lifecycle-step {
  padding: 1rem 0.8rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(19, 34, 56, 0.08);
  text-align: center;
}

.step-index {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.7rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(12, 74, 110, 0.18));
  font-weight: 700;
}

.split-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
}

.workflow-list,
.insight-list {
  display: grid;
  gap: 1rem;
}

.workflow-panel,
.insight-panel {
  padding: 1.6rem;
}

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

.role-card h3 {
  margin: 0.8rem 0;
}

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

.entity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.entity-list span {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--brand-deep);
  font-size: 0.92rem;
}

.portal-footer {
  padding: 0 0 2rem;
}

.portal-footer .portal-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
}

/* Application shell and module workspaces. */
.app-shell {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  min-height: 100vh;
}

.side-menu {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.45rem 1rem 1rem;
  color: #eaf5f2;
  background: linear-gradient(165deg, #082f3a 0%, #0c4a5c 56%, #093f42 100%);
  overflow-y: auto;
}

.side-menu .brand-mark { color: #fff; padding: 0.25rem 0.55rem 1.45rem; }
.side-menu .brand-mark small { color: #abcfcb; }
.side-menu .brand-logo { background: linear-gradient(135deg, #f59e0b, #ee6c4d); }
.menu-nav { display: grid; gap: 0.25rem; }
.menu-link, .menu-group-toggle, .submenu-link {
  width: 100%; border: 0; color: #c4ddda; background: transparent; text-align: left;
  border-radius: 12px; font: inherit; transition: background 160ms ease, color 160ms ease;
}
.menu-link, .menu-group-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.72rem 0.72rem; font-weight: 650; }
.menu-group-toggle > span:first-child { display: inline-flex; align-items: center; gap: 0.66rem; }
.menu-glyph { width: 1.1rem; display: inline-grid; place-items: center; color: #f9bd4d; font-size: 1rem; }
.menu-link:hover, .menu-group-toggle:hover, .menu-link.active, .menu-group.open .menu-group-toggle { color: #fff; background: rgba(255,255,255,.11); }
.menu-chevron { font-size: 1.1rem; transition: transform 180ms ease; }
.menu-group.open .menu-chevron { transform: rotate(180deg); }
.submenu { display: grid; gap: 0.16rem; max-height: 0; opacity: 0; overflow: hidden; padding-left: 1.75rem; transition: max-height 220ms ease, opacity 160ms ease, padding 180ms ease; }
.menu-group:not(.open) .submenu { display: none; }
.menu-group.open .submenu { max-height: 640px; opacity: 1; padding-top: 0.28rem; padding-bottom: 0.4rem; }
.submenu-link { padding: 0.5rem 0.72rem; font-size: .9rem; }
.submenu-link:hover, .submenu-link.active { color: #fff; background: rgba(245,158,11,.17); }
.sidebar-user { display: flex; gap: .7rem; align-items: center; margin-top: auto; padding: 1.2rem .55rem .3rem; border-top: 1px solid rgba(255,255,255,.14); }
.sidebar-user strong, .sidebar-user small { display: block; }.sidebar-user small { color: #9cc9c4; font-size: .78rem; }.user-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #083d43; background: #e6b54d; font-weight: 800; font-size: .78rem; }
.app-content { min-width: 0; }.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); background: rgba(255,253,248,.58); }.topbar-kicker { display: block; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }.topbar strong { font-size: 1.05rem; }.topbar-action { padding: .55rem .8rem; border-radius: 999px; color: #8d4b00; background: #fff0ca; font-size: .86rem; font-weight: 700; }.menu-mobile-toggle { display: none; border: 0; padding: .5rem; color: var(--ink); background: transparent; font-size: 1.3rem; }.app-content .portal-main { max-width: 1440px; padding: clamp(1.25rem, 3vw, 2.5rem); margin: 0 auto; }.app-content .portal-footer { display: flex; justify-content: space-between; padding: 1rem clamp(1.25rem, 4vw, 3.2rem) 2rem; }

.module-page { display: grid; gap: 1.45rem; }.page-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: clamp(1.4rem,3vw,2.35rem); border-radius: var(--radius-xl); background: linear-gradient(115deg, rgba(255,255,255,.88), rgba(224,244,237,.85)); box-shadow: var(--shadow); }.page-hero h1 { margin: .28rem 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem,4vw,3.35rem); }.page-hero p { max-width: 48rem; margin: 0; color: var(--muted); line-height: 1.6; }.page-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 21px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 12px 25px rgba(15,118,110,.22); font-size: .8rem; font-weight: 800; }.page-action { white-space: nowrap; }
.module-message { padding: .9rem 1.1rem; border: 1px solid #b9e7d5; border-radius: 13px; color: #19674f; background: #eaf9f2; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }.metric-card, .content-card { border: 1px solid rgba(255,255,255,.76); background: rgba(255,255,255,.68); backdrop-filter: blur(15px); box-shadow: 0 16px 44px rgba(19,34,56,.08); }.metric-card { padding: 1.25rem 1.4rem; border-radius: var(--radius-lg); }.metric-card span, .metric-card small { display: block; color: var(--muted); }.metric-card strong { display: block; margin: .4rem 0; font-size: 2rem; }.records-card { border-radius: var(--radius-xl); padding: clamp(1.25rem,3vw,2rem); }.records-toolbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }.records-toolbar h2 { margin: .35rem 0 0; font-family: Georgia, "Times New Roman", serif; }.search-box { display: flex; gap: .5rem; align-items: center; min-width: min(100%, 260px); padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }.directory-search-box { min-width: min(100%, 350px); transition: border-color .18s ease, box-shadow .18s ease; }.directory-search-box:focus-within { border-color: #3e77b5; box-shadow: 0 0 0 3px rgba(62,119,181,.12); }.directory-search-status { display: none; }.record-list { display: grid; gap: .7rem; }.record-row { display: grid; grid-template-columns: 10px 1.1fr 1.4fr auto auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid rgba(19,34,56,.08); border-radius: 15px; background: rgba(255,253,248,.68); }.record-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }.record-main strong,.record-main span { display: block; }.record-main span,.record-row p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }.status-chip { padding: .36rem .62rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }.status-pending { color: #8d4b00; background: #fff0ca; }.status-active { color: #08665e; background: #dcf6ef; }.status-upcoming { color: #405589; background: #e6ecff; }.record-more { border: 0; background: transparent; color: var(--muted); font-weight: 800; }.empty-records { padding: 1rem; color: var(--muted); text-align: center; }
.action-dialog[hidden] { display: none; }.action-dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; }.dialog-backdrop { position: absolute; inset: 0; background: rgba(8,35,43,.52); }.dialog-card { position: relative; z-index: 1; width: min(100%, 470px); padding: 2rem; border-radius: 24px; background: #fffdf8; box-shadow: 0 30px 80px rgba(0,0,0,.25); }.dialog-card h2 { margin: .45rem 0; font-family: Georgia, "Times New Roman", serif; }.dialog-card p { color: var(--muted); line-height: 1.6; }.dialog-card form { display: grid; gap: 1rem; margin-top: 1rem; }.dialog-card label { display: grid; gap: .4rem; font-weight: 700; }.dialog-card input,.dialog-card textarea { padding: .72rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }.dialog-close { position: absolute; right: 1rem; top: .8rem; border: 0; background: transparent; font-size: 1.7rem; color: var(--muted); }

/* Light CRM dashboard styling. */
.portal-body { background: linear-gradient(135deg, #f8fbff 0%, #f9fbfa 52%, #fffaf3 100%); }
.side-menu { color: #31465b; background: rgba(255,255,255,.9); border-right: 1px solid #e5edf3; box-shadow: 8px 0 30px rgba(34,67,99,.035); }
.side-menu .brand-mark { color: #16324d; }.side-menu .brand-mark small { color: #7a8a9b; }.side-menu .brand-logo { color: #fff; background: linear-gradient(135deg, #4f7cff, #6c9bff); box-shadow: 0 10px 22px rgba(79,124,255,.22); }.menu-link,.menu-group-toggle,.submenu-link { color: #5d7084; }.menu-glyph { color: #6b8af2; }.menu-link:hover,.menu-group-toggle:hover,.menu-link.active,.menu-group.open .menu-group-toggle { color: #31557d; background: #eef4ff; }.submenu-link:hover,.submenu-link.active { color: #31557d; background: #edf8f5; }.sidebar-user { border-top-color: #e5edf3; }.sidebar-user small { color: #8190a0; }.user-avatar { color: #4265bd; background: #eaf0ff; }.topbar { background: rgba(255,255,255,.74); border-bottom-color: #e8eff3; }.topbar-action { color: #3762b8; background: #edf3ff; }
.crm-dashboard { display: grid; gap: 1.35rem; }.crm-welcome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .1rem; }.crm-welcome h1 { margin: .35rem 0; color: #172d45; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.8vw, 3.05rem); letter-spacing: -.035em; }.crm-welcome p { margin: 0; color: #748496; }.crm-actions { display: flex; flex-wrap: wrap; gap: .7rem; }.btn-soft { color: #3860a8; border: 1px solid #d7e3f5; background: #fff; }.btn-soft:hover { color: #244f9e; background: #f5f8ff; }.crm-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }.crm-kpi-card { position: relative; overflow: hidden; padding: 1.25rem 1.35rem; border: 1px solid #e6edf3; border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 12px 28px rgba(37,68,97,.055); }.crm-kpi-card::after { content: ""; position: absolute; right: -22px; top: -24px; width: 75px; height: 75px; border-radius: 50%; background: #edf4ff; }.crm-kpi-card:nth-child(2)::after { background: #e8f8f1; }.crm-kpi-card:nth-child(3)::after { background: #fff4df; }.crm-kpi-card:nth-child(4)::after { background: #f2edff; }.crm-kpi-card span,.crm-kpi-card small { position: relative; z-index: 1; display: block; color: #758598; }.crm-kpi-card span { font-size: .86rem; font-weight: 650; }.crm-kpi-card strong { position: relative; z-index: 1; display: block; margin: .38rem 0; color: #183652; font-size: 1.95rem; letter-spacing: -.04em; }.crm-kpi-card small { color: #449777; font-size: .78rem; font-weight: 700; }.crm-main-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(340px,.9fr); gap: 1.25rem; }.crm-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }.crm-card { padding: 1.4rem; border: 1px solid #e7edf2; border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: 0 13px 30px rgba(37,68,97,.05); }.crm-card-heading { display: flex; justify-content: space-between; align-items: start; gap: .75rem; margin-bottom: 1.1rem; }.crm-card-heading h2,.insight-copy h2 { margin: .35rem 0 0; color: #19344e; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }.crm-card-heading > a,.full-link,.table-link { color: #5278c4; font-size: .84rem; font-weight: 700; white-space: nowrap; }.crm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }.crm-table th { padding: 0 0 .75rem; color: #8997a6; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-align: left; text-transform: uppercase; }.crm-table td { padding: .8rem 0; color: #607286; border-top: 1px solid #edf1f4; }.employee-cell { display: flex; align-items: center; gap: .65rem; color: #26415b; }.employee-cell strong,.employee-cell small { display: block; }.employee-cell small { margin-top: .12rem; color: #8997a6; font-size: .78rem; }.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; color: #4468be; background: #eaf0ff; font-size: .72rem; font-weight: 800; }.avatar-warm { color: #af7154; background: #fff0e7; }.employee-status { display: inline-block; padding: .28rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 750; }.employee-status.active { color: #287b62; background: #e7f7f0; }.employee-status.on-leave { color: #a16b14; background: #fff4dd; }.employee-status.probation { color: #725ab1; background: #f0edff; }.approval-count { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #c06b43; background: #fff0e7; font-size: .82rem; font-weight: 800; }.approval-list { display: grid; gap: .95rem; }.approval-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; }.approval-item strong,.approval-item small { display: block; }.approval-item strong { color: #30495f; font-size: .88rem; }.approval-item small { max-width: 185px; margin-top: .12rem; overflow: hidden; color: #8493a1; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.due-label { color: #c07025; font-size: .7rem; font-weight: 750; }.full-link { display: block; margin-top: 1.25rem; }.pipeline-list { display: grid; gap: 1rem; }.pipeline-stage { display: grid; grid-template-columns: 9px 1fr auto; gap: .65rem; align-items: center; color: #52687b; font-size: .88rem; }.pipeline-stage strong { color: #284660; }.pipeline-swatch { width: 9px; height: 9px; border-radius: 50%; }.sky { background: #69a8ee; }.violet { background: #9983dc; }.amber { background: #f2b761; }.mint { background: #5fc49f; }.peach { background: #ef927c; }.pipeline-bar { grid-column: 2 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #edf1f5; }.pipeline-bar i { display: block; height: 100%; border-radius: inherit; }.pipeline-bar i.sky { background: #79b4f2; }.pipeline-bar i.violet { background: #a18dde; }.pipeline-bar i.amber { background: #f2bc69; }.pipeline-bar i.mint { background: #68c9a7; }.schedule-list { display: grid; gap: 1.1rem; }.schedule-item { display: grid; grid-template-columns: 44px 3px 1fr; align-items: stretch; gap: .7rem; }.schedule-item time { padding-top: .1rem; color: #7e8e9e; font-size: .78rem; font-weight: 750; }.schedule-line { min-height: 38px; border-radius: 99px; }.schedule-item strong,.schedule-item small { display: block; }.schedule-item strong { color: #355066; font-size: .88rem; }.schedule-item small { margin-top: .18rem; color: #8896a4; font-size: .76rem; }.crm-insight-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 1.8rem; border-radius: 20px; background: linear-gradient(110deg, #eaf7f3, #eef5ff); border: 1px solid #dcece8; }.insight-copy h2 { max-width: 680px; }.insight-copy p { margin: .55rem 0 0; color: #6f8593; }.insight-action { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; color: #216c5f; background: #fff; font-weight: 750; white-space: nowrap; }.insight-action span { font-size: 1.15rem; }

.compact-page {
  padding-bottom: 2rem;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(15, 118, 110, 0.18);
}

@media (max-width: 1199.98px) {
  .hero-section,
  .split-layout,
  .module-grid,
  .architecture-grid,
  .role-grid,
  .dashboard-strip {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
  .portal-main {
    padding-top: 0.3rem;
  }

  .hero-section,
  .hero-panel-grid,
  .dashboard-strip,
  .module-grid,
  .split-layout,
  .role-grid,
  .architecture-grid,
  .lifecycle-track {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .hero-panel,
  .workflow-panel,
  .insight-panel {
    padding: 1.4rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: 2.7rem;
  }

  .portal-footer .portal-shell {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-shell { display: block; }.side-menu { position: fixed; z-index: 10; width: min(290px, 88vw); transform: translateX(-105%); transition: transform 220ms ease; }.side-menu.mobile-open { transform: translateX(0); }.menu-mobile-toggle { display: block; }.topbar { justify-content: flex-start; }.topbar-action { margin-left: auto; }.page-hero { grid-template-columns: auto 1fr; }.page-action { grid-column: 1 / -1; }.metric-grid { grid-template-columns: 1fr; }.records-toolbar { align-items: stretch; flex-direction: column; }.record-row { grid-template-columns: 10px 1fr auto; }.record-row p { display: none; }.record-more { display: none; }.app-content .portal-footer { flex-direction: column; }
  .crm-welcome,.crm-main-grid,.crm-lower-grid,.crm-insight-row { display: grid; grid-template-columns: 1fr; }.crm-kpi-grid { grid-template-columns: 1fr 1fr; }.crm-actions { margin-top: .4rem; }.crm-table-wrap { overflow-x: auto; }.crm-table { min-width: 650px; }.crm-insight-row { padding: 1.35rem; }.insight-action { justify-content: space-between; }.approval-item small { max-width: none; }
}

body.portal-body { background: radial-gradient(circle at 92% 2%, rgba(68,118,255,.14), transparent 26%), linear-gradient(135deg, #f3f7fd 0%, #f9fbff 55%, #f4f8f7 100%); }
.side-menu { color: #dbe8ff; background: linear-gradient(180deg, #101e3b 0%, #132a52 52%, #153554 100%); border-right: 0; box-shadow: 12px 0 34px rgba(8,22,48,.14); }
.side-menu .brand-mark { color: #fff; }.side-menu .brand-mark small { color: #a9c0e6; }.side-menu .brand-logo { background: linear-gradient(135deg, #ffad4d, #ff7a5c); }.menu-link,.menu-group-toggle,.submenu-link { color: #b6cae9; }.menu-glyph { color: #7eb2ff; }.menu-link:hover,.menu-group-toggle:hover,.menu-link.active,.menu-group.open .menu-group-toggle { color: #fff; background: rgba(126,178,255,.15); }.submenu-link:hover,.submenu-link.active { color: #fff; background: rgba(255,173,77,.16); }.sidebar-user { border-top-color: rgba(255,255,255,.14); }.sidebar-user small { color: #9eb8dc; }.user-avatar { color: #183763; background: #d9e8ff; }.topbar { color: #e9f2ff; background: linear-gradient(100deg, #11254a, #163965); border-bottom: 0; }.topbar-kicker { color: #aac6ec; }.topbar-action { color: #143b72; background: #dceaff; }
.menu-link > span,.menu-group-toggle > span:first-child { display: inline-flex; align-items: center; min-width: 0; gap: .58rem; }.menu-order { display: inline-grid; place-items: center; width: 26px; height: 20px; flex: 0 0 auto; border: 1px solid rgba(170,201,239,.25); border-radius: 7px; color: #86b9ff; font-size: .62rem; font-weight: 800; letter-spacing: .04em; }.menu-link.active .menu-order,.menu-group.open .menu-order { border-color: rgba(255,182,84,.38); color: #ffbc62; background: rgba(255,182,84,.1); }.menu-nav { position: relative; gap: .35rem; }.menu-group { position: relative; }.menu-group.open .submenu { margin-left: .68rem; border-left: 1px solid rgba(161,197,238,.2); }.submenu-link { position: relative; padding-left: 1rem; }.submenu-link::before { content: ""; position: absolute; left: -.08rem; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #7295cc; transform: translateY(-50%); }.submenu-link.active::before { background: #ffb75d; box-shadow: 0 0 0 4px rgba(255,183,93,.11); }.side-menu::before { content: "HRMS FLOW"; display: block; margin: 0 .55rem .65rem; color: #7ea5d9; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.crm-welcome { position: relative; padding: 1.45rem 1.7rem; overflow: hidden; border-radius: 22px; color: #edf4ff; background: linear-gradient(115deg, #142b52, #1e4e78); box-shadow: 0 18px 42px rgba(25,55,98,.18); }.crm-welcome::after { content: ""; position: absolute; right: -4rem; bottom: -5rem; width: 230px; height: 230px; border: 30px solid rgba(132,185,255,.16); border-radius: 50%; }.crm-welcome h1 { position: relative; z-index: 1; color: #fff; }.crm-welcome p { position: relative; z-index: 1; color: #c4d7ef; }.crm-welcome .eyebrow { color: #94c6ff; }.crm-actions { position: relative; z-index: 1; }.crm-welcome .btn-soft { color: #e8f2ff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }.crm-welcome .btn-brand { background: linear-gradient(135deg, #ff9a4a, #f56d58); box-shadow: none; }.crm-card { box-shadow: 0 14px 32px rgba(24,58,95,.07); }.crm-kpi-card { border-top: 3px solid #78aaff; }.crm-kpi-card:nth-child(2) { border-top-color: #65c7a4; }.crm-kpi-card:nth-child(3) { border-top-color: #f6b657; }.crm-kpi-card:nth-child(4) { border-top-color: #ad92e9; }
.dialog-card { width: min(100%, 820px); max-height: min(86vh, 800px); overflow-y: auto; border: 1px solid #dbe6f2; background: #fdfefe; }.dialog-card p { margin-bottom: 1.25rem; }.hrms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1rem; }.dialog-card label { color: #40566a; font-size: .86rem; }.dialog-card label > span b { color: #e36d55; }.dialog-card input,.dialog-card textarea,.dialog-card select { width: 100%; padding: .7rem .75rem; border: 1px solid #d9e3ed; border-radius: 10px; outline: none; background: #fff; color: #1d3851; font: inherit; }.dialog-card input:focus,.dialog-card textarea:focus,.dialog-card select:focus { border-color: #5d91e8; box-shadow: 0 0 0 3px rgba(93,145,232,.13); }.form-field-wide { grid-column: 1 / -1; }.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.3rem; }
@media (max-width: 767.98px) { .hrms-form-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; } }
/* Launch Desk: separate visual language for HR launch operations */
.launch-desk-page{max-width:1280px;margin:0 auto;color:#17281f}.launch-hero{display:flex;align-items:flex-end;justify-content:space-between;padding:28px 8px 42px;background:radial-gradient(circle at 80% 15%,#d8f0df 0,transparent 28%)}.launch-kicker,.launch-section-title span,.launch-privacy{font:700 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#37745b}.launch-hero h1{font-size:clamp(2.7rem,5vw,4.7rem);line-height:.96;letter-spacing:-.07em;margin:13px 0 17px;color:#193326}.launch-hero h1 em{font-family:Georgia,serif;font-weight:400;color:#e15c3d}.launch-hero p{max-width:620px;color:#617067;font-size:1.03rem;line-height:1.7}.launch-orbit{position:relative;width:125px;height:125px;display:grid;place-items:center;border:1px dashed #87b59b;border-radius:50%;color:#276f54;text-align:center}.launch-orbit:before{content:"";position:absolute;inset:12px;border-radius:50%;background:#dcf1df}.launch-orbit span,.launch-orbit small{z-index:1}.launch-orbit span{font-size:2rem}.launch-orbit small{font-size:.6rem;letter-spacing:.12em;margin-top:-26px}.launch-workspace{display:grid;grid-template-columns:minmax(330px,.88fr) 1.12fr;gap:20px}.launch-form,.launch-result{background:#fffefa;border:1px solid #d9ddd5;padding:28px;box-shadow:0 12px 25px rgba(32,67,47,.04)}.launch-section-title{display:flex;gap:12px;align-items:center;border-bottom:1px solid #e4e7df;padding-bottom:18px;margin-bottom:21px}.launch-section-title>b{font:700 11px ui-monospace,Consolas,monospace;color:#fff;background:#297457;padding:7px}.launch-section-title span{display:block;margin-bottom:4px}.launch-section-title h2{margin:0;font-size:1.08rem;letter-spacing:-.03em}.launch-form label{display:block;margin-top:14px;font-size:.76rem;font-weight:800;color:#31483b}.launch-form label>span{display:block;margin-bottom:7px}.launch-form input,.launch-form textarea{width:100%;border:1px solid #d7ddd4;border-radius:4px;padding:10px 11px;background:#fff;font:inherit;outline-color:#438568}.launch-form textarea{resize:vertical}.launch-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.launch-submit{display:flex;justify-content:space-between;width:100%;border:0;border-radius:4px;padding:13px 16px;margin-top:22px;background:#1f7054;color:#fff;font-weight:800;cursor:pointer}.launch-submit:hover{background:#175a43}.launch-submit:disabled{opacity:.7;cursor:wait}.launch-result{min-height:520px}.launch-status{font:700 .74rem ui-monospace,Consolas,monospace;color:#5b7466;background:#edf7ee;border-left:3px solid #47916d;padding:10px 12px}.launch-empty{max-width:330px;margin:115px auto;text-align:center;color:#78867d}.launch-empty i{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fce8e2;color:#d85a3c;font-style:normal;font-size:1.5rem}.launch-empty h3{font-size:1.1rem;color:#334b3d;margin:14px 0 7px}.launch-empty p{font-size:.88rem;line-height:1.7}.launch-output{white-space:pre-wrap;margin-top:20px;font-size:.93rem;line-height:1.75;color:#273a2f}.launch-privacy{text-align:center;margin:24px 0 0;color:#819087}@media(max-width:900px){.launch-workspace{grid-template-columns:1fr}.launch-orbit{display:none}}@media(max-width:520px){.launch-split{grid-template-columns:1fr}.launch-form,.launch-result{padding:20px}.launch-hero{padding-bottom:28px}}
.document-delivery-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:16px 18px;background:#e9f6ee;border:1px solid #b8ddc7;border-radius:8px}.document-delivery-panel div{display:grid;gap:3px}.document-delivery-panel span{font-size:.85rem;color:#4f6658}.document-delivery-panel .btn{white-space:nowrap}@media(max-width:640px){.document-delivery-panel{align-items:flex-start;flex-direction:column}}
.attendance-form{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr)) auto;gap:14px;align-items:end}.attendance-form label{display:grid;gap:6px;font-size:.8rem;font-weight:700}.attendance-form input,.attendance-decision input{border:1px solid #d6dfd8;border-radius:4px;padding:9px;background:#fff}.attendance-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:800}.attendance-badge.pending{color:#845600;background:#fff1cc}.attendance-badge.confirmed{color:#126044;background:#dff4e8}.attendance-badge.rejected{color:#a13125;background:#ffe4e0}.attendance-history{font-size:.73rem;line-height:1.5;margin-bottom:4px}.attendance-history small{display:block;color:#6b766e}.attendance-decision{display:flex;flex-wrap:wrap;gap:7px}.attendance-decision input{width:100%;font-size:.78rem}.attendance-decision .btn{font-size:.78rem;padding:7px 9px}@media(max-width:760px){.attendance-form{grid-template-columns:1fr}.attendance-form .btn{width:max-content}}
.attendance-report-page{display:grid;gap:1.25rem}.attendance-report-hero{align-items:center}.attendance-header-stat{display:flex;align-items:center;gap:.75rem}.attendance-header-stat>div:last-of-type{display:grid;gap:.2rem}.attendance-header-stat strong{font-size:.85rem;color:#0f172a}.attendance-header-stat small{font-size:.72rem;color:#64748b;white-space:nowrap}.attendance-header-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}.attendance-header-ring span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:#0f172a;font-size:.78rem;font-weight:800}.attendance-filter{display:flex;align-items:end;gap:1rem;flex-wrap:wrap}.attendance-filter label{display:grid;gap:.4rem;color:#475569;font-size:.84rem;font-weight:700}.attendance-filter input{min-width:175px}.attendance-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.attendance-stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:1.25rem;box-shadow:0 8px 24px rgba(15,23,42,.06);display:grid;gap:.38rem}.attendance-stat-card span{font-size:.8rem;color:#64748b}.attendance-stat-card strong{font-size:1.8rem;color:#0f172a}.attendance-stat-card small{margin:0;color:#64748b;font-size:.82rem}.attendance-range-count{padding:.35rem .65rem;border-radius:999px;background:#eef7f7;color:#0f766e;font-size:.8rem;font-weight:700}@media(max-width:900px){.attendance-overview-grid{grid-template-columns:repeat(2,1fr)}.attendance-header-stat{width:100%;justify-content:flex-start}}@media(max-width:600px){.attendance-overview-grid{grid-template-columns:1fr}.attendance-header-stat{flex-wrap:wrap}.attendance-filter{align-items:stretch}.attendance-filter label,.attendance-filter input{width:100%}}
.attendance-three-day{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));align-items:stretch}.attendance-three-day .attendance-day{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border:1px solid #dce5dd;border-radius:7px;background:#fbfdfb}.attendance-three-day .attendance-day strong{grid-column:1/-1;font-size:.85rem;color:#235a45}.attendance-three-day .btn{grid-column:1/-1;justify-self:start}@media(max-width:760px){.attendance-three-day{grid-template-columns:1fr}}
.onboarding-pdf-upload{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(190px,.85fr) auto;gap:1rem;align-items:end;padding:1.25rem 1.45rem;border:1px solid #cfe0f5;border-radius:19px;background:linear-gradient(135deg,#f4f8ff,#f7fcfa);box-shadow:0 14px 28px rgba(30,58,95,.05)}.onboarding-pdf-upload h2{margin:.25rem 0;color:#1c3e65;font-size:1.18rem}.onboarding-pdf-upload p{margin:.45rem 0 0;color:#687f93;font-size:.86rem;line-height:1.5}.pdf-file-input{display:grid;gap:.35rem;color:#3a5874;font-size:.8rem;font-weight:700}.pdf-file-input input{width:100%;padding:.6rem;border:1px dashed #9eb9d6;border-radius:9px;background:#fff}.pdf-file-input small{color:#708699;font-weight:500}.completed-onboarding-card{margin-top:.25rem}@media(max-width:980px){.onboarding-pdf-upload{grid-template-columns:1fr}.onboarding-pdf-upload .btn{width:100%}}
.recruitment-page{display:grid;gap:1.25rem}.recruitment-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.recruitment-form{display:grid;gap:.8rem;padding:1.35rem}.recruitment-form h2{margin:0;color:#193b61;font-size:1.25rem}.recruitment-form label{display:grid;gap:.35rem;color:#405d78;font-size:.82rem;font-weight:700}.recruitment-form input,.recruitment-form select,.recruitment-form textarea{width:100%;padding:.68rem .72rem;border:1px solid #cfdeec;border-radius:9px;background:#fff;font:inherit}.recruitment-form textarea{resize:vertical}.screening-score{color:#16715c;font-size:1.08rem}.screening-detail{min-width:280px}.screening-detail strong,.screening-detail small{display:block;white-space:pre-line}.screening-detail strong{font-size:.78rem;color:#3f576c}.screening-detail small{margin-top:.45rem;color:#708496;font-size:.74rem}@media(max-width:800px){.recruitment-setup-grid{grid-template-columns:1fr}}
.email-monitor-page{display:grid;gap:1.25rem}.email-monitor-flow{background:linear-gradient(135deg,#f8fbff,#eef7f6)}.email-monitor-flow>div{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-family:ui-monospace,Consolas,monospace}.email-monitor-flow strong{color:#133d5f}.email-monitor-flow>div>span{color:#17877f;font-weight:800}.email-monitor-flow p{margin:1rem 0 0;color:#64748b}.email-monitor-priority{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border:1px solid #dce6ef;border-radius:8px;background:#fff}.email-monitor-priority b{width:12px;height:12px;border-radius:50%;display:inline-block}.email-monitor-priority .urgent,.email-priority.urgent{background:#fee2e2;color:#a13125}.email-monitor-priority .urgent{background:#ef476f}.email-monitor-priority .important{background:#f4bd3b}.email-monitor-priority .normal{background:#4fc989}.email-priority{padding:4px 9px;border-radius:999px;font-size:.75rem;font-weight:800}.email-priority.important{background:#fef3c7;color:#92400e}.email-priority.normal{background:#dcfce7;color:#166534}@media(max-width:700px){.email-monitor-flow>div{align-items:flex-start;flex-direction:column}}

/* Mobile and tablet foundation for both HR and employee portals. */
img,svg,canvas{max-width:100%}.portal-main,.employee-content main{min-width:0}.crm-table-wrap{max-width:100%;overflow-x:auto}.btn{min-height:40px}.dialog-card{box-sizing:border-box}@media(max-width:980px){.portal-main{padding:1.25rem}.crm-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-main-grid,.crm-lower-grid,.analytics-grid,.report-grid{grid-template-columns:1fr}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-task{grid-template-columns:1fr 1fr auto}.onboarding-task strong{grid-column:1/-1}.employee-search{align-items:stretch;flex-direction:column}.employee-search .btn{width:100%}}@media(max-width:767.98px){body{overflow-x:hidden}.side-menu{top:0;bottom:0;height:auto;overflow-y:auto;padding-bottom:1.2rem}.side-menu.mobile-open{box-shadow:20px 0 52px rgba(6,22,48,.32)}.topbar{gap:.65rem;min-height:62px;padding:.65rem .85rem}.topbar-kicker{display:none}.topbar strong{font-size:.83rem}.topbar-tools{gap:.35rem}.topbar-action{max-width:76px;overflow:hidden;font-size:0;white-space:nowrap}.topbar-action:before{content:"Alerts";font-size:.72rem}.topbar-logout{padding:.46rem .6rem;font-size:.72rem}.portal-main{padding:1rem}.page-hero,.document-toolbar,.record-card-heading,.crm-card-heading{align-items:stretch;flex-direction:column}.page-hero{gap:.85rem;padding:1.25rem}.page-hero h1{font-size:1.75rem}.page-hero .btn,.document-toolbar .btn{width:100%;justify-content:center}.document-toolbar>div:last-child{display:grid;grid-template-columns:1fr 1fr}.crm-card{padding:1rem;border-radius:16px}.crm-kpi-grid{grid-template-columns:1fr 1fr;gap:.7rem}.crm-kpi-card{padding:1rem;border-radius:15px}.crm-kpi-card strong{font-size:1.6rem}.crm-table{min-width:610px;font-size:.8rem}.crm-table th{font-size:.64rem}.crm-table td{padding:.72rem 0}.report-summary-grid{grid-template-columns:1fr 1fr}.dialog-card{width:calc(100% - 1.25rem);margin:.65rem auto;border-radius:16px}.dialog-actions{align-items:stretch;flex-direction:column-reverse}.dialog-actions .btn{width:100%}.hrms-form-grid{grid-template-columns:1fr}.onboarding-task{grid-template-columns:1fr;gap:.5rem}.onboarding-task strong{grid-column:auto}.profile-grid{grid-template-columns:1fr 1fr}.profile-title,.onboarding-employee{align-items:flex-start;flex-wrap:wrap}.profile-title .employee-status,.onboarding-employee .employee-status{margin-left:0}.ai-email-option{align-items:stretch;flex-direction:column}.ai-email-option>div:last-child{align-items:stretch;flex-direction:column}.ai-email-option input,.ai-email-option .btn{width:100%}.email-monitor-flow{overflow-x:auto}.email-monitor-flow>div{min-width:580px}.payslip-download-page .crm-table{min-width:650px}}@media(max-width:600px){.crm-kpi-grid,.report-summary-grid,.profile-grid{grid-template-columns:1fr}.document-toolbar>div:last-child{grid-template-columns:1fr}.document-toolbar h1{font-size:1.65rem}.letter-paper:not(.payslip-paper){padding:1.2rem}.letter-detail-grid{grid-template-columns:1fr}.records-toolbar,.record-actions,.form-actions{align-items:stretch;flex-direction:column}.records-toolbar .btn,.record-actions .btn,.form-actions .btn{width:100%}.employee-content main{padding:1rem}.employee-sidebar{position:static!important;display:flex!important;width:100%;max-height:none;padding:.55rem .75rem;overflow-x:auto;overflow-y:hidden;background:#102a49;box-shadow:none}.employee-sidebar .employee-logo,.employee-sidebar form{display:none}.employee-sidebar nav{display:flex;gap:.3rem;min-width:max-content}.employee-sidebar nav a{white-space:nowrap;padding:.55rem .65rem}.employee-topbar{padding:.75rem 1rem}.employee-topbar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.employee-welcome{padding:1.25rem;border-radius:17px}.employee-welcome h1,.employee-module h1{font-size:1.75rem}.employee-profile-mini{width:100%;min-width:0}.employee-quick,.employee-stat-grid,.employee-dashboard-grid,.employee-card dl,.employee-module-links{grid-template-columns:1fr}.employee-module-card{padding:1rem;border-radius:14px}.employee-module-person{align-items:flex-start}.payslip-download{width:100%}.payroll-salary-grid{grid-template-columns:1fr}}