/* Salaries printouts: monthly, yearly and employee reports (A4 landscape) and the
   salary slip (A4 portrait). Ink-light, one accent colour from --print-tone. */

@media print {
    @page salaries-land {
        size: A4 landscape;
        margin: 8mm;
    }

    @page salaries-slip {
        size: A4 portrait;
        margin: 10mm;
    }

    #reportPrintTemplate.salaries-report-print-host {
        font-family: 'IRANSans', sans-serif;
    }

    html[lang="ps"] #reportPrintTemplate.salaries-report-print-host {
        font-family: 'Bahij Koodak', 'IRANSans', sans-serif;
    }

    #reportPrintTemplate .sp-sheet {
        --ac: var(--print-tone, #5b5fe0);
        --ac2: color-mix(in srgb, var(--ac) 8%, #fff);
        --ink: #13233d;
        --mute: #5b6578;
        --line: #d6dcea;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        color: var(--ink) !important;
        background: #fff !important;
        font-size: 9pt;
        font-weight: 600;
        line-height: 1.55;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    #reportPrintTemplate .sp-sheet.is-land {
        page: salaries-land;
    }

    #reportPrintTemplate .sp-sheet.is-slip {
        page: salaries-slip;
        min-height: 270mm;
    }

    #reportPrintTemplate .sp-sheet * {
        box-sizing: border-box;
    }

    #reportPrintTemplate .sp-sheet bdi {
        direction: ltr;
        unicode-bidi: isolate;
    }

    /* ---------- head ---------- */
    #reportPrintTemplate .sp-head {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 4mm;
        padding-bottom: 3mm;
        border-bottom: 0.7mm solid var(--ac);
    }

    #reportPrintTemplate .sp-title h1 {
        margin: 0;
        font-size: 20pt;
        font-weight: 800;
        color: var(--ink);
    }

    #reportPrintTemplate .sp-title b {
        display: block;
        margin-top: 1mm;
        font-size: 11pt;
        font-weight: 800;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-logo {
        text-align: center;
    }

    #reportPrintTemplate .sp-logo-img {
        height: 17mm;
        width: auto;
    }

    #reportPrintTemplate .sp-logo-big {
        height: 24mm;
    }

    #reportPrintTemplate .sp-date {
        text-align: left;
        font-size: 8pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-date b {
        display: block;
        font-size: 10pt;
        color: var(--ink);
    }

    /* ---------- info row and cards ---------- */
    #reportPrintTemplate .sp-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
        margin: 3.5mm 0;
        overflow: hidden;
        border: 0.3mm solid var(--line);
        border-radius: 3mm;
    }

    #reportPrintTemplate .sp-info > div {
        padding: 1.8mm 3.2mm;
        border-inline-start: 0.3mm solid var(--line);
    }

    #reportPrintTemplate .sp-info > div:first-child {
        border-inline-start: 0;
    }

    #reportPrintTemplate .sp-info small {
        display: block;
        font-size: 7.5pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-info b {
        font-size: 9.5pt;
        font-weight: 800;
    }

    #reportPrintTemplate .sp-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3mm;
        margin-bottom: 3.5mm;
    }

    #reportPrintTemplate .sp-cards > div {
        --c: var(--ac);
        display: flex;
        align-items: center;
        gap: 3mm;
        padding: 2.4mm 3.2mm;
        border: 0.3mm solid color-mix(in srgb, var(--c) 35%, #fff);
        border-radius: 3mm;
        background: color-mix(in srgb, var(--c) 6%, #fff);
        break-inside: avoid;
    }

    #reportPrintTemplate .sp-cards > div.is-main {
        color: #fff !important;
        border: 0;
        background: var(--ac) !important;
    }

    #reportPrintTemplate .sp-cards > div.is-green {
        --c: #2fa56d;
    }
    #reportPrintTemplate .sp-cards > div.is-amber {
        --c: #c98a14;
    }
    #reportPrintTemplate .sp-cards > div.is-red {
        --c: #d6553a;
    }
    #reportPrintTemplate .sp-cards > div.is-blue {
        --c: #4f6fe8;
    }

    #reportPrintTemplate .sp-cards i {
        width: 9mm;
        height: 9mm;
        display: grid;
        place-items: center;
        border-radius: 2.6mm;
        font-size: 13pt;
        color: var(--c);
        background: color-mix(in srgb, var(--c) 14%, #fff);
    }

    #reportPrintTemplate .sp-cards .is-main i {
        color: #fff;
        background: rgba(255,255,255,.25);
    }

    #reportPrintTemplate .sp-cards small {
        display: block;
        font-size: 7.5pt;
        font-weight: 700;
        opacity: .85;
    }

    #reportPrintTemplate .sp-cards b {
        font-size: 13pt;
        font-weight: 800;
    }

    #reportPrintTemplate .sp-cards em {
        margin-inline-start: 1mm;
        font-size: 7.5pt;
        font-style: normal;
        opacity: .8;
    }

    #reportPrintTemplate .sp-brk {
        display: flex;
        gap: 2.4mm;
        margin-bottom: 3.5mm;
    }

    #reportPrintTemplate .sp-brk > div {
        --c: var(--mute);
        flex: 1;
        display: flex;
        align-items: center;
        gap: 2mm;
        padding: 1.6mm 2.6mm;
        border: 0.3mm solid var(--line);
        border-radius: 2.6mm;
        font-size: 8.5pt;
        font-weight: 800;
        color: var(--c);
    }

    #reportPrintTemplate .sp-brk .is-red {
        --c: #d6553a;
    }
    #reportPrintTemplate .sp-brk .is-amber {
        --c: #c98a14;
    }
    #reportPrintTemplate .sp-brk .is-blue {
        --c: #4f6fe8;
    }
    #reportPrintTemplate .sp-brk .is-green {
        --c: #2fa56d;
    }
    #reportPrintTemplate .sp-brk .is-gray {
        --c: #7a88a6;
    }

    #reportPrintTemplate .sp-brk b {
        margin-inline-start: auto;
        font-size: 11pt;
    }

    /* ---------- tables ---------- */
    #reportPrintTemplate .sp-sec h2 {
        display: flex;
        align-items: center;
        gap: 2mm;
        margin: 0 0 1.6mm;
        font-size: 10.5pt;
        font-weight: 800;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-sec h2 span {
        display: inline-flex;
        align-items: center;
        gap: 2mm;
    }

    #reportPrintTemplate .sp-sec h2 em {
        margin-inline-start: auto;
        font-size: 8pt;
        font-style: normal;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
    }

    #reportPrintTemplate .sp-table thead {
        display: table-header-group;
    }

    #reportPrintTemplate .sp-table tr {
        break-inside: avoid;
    }

    #reportPrintTemplate .sp-table th {
        padding: 1.6mm 1.8mm;
        border: 0.3mm solid var(--line);
        font-size: 8pt;
        font-weight: 800;
        text-align: center;
        color: var(--ac);
        background: var(--ac2) !important;
    }

    #reportPrintTemplate .sp-table td {
        padding: 1.3mm 1.8mm;
        border: 0.3mm solid var(--line);
        font-weight: 700;
        text-align: center;
    }

    #reportPrintTemplate .sp-table .l {
        text-align: start;
    }

    #reportPrintTemplate .sp-table tfoot td {
        color: #fff !important;
        font-weight: 800;
        border-color: var(--ac);
        background: var(--ac) !important;
    }

    #reportPrintTemplate .sp-sub {
        font-size: 7pt;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-pl {
        font-size: 7.5pt;
        line-height: 1.6;
    }

    #reportPrintTemplate .sp-stt {
        display: inline-flex;
        align-items: center;
        padding: 0 2mm;
        border: 0.3mm solid;
        border-radius: 99px;
        font-size: 7.5pt;
        font-weight: 800;
        white-space: nowrap;
    }

    #reportPrintTemplate .sp-stt.ok {
        color: #2fa56d;
        border-color: #2fa56d;
        background: #eaf7f0;
    }
    #reportPrintTemplate .sp-stt.adv {
        color: #4f6fe8;
        border-color: #4f6fe8;
        background: #eef1fe;
    }
    #reportPrintTemplate .sp-stt.part {
        color: #c98a14;
        border-color: #c98a14;
        background: #fdf4e1;
    }
    #reportPrintTemplate .sp-stt.unpaid {
        color: #d6553a;
        border-color: #d6553a;
        background: #fdeeea;
    }
    #reportPrintTemplate .sp-stt.wait {
        color: #7a88a6;
        border-color: #9aa6bd;
        background: #f1f3f8;
    }

    #reportPrintTemplate .neg {
        color: #d6553a;
    }
    #reportPrintTemplate .pos {
        color: #2fa56d;
    }

    /* ---------- yearly matrix ---------- */
    #reportPrintTemplate .sp-mx td {
        height: 11mm;
        padding: 0.8mm 0.4mm;
    }

    #reportPrintTemplate .sp-mx th.sp-s1 {
        color: #4f8a22;
        background: #e6f3d8 !important;
    }
    #reportPrintTemplate .sp-mx th.sp-s2 {
        color: #14803f;
        background: #cfeadb !important;
    }
    #reportPrintTemplate .sp-mx th.sp-s3 {
        color: #b45a1b;
        background: #fbe3d2 !important;
    }
    #reportPrintTemplate .sp-mx th.sp-s4 {
        color: #2c73bd;
        background: #dcebfa !important;
    }
    #reportPrintTemplate .sp-mx td.sp-q1 {
        background: #f3faea;
    }
    #reportPrintTemplate .sp-mx td.sp-q2 {
        background: #e9f6ee;
    }
    #reportPrintTemplate .sp-mx td.sp-q3 {
        background: #fff3ea;
    }
    #reportPrintTemplate .sp-mx td.sp-q4 {
        background: #eff6fd;
    }

    #reportPrintTemplate .sp-mk {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2mm;
        min-width: 10.5mm;
        padding: 0.5mm 0.8mm;
        border: 0.3mm solid;
        border-radius: 1.8mm;
        font-size: 6.8pt;
        font-weight: 800;
        line-height: 1.2;
        background: #fff;
    }

    #reportPrintTemplate .sp-mk i {
        font-size: 9pt;
    }

    #reportPrintTemplate .sp-mk.ok {
        color: #fff;
        border-color: #2fa56d;
        background: #2fa56d !important;
    }
    #reportPrintTemplate .sp-mk.adv {
        color: #4f6fe8;
        border-color: #4f6fe8;
    }
    #reportPrintTemplate .sp-mk.part {
        color: #c98a14;
        border-color: #c98a14;
    }
    #reportPrintTemplate .sp-mk.unpaid {
        color: #d6553a;
        border-color: #d6553a;
    }
    #reportPrintTemplate .sp-mk.wait {
        color: #7a88a6;
        border-color: #b4bccc;
        border-style: dashed;
    }

    #reportPrintTemplate .sp-mk.nh {
        height: 7mm;
        justify-content: center;
        color: #9aa3b6;
        border: 0;
        background: repeating-linear-gradient(135deg, #e6e9f0 0 1mm, transparent 1mm 2mm) !important;
    }

    #reportPrintTemplate .sp-mk.nd0 {
        min-width: 4mm;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    #reportPrintTemplate .sp-mk.nd0::before {
        content: "";
        width: 3.2mm;
        height: 3.2mm;
        border: 0.45mm solid #6fbf94;
        border-radius: 50%;
        background: #d6f1e2;
    }

    #reportPrintTemplate .sp-dash {
        color: #b4bccc;
    }

    #reportPrintTemplate .sp-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 2.6mm;
        margin: 2.4mm 0;
        font-size: 7.5pt;
        font-weight: 800;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-legend span {
        display: inline-flex;
        align-items: center;
        gap: 1.4mm;
    }

    #reportPrintTemplate .sp-legend i {
        color: var(--c);
        font-size: 10pt;
    }

    /* ---------- employee report ---------- */
    #reportPrintTemplate .sp-emp {
        display: flex;
        align-items: center;
        gap: 3.4mm;
        margin: 3.5mm 0;
        padding: 2.8mm 4mm;
        border: 0.3mm solid var(--line);
        border-radius: 3.6mm;
        background: linear-gradient(135deg, var(--ac2), #fff) !important;
    }

    #reportPrintTemplate .sp-av {
        width: 12mm;
        height: 12mm;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 15pt;
        font-weight: 800;
        color: #fff;
        background: var(--ac) !important;
    }

    #reportPrintTemplate .sp-emp b {
        font-size: 12pt;
        font-weight: 800;
    }

    #reportPrintTemplate .sp-emp small {
        display: block;
        font-size: 8pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-kv {
        display: flex;
        gap: 5mm;
        margin-inline-start: auto;
    }

    #reportPrintTemplate .sp-kv > div {
        text-align: center;
    }

    #reportPrintTemplate .sp-kv b {
        font-size: 10pt;
    }

    /* ---------- signatures ---------- */
    #reportPrintTemplate .sp-sign {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12mm;
        margin-top: 12mm;
        break-inside: avoid;
        font-size: 8.5pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-sign > div {
        padding-top: 1.4mm;
        border-top: 0.3mm solid #8a94a6;
        text-align: center;
    }

    #reportPrintTemplate .sp-sign > div:nth-child(3):last-child {
        grid-column: auto;
    }

    /* ---------- salary slip ---------- */
    #reportPrintTemplate .sp-wm {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;
    }

    #reportPrintTemplate .sp-wm i {
        font-size: 120mm;
        color: color-mix(in srgb, var(--ac) 7%, #fff);
        transform: rotate(-12deg);
    }

    #reportPrintTemplate .sp-slh {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 4mm;
        padding-bottom: 4mm;
        border-bottom: 0.7mm solid var(--ac);
    }

    #reportPrintTemplate .sp-slh h1 {
        margin: 0;
        font-size: 24pt;
        font-weight: 800;
    }

    #reportPrintTemplate .sp-no {
        margin-top: 1mm;
        font-size: 10pt;
        font-weight: 800;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-dtm {
        text-align: left;
        font-size: 9pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-dtm b {
        display: block;
        font-size: 11pt;
        color: var(--ink);
    }

    #reportPrintTemplate .sp-grid2 {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4mm;
        margin: 5mm 0;
    }

    #reportPrintTemplate .sp-box {
        position: relative;
        margin-bottom: 4mm;
        padding: 3.4mm 4mm;
        border: 0.3mm solid var(--line);
        border-radius: 4mm;
        break-inside: avoid;
    }

    #reportPrintTemplate .sp-grid2 .sp-box {
        margin-bottom: 0;
    }

    #reportPrintTemplate .sp-box h3 {
        display: flex;
        align-items: center;
        gap: 2mm;
        margin: 0 0 2mm;
        font-size: 10.5pt;
        font-weight: 800;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-row {
        display: flex;
        align-items: center;
        gap: 2mm;
        padding: 1.5mm 0;
        border-bottom: 0.25mm dashed var(--line);
        font-size: 9.5pt;
        font-weight: 700;
    }

    #reportPrintTemplate .sp-row:last-child {
        border-bottom: 0;
    }

    #reportPrintTemplate .sp-row i {
        font-size: 12pt;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-row b {
        margin-inline-start: auto;
        font-weight: 800;
    }

    #reportPrintTemplate .sp-big {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6mm;
        margin: 5mm 0;
        padding: 4mm 5mm;
        border: 0.6mm solid var(--ac);
        border-radius: 4.4mm;
        font-weight: 800;
        break-inside: avoid;
    }

    #reportPrintTemplate .sp-big small {
        display: block;
        font-size: 9pt;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-big b {
        font-size: 22pt;
        color: var(--ac);
    }

    #reportPrintTemplate .sp-big b.is-green {
        font-size: 15pt;
        color: #2fa56d;
    }

    #reportPrintTemplate .sp-bsig {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10mm;
        margin-top: 24mm;
        font-size: 9pt;
        font-weight: 700;
        color: var(--mute);
    }

    #reportPrintTemplate .sp-bsig > div {
        padding-top: 1.4mm;
        border-top: 0.3mm solid #8a94a6;
        text-align: center;
    }
}