/* =========================================================
   myHRM Design System V1
   Shared visual language for all modules.
   IMPORTANT: presentation only - no functional IDs/JS hooks.
   ========================================================= */

:root{
    --myhrm-bg:#f7f9fb;
    --myhrm-surface:#ffffff;
    --myhrm-border:#dfe7eb;
    --myhrm-border-soft:#edf1f3;
    --myhrm-text:#263c48;
    --myhrm-muted:#7f929d;
    --myhrm-primary:#0d9fba;
    --myhrm-primary-dark:#0b8ca4;
    --myhrm-primary-soft:#eef9fb;
    --myhrm-danger:#d84b4b;
    --myhrm-radius:13px;
    --myhrm-radius-sm:8px;
    --myhrm-shadow:0 5px 18px rgba(36,63,77,.045);
}

.myhrm-page{
    padding-top:17px;
    padding-bottom:24px;
    color:var(--myhrm-text);
}

.myhrm-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.myhrm-eyebrow{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
    color:var(--myhrm-primary);
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.myhrm-page-title{
    margin:0;
    color:#1f3440;
    font-size:1.42rem;
    font-weight:800;
    line-height:1.16;
}

.myhrm-page-subtitle{
    margin-top:5px;
    color:var(--myhrm-muted);
    font-size:.70rem;
    line-height:1.5;
}

.myhrm-page-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.myhrm-card{
    background:var(--myhrm-surface);
    border:1px solid var(--myhrm-border);
    border-radius:var(--myhrm-radius);
    box-shadow:var(--myhrm-shadow);
}

.myhrm-card-flush{
    overflow:hidden;
}

.myhrm-tabs{
    padding:0 14px;
    background:#fff;
    border-bottom:1px solid var(--myhrm-border);
}

.myhrm-tabs .nav-link{
    margin-bottom:-1px;
    padding:13px 15px;
    color:#87979f!important;
    background:transparent!important;
    border:0!important;
    border-bottom:2px solid transparent!important;
    border-radius:0!important;
    font-size:.72rem;
    font-weight:700;
    box-shadow:none!important;
}

.myhrm-tabs .nav-link:hover{
    color:var(--myhrm-primary)!important;
    background:transparent!important;
}

.myhrm-tabs .nav-link.active{
    color:var(--myhrm-primary)!important;
    background:#fff!important;
    border-bottom-color:var(--myhrm-primary)!important;
}

.myhrm-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:16px 18px;
    border-bottom:1px solid var(--myhrm-border-soft);
}

.myhrm-panel-header h6{
    margin:0 0 3px;
    color:#304753;
    font-size:.83rem;
    font-weight:800;
}

.myhrm-panel-header small{
    color:#899aa4;
    font-size:.64rem;
}

.myhrm-section{
    padding:17px 18px;
    border-bottom:1px solid var(--myhrm-border-soft);
}

.myhrm-section:last-child{
    border-bottom:0;
}

.myhrm-section-title{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:11px;
    color:#687e89;
    font-size:.63rem;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.myhrm-section-title i{
    color:var(--myhrm-primary);
}

.myhrm-control{
    min-height:34px;
    border:1px solid #dbe4e8!important;
    border-radius:7px!important;
    background:#fff;
    color:#344b57;
    font-size:.70rem!important;
}

.myhrm-control:focus{
    border-color:#77c8d7!important;
    box-shadow:0 0 0 .15rem rgba(13,159,186,.08)!important;
}

.myhrm-btn{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:6px 11px;
    border-radius:8px;
    font-size:.68rem;
    font-weight:700;
    box-shadow:none!important;
}

.myhrm-btn-primary{
    color:#fff;
    background:var(--myhrm-primary);
    border:1px solid var(--myhrm-primary);
}

.myhrm-btn-primary:hover{
    color:#fff;
    background:var(--myhrm-primary-dark);
    border-color:var(--myhrm-primary-dark);
}

.myhrm-btn-outline{
    color:#0b8ea6;
    background:#fff;
    border:1px solid #a9dbe4;
}

.myhrm-btn-outline:hover{
    color:#087f95;
    background:#f1fafc;
    border-color:#82cbd8;
}

.myhrm-btn-excel{
    color:#287e48;
    background:#fff;
    border:1px solid #abd8b9;
}

.myhrm-btn-excel:hover{
    color:#216e3e;
    background:#f4fbf6;
    border-color:#88c89d;
}

.myhrm-btn-danger-outline{
    color:var(--myhrm-danger);
    background:#fff;
    border:1px solid #ecc2c2;
}

.myhrm-btn-danger-outline:hover{
    color:#bd3e3e;
    background:#fff8f8;
    border-color:#df9f9f;
}

.myhrm-empty-state{
    padding:30px 20px;
    text-align:center;
    color:#8697a0;
}

.myhrm-modal{
    border:0;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 55px rgba(30,55,70,.18);
}

.myhrm-modal .modal-header{
    padding:15px 18px;
    background:#fafcfd;
    border-bottom:1px solid #e6ecef;
}

.myhrm-modal .modal-body{
    padding:18px;
}

.myhrm-modal .modal-footer{
    padding:10px 18px;
    background:#fafcfd;
    border-top:1px solid #edf1f3;
}

@media(max-width:767px){
    .myhrm-page-header{
        flex-direction:column;
        align-items:stretch;
    }

    .myhrm-page-actions{
        justify-content:flex-start;
    }

    .myhrm-page-title{
        font-size:1.22rem;
    }
}

.myhrm-tabs .nav-link i{color:inherit!important}
.myhrm-tabs .nav-link:not(.active){color:#87979f!important}
.myhrm-tabs .nav-link:not(.active):hover{color:var(--myhrm-primary)!important}


/* =========================================================
   GLOBAL HELP / INSTRUCTIONS MODAL
   ========================================================= */
.myhrm-help-btn{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 11px;
    border:1px solid #a9dbe4;
    border-radius:8px;
    background:#fff;
    color:#0b8ea6;
    font-size:.68rem;
    font-weight:700;
    box-shadow:none!important;
}
.myhrm-help-btn:hover{
    color:#087f95;
    background:#f1fafc;
    border-color:#82cbd8;
}
.myhrm-help-btn i{color:var(--myhrm-primary)}
.myhrm-help-modal .modal-dialog{max-width:820px}
.myhrm-help-modal .modal-content{
    border:0;border-radius:14px;overflow:hidden;background:#fff;
    box-shadow:0 22px 60px rgba(27,48,59,.20)
}
.myhrm-help-modal .modal-header{
    display:flex;align-items:center;gap:11px;padding:15px 18px;
    background:#fafcfd;border-bottom:1px solid #e6ecef
}
.myhrm-help-modal-icon{
    width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
    border-radius:10px;background:var(--myhrm-primary-soft);color:var(--myhrm-primary)
}
.myhrm-help-modal-copy{min-width:0;flex:1}
.myhrm-help-modal-eyebrow{
    margin-bottom:2px;color:var(--myhrm-primary);font-size:.61rem;font-weight:800;
    letter-spacing:.045em;text-transform:uppercase
}
.myhrm-help-modal-title{
    margin:0;color:#263c48;font-size:.92rem;font-weight:800
}
.myhrm-help-modal .modal-body{padding:16px 18px 18px}
.myhrm-help-intro{
    display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;padding:10px 12px;
    border:1px solid #dcecf0;border-radius:10px;background:#f5fbfc
}
.myhrm-help-intro i{margin-top:2px;color:var(--myhrm-primary)}
.myhrm-help-intro strong,.myhrm-help-intro span{display:block}
.myhrm-help-intro strong{color:#31515f;font-size:.76rem;font-weight:800}
.myhrm-help-intro span{
    margin-top:3px;color:#657b86;font-size:.72rem;line-height:1.55
}
.myhrm-help-steps{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.myhrm-help-step{
    padding:11px 12px;border:1px solid #e1e8eb;border-radius:9px;background:#fff
}
.myhrm-help-step strong{
    display:block;margin-bottom:3px;color:#3c5561;font-size:.73rem;font-weight:800
}
.myhrm-help-step span{
    color:#6f838d;font-size:.70rem;line-height:1.55
}
.myhrm-help-actions{
    display:grid;grid-template-columns:1fr;gap:7px;margin-top:12px
}
.myhrm-help-action{
    display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:flex-start;
    padding:8px 10px;border:1px solid #e6ecef;border-radius:8px;background:#fbfcfd
}
.myhrm-help-action i{
    width:28px;height:28px;display:grid;place-items:center;border-radius:7px;
    background:var(--myhrm-primary-soft);color:var(--myhrm-primary)
}
.myhrm-help-action strong,.myhrm-help-action span{display:block}
.myhrm-help-action strong{color:#405762;font-size:.71rem;font-weight:800}
.myhrm-help-action span{
    margin-top:2px;color:#748892;font-size:.69rem;line-height:1.5
}
.myhrm-help-modal .modal-footer{
    padding:10px 18px;background:#fafcfd;border-top:1px solid #edf1f3
}
@media(max-width:767px){.myhrm-help-steps{grid-template-columns:1fr}}