/* HRM Kranium — front-end portal styles
 * Self-contained: assumes generic WordPress theme markup.
 */

:root {
    --hrm-primary: #1f6feb;
    --hrm-primary-hover: #1858c4;
    --hrm-primary-text: #fff;
}

.hrm-portal-page {
    background: #f4f6f8;
    min-height: 60vh;
    padding: 24px 0;
}

.hrm-portal-container {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    padding: 24px 28px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.hrm-portal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
}

.hrm-portal-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
}

.hrm-portal-login {
    text-align: center;
    padding: 24px;
}

/* Cards grid on dashboard */
.hrm-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.hrm-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 18px;
}

.hrm-card h3 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.hrm-card-wide {
    grid-column: 1 / -1;
}

.hrm-big {
    font-size: 28px;
    font-weight: 700;
    margin: 4px 0;
    color: #111827;
}

.hrm-big small {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Tables */
.hrm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.hrm-table th,
.hrm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 14px;
}

.hrm-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.hrm-table tbody tr:hover {
    background: #f9fafb;
}

.hrm-table .hrm-total td,
.hrm-table .hrm-total th {
    background: #eef2ff;
    font-size: 15px;
}

/* Forms */
.hrm-form .hrm-row {
    margin-bottom: 12px;
}

.hrm-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

.hrm-form input[type="text"],
.hrm-form input[type="email"],
.hrm-form input[type="tel"],
.hrm-form input[type="number"],
.hrm-form input[type="date"],
.hrm-form select,
.hrm-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

.hrm-form textarea {
    resize: vertical;
}

.hrm-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hrm-row-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .hrm-row-2col,
    .hrm-row-3col { grid-template-columns: 1fr; }
}

/* Buttons */
.hrm-button {
    display: inline-block;
    background: var(--hrm-primary);
    color: var(--hrm-primary-text) !important;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.hrm-button:hover { background: var(--hrm-primary-hover); }

.hrm-button-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* Flash messages */
.hrm-flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}

.hrm-flash-success {
    background: #dff7e0;
    color: #1c5e2a;
    border: 1px solid #b5e2b8;
}

.hrm-flash-error {
    background: #fbe5e1;
    color: #a00;
    border: 1px solid #f3b9b1;
}

/* Announcements */
.hrm-announcement {
    background: #f9fafb;
    border-left: 3px solid #1f6feb;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
}

.hrm-announcement h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.hrm-announcement-body {
    font-size: 14px;
    color: #374151;
}

/* Job application public form */
.hrm-job-description {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.hrm-form-public {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
}

/* Print payslip */
@media print {
    .hrm-portal-page { background: #fff; padding: 0; }
    .hrm-portal-container { box-shadow: none; padding: 0; }
    .hrm-payslip button,
    .hrm-payslip a { display: none !important; }
}

/* Attendance shortcode styles */

/* KPI Grid */
.hrm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.hrm-kpi-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
    .hrm-kpi-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hrm-kpi-grid-5 {
        grid-template-columns: 1fr;
    }
}

.hrm-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    transition: box-shadow 0.15s ease;
}

.hrm-kpi-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.hrm-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrm-kpi-icon-green {
    background: #dcfce7;
    color: #166534;
}

.hrm-kpi-icon-red {
    background: #fee2e2;
    color: #991b1b;
}

.hrm-kpi-icon-orange {
    background: #ffedd5;
    color: #9a3412;
}

.hrm-kpi-icon-purple {
    background: #f3e8ff;
    color: #6b21a8;
}

.hrm-kpi-icon-blue {
    background: #dbeafe;
    color: #1e40af;
}

.hrm-kpi-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 2px;
}

.hrm-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

/* Badges */
.hrm-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    white-space: nowrap;
}

.badge-active,
.badge-present {
    background: #dcfce7;
    color: #166534;
}

.badge-absent {
    background: #fee2e2;
    color: #991b1b;
}

.badge-half_day {
    background: #ffedd5;
    color: #9a3412;
}

.badge-gray {
    background: #f3f4f6;
    color: #4b5563;
}

/* Attendance-specific layout */
.hrm-attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.hrm-attendance-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.hrm-attendance-nav {
    display: flex;
    gap: 8px;
}

.hrm-today {
    background: #eff6ff !important;
}

.hrm-weekend {
    background: #f9fafb !important;
    color: #9ca3af;
}

.hrm-attendance-legend {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.hrm-attendance-legend .hrm-badge {
    font-size: 11px;
}

/* ==========================================================================
   Talent module and portal hub (v2.14.0)
   ========================================================================== */

.hrm-muted { color: #6b7280; font-size: 0.9em; }
.hrm-lead { font-size: 1.05em; color: #374151; }

.hrm-flash-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }
.hrm-flash-warning ul { margin: 6px 0 0 18px; }

.hrm-button-secondary { background: #fff; color: var(--hrm-primary); border: 1px solid var(--hrm-primary); }
.hrm-button-danger { background: #dc2626; color: #fff; }

.hrm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hrm-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hrm-filter-row input[type="search"] { flex: 1 1 200px; }
.hrm-inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.hrm-inline-form input[type="text"] { flex: 1 1 160px; min-width: 120px; }
.hrm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 640px) { .hrm-grid-2 { grid-template-columns: 1fr; } }
.hrm-form fieldset { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px 16px; margin: 0 0 16px; }
.hrm-form legend { font-weight: 600; padding: 0 6px; }
.hrm-form label { display: block; font-weight: 500; margin-bottom: 4px; }
.hrm-form input[type="text"], .hrm-form input[type="email"], .hrm-form input[type="date"],
.hrm-form input[type="number"], .hrm-form select, .hrm-form textarea { width: 100%; box-sizing: border-box; }
.hrm-form input[type="checkbox"] { width: auto; margin-right: 6px; }
.hrm-form > div { margin-bottom: 12px; }
.hrm-card-lite { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }

/* Skill ladder */
.hrm-skill-level, .hrm-rep-tier { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 0.8em; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.hrm-progress { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.hrm-progress > span { display: block; height: 100%; border-radius: 999px; }
.hrm-ladder { list-style: none; margin: 0 0 20px; padding: 0; }
.hrm-ladder li { border-left: 6px solid #d1d5db; padding: 8px 14px; margin-bottom: 6px; background: #f9fafb; border-radius: 0 8px 8px 0; }
.hrm-ladder li strong { display: block; }
.hrm-role { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.hrm-role summary { cursor: pointer; display: flex; gap: 10px; align-items: center; }
.hrm-matrix th, .hrm-matrix td { text-align: center; }
.hrm-matrix th:first-child, .hrm-matrix td:first-child { text-align: left; white-space: nowrap; }
.hrm-skill-dot { display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 6px; color: #fff; font-weight: 600; font-size: 0.85em; }

/* Reputation */
.hrm-rep-hero { display: flex; align-items: center; gap: 20px; padding: 16px; background: #f9fafb; border-radius: 12px; margin-bottom: 18px; }
.hrm-rep-score { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--hrm-primary); }
.hrm-bar-row { display: grid; grid-template-columns: 110px 1fr 50px; gap: 10px; align-items: center; margin-bottom: 8px; }
.hrm-bar-val { text-align: right; font-weight: 600; }
.hrm-board { margin: 0; padding-left: 22px; }
.hrm-board li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.hrm-board-name { font-weight: 600; }
.hrm-board-score { float: right; }

/* Records, directory, knowledge base */
.hrm-record-head h3 { margin: 0 0 4px; }
.hrm-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 14px 0; }
.hrm-dl dt { color: #6b7280; }
.hrm-dl dd { margin: 0; }
@media (max-width: 640px) { .hrm-dl { grid-template-columns: 1fr; } .hrm-dl dd { margin-bottom: 8px; } }
.hrm-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hrm-chip-list li { background: #f3f4f6; padding: 4px 10px; border-radius: 8px; }
.hrm-chip { display: inline-block; background: #eef2ff; color: #3730a3; padding: 1px 8px; border-radius: 999px; font-size: 0.78em; margin: 0 4px; }
.hrm-doc-list { list-style: none; margin: 0 0 16px; padding: 0; }
.hrm-doc-list li { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.hrm-article-body { line-height: 1.7; margin: 14px 0; }
.hrm-article-body table { border-collapse: collapse; }
.hrm-article-body td, .hrm-article-body th { border: 1px solid #e5e7eb; padding: 6px 10px; }

/* Org chart */
.hrm-org ul { list-style: none; margin: 0; padding-left: 22px; border-left: 2px solid #e5e7eb; }
.hrm-org > ul { border-left: 0; padding-left: 0; }
.hrm-org li { margin: 8px 0; }
.hrm-org-node { display: inline-block; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 12px; }
.hrm-org-node small { display: block; color: #6b7280; }

/* Helpdesk */
.hrm-msg { border-radius: 10px; padding: 10px 14px; margin: 8px 0; max-width: 85%; white-space: pre-wrap; }
.hrm-msg-mine { background: #eef2ff; }
.hrm-msg-staff { background: #ecfdf5; margin-left: auto; }

/* Portal hub */
.hrm-portal-nav { display: flex; flex-wrap: wrap; gap: 14px 24px; padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 18px; }
.hrm-portal-nav-group { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.hrm-portal-nav-label { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-right: 4px; }
.hrm-portal-tab { padding: 4px 10px; border-radius: 8px; text-decoration: none; color: #374151; font-size: 0.92em; }
.hrm-portal-tab:hover { background: #e5e7eb; }
.hrm-portal-tab.is-active { background: var(--hrm-primary); color: var(--hrm-primary-text); }


/* ==========================================================================
   Portal shell: Spubbles / Stitch design system (v2.15.0)
   Applies to pages built with the Elementor templates (or any layout that
   gives its outer container the class "hrm-shell"). Existing pages that do
   not use the shell keep their previous look.
   ========================================================================== */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}

.hrm-shell,
.hrm-login-page {
    --hrm-shell-bg: #f6f7f9;
    --hrm-shell-text: #141b2b;
    --hrm-shell-muted: #6b7280;
    --hrm-shell-line: #e5e7eb;
    --hrm-shell-soft: #f1f3ff;
    --hrm-shell-hover: #e1e8fd;
    --hrm-shell-btn: #0057c3;
    --hrm-shell-btn: color-mix(in srgb, var(--hrm-primary, #1f6feb) 78%, #000);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--hrm-shell-text);
}

/* ---- Frame (the Elementor containers carry these classes) --------------- */
.hrm-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    background: var(--hrm-shell-bg);
    box-sizing: border-box;
}
.hrm-shell > .hrm-shell__side {
    flex: 0 0 240px;
    width: 240px;
    max-width: 240px;
    align-self: flex-start;
    position: sticky;
    top: var(--hrm-adminbar, 0px);
    height: calc(100vh - var(--hrm-adminbar, 0px));
    background: #fff;
    z-index: 50;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
    padding: 0 !important;
    gap: 0 !important;
}
.hrm-shell > .hrm-shell__main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    gap: 0 !important;
    padding: 0 !important;
}
.hrm-shell__top {
    position: sticky;
    top: var(--hrm-adminbar, 0px);
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
    padding: 0 !important;
}
.hrm-shell__content {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 24px !important;
    box-sizing: border-box;
}
.hrm-shell .elementor-widget-shortcode,
.hrm-shell .elementor-widget-shortcode > .elementor-widget-container,
.hrm-shell .elementor-shortcode { width: 100%; margin: 0; padding: 0; }

/* ---- Sidebar ------------------------------------------------------------ */
.hrm-shell-nav { height: 100%; }
.hrm-shell-sidebar {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.hrm-shell-brand { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 16px; flex-shrink: 0; box-sizing: border-box; }
.hrm-shell-logo {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--hrm-primary, #1f6feb); color: var(--hrm-primary-text, #fff);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.hrm-shell-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.hrm-shell-brand-text strong { font-size: 16px; font-weight: 600; color: var(--hrm-shell-text); }
.hrm-shell-brand-text small { font-size: 12px; color: var(--hrm-shell-muted); }
.hrm-shell-close { display: none; margin-left: auto; background: none; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; color: #424754; }
.hrm-shell-groups { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 16px; }
.hrm-shell-group { display: flex; flex-direction: column; gap: 2px; }
.hrm-shell-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 4px; }
.hrm-shell-group-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--hrm-shell-muted); }
.hrm-shell-chip { font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; line-height: 1.5; }
.hrm-shell-link,
.hrm-shell-more > summary {
    display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px;
    font-size: 14px; line-height: 20px; color: #424754; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s; list-style: none;
}
.hrm-shell-more > summary::-webkit-details-marker { display: none; }
.hrm-shell-link:hover,
.hrm-shell-more > summary:hover { background: var(--hrm-shell-hover); color: var(--hrm-shell-text); }
.hrm-shell-link.is-active,
.hrm-shell-link.is-active:hover { background: var(--hrm-primary, #1f6feb); color: var(--hrm-primary-text, #fff); font-weight: 600; }
.hrm-shell-more[open] > summary { color: var(--hrm-shell-text); }
.hrm-shell-more .hrm-shell-link { padding-left: 16px; }
.hrm-shell-logout { margin: 8px; color: #6b7280; }
.hrm-shell-scrim { display: none; }
.hrm-shell-tabbar { display: none; }

/* ---- Top bar ------------------------------------------------------------ */
.hrm-topbar { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; box-sizing: border-box; }
.hrm-topbar-burger { display: none; background: none; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; color: #424754; }
.hrm-topbar-search,
.hrm-topbar-search-spacer { flex: 1 1 auto; max-width: 440px; }
.hrm-topbar-search { display: flex; align-items: center; gap: 8px; background: var(--hrm-shell-bg); padding: 0 12px; border-radius: 12px; color: #727786; }
.hrm-topbar-search input[type="search"] {
    flex: 1; width: 100%; background: transparent; border: 0 !important; outline: 0; box-shadow: none !important;
    padding: 10px 0; font: inherit; font-size: 14px; color: var(--hrm-shell-text);
}
.hrm-topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hrm-topbar-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--hrm-shell-soft); font-size: 12px; font-weight: 500; color: #424754; }
.hrm-dot { width: 8px; height: 8px; border-radius: 50%; background: #059669; display: inline-block; }
.hrm-topbar-bell { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #424754; text-decoration: none; }
.hrm-topbar-bell:hover { background: var(--hrm-shell-hover); }
.hrm-topbar-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; }
.hrm-topbar-user { display: flex; align-items: center; gap: 8px; }
.hrm-topbar-user-text { text-align: right; line-height: 1.25; }
.hrm-topbar-user-text strong { display: block; font-size: 14px; font-weight: 600; }
.hrm-topbar-user-text small { font-size: 12px; color: var(--hrm-shell-muted); }
.hrm-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--hrm-shell-btn); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ---- Page content in the Stitch look ------------------------------------ */
.hrm-shell .hrm-portal-hub { display: block; }
.hrm-shell .hrm-portal { color: var(--hrm-shell-text); }
.hrm-shell .hrm-portal-title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }
.hrm-shell .hrm-portal-body { background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, .04); padding: 20px; }
.hrm-shell .hrm-portal-body > h4:first-child { margin-top: 0; }
.hrm-shell h4 { font-size: 16px; font-weight: 600; margin: 20px 0 10px; }
.hrm-shell .hrm-card,
.hrm-shell .hrm-card-lite,
.hrm-shell .hrm-kpi-card { border-radius: 12px; border: 0; background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
.hrm-shell .hrm-dashboard-grid .hrm-card { background: #f9f9ff; box-shadow: none; }
.hrm-shell .hrm-button,
.hrm-shell button.hrm-button,
.hrm-login-card .hrm-button,
.hrm-login-card input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--hrm-shell-btn); color: #fff; border: 0; border-radius: 8px;
    padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; text-decoration: none;
    transition: background-color .15s;
}
.hrm-shell .hrm-button:hover,
.hrm-login-card .hrm-button:hover,
.hrm-login-card input[type="submit"]:hover { background: var(--hrm-primary-hover, #1858c4); color: #fff; }
.hrm-shell .hrm-button-secondary { background: #e1e8fd; color: var(--hrm-shell-btn); }
.hrm-shell .hrm-button-secondary:hover { background: #dce2f7; color: var(--hrm-shell-btn); }
.hrm-shell .hrm-button-danger { background: #dc2626; }
.hrm-shell .hrm-table th { background: #f9f9ff; color: #424754; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hrm-shell .hrm-table th,
.hrm-shell .hrm-table td { border-bottom-color: var(--hrm-shell-line); }
.hrm-shell .hrm-form input[type="text"],
.hrm-shell .hrm-form input[type="email"],
.hrm-shell .hrm-form input[type="tel"],
.hrm-shell .hrm-form input[type="number"],
.hrm-shell .hrm-form input[type="date"],
.hrm-shell .hrm-form select,
.hrm-shell .hrm-form textarea,
.hrm-shell .hrm-filter-row input,
.hrm-shell .hrm-filter-row select,
.hrm-login-card input[type="text"],
.hrm-login-card input[type="password"] {
    border: 1px solid #c2c6d6; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; box-sizing: border-box;
}
.hrm-shell .hrm-form input:focus,
.hrm-shell .hrm-form select:focus,
.hrm-shell .hrm-form textarea:focus,
.hrm-shell .hrm-filter-row input:focus,
.hrm-login-card input:focus { outline: 2px solid var(--hrm-primary, #1f6feb); outline-offset: 0; border-color: transparent; }
.hrm-shell .hrm-flash { border-radius: 8px; }
.hrm-shell .hrm-rep-hero { background: var(--hrm-shell-soft); }
.hrm-shell .hrm-rep-score { font-size: 40px; letter-spacing: -.02em; }
.hrm-shell a { color: var(--hrm-primary, #1f6feb); }
.hrm-shell a.hrm-shell-link,
.hrm-shell a.hrm-shell-tab,
.hrm-shell a.hrm-button,
.hrm-shell a.hrm-topbar-bell { color: inherit; }
.hrm-shell a.hrm-shell-link.is-active { color: var(--hrm-primary-text, #fff); }
.hrm-shell a.hrm-button { color: #fff; }

/* ---- Login page --------------------------------------------------------- */
.hrm-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px !important; box-sizing: border-box;
    background: linear-gradient(160deg, #f1f3ff 0%, #f6f7f9 60%);
}
.hrm-login-card { width: 100%; max-width: 400px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); padding: 32px; box-sizing: border-box; }
.hrm-login-card .hrm-shell-brand { padding: 0; height: auto; margin-bottom: 20px; }
.hrm-login-card h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.hrm-login-card form p { margin: 0 0 14px; }
.hrm-login-card label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.hrm-login-card input[type="text"],
.hrm-login-card input[type="password"] { width: 100%; }
.hrm-login-card .login-remember label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.hrm-login-card input[type="submit"] { width: 100%; padding: 12px 16px; }
.hrm-login-help { text-align: center; margin: 16px 0 0; font-size: 14px; }

/* ---- Tablet and phone ---------------------------------------------------- */
@media (max-width: 1023px) {
    .hrm-shell { display: block; }
    .hrm-shell > .hrm-shell__side { position: static; width: 0; max-width: 0; height: 0; flex: none; box-shadow: none; z-index: auto; overflow: visible; }
    .hrm-shell-nav { height: 0; }
    .hrm-shell-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 86vw; height: auto;
        transform: translateX(-102%); transition: transform .22s ease; z-index: 100001;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }
    .hrm-shell-sidebar.is-open { transform: none; }
    .hrm-shell-close { display: inline-flex; }
    .hrm-shell-scrim { position: fixed; inset: 0; background: rgba(20, 27, 43, .45); z-index: 100000; display: block; opacity: 0; pointer-events: none; transition: opacity .2s; }
    .hrm-shell-scrim.is-open { opacity: 1; pointer-events: auto; }
    html.hrm-shell-locked { overflow: hidden; }
    .hrm-topbar { padding: 0 12px; }
    .hrm-topbar-burger { display: inline-flex; }
    .hrm-topbar-user-text,
    .hrm-topbar-chip { display: none; }
    .hrm-shell__content { padding: 16px !important; padding-bottom: 88px !important; }
    .hrm-shell-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; background: #fff;
        box-shadow: 0 -1px 8px rgba(0, 0, 0, .08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .hrm-shell-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 44px;
        font: inherit; font-size: 11px; font-weight: 500; color: #6b7280; text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 8px;
    }
    .hrm-shell-tab.is-active { color: var(--hrm-primary, #1f6feb); font-weight: 600; }
    .hrm-shell-tab .material-symbols-outlined { font-size: 24px; }
}
@media (max-width: 640px) {
    .hrm-shell .hrm-portal-body { padding: 14px; }
    .hrm-shell .hrm-portal-title { font-size: 20px; }
}


/* ---- v2.15.2: tidy-ups seen on a live theme ------------------------------ */
/* Themes often set inputs and selects to width:100%; keep filter bars in one row. */
.hrm-shell .hrm-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hrm-shell .hrm-filter-row input[type="search"],
.hrm-shell .hrm-filter-row input[type="text"] { flex: 1 1 220px; width: auto; min-width: 0; margin: 0; }
.hrm-shell .hrm-filter-row select { flex: 0 1 190px; width: auto; min-width: 0; margin: 0; }
.hrm-shell .hrm-filter-row .hrm-button { flex: 0 0 auto; margin: 0; }
/* Long company names: two lines at most. */
.hrm-shell-brand-text strong {
    font-size: 15px; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ---- v2.16.1: Talent cards on the staff dashboard ------------------------ */
.hrm-talent-card .hrm-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hrm-talent-card .hrm-big small { font-size: 14px; font-weight: 400; color: #6b7280; }
.hrm-card-link { margin: 12px 0 0; font-size: 14px; }
.hrm-skill-mini, .hrm-rep-mini { list-style: none; margin: 10px 0 0; padding: 0; }
.hrm-skill-mini li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.hrm-rep-mini li { padding: 6px 0; border-bottom: 1px solid #f3f4f6; }


/* ==========================================================================
   v2.17.0: green field-service dashboard layout
   Dark green sidebar with collapsible groups, KPI row with status chips,
   panel cards with mini stat tiles and charts. Colour comes from
   --hrm-shell-accent (green by default; follows the Branding setting).
   ========================================================================== */

.hrm-shell, .hrm-login-page {
    --hrm-shell-bg: #f8f8fa;
    --hrm-shell-btn: var(--hrm-shell-accent, #08683a);
}
.hrm-shell a { color: var(--hrm-shell-accent, #08683a); }
.hrm-shell a.hrm-shell-link,
.hrm-shell a.hrm-shell-tab,
.hrm-shell a.hrm-topbar-bell,
.hrm-shell a.hrm-button { color: inherit; }
.hrm-shell a.hrm-button { color: #fff; }
.hrm-shell .hrm-button:hover,
.hrm-login-card .hrm-button:hover,
.hrm-login-card input[type="submit"]:hover { background: var(--hrm-shell-accent-hover, #065a31); }
.hrm-shell .hrm-form input:focus,
.hrm-shell .hrm-form select:focus,
.hrm-shell .hrm-form textarea:focus,
.hrm-shell .hrm-filter-row input:focus,
.hrm-login-card input:focus { outline-color: var(--hrm-shell-accent, #08683a); }
.hrm-shell .hrm-button-secondary { background: #e8f5ec; color: var(--hrm-shell-accent, #08683a); }
.hrm-shell .hrm-rep-hero { background: #f0f7f2; }
.hrm-shell .hrm-rep-score { color: var(--hrm-shell-accent, #08683a); }

/* ---- Sidebar ------------------------------------------------------------- */
.hrm-shell > .hrm-shell__side,
.hrm-shell-sidebar { background: var(--hrm-shell-accent, #08683a); box-shadow: none; }
.hrm-shell-brand-text strong { color: #fff; }
.hrm-shell-brand-text small { color: rgba(255, 255, 255, .72); }
.hrm-shell-logo { background: #fff; color: var(--hrm-shell-accent, #08683a); }
.hrm-shell-close { color: #fff; }
.hrm-shell-groups { gap: 4px; }
.hrm-shell-flat { margin-bottom: 4px; }
.hrm-shell-link { color: #eaf5ee; }
.hrm-shell-link:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.hrm-shell-link.is-active,
.hrm-shell-link.is-active:hover { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.hrm-shell a.hrm-shell-link.is-active { color: #fff; }
.hrm-shell-logout { color: rgba(255, 255, 255, .75); }
.hrm-shell-acc > summary {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px;
    color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none;
}
.hrm-shell-acc > summary::-webkit-details-marker { display: none; }
.hrm-shell-acc > summary:hover { background: rgba(255, 255, 255, .10); }
.hrm-shell-glabel { flex: 1; }
.hrm-shell-gicon { opacity: .9; }
.hrm-shell-chev { transition: transform .18s; opacity: .8; }
.hrm-shell-acc[open] > summary .hrm-shell-chev { transform: rotate(180deg); }
.hrm-shell-chip { background: rgba(255, 255, 255, .18); color: #fff; }
.hrm-shell-sub { padding: 2px 0 6px; }
.hrm-shell-sub .hrm-shell-link { padding: 8px 12px 8px 40px; font-size: 13.5px; }
.hrm-shell-sub .hrm-shell-link .material-symbols-outlined { display: none; }

/* ---- Top bar and tab bar ---------------------------------------------------- */
.hrm-topbar-chip { background: #e8f5ec; }
.hrm-shell-tab.is-active { color: var(--hrm-shell-accent, #08683a); }

/* ---- Dashboard (Overview) ---------------------------------------------------- */
.hrm-ov { color: #111827; }
.hrm-ov-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid #eef0f3; border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
}
.hrm-ov-head h1 { font-size: 20px; line-height: 26px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.01em; }
.hrm-ov-head p { margin: 0; font-size: 13px; color: #6b7280; }
.hrm-ov-actions { display: flex; gap: 8px; }
.hrm-ov-btn {
    display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 8px 14px; font: inherit; font-size: 14px; color: #374151; cursor: pointer;
}
.hrm-ov-btn:hover { background: #f9fafb; }
.hrm-ov-panel { background: #fff; border: 1px solid #eef0f3; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); min-width: 0; }
.hrm-ov-kpis { margin-bottom: 16px; }
.hrm-ov-kpis-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.hrm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hrm-kpi { border: 1px solid #eef0f3; border-radius: 12px; padding: 12px 14px; background: #fff; }
.hrm-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hrm-kpi-label { font-size: 13px; font-weight: 600; color: #374151; }
.hrm-chip-s { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.6; }
.hrm-tone-red { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.hrm-tone-amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.hrm-tone-green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.hrm-tone-blue { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.hrm-kpi-val { font-size: 24px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; }
.hrm-kpi-trend { font-size: 11.5px; color: #6b7280; }
.hrm-trend-up { color: #059669; }
.hrm-trend-down { color: #dc2626; }

.hrm-ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hrm-ov-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hrm-ov-panel-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.hrm-ov-panel-head p { margin: 0; font-size: 12px; color: #6b7280; }
.hrm-ov-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hrm-ov-icon .material-symbols-outlined { font-size: 24px; }
.hrm-ov-icon-green { background: #e8f5ec; color: #2e8b57; }
.hrm-ov-icon-orange { background: #fdeadf; color: #ea580c; }
.hrm-ov-icon-blue { background: #e6f0fb; color: #2563eb; }
.hrm-ov-icon-purple { background: #efe9fb; color: #6d4aff; }

.hrm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.hrm-tile { border: 1px solid #eef0f3; border-radius: 10px; padding: 10px 6px; text-align: center; background: #fcfcfd; min-width: 0; }
.hrm-tile strong { display: block; font-size: 20px; line-height: 1.2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrm-tile span { font-size: 11.5px; color: #6b7280; }

.hrm-ov-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hrm-ov-sub { border: 1px solid #eef0f3; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; min-width: 0; }
.hrm-ov-subgrid > .hrm-ov-sub { margin-bottom: 0; }
.hrm-ov-sub h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }

.hrm-donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hrm-donut { width: 120px; height: 120px; flex: 0 0 120px; }
.hrm-donut-v { font-size: 20px; font-weight: 700; fill: #111827; }
.hrm-donut-l { font-size: 8px; fill: #6b7280; }
.hrm-legend { flex: 1; min-width: 150px; font-size: 12px; border-collapse: collapse; }
.hrm-legend th { text-align: left; font-weight: 500; color: #6b7280; padding: 2px 6px; }
.hrm-legend td { padding: 3px 6px; }
.hrm-legend td:nth-child(n+2) { text-align: right; font-weight: 600; }
.hrm-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.hrm-vbars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.hrm-vbar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.hrm-vbar-col { display: block; width: 70%; max-width: 30px; border-radius: 6px 6px 0 0; flex: none; }
.hrm-vbar-val { font-size: 11px; font-weight: 600; color: #374151; }
.hrm-vbar-lab { font-size: 11px; color: #6b7280; }

.hrm-hbar { display: grid; grid-template-columns: minmax(70px, 110px) 1fr 40px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.hrm-hbar-track { height: 8px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.hrm-hbar-track span { display: block; height: 100%; border-radius: 999px; }
.hrm-hbar-val { text-align: right; font-weight: 600; }

.hrm-tinted { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hrm-tint { border-radius: 10px; padding: 10px; text-align: center; }
.hrm-tint span { display: block; font-size: 12px; font-weight: 600; }
.hrm-tint strong { font-size: 20px; }
.hrm-tint-red { background: #fdecec; color: #b91c1c; }
.hrm-tint-amber { background: #feefe6; color: #b45309; }
.hrm-tint-green { background: #e8f5ec; color: #166534; }

.hrm-ov-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f3; }
.hrm-ov-link { font-size: 13.5px; font-weight: 600; color: var(--hrm-shell-accent, #08683a); text-decoration: none; }
.hrm-ov-link:hover { text-decoration: underline; }
.hrm-ov-list { margin: 0; padding-left: 18px; font-size: 13.5px; }
.hrm-ov-list li { margin: 4px 0; }
.hrm-ov-big { font-size: 32px; font-weight: 700; margin: 0; }
.hrm-ov-big.is-warn { color: #dc2626; }
.hrm-ov-people { list-style: none; margin: 0; padding: 0; }
.hrm-ov-people li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f3f4f6; }
.hrm-ov-people li:last-child { border-bottom: 0; }
.hrm-avatar-s { width: 34px; height: 34px; border-radius: 50%; background: #e8f5ec; color: #166534; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hrm-ov-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hrm-ov-who strong { font-size: 14px; }
.hrm-ov-who small { font-size: 12px; color: #6b7280; }
.hrm-ov-people b { min-width: 32px; text-align: right; }

/* ---- Tablet and phone ---------------------------------------------------------- */
@media (max-width: 1100px) {
    .hrm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hrm-ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    /* KPI cards become a swipeable row, like the phone layout in the reference. */
    .hrm-kpis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -4px; padding: 0 4px 6px; -webkit-overflow-scrolling: touch; }
    .hrm-kpi { flex: 0 0 158px; scroll-snap-align: start; }
    .hrm-ov-head { padding: 14px; }
    .hrm-ov-btn span:last-child { display: none; }
    .hrm-ov-panel { padding: 14px; }
}
@media (max-width: 520px) {
    .hrm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hrm-donut-wrap { justify-content: center; }
}


/* ==========================================================================
   v2.18.0: brand colours from Portal Appearance, scrolling sidebar,
   slide-down menu groups, dashboard spacing
   ========================================================================== */

/* Sidebar colours come from CSS variables printed by Portal Appearance. */
.hrm-shell > .hrm-shell__side,
.hrm-shell-sidebar { background: var(--hrm-side-bg, var(--hrm-shell-accent, #08683a)); }
.hrm-shell-brand-text strong { color: var(--hrm-side-text, #fff); }
.hrm-shell-brand-text small { color: var(--hrm-side-muted, rgba(255, 255, 255, .72)); }
.hrm-shell-logo { background: var(--hrm-side-logo-bg, #fff); color: var(--hrm-side-logo-text, var(--hrm-shell-accent, #08683a)); overflow: hidden; }
.hrm-shell-logo-img { background: #fff; padding: 2px; }
.hrm-shell-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hrm-shell-close { color: var(--hrm-side-text, #fff); }
.hrm-shell-link,
.hrm-shell-acc > summary { color: var(--hrm-side-text, #fff); }
.hrm-shell-link { opacity: .92; }
.hrm-shell-link:hover,
.hrm-shell-acc > summary:hover { background: var(--hrm-side-hover, rgba(255, 255, 255, .10)); color: var(--hrm-side-text, #fff); opacity: 1; }
.hrm-shell-link.is-active,
.hrm-shell-link.is-active:hover,
.hrm-shell a.hrm-shell-link.is-active { background: var(--hrm-side-active-bg, rgba(255, 255, 255, .18)); color: var(--hrm-side-active-text, #fff); opacity: 1; }
.hrm-shell a.hrm-shell-link { color: var(--hrm-side-text, #fff); }
.hrm-shell-logout,
.hrm-shell a.hrm-shell-logout { color: var(--hrm-side-muted, rgba(255, 255, 255, .75)); }
.hrm-shell-chip { background: var(--hrm-side-hover, rgba(255, 255, 255, .18)); color: var(--hrm-side-text, #fff); }

/* Text on brand-coloured buttons switches between white and dark. */
.hrm-shell .hrm-button,
.hrm-shell button.hrm-button,
.hrm-login-card .hrm-button,
.hrm-login-card input[type="submit"] { background: var(--hrm-shell-accent, #08683a); color: var(--hrm-shell-accent-text, #fff); }
.hrm-shell a.hrm-button { color: var(--hrm-shell-accent-text, #fff); }
.hrm-shell .hrm-button:hover,
.hrm-login-card .hrm-button:hover,
.hrm-login-card input[type="submit"]:hover { background: var(--hrm-shell-accent-hover, #065a31); color: var(--hrm-shell-accent-text, #fff); }
.hrm-topbar-avatar { background: var(--hrm-shell-accent, #08683a); color: var(--hrm-shell-accent-text, #fff); }

/* Desktop: the sidebar scrolls when its content is taller than the screen. */
.hrm-shell > .hrm-shell__side { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .45) transparent; }
.hrm-shell > .hrm-shell__side::-webkit-scrollbar { width: 6px; }
.hrm-shell > .hrm-shell__side::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .45); border-radius: 6px; }
.hrm-shell-nav { height: auto; min-height: 100%; }
.hrm-shell-sidebar { height: auto; min-height: calc(100vh - var(--hrm-adminbar, 0px)); overflow: visible; }
.hrm-shell-logout { margin-top: auto; }

/* Slide-down groups (animated by portal-shell.js). */
.hrm-shell-sub { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .hrm-shell-sub { transition: none !important; } }

/* Dashboard (clock in and my day): spacing and calmer cards. */
.hrm-shell .hrm-portal-body-bare { background: transparent; box-shadow: none; padding: 0; }
.hrm-shell .hrm-dashboard-grid { display: grid; gap: 16px; margin-top: 16px; }
.hrm-shell .hrm-portal-body-bare > .hrm-card,
.hrm-shell .hrm-portal-body-bare > div > .hrm-card { margin-bottom: 0; }
.hrm-shell .hrm-dashboard-grid .hrm-card { background: #fff; border: 1px solid #eef0f3; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.hrm-shell .hrm-portal-body-bare .hrm-card { border-radius: 14px; }
.hrm-talent-card .hrm-big .hrm-rep-tier { font-size: 12px; }
.hrm-shell .hrm-card h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; font-weight: 600; margin: 0 0 8px; }
.hrm-shell .hrm-flash-warning { margin-bottom: 0; }

/* Phones: the sidebar is a drawer and scrolls inside itself. */
@media (max-width: 1023px) {
    .hrm-shell > .hrm-shell__side { overflow: visible; }
    .hrm-shell-sidebar { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .hrm-shell-nav { min-height: 0; }
}


/* ==========================================================================
   v2.19.0: staff photo, custom fields, registration form
   ========================================================================== */
.hrm-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 8px; background: #e8f5ec; }
.hrm-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #166534; }
.hrm-field-img { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid #e5e7eb; display: block; }
.hrm-file-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13px; text-decoration: none; }
.hrm-span-2 { grid-column: 1 / -1; }
.hrm-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400 !important; }
.hrm-form input[type="file"] { width: 100%; box-sizing: border-box; font-size: 14px; }
.hrm-form small.hrm-muted { display: block; margin-top: 4px; }


/* ==========================================================================
   v2.20.1: full-width main area, top-right logo, brand banner
   ========================================================================== */

/* The main column must fill the row. Page builders can otherwise shrink it to
   its content, which made short pages look half-width. */
.hrm-shell > .hrm-shell__main { flex: 1 1 0% !important; width: auto !important; max-width: none !important; min-width: 0 !important; align-self: stretch; }
.hrm-shell > .hrm-shell__main > .hrm-shell__top,
.hrm-shell > .hrm-shell__main > .hrm-shell__content { width: 100% !important; max-width: none !important; }
.hrm-shell > .hrm-shell__main > .hrm-shell__content { max-width: 1152px !important; margin-left: auto !important; margin-right: auto !important; }
.hrm-shell > .hrm-shell__side { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; }
@media (max-width: 1023px) {
    .hrm-shell > .hrm-shell__side { flex: none !important; width: 0 !important; max-width: 0 !important; }
}

/* Offset for the WordPress toolbar only when it is actually showing. */
.admin-bar .hrm-shell { --hrm-adminbar: 32px; }
@media (max-width: 782px) { .admin-bar .hrm-shell { --hrm-adminbar: 46px; } }

/* Company logo at the top right of the portal. */
.hrm-topbar-logo { height: 32px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@media (max-width: 700px) { .hrm-topbar-logo { height: 24px; max-width: 88px; } }

/* Brand header on the sign-in and registration pages. */
.hrm-brand-banner { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; }
.hrm-brand-banner strong { font-size: 18px; font-weight: 700; }
.hrm-brand-banner-logo img { max-height: 64px; max-width: 220px; width: auto; height: auto; object-fit: contain; display: block; }
.hrm-brand-banner .hrm-shell-logo { width: 40px; height: 40px; font-size: 20px; background: var(--hrm-shell-accent, #08683a); color: var(--hrm-shell-accent-text, #fff); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hrm-login-card .hrm-brand-banner { margin-bottom: 22px; }


/* v2.21.0: separate light/dark logos in the sidebar brand area */
.hrm-shell-brand { gap: 10px; }
.hrm-brand-img { height: 34px; width: auto; max-width: 170px; object-fit: contain; display: block; flex: 0 1 auto; }
.hrm-brand-img-pill { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 4px 8px; max-width: 170px; }
.hrm-brand-img-pill .hrm-brand-img { height: 26px; }

/* ------------------------------------------------------------------ */
/* Portal navigation: Find a page, breadcrumb, folded "More"           */
/* ------------------------------------------------------------------ */
.hrm-topbar-crumbs {
    display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
    font-size: 13px; color: var(--hrm-shell-muted, #727786); white-space: nowrap; overflow: hidden;
}
.hrm-topbar-crumb.is-last { color: var(--hrm-shell-text, #191c1e); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hrm-topbar-search { position: relative; }
.hrm-topbar-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--hrm-shell-accent, #08683a); }
.hrm-topbar-kbd {
    font: 600 11px/1 inherit; font-family: inherit; color: var(--hrm-shell-muted, #727786);
    background: #fff; border: 1px solid #d9dde3; border-radius: 6px; padding: 4px 6px; white-space: nowrap;
}

.hrm-topbar .hrm-topbar-results {
    position: absolute; top: calc(100% + 8px); left: 0; width: 100%; min-width: 360px; max-width: 90vw;
    max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(25, 28, 30, .16); padding: 6px; z-index: 100000; text-align: left;
}
.hrm-topbar .hrm-topbar-results[hidden] { display: none; }
.hrm-topbar .hrm-topbar-results a.hrm-res-item {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px;
    text-decoration: none; color: var(--hrm-shell-text, #191c1e);
}
.hrm-topbar .hrm-topbar-results a.hrm-res-item.is-selected { background: var(--hrm-shell-soft, #eef2f7); }
.hrm-topbar .hrm-topbar-results a.hrm-res-item.is-docs { border-top: 1px solid #eef0f3; border-radius: 0 0 8px 8px; margin-top: 4px; }
.hrm-res-label { font-size: 14px; font-weight: 600; }
.hrm-res-meta { font-size: 12px; color: var(--hrm-shell-muted, #727786); }
.hrm-res-note, .hrm-res-head { padding: 10px 12px; font-size: 12.5px; color: var(--hrm-shell-muted, #727786); }
.hrm-res-head { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; padding-bottom: 4px; }

/* Rarely-needed tabs fold under "More" inside each sidebar group */
.hrm-shell-more-acc { margin-top: 2px; }
.hrm-shell-more-acc > summary {
    list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 40px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .72); border-radius: 8px;
}
.hrm-shell-more-acc > summary::-webkit-details-marker { display: none; }
.hrm-shell-more-acc > summary::after { content: "\203A"; display: inline-block; transition: transform .15s; font-size: 15px; line-height: 1; }
.hrm-shell-more-acc[open] > summary::after { transform: rotate(90deg); }
.hrm-shell-more-acc > summary:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.hrm-shell-more-acc > summary:focus-visible,
.hrm-shell-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
    .hrm-shell-more-acc > summary::after { transition: none; }
}

@media (max-width: 1100px) {
    .hrm-topbar-crumbs { display: none; }
}
@media (max-width: 782px) {
    .hrm-topbar-kbd { display: none; }
    .hrm-topbar .hrm-topbar-results {
        position: fixed; top: 64px; left: 12px; right: 12px; width: auto; min-width: 0; max-width: none;
    }
}

/* Give the search a real width and never squash the breadcrumb */
.hrm-topbar .hrm-topbar-search { flex: 1 1 380px; width: 100%; min-width: 240px; max-width: 460px; }
.hrm-topbar .hrm-topbar-crumbs { flex: 0 0 auto; max-width: 40%; }
@media (max-width: 782px) {
    .hrm-topbar .hrm-topbar-search { flex: 1 1 auto; min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* Portal pages: hide the theme's own header, footer and page title.   */
/* Only applies when body has .hrm-portal-screen (Portal Appearance >  */
/* Page layout). The portal's own <header class="hrm-topbar"> is       */
/* explicitly spared.                                                  */
/* ------------------------------------------------------------------ */
body.hrm-portal-screen #masthead,
body.hrm-portal-screen .site-header,
body.hrm-portal-screen #site-header,
body.hrm-portal-screen #ast-desktop-header,
body.hrm-portal-screen #ast-mobile-header,
body.hrm-portal-screen .elementor-location-header,
body.hrm-portal-screen header.wp-block-template-part,
body.hrm-portal-screen .wp-site-blocks > header:not(.hrm-topbar),
body.hrm-portal-screen > header:not(.hrm-topbar),
body.hrm-portal-screen #colophon,
body.hrm-portal-screen .site-footer,
body.hrm-portal-screen #site-footer,
body.hrm-portal-screen .elementor-location-footer,
body.hrm-portal-screen footer.wp-block-template-part,
body.hrm-portal-screen .wp-site-blocks > footer,
body.hrm-portal-screen > footer,
body.hrm-portal-screen .entry-header,
body.hrm-portal-screen .page-header {
    display: none !important;
}
body.hrm-portal-screen #content,
body.hrm-portal-screen .site-content {
    margin-top: 0;
    padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* Logo sizes that page builders cannot override.                      */
/* Elementor ships ".elementor img { height:auto; max-width:100% }",   */
/* which has higher specificity than a single class and let the        */
/* top-bar logo render at the image's full size over the whole page.   */
/* These rules are deliberately more specific and !important.          */
/* ------------------------------------------------------------------ */
.hrm-topbar img.hrm-topbar-logo {
    height: 32px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
}
@media (max-width: 700px) {
    .hrm-topbar img.hrm-topbar-logo { height: 24px !important; max-width: 88px !important; }
}
img.hrm-brand-img {
    height: var(--hrm-side-logo-h, 48px) !important;
    width: auto !important;
    max-width: 208px !important;
    object-fit: contain !important;
}
.hrm-brand-img-pill { max-width: 208px; }
.hrm-brand-img-pill img.hrm-brand-img { height: calc(var(--hrm-side-logo-h, 48px) - 8px) !important; }
.hrm-brand-banner-logo img {
    max-height: 64px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
}

/* Invite staff tab */
.hrm-button-small { padding: 6px 12px; font-size: 13px; min-height: 0; line-height: 1.3; text-decoration: none; display: inline-block; }
.hrm-invite-result { margin-bottom: 18px; }
.hrm-invite-result input[type="text"] { font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Public pages opened from an emailed link (staff registration):      */
/* a centred card that looks right under any theme / page builder.     */
/* ------------------------------------------------------------------ */
.hrm-public { max-width: 800px; margin: 0 auto; padding: 32px 16px 56px; box-sizing: border-box; }
.hrm-public *, .hrm-public *::before, .hrm-public *::after { box-sizing: border-box; }
.hrm-public {
    --hrm-primary: var(--hrm-shell-accent, #1f6feb);
    --hrm-primary-hover: var(--hrm-shell-accent-hover, #1858c4);
    --hrm-primary-text: var(--hrm-shell-accent-text, #fff);
    color: var(--hrm-pub-text, #1f2937);
}
.hrm-public-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
    padding: 36px 40px; box-shadow: 0 10px 40px rgba(17, 24, 39, .07);
}
.hrm-public .hrm-brand-banner { margin: 0 0 14px; }
.hrm-public .hrm-brand-banner-logo img { height: var(--hrm-pub-logo-h, 96px) !important; max-height: none !important; width: auto !important; max-width: min(100%, 360px) !important; }
.hrm-public .hrm-portal-title { text-align: center; font-size: 28px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.hrm-public .hrm-portal-body > .hrm-muted { text-align: center; font-size: 15px; margin: 0 0 24px; color: var(--hrm-pub-muted, #6b7280); }

.hrm-public .hrm-form fieldset { border: 0; border-top: 1px solid #eef0f3; border-radius: 0; padding: 20px 0 6px; margin: 0; min-width: 0; }
.hrm-public .hrm-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.hrm-public .hrm-form legend {
    float: left; width: 100%; padding: 0 0 12px; margin: 0;
    font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hrm-pub-heading, var(--hrm-primary, #2563eb));
}
.hrm-public .hrm-form legend + * { clear: both; }
.hrm-public .hrm-grid-2 { gap: 16px 20px; }
.hrm-public .hrm-form label { font-size: 13px; font-weight: 600; color: var(--hrm-pub-text, #374151); margin-bottom: 6px; }
.hrm-public .hrm-form input[type="text"],
.hrm-public .hrm-form input[type="email"],
.hrm-public .hrm-form input[type="tel"],
.hrm-public .hrm-form input[type="number"],
.hrm-public .hrm-form input[type="date"],
.hrm-public .hrm-form select,
.hrm-public .hrm-form textarea {
    min-height: 46px; padding: 10px 14px; font-size: 15px; background: #fff;
    border: 1px solid #d1d5db; border-radius: 10px;
}
.hrm-public .hrm-form input:focus,
.hrm-public .hrm-form select:focus,
.hrm-public .hrm-form textarea:focus {
    outline: none; border-color: var(--hrm-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.hrm-public .hrm-form input[readonly] { background: #f3f4f6; color: #4b5563; }
.hrm-public .hrm-form .hrm-button { width: 100%; padding: 14px 20px; font-size: 16px; border-radius: 12px; margin-top: 8px; }
.hrm-public .hrm-flash { border-radius: 12px; }

/* If the page already sits inside the portal template's white container, don't draw a card in a card */
.hrm-portal-container .hrm-public { padding: 0; max-width: none; }
.hrm-portal-container .hrm-public-card { border: 0; box-shadow: none; padding: 0; background: transparent; }

@media (max-width: 640px) {
    .hrm-public { padding: 16px 12px 40px; }
    .hrm-public-card { padding: 22px 18px; border-radius: 14px; }
    .hrm-public .hrm-grid-2 { grid-template-columns: 1fr; }
    .hrm-public .hrm-portal-title { font-size: 24px; }
}

/* ------------------------------------------------------------------ */
/* Profile photo: control on My profile, and avatars that page builders */
/* cannot stretch (Elementor sets img height:auto).                    */
/* ------------------------------------------------------------------ */
.hrm-photo-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.hrm-photo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hrm-photo-card .hrm-photo-img { width: 84px !important; height: 84px !important; flex: 0 0 84px; border-radius: 50%; object-fit: cover; background: #e8f5ec; display: block; }
.hrm-photo-card .hrm-photo-ph { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #166534; }
.hrm-photo-body { flex: 1 1 240px; min-width: 0; }
.hrm-photo-body p { margin: 4px 0 10px; }
.hrm-photo-form { display: inline-block; margin: 0 10px 0 0; vertical-align: middle; }
.hrm-photo-pick { position: relative; overflow: hidden; cursor: pointer; }
.hrm-photo-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.hrm-photo-pick:focus-within { outline: 2px solid var(--hrm-primary, #2563eb); outline-offset: 2px; }
.hrm-photo-form.is-busy .hrm-photo-pick { opacity: .6; pointer-events: none; }
.hrm-photo-remove { background: none; border: 0; padding: 6px 4px; color: #b42318; cursor: pointer; text-decoration: underline; font-size: 13px; }
img.hrm-avatar-lg { width: 72px !important; height: 72px !important; object-fit: cover; }
img.hrm-topbar-avatar { width: 32px !important; height: 32px !important; object-fit: cover; border-radius: 50%; }

/* Top-bar avatar must stay a circle on narrow screens (flex was squeezing it into an oval) */
img.hrm-topbar-avatar,
span.hrm-topbar-avatar { flex: 0 0 32px; min-width: 32px; max-width: 32px !important; aspect-ratio: 1 / 1; }

/* ------------------------------------------------------------------ */
/* Learning (Tutor LMS) course cards                                   */
/* ------------------------------------------------------------------ */
.hrm-lrn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.hrm-lrn-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(17, 24, 39, .04); }
.hrm-lrn-thumb { display: block; aspect-ratio: 16 / 9; background: #eef2f6; }
.hrm-lrn-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.hrm-lrn-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 16px 16px; flex: 1; }
.hrm-lrn-body h4 { margin: 0; font-size: 16px; line-height: 1.3; }
.hrm-lrn-body h4 a { color: inherit; text-decoration: none; }
.hrm-lrn-body h4 a:hover { text-decoration: underline; }
.hrm-lrn-body p { margin: 0; font-size: 13px; }
.hrm-lrn-body .hrm-button { margin-top: auto; }
.hrm-lrn-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: #eef2f6; color: #475467; }
.hrm-lrn-chip.is-progress { background: #fff4e5; color: #b54708; }
.hrm-lrn-chip.is-done { background: #e6f6ec; color: #067647; }
.hrm-lrn-bar { width: 100%; height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.hrm-lrn-bar span { display: block; height: 100%; border-radius: 999px; background: var(--hrm-primary, #2563eb); }
.hrm-lrn-filter { width: 100%; max-width: 360px; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; }
@media (max-width: 520px) { .hrm-lrn-grid { grid-template-columns: 1fr; } }

/* Course shown inside the portal (Tutor LMS in a frame) */
.hrm-lrn-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.hrm-lrn-nav a { color: var(--hrm-primary, #2563eb); font-weight: 600; text-decoration: none; }
.hrm-lrn-nav a:hover { text-decoration: underline; }
.hrm-lrn-newtab { font-weight: 500 !important; font-size: 13px; opacity: .8; }
iframe.hrm-lrn-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }