* {
    box-sizing: border-box;
}

.footerhrart {
    color: #ff0000;
    /* display: none; */
}

.svgAudio {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0;
}

path {
    stroke-linecap: square;
    stroke: white;
    stroke-width: 0.5px;
}


/* body {
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-family: 'Lato', sans-serif;

} */


/* @font-face {
    font-family: 'Lato';
    src: url('./font/Lato-Regular.ttf');
    font-weight: normal;
    font-style: normal;
} */
label {
    display: block;
    font-weight: 500;
    text-align: center;
    font-size: 13px;
}


body {
    height: auto;
    widows: 100vh;
    overflow: scroll;
    font-family: 'Noto Kufi Arabic', sans-serif;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    color: #555;
    background-color: #ecf0f3;
}

.container-login {
    margin-top: 30px;
    margin-bottom: 20px;
    width: 350px;
    padding: 40px 35px 35px 35px;
    border-radius: 40px;
    background: #ecf0f3;
    overflow: hidden;
    box-shadow: 13px 13px 20px #c0ced1,
        -13px -13px 20px #ffffff;
}

.logo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0px 0px 2px #00DD80, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaaf, -8px -8px 15px #ffffff;
}

.logo img {
    width: 175px;
    height: 175px;

}

.title {
    text-align: center;
    font-size: 17px;
    padding-top: 24px;
    letter-spacing: 0.5px;
}

.sub-title {
    text-align: center;
    font-size: 17px;
    padding-top: 5px;
    letter-spacing: 0.5px;
}

.custom-fields {
    width: 100%;
    padding: 5px 5px 5px 5px;
}

.custom-fields input {
    outline: none;
    border: none;
    background: none;
    font-size: 15px;
    color: #555;
    padding: 15px 6px 15px 2px;
    text-align: center;
    width: 100%;
}

.username-field,
.password-field {
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 0px 0px 0px 7px;
    box-shadow: inset 5px 5px 5px #cbccd1, inset -5px -5px 5px #ffffff;
}

.btn-submit {
    outline: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 40px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
}

.btn-submit:hover {
    background-color: #2fdbb6;
}

.btn-submit:active {
    background-color: #1da88a;
}

.btn-logout {
    outline: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 40px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #f55252;
    margin-top: 10px;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
}

.btn-logout:hover {
    background-color: #ff4848;
}

.btn-logout:active {
    background-color: #eb5c5c;
}

.link {
    font-family: 'Noto Kufi Arabic', sans-serif;
    text-align: center;
    margin-top: 10px;
}

.link a {
    color: #aaa;
    text-decoration: none;
    font-size: 15px;
}

.btn-container {
    width: 100%;
    /* padding: 30px 5px 5px 5px; */
    display: flexbox;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.btn-container .btn-option {
    /* display: inline-grid;
    padding: 10px 20px; */
    outline: none;
    border: none;
    cursor: pointer;
    width: 43%;
    height: 40px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    margin: 5px;

}

.btn-green {
    outline: none;
    border: none;
    cursor: pointer;
    width: 43%;
    height: 40px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    margin: 5px;

}

.btn-green:hover {
    background-color: #2fdbb6;
}

.btn-green:active {
    background-color: #1da88a;
}

.btn-red {
    outline: none;
    border: none;
    cursor: pointer;
    width: 43%;
    height: 40px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #f55252;
    /* margin-top: 10px; */
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    margin: 5px;

}

.btn-red:hover {
    background-color: #ff4848;
}

.btn-red:active {
    background-color: #eb5c5c;
}


.btn-optionA {
    display: inline-grid;
    padding: 4px 20px;
    outline: none;
    border: none;
    cursor: pointer;
    width: 95%;
    height: 40px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    margin: 5px;

}

.btn-optionA:hover {
    background-color: #086fdd;
    /* Darker blue background color on hover */
    /* Add any other styles you want for the button on hover */
}

.btn-optionA {
    text-decoration: none;
}

.btn-optionA:active {
    background-color: #003c80;
    /* Even darker blue background color when clicked */
    /* Add any other styles you want for the button when it's clicked */
}

/* .horizontal-scroll-wrapper {
    width: 100px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    transform:rotate(-90deg) translateY(-100px);
    transform-origin: right top;
  }

  .horizontal-scroll-wrapper > div {
    width: 100px;
    height: 100px;
    transform: rotate(90deg);
    transform-origin: right top;
  } */

.menu-items {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    padding: 0px 10px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    text-align: center;
}

.row-items {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.row-items .title,
.row-items .price {
    font-size: 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    opacity: 0.85;
}

.row-items .title-exp {
    font-size: 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    opacity: 0.85;
    padding-top: 5px;
}

.box {
    padding-top: 10px;
    /* padding-bottom: 15px; */
    /* opacity: 0.6; */
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.attendanceStatusBox {
    padding: 13px;
    border-radius: 20px;
    background: #f8fbfe;
    border: 1px solid #dde9f2;
    box-shadow: 6px 6px 14px #d3dce4, -6px -6px 14px #ffffff;
    color: #31485c;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.attendance-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(109, 129, 147, 0.14);
    margin-bottom: 10px;
}

.attendance-status-title {
    color: #1f3b53;
    font-size: 14px;
    font-weight: 800;
}

#attendanceStatusDate {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef5fb;
    color: #42617b;
    font-size: 12px;
    text-align: center;
}

.attendance-refresh-button {
    border: none;
    cursor: pointer;
    min-width: 54px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #24cfaa, #52a7f8);
    color: #ffffff;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 4px 4px 10px #cbd6df, -4px -4px 10px #ffffff;
    flex: 0 0 auto;
}

.attendance-refresh-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.attendance-last-updated {
    color: #6d8193;
    font-size: 11px;
    font-weight: 500;
}

.attendance-status-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    text-align: right;
}

.attendance-status-row {
    min-height: 58px;
    padding: 10px 11px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 5px 5px 14px rgba(190, 202, 212, 0.48), -5px -5px 14px #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.attendance-status-row[hidden],
.permission-movement-summary[hidden] {
    display: none !important;
}

.attendance-check-in-card {
    background: linear-gradient(145deg, #effbf6, #ddf5eb);
}

.attendance-check-out-card {
    background: linear-gradient(145deg, #fff4f4, #fde5e7);
}

.attendance-permission-out-card {
    background: linear-gradient(145deg, #fff9ec, #fff0cf);
}

.attendance-return-office-card {
    background: linear-gradient(145deg, #eef7ff, #dfefff);
}

.attendance-status-label {
    color: #647c8f;
    font-size: 11px;
    font-weight: 700;
}

.attendance-status-value {
    color: #1f3b53;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    word-break: break-word;
}

.attendance-check-in-card .attendance-status-value {
    color: #106f57;
}

.attendance-check-out-card .attendance-status-value {
    color: #9a3d45;
}

.attendance-permission-out-card .attendance-status-value {
    color: #9a6a16;
}

.attendance-return-office-card .attendance-status-value {
    color: #226293;
}

.attendance-status-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.permission-movement-summary {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(109, 129, 147, 0.16);
    box-shadow: inset 2px 2px 7px rgba(190, 202, 212, 0.24), inset -2px -2px 7px #ffffff;
    text-align: right;
}

.permission-movement-summary-title {
    margin-bottom: 7px;
    color: #1f3b53;
    font-size: 12px;
    font-weight: 800;
}

.permission-movement-list {
    display: grid;
    gap: 7px;
}

.permission-movement-item {
    padding: 8px;
    border-radius: 11px;
    background: #f8fbfe;
    border: 1px solid rgba(109, 129, 147, 0.1);
}

.permission-movement-item.is-open {
    background: #eef8ff;
    border-color: rgba(42, 157, 214, 0.26);
}

.permission-movement-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #42617b;
    font-size: 11px;
    line-height: 1.7;
}

.permission-movement-reason {
    color: #1f3b53;
    font-weight: 800;
}

.hr-month-dialog {
    color: #253f56;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.hr-month-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hr-month-title {
    color: #17364f;
    font-size: 16px;
    font-weight: 800;
    text-align: right;
}

.hr-month-subtitle {
    color: #6d8193;
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}

.hr-month-picker {
    border: none;
    outline: none;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 14px;
    background: #eef5fb;
    color: #31485c;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: 700;
    box-shadow: inset 3px 3px 7px #d5dfe8, inset -3px -3px 7px #ffffff;
}

.hr-month-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hr-month-summary div {
    border-radius: 16px;
    padding: 10px 12px;
    background: #f8fbfe;
    border: 1px solid #e0ebf5;
    text-align: center;
}

.hr-month-summary span,
.hr-month-summary strong {
    display: block;
}

.hr-month-summary span {
    color: #6b8194;
    font-size: 11px;
    margin-bottom: 4px;
}

.hr-month-summary strong {
    color: #17364f;
    font-size: 18px;
}

.hr-month-table-shell {
    max-height: 440px;
    overflow: auto;
    border-radius: 18px;
    border: 1px solid #dce8f2;
}

.hr-month-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.hr-month-table th,
.hr-month-table td {
    padding: 10px 9px;
    text-align: center;
    border-bottom: 1px solid #e6eef6;
    vertical-align: middle;
}

.hr-month-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eef5fb;
    color: #2d4f6a;
    font-weight: 800;
}

.hr-month-table tr.is-complete td {
    background: #f0fbf7;
}

.hr-month-table tr.is-leave td {
    background: #eef8ff;
}

.hr-month-table tr.is-day-off td {
    background: #f4f7f8;
    color: #687985;
}

.hr-month-table tr.is-partial td {
    background: #fff8ea;
}

.hr-month-table tr.is-empty td,
.hr-month-table tr.is-unauthorized-absence td {
    background: #fff3f3;
}

.hr-month-table tr.is-future td {
    background: #f7f9fb;
    color: #7e8f9d;
}

.hr-month-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 800;
}

.hr-month-status-pill.is-complete {
    background: #1fa883;
}

.hr-month-status-pill.is-leave {
    background: #2f86c9;
}

.hr-month-status-pill.is-day-off {
    background: #8aa0b1;
}

.hr-month-status-pill.is-partial {
    background: #d6a840;
}

.hr-month-status-pill.is-empty,
.hr-month-status-pill.is-unauthorized-absence {
    background: #c85c5c;
}

.hr-month-status-pill.is-future {
    background: #8aa0b1;
}

.hr-month-time-cell {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.hr-month-time-cell strong {
    color: #17364f;
    font-size: 12px;
}

.hr-month-adjustment-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e8f8f1;
    color: #17715a;
    font-size: 10px;
    font-weight: 800;
}

.hr-month-requests {
    display: grid;
    gap: 5px;
    margin-top: 7px;
    justify-items: stretch;
}

.hr-month-request-chip {
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    font-family: 'Noto Kufi Arabic', sans-serif;
    text-align: right;
}

.hr-month-request-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-month-request-chip strong {
    flex: 0 0 auto;
}

.hr-month-day-requests-dialog {
    display: grid;
    gap: 10px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    text-align: right;
}

.hr-month-day-requests-list {
    display: grid;
    gap: 10px;
}

.hr-month-day-request-card {
    border: 1px solid #dce8f2;
    border-radius: 14px;
    background: #f8fbfe;
    padding: 11px 12px;
}

.hr-month-day-request-card.is-pending {
    background: #fff9ea;
    border-color: #f5d893;
}

.hr-month-day-request-card.is-approved {
    background: #eefcf6;
    border-color: #bcebdc;
}

.hr-month-day-request-card.is-rejected {
    background: #fff0f1;
    border-color: #f4c3c8;
}

.hr-month-day-request-card header {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hr-month-day-request-card header strong {
    color: #17364f;
    font-size: 13px;
    font-weight: 900;
}

.hr-month-day-request-card header span {
    border-radius: 999px;
    background: rgba(15, 58, 85, 0.08);
    color: #5f7280;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
}

.hr-month-day-request-card p {
    align-items: start;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(82px, 0.34fr) 1fr;
    margin: 5px 0;
}

.hr-month-day-request-card p b,
.hr-month-day-request-card p span,
.hr-month-day-requests-empty {
    color: #667786;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
}

.hr-month-day-request-card p span {
    color: #17364f;
}

.hr-month-day-requests-empty {
    border: 1px dashed #dce8f2;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

.hr-month-request-chip.is-pending {
    background: #fff5dc;
    color: #8a6520;
}

.hr-month-request-chip.is-approved {
    background: #e8f8f1;
    color: #17715a;
}

.hr-month-request-chip.is-rejected {
    background: #ffe9ea;
    color: #9a3d45;
}

.hr-month-day-request-button {
    border: 0;
    border-radius: 999px;
    background: #e5fbf5;
    color: #00856d;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 10px;
    font-weight: 900;
    min-height: 30px;
    padding: 5px 10px;
    white-space: nowrap;
}

.hr-month-day-request-button:hover {
    background: #28ccb0;
    color: #fff;
}

.hr-month-day-action-dialog {
    display: grid;
    gap: 10px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    text-align: right;
}

.hr-month-day-action-head {
    border: 1px solid #dce8f2;
    border-radius: 14px;
    background: #f8fbfe;
    padding: 10px 12px;
}

.hr-month-day-action-head strong,
.hr-month-day-action-head span {
    display: block;
}

.hr-month-day-action-head strong {
    color: #17364f;
    font-size: 14px;
}

.hr-month-day-action-head span {
    color: #708090;
    font-size: 12px;
    margin-top: 3px;
}

.hr-month-day-action-dialog button {
    border: 1px solid #dce8f2;
    border-radius: 14px;
    background: #ffffff;
    color: #213a4d;
    cursor: pointer;
    display: grid;
    gap: 3px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    padding: 11px 13px;
    text-align: right;
}

.hr-month-day-action-dialog button:hover {
    border-color: rgba(40, 204, 176, 0.55);
    background: #effcf8;
}

.hr-month-day-action-dialog button strong {
    color: #00856d;
    font-size: 13px;
}

.hr-month-day-action-dialog button span {
    color: #708090;
    font-size: 11px;
    line-height: 1.6;
}

.hr-adjustment-request-button,
.hr-month-status-button {
    width: 92% !important;
}

.hr-adjustment-dialog .swal2-input,
.hr-adjustment-dialog .swal2-textarea {
    width: 86%;
    margin: 8px auto;
    direction: rtl;
    text-align: right;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.hr-request-hint {
    width: 86%;
    margin: 0 auto 8px;
    color: #70808a;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    text-align: right;
}

.hr-request-hint.is-error {
    color: #9a3d45;
    background: #ffe9ea;
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.hr-request-hint.is-success {
    color: #007f6c;
    background: #e5fbf5;
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.hr-request-field-label {
    display: block;
    width: 86%;
    margin: 8px auto -2px;
    color: #4f5f68;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.hr-request-multi-day-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 86%;
    margin: 8px auto 2px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #4f5f68;
    background: #f5f8fa;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    box-sizing: border-box;
}

.hr-request-multi-day-toggle input {
    flex: 0 0 auto;
}

.hr-request-duration-preview {
    width: 86%;
    margin: 4px auto 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #007f6c;
    background: #e5fbf5;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
}

.hr-request-duration-preview span {
    display: block;
}

.hr-request-duration-preview.is-error {
    color: #9a3d45;
    background: #ffe9ea;
}

.hr-my-requests-card {
    width: 100%;
    margin: 18px auto 0;
    padding: 13px;
    border: 1px solid #dce7ee;
    border-radius: 20px;
    background: #f8fbfe;
    box-shadow: 6px 6px 14px #d3dce4, -6px -6px 14px #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

.hr-my-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hr-my-requests-head {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    text-align: right;
}

.hr-my-requests-title {
    color: #22384d;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.6;
}

.hr-my-requests-note {
    line-height: 1.8;
}

.hr-my-requests-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
}

.hr-my-requests-note,
.hr-my-request-item span,
.hr-my-request-item small,
.hr-my-requests-empty {
    color: #6f7f8d;
    font-size: 0.84rem;
}

.hr-my-requests-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding-left: 4px;
    scrollbar-width: thin;
}

.hr-my-requests-list::-webkit-scrollbar {
    width: 6px;
}

.hr-my-requests-list::-webkit-scrollbar-thumb {
    background: #c9d8df;
    border-radius: 999px;
}

.hr-my-request-item {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(248, 252, 255, 0.86);
    border: 1px solid #e1ebf2;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.hr-my-request-main {
    min-width: 0;
}

.hr-my-request-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 7px 8px;
    text-align: right;
    width: 100%;
}

.hr-my-request-toggle span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.hr-my-request-toggle span > strong {
    color: #1f3547;
    display: block;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.7;
    text-align: right;
}

.hr-employee-request-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.hr-employee-request-chips span {
    align-items: center;
    background: rgba(238, 246, 248, 0.92);
    border: 1px solid rgba(15, 58, 85, 0.08);
    border-radius: 8px;
    color: #6d7f8d;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.5;
    min-height: 23px;
    padding: 3px 7px;
}

.hr-my-request-toggle em {
    align-items: center;
    background: #f2f7f9;
    border-radius: 999px;
    box-shadow: inset 1px 1px 3px rgba(191, 204, 214, 0.45), inset -1px -1px 3px rgba(255, 255, 255, 0.85);
    color: #6d8290;
    display: inline-flex;
    flex: 0 0 25px;
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 800;
    height: 25px;
    justify-content: center;
    line-height: 1;
    transition: transform 0.18s ease;
}

.hr-my-request-item.is-open .hr-my-request-toggle em {
    transform: rotate(90deg);
}

.hr-my-request-body {
    margin-top: 7px;
}

.hr-my-request-item strong,
.hr-my-request-item span {
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.hr-my-request-main > strong {
    color: #203747;
    font-size: 0.9rem;
    line-height: 1.7;
}

.hr-my-request-main > span {
    line-height: 1.8;
}

.hr-my-request-details {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr;
    margin-top: 5px;
}

.hr-my-request-details span {
    border-radius: 8px;
    background: rgba(244, 248, 250, 0.82);
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr;
    padding: 7px 9px;
    text-align: right;
}

.hr-my-request-details small,
.hr-my-request-details strong {
    display: block;
}

.hr-my-request-details small {
    color: #82909b;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.5;
}

.hr-my-request-details strong {
    color: #33495b;
    font-size: 0.8rem;
    font-weight: 850;
    line-height: 1.6;
    text-align: right;
    width: 100%;
}

.hr-my-request-time-change,
.hr-request-history-time-change {
    align-items: center;
    background: linear-gradient(135deg, #f2fffb, #ffffff);
    border: 1px solid rgba(36, 207, 170, 0.2);
    border-radius: 11px;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-top: 7px;
    padding: 9px 10px;
}

.hr-my-request-time-change span,
.hr-request-history-time-change span {
    display: grid;
    gap: 3px;
    text-align: center;
}

.hr-my-request-time-change small,
.hr-request-history-time-change small {
    color: #708090;
    font-size: 0.66rem;
    font-weight: 900;
}

.hr-my-request-time-change strong,
.hr-request-history-time-change strong {
    color: #008a72;
    font-size: 0.88rem;
    font-weight: 950;
}

.hr-my-request-time-change em,
.hr-request-history-time-change em {
    color: #9ab0ba;
    font-style: normal;
    font-weight: 950;
}

.hr-my-request-note {
    margin-top: 7px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #eef5f4;
    color: #526979;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.7;
}

.hr-my-request-note.is-approved-time-note {
    background: #fff8e8;
    border: 1px solid rgba(225, 170, 45, 0.26);
    color: #6e5318;
}

.hr-my-request-note.is-warning-note {
    background: #fff8e8;
    border: 1px solid rgba(225, 170, 45, 0.26);
    color: #6e5318;
}

.hr-my-request-steps {
    display: grid;
    gap: 6px;
    margin-top: 7px;
}

.hr-my-request-steps span {
    border-radius: 9px;
    background: #f4f8fa;
    color: #526979;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.7;
    padding: 6px 8px;
    text-align: right;
    word-break: normal;
    overflow-wrap: break-word;
}

.hr-my-request-steps span.is-approved {
    background: #e9fbf6;
    color: #008a72;
}

.hr-my-request-steps span.is-rejected {
    background: #fff1f2;
    color: #c83232;
}

.hr-my-request-steps span.is-skipped {
    background: #eef3f6;
}

.hr-my-request-steps small {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
}

.hr-my-request-meta {
    display: grid;
    align-content: center;
    align-items: center;
    gap: 8px;
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: stretch;
    min-width: 0;
}

.hr-my-request-meta small {
    max-width: none;
    border-radius: 9px;
    background: #f4f8fa;
    color: #526979;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.7;
    padding: 6px 8px;
    text-align: right;
}

.hr-my-request-meta .hr-month-request-chip {
    margin: 0;
    min-height: 32px;
    width: 100%;
    white-space: normal;
}

.hr-my-request-cancel {
    border: 0;
    border-radius: 999px;
    background: #fff1f2;
    color: #c83232;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    min-height: 34px;
    padding: 7px 12px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.hr-my-request-cancel:hover {
    background: #ff4f4f;
    color: #fff;
    transform: translateY(-1px);
}

.hr-my-requests-open-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 96px;
    text-decoration: none;
}

.hr-month-request-chip.is-cancelled {
    background: #eef3f6;
    color: #607380;
}

.hr-my-request-item.is-cancelled {
    opacity: 0.82;
}

.hr-requests-page {
    display: grid;
    gap: 14px;
    margin: 18px auto 0;
    width: min(100%, 720px);
}

.hr-requests-hero,
.hr-requests-filters,
.hr-requests-summary,
.hr-request-history-card {
    border: 1px solid #dce7ee;
    border-radius: 20px;
    background: #f8fbfe;
    box-shadow: 6px 6px 14px #d3dce4, -6px -6px 14px #ffffff;
    box-sizing: border-box;
}

.hr-requests-hero {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 18px;
    text-align: right;
}

.hr-requests-hero span,
.hr-requests-filters span,
.hr-request-history-grid span {
    color: #7d8b96;
    font-size: 0.78rem;
    font-weight: 850;
}

.hr-requests-hero h1 {
    color: #22384d;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.5;
    margin: 2px 0 4px;
}

.hr-requests-hero p {
    color: #607380;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.8;
    margin: 0;
}

.hr-requests-back,
.hr-request-history-actions a,
.hr-requests-filters button,
.hr-requests-refresh-button,
.hr-requests-clear-button,
.hr-requests-filters a {
    border: 0;
    border-radius: 999px;
    box-shadow: 3px 6px 10px rgba(36, 201, 171, 0.22);
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    min-height: 38px;
    padding: 9px 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.hr-requests-back {
    justify-self: flex-start;
}

.hr-requests-back,
.hr-request-history-actions a,
.hr-requests-filters button {
    background: #25c9ab;
    color: #fff;
}

.hr-requests-refresh-button {
    background: linear-gradient(135deg, #24cfaa, #52a7f8) !important;
    color: #fff !important;
}

.hr-requests-filters a {
    background: #eef5f8;
    color: #607380;
    box-shadow: none;
}

.hr-requests-clear-button {
    background: #eef5f8 !important;
    color: #607380 !important;
    box-shadow: none !important;
}

.hr-requests-filters {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    padding: 14px;
}

.hr-requests-filters label {
    display: grid;
    gap: 6px;
    text-align: right;
}

.hr-requests-filters input,
.hr-requests-filters select {
    background: #fbfdff;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 4px 4px 8px #d4dde4, inset -4px -4px 8px #ffffff;
    box-sizing: border-box;
    color: #33495b;
    font-family: inherit;
    font-weight: 800;
    min-height: 40px;
    padding: 8px 14px;
    text-align: center;
    width: 100%;
}

.hr-requests-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 12px;
}

.hr-requests-summary div {
    border-radius: 14px;
    background: #f1f7fa;
    padding: 10px;
    text-align: center;
}

.hr-requests-summary strong,
.hr-requests-summary span {
    display: block;
}

.hr-requests-summary strong {
    color: #008a72;
    font-size: 1.2rem;
    font-weight: 950;
}

.hr-requests-summary span {
    color: #607380;
    font-size: 0.78rem;
    font-weight: 850;
}

.hr-requests-list-page {
    display: grid;
    gap: 12px;
}

.hr-requests-list-page.is-loading {
    opacity: 0.68;
    pointer-events: none;
}

.hr-request-history-card {
    border-right: 5px solid #d7e4ec;
    padding: 14px;
}

.hr-request-history-card.is-pending {
    border-right-color: #e7b33b;
}

.hr-request-history-card.is-approved {
    border-right-color: #25c9ab;
}

.hr-request-history-card.is-rejected {
    border-right-color: #ff4f4f;
}

.hr-request-history-card.is-cancelled {
    border-right-color: #9aabb6;
}

.hr-request-history-head {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    justify-content: stretch;
    text-align: right;
}

.hr-request-history-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.hr-request-history-badges .hr-employee-request-chips {
    margin-top: 0;
}

.hr-request-history-head h2 {
    color: #22384d;
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.7;
    margin: 4px 0;
    text-align: right;
    width: 100%;
}

.hr-request-history-head p {
    color: #6f7f8d;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.8;
    margin: 0;
    text-align: right;
    width: 100%;
}

.hr-request-history-badges > strong,
.hr-request-history-type {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.4;
    padding: 7px 11px;
}

.hr-request-history-badges > strong {
    background: #fff8e8;
    color: #9b6c09;
}

.hr-request-history-type {
    background: #e5fbf5;
    color: #008a72;
}

.hr-request-history-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.hr-request-history-grid div {
    border-radius: 12px;
    background: #f2f8fb;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr;
    min-height: 38px;
    padding: 8px 11px;
    text-align: right;
}

.hr-request-history-grid strong {
    color: #2e4657;
    display: block;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.6;
    text-align: right;
    width: 100%;
}

.hr-request-history-note {
    background: #eef6f7;
    border-radius: 12px;
    color: #526979;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.8;
    margin-top: 10px;
    padding: 9px 11px;
    text-align: right;
}

.hr-request-history-facts {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: 10px;
}

.hr-request-history-facts div {
    background: #f7fbfd;
    border: 1px solid #dce7ee;
    border-radius: 12px;
    padding: 8px 10px;
    text-align: right;
}

.hr-request-history-facts span,
.hr-request-history-facts strong {
    display: block;
    line-height: 1.6;
}

.hr-request-history-facts span {
    color: #7d8b96;
    font-size: 0.72rem;
    font-weight: 850;
}

.hr-request-history-facts strong {
    color: #22384d;
    font-size: 0.84rem;
    font-weight: 950;
}

.hr-request-history-note.is-admin-note {
    background: #f3fbf7;
    color: #008a72;
}

.hr-request-history-note.is-reopen-note {
    background: #fff8e8;
    color: #8c6410;
}

.hr-request-history-note.is-approved-time-note {
    background: #f7f0ff;
    color: #6750a4;
}

.hr-request-history-note.is-warning-note {
    background: #fff8e8;
    color: #8c6410;
}

.hr-request-history-steps {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    margin-top: 10px;
}

.hr-request-history-steps span {
    border: 1px solid #dce7ee;
    border-radius: 12px;
    background: #f5f9fb;
    box-sizing: border-box;
    padding: 8px 10px;
    text-align: right;
}

.hr-request-history-steps b,
.hr-request-history-steps em,
.hr-request-history-steps small {
    display: block;
}

.hr-request-history-steps b {
    color: #607380;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.6;
}

.hr-request-history-steps em {
    color: #22384d;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1.7;
}

.hr-request-history-steps small {
    color: #7d8b96;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.7;
}

.hr-request-history-steps .is-approved {
    background: #e9fbf6;
    border-color: #bfeee2;
}

.hr-request-history-steps .is-rejected {
    background: #fff1f2;
    border-color: #ffd6db;
}

.hr-request-history-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.welcome-card {
    position: relative;
    margin: 6px auto 18px;
    padding: 16px 18px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    background: linear-gradient(145deg, #ffffff, #edf4fa);
    box-shadow: 8px 8px 18px #d3dce4, -8px -8px 18px #ffffff;
    text-align: right;
}

.welcome-avatar-frame {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #24cfaa, #52a7f8);
    box-shadow: 6px 6px 12px #c0ced1, -6px -6px 12px #ffffff;
}

.welcome-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-avatar-fallback {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.welcome-copy {
    min-width: 0;
}

.welcome-label {
    color: #6d8193;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.welcome-name {
    color: #31485c;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.welcome-role {
    color: #657680;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

.welcome-approved-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-start: 0;
    color: #ffffff;
    background: #1877f2;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    border-radius: 50%;
    border: 3px solid #f7fbff;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.28);
    cursor: help;
}

.welcome-approved-badge:hover::after,
.welcome-approved-badge:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 8px);
    transform: translateY(-50%);
    z-index: 20;
    width: max-content;
    max-width: 160px;
    padding: 5px 9px;
    border-radius: 8px;
    color: #ffffff;
    background: #24333b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(36, 51, 59, 0.18);
}

.profile-avatar-card {
    padding: 18px 14px;
    margin-bottom: 20px;
    border-radius: 24px;
    box-shadow: inset 5px 5px 10px #d5dbe0, inset -5px -5px 10px #ffffff;
    text-align: center;
}

.profile-avatar-frame {
    width: 124px;
    height: 124px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #24cfaa, #52a7f8);
    box-shadow: 8px 8px 16px #c0ced1, -8px -8px 16px #ffffff;
}

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

.profile-avatar-fallback {
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}

.profile-avatar-actions input[type="file"] {
    width: 100%;
    margin-bottom: 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.profile-password-toggle {
    margin-bottom: 16px;
}

.documents-page-intro {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #eef5fb);
    border: 1px solid #d8e3ee;
    color: #426076;
    font-size: 13px;
    line-height: 1.9;
    text-align: center;
}

.documents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.document-card {
    padding: 16px 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff, #edf4fa);
    box-shadow: inset 4px 4px 10px #dce4eb, inset -4px -4px 10px #ffffff;
    text-align: right;
}

.certificates-card {
    margin-bottom: 18px;
}

.document-card-title {
    color: #1f3b53;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.document-card-note {
    color: #678096;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.document-preview {
    min-height: 70px;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px dashed #ced9e3;
    color: #60778b;
    font-size: 12px;
    line-height: 1.8;
}

.document-link {
    color: #0f6ab8;
    font-weight: 700;
    text-decoration: none;
}

.document-meta {
    margin-top: 6px;
    color: #7a8f9f;
    font-size: 11px;
}

.document-list-item+.document-list-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e3ebf3;
}

.document-card input[type="file"] {
    width: 100%;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-page-body {
    align-items: flex-start;
    padding: 18px 0 30px;
}

.archive-page-shell {
    width: min(1180px, calc(100vw - 48px));
    max-width: 1180px;
    padding: 34px 30px 28px;
    border-radius: 42px;
}

.archive-page-logo {
    width: 132px;
    height: 132px;
}

.archive-page-logo img {
    width: 126px;
    height: 126px;
}

.archive-page-title {
    font-size: 24px;
    line-height: 1.8;
}

.archive-page-subtitle {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: #6e8093;
    font-weight: 600;
}

.archive-workspace {
    margin-top: 20px;
}

.archive-hero {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 18px;
    margin-bottom: 22px;
}

.archive-welcome-card {
    margin: 0 0 18px;
}

.archive-hero-copy,
.archive-path-card,
.archive-panel {
    padding: 22px 22px 20px;
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #edf4fa);
    box-shadow: 8px 8px 18px #d3dce4, -8px -8px 18px #ffffff;
}

.archive-hero-label,
.archive-card-label {
    color: #72869a;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.archive-hero-title {
    margin: 0 0 10px;
    color: #1d344a;
    font-size: 24px;
    line-height: 1.7;
}

.archive-hero-text,
.archive-card-note,
.archive-panel-head p,
.archive-upload-note {
    margin: 0;
    color: #60778c;
    font-size: 13px;
    line-height: 2;
}

.archive-path-actions {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

.archive-path-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.archive-path-refresh-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-path-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.archive-path-copy-icon-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e8f4;
    border-radius: 10px;
    background: #f6fbff;
    color: #5f7f99;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    margin-inline-start: auto;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.archive-path-copy-icon-button:hover {
    background: #edf7ff;
    border-color: #c8def0;
    color: #2f6287;
    transform: translateY(-1px);
}

.archive-path-copy-button {
    border: 1px solid #d8e6f3;
    border-radius: 999px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #ffffff 0%, #eef6fd 100%);
    color: #426783;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.archive-path-copy-button:hover {
    background: linear-gradient(135deg, #fbfeff 0%, #e4f1fb 100%);
    transform: translateY(-1px);
}

.archive-path-sync-meta {
    color: #6e8194;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.archive-path-refresh-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #edf7ff 0%, #dff1ff 100%);
    color: #2f5f83;
    box-shadow: 0 10px 22px rgba(106, 159, 197, 0.14);
    border: 1px solid #cfe5f5;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.archive-path-refresh-button:hover {
    background: linear-gradient(135deg, #e4f3ff 0%, #d3ecff 100%);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(106, 159, 197, 0.18);
}

.archive-path-refresh-button:disabled {
    cursor: wait;
    opacity: 1;
    transform: none;
    color: #245f71;
    background: linear-gradient(135deg, #e8fbf6 0%, #d7f4ee 100%);
    border-color: #bce7df;
    box-shadow: 0 10px 22px rgba(60, 171, 149, 0.12);
    padding-inline-start: 18px;
    padding-inline-end: 38px;
    min-width: 148px;
}

.archive-path-refresh-button:disabled::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid rgba(36, 95, 113, 0.2);
    border-top-color: #1fbfa9;
    animation: archiveRefreshSpin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes archiveRefreshSpin {
    from {
        transform: rotate(0deg);
    }

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

.archive-path-preview {
    min-height: 88px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f6fafc;
    border: 1px dashed #c9d7e4;
    color: #2f506a;
    font-size: 14px;
    line-height: 2;
    word-break: break-word;
}

.archive-sticky-path-bar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: min(980px, calc(100vw - 36px));
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(201, 215, 228, 0.95);
    box-shadow: 0 14px 28px rgba(110, 142, 169, 0.18);
    backdrop-filter: blur(12px);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.archive-sticky-path-bar.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.archive-sticky-path-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.archive-sticky-path-label {
    color: #72869a;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 0;
}

.archive-sticky-path-text {
    color: #2f506a;
    font-size: 13px;
    line-height: 1.8;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.archive-sticky-copy-icon-button {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
    flex: 0 0 auto;
}

.archive-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 18px;
    align-items: start;
}

.archive-panel-head {
    margin-bottom: 18px;
}

.archive-panel-head h2 {
    margin: 0 0 6px;
    color: #1d344a;
    font-size: 19px;
}

.archive-flow-switcher {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 22px;
    background: #f6fafc;
    border: 1px solid #d5e2ec;
}

.archive-flow-switcher-label {
    color: #587286;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.archive-flow-switcher-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-flow-button {
    border: none;
    border-radius: 18px;
    padding: 11px 16px;
    background: #e8f1f7;
    color: #325772;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.archive-flow-button:hover {
    background: #dcecf6;
}

.archive-flow-button.is-active {
    background: linear-gradient(135deg, #1db5c8, #23d0a2);
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(29, 181, 200, 0.18);
}

.archive-drafts-panel {
    margin-top: 14px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5fbff 100%);
    border: 1px solid #cfe0ec;
    box-shadow: 0 14px 30px rgba(86, 128, 159, 0.08);
    position: relative;
}

.archive-drafts-panel::after {
    content: '';
    position: absolute;
    right: 18px;
    left: 18px;
    bottom: -12px;
    height: 1px;
    background: linear-gradient(90deg, rgba(191, 213, 228, 0) 0%, rgba(191, 213, 228, 0.95) 18%, rgba(191, 213, 228, 0.95) 82%, rgba(191, 213, 228, 0) 100%);
}

.archive-drafts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.archive-drafts-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-drafts-label {
    margin-bottom: 0;
}

.archive-drafts-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ebf6fd;
    color: #2f607f;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.archive-drafts-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-drafts-add-button {
    border: 1px solid #cde0ee;
    border-radius: 999px;
    padding: 8px 12px;
    background: #eef7fd;
    color: #2d5f80;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.archive-drafts-manage-button {
    padding: 7px 11px;
    background: #f7fbfe;
    color: #48657b;
    font-size: 10px;
}

.archive-drafts-add-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.archive-drafts-add-button:hover {
    background: #e2f2fc;
    border-color: #9ccbe4;
    transform: translateY(-1px);
}

.archive-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 214px;
    overflow-y: auto;
    padding-top: 4px;
    padding-left: 2px;
}

.archive-drafts-list::-webkit-scrollbar {
    width: 8px;
}

.archive-drafts-list::-webkit-scrollbar-track {
    background: #eef5fa;
    border-radius: 999px;
}

.archive-drafts-list::-webkit-scrollbar-thumb {
    background: #bfd5e4;
    border-radius: 999px;
}

.archive-draft-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: #ffffff;
    color: #24465f;
    font-family: 'Noto Kufi Arabic', sans-serif;
    text-align: right;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.archive-draft-card:hover {
    border-color: #a9cfe4;
    box-shadow: 0 8px 18px rgba(64, 117, 155, 0.08);
    transform: none;
}

.archive-draft-card.is-active {
    border-color: rgba(29, 181, 200, 0.42);
    background: linear-gradient(135deg, rgba(29, 181, 200, 0.12), rgba(35, 208, 162, 0.14));
    box-shadow: 0 14px 24px rgba(29, 181, 200, 0.12);
}

.archive-draft-card.is-locked {
    border-color: rgba(241, 176, 48, 0.38);
    background: linear-gradient(135deg, rgba(255, 243, 214, 0.92), rgba(255, 249, 232, 0.98));
}

.archive-draft-card.is-invalid {
    border-color: rgba(209, 87, 103, 0.38);
    background: linear-gradient(135deg, rgba(255, 241, 243, 0.96), rgba(255, 248, 249, 0.98));
}

.archive-draft-card.is-active.is-invalid {
    border-color: rgba(29, 181, 200, 0.5);
    background: linear-gradient(135deg, rgba(29, 181, 200, 0.12), rgba(35, 208, 162, 0.16));
    box-shadow:
        0 14px 24px rgba(29, 181, 200, 0.12),
        0 0 0 2px rgba(209, 87, 103, 0.12);
}

.archive-draft-card-main {
    min-width: 0;
    flex: 1;
    max-width: 100%;
}

.archive-draft-card-title {
    color: #5f7b90;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 3px;
}

.archive-draft-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-draft-card-files-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef6fb;
    color: #53748c;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

.archive-draft-card-inline-hint {
    color: #8b6723;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    flex: 1 1 auto;
    min-width: 120px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-draft-card-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
}

.archive-draft-card-status-badge.is-ready {
    background: #eef6fb;
    color: #53748c;
}

.archive-draft-card-status-badge.is-missing {
    background: #fff3de;
    color: #9a6616;
}

.archive-draft-card-status-badge.is-queued {
    background: #f4edff;
    color: #6d4eb0;
}

.archive-draft-card-status-badge.is-uploading {
    background: #eef7fd;
    color: #2b6688;
}

.archive-draft-card-status-badge.is-background {
    background: #fff6dd;
    color: #8d6a16;
}

.archive-draft-card-status-badge.is-completed {
    background: #e4f8ec;
    color: #177248;
}

.archive-draft-card-status-badge.is-error {
    background: #fdecec;
    color: #c04f59;
}

.archive-draft-card-meta {
    color: #1f435b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.archive-draft-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.archive-draft-card-action {
    border: 1px solid #d7e4ee;
    border-radius: 999px;
    background: #ffffff;
    color: #44657d;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.archive-draft-card-action:hover {
    transform: translateY(-1px);
}

.archive-draft-card-action.is-warning {
    background: #fff7e5;
    border-color: #f0d38e;
    color: #93681d;
}

.archive-draft-card-action.is-warning:hover {
    background: #fff0c8;
}

.archive-draft-card-action.is-neutral {
    background: #eef7fd;
    border-color: #b8d6e8;
    color: #3d6886;
}

.archive-draft-card-action.is-neutral:hover {
    background: #e2f1fb;
}

.archive-draft-card-action.is-danger {
    background: #fdecec;
    border-color: #f3b9bf;
    color: #b24a55;
}

.archive-draft-card-action.is-danger:hover {
    background: #fce1e3;
}

.archive-draft-card-delete {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    border-radius: 999px;
    background: #fdecec;
    color: #d04f5c;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.archive-draft-card-delete:hover {
    background: #fbd8db;
    transform: scale(1.04);
}

.archive-upload-dropzone.is-disabled {
    opacity: 0.58;
    pointer-events: none;
    filter: grayscale(0.12);
}

.archive-progress-jobs {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: #bfd5e4 #eef5fa;
}

.archive-progress-jobs::-webkit-scrollbar {
    width: 8px;
}

.archive-progress-jobs::-webkit-scrollbar-track {
    background: #eef5fa;
    border-radius: 999px;
}

.archive-progress-jobs::-webkit-scrollbar-thumb {
    background: #bfd5e4;
    border-radius: 999px;
}

.archive-progress-job {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 9px 11px;
    border-radius: 16px;
    background: #f7fbfe;
    border: 1px solid #dce9f2;
    overflow: hidden;
}

.archive-progress-job.is-waiting {
    background: linear-gradient(180deg, #fffdf7 0%, #fff8ee 100%);
    border-color: #f0d8aa;
}

.archive-progress-job-main {
    min-width: 0;
    width: 100%;
}

.archive-progress-job-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}

.archive-progress-job-title {
    color: #234862;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.archive-progress-job-detail {
    color: #698195;
    font-size: 10px;
    line-height: 1.7;
    margin-top: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-progress-job-file-meta {
    color: #4f6780;
    font-size: 10px;
    line-height: 1.5;
    margin-top: 3px;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-all;
    white-space: normal;
}

.archive-progress-job-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.archive-progress-job-badge.is-uploading {
    background: #eef7fd;
    color: #2b6688;
}

.archive-progress-job-badge.is-waiting {
    background: #fff2cf;
    color: #9c6a10;
}

.archive-progress-job-badge.is-ready {
    background: #eef6fb;
    color: #53748c;
}

.archive-progress-job-badge.is-queued {
    background: #f4edff;
    color: #6d4eb0;
}

.archive-progress-job-badge.is-background {
    background: #fff6dd;
    color: #8d6a16;
}

.archive-progress-job-badge.is-completed {
    background: #e4f8ec;
    color: #177248;
}

.archive-progress-job-badge.is-error {
    background: #fdecec;
    color: #c04f59;
}

.archive-progress-job-badge.is-cancelled {
    background: #f1f4f7;
    color: #6d7f90;
}

.archive-progress-job-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.archive-progress-job.is-waiting .archive-draft-card-action.is-danger.is-compact {
    padding: 4px 10px;
    min-height: 28px;
    font-size: 10px;
    border-radius: 999px;
    box-shadow: none;
    background: #fff5f5;
}

.archive-progress-job-actions .archive-draft-card-action {
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: none;
    flex: 0 0 auto;
    max-width: 100%;
}

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

.archive-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    position: relative;
    border-radius: 22px;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.archive-field[hidden] {
    display: none !important;
}

.archive-field-wide {
    grid-column: 1 / -1;
}

.archive-program-search-only {
    grid-column: 1 / -1;
}

.archive-field label {
    color: #425f76;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    transition: color 0.18s ease;
}

.archive-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.archive-field-head label {
    margin: 0;
}

.archive-field-verify-button {
    width: 30px;
    height: 30px;
    border: 1px solid #d9e8f4;
    border-radius: 999px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%);
    color: #6c8498;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.archive-field-verify-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(64, 143, 191, 0.12);
}

.archive-field-verify-button[data-state="pending"] {
    color: #6e7d92;
    border-color: #d8e4ef;
    background: linear-gradient(135deg, #f6f9fc 0%, #edf4fa 100%);
}

.archive-field-verify-button[data-state="success"] {
    color: #1c8f63;
    border-color: #bfe9d8;
    background: linear-gradient(135deg, #edfff7 0%, #daf6ea 100%);
    box-shadow: 0 10px 22px rgba(38, 185, 124, 0.16);
}

.archive-field-verify-button[data-state="error"] {
    color: #c84b5d;
    border-color: #f1c4cc;
    background: linear-gradient(135deg, #fff5f6 0%, #ffe9ec 100%);
    box-shadow: 0 10px 22px rgba(221, 87, 108, 0.14);
}

.archive-field-hint {
    color: #74899c;
    font-size: 11px;
    line-height: 1.8;
    margin-top: 2px;
}

.archive-general-rating-scale {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px;
    direction: rtl;
}

.archive-general-rating-button {
    border: none;
    border-radius: 16px;
    background: #edf4fa;
    color: #33536f;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 6px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.archive-general-rating-button:hover {
    background: #dfeef8;
    transform: translateY(-1px);
}

.archive-field.is-invalid {
    background: rgba(244, 86, 102, 0.08);
    box-shadow: 0 0 0 1px rgba(231, 76, 92, 0.14);
}

.archive-field.is-invalid label {
    color: #c84b5d;
}

.archive-field.is-invalid::after {
    content: '!';
    position: absolute;
    top: 10px;
    left: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7b89 0%, #ea4f67 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(234, 79, 103, 0.2);
}

.archive-field.is-invalid select,
.archive-field.is-invalid input,
.archive-field.is-invalid textarea {
    background: #fff9fa;
    box-shadow: 0 0 0 3px rgba(234, 79, 103, 0.14), inset 0 0 0 1px rgba(214, 79, 100, 0.26);
}

.archive-upload-dropzone.is-invalid,
.archive-drive-links-builder.is-invalid,
.archive-month-checklist.is-invalid {
    background: rgba(255, 245, 246, 0.98);
    box-shadow: 0 0 0 2px rgba(234, 79, 103, 0.16), inset 0 0 0 1px rgba(214, 79, 100, 0.18);
}

.archive-validation-popup {
    border-radius: 26px !important;
}

.archive-general-rating-button.is-filled {
    box-shadow: inset 0 0 0 1px hsla(var(--rating-hue, 0), 70%, 45%, 0.14);
}

.archive-general-rating-button.is-active {
    color: #ffffff;
    box-shadow: 0 12px 22px hsla(var(--rating-hue, 0), 70%, 45%, 0.24);
}

@media (max-width: 980px) {
    .archive-general-rating-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .archive-flow-switcher {
        padding: 10px 12px;
    }

    .archive-flow-switcher-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .archive-flow-button {
        width: 100%;
        min-height: 44px;
        border-radius: 14px;
        padding: 10px 8px;
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .archive-drafts-panel {
        padding: 10px 12px;
        margin-bottom: 18px;
    }

    .archive-drafts-head {
        align-items: stretch;
    }

    .archive-drafts-head-actions {
        width: 100%;
    }

    .archive-drafts-head-main {
        width: 100%;
        justify-content: space-between;
    }

    .archive-drafts-list {
        gap: 8px;
        max-height: 226px;
    }

    .archive-draft-card {
        padding: 9px 11px;
        border-radius: 14px;
    }

    .archive-general-rating-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .archive-general-rating-button {
        border-radius: 12px;
        font-size: 12px;
        padding: 8px 2px;
    }

    .archive-path-actions {
        align-items: stretch;
    }

    .archive-path-refresh-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .archive-path-sync-meta {
        width: 100%;
        font-size: 11px;
        text-align: right;
    }

    .archive-path-refresh-button {
        width: 100%;
    }

    .archive-recent-records-toolbar {
        grid-template-columns: 1fr;
    }

    .archive-recent-records-filter,
    .archive-recent-records-search,
    .archive-recent-records-refresh-button {
        width: 100%;
    }

}

.archive-field select,
.archive-field input,
.archive-field textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: vertical;
    border-radius: 18px;
    padding: 13px 14px;
    background: #f3f7fb;
    color: #30485f;
    font-size: 13px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    box-shadow: inset 4px 4px 8px #d6dee5, inset -4px -4px 8px #ffffff;
    transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.archive-month-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    background: #f3f7fb;
    box-shadow: inset 4px 4px 8px #d6dee5, inset -4px -4px 8px #ffffff;
}

.archive-month-checklist[hidden] {
    display: none !important;
}

.archive-shared-donors-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(236, 246, 255, 0.72);
    border: 1px dashed rgba(129, 166, 201, 0.5);
}

.archive-shared-donors-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-shared-donors-meta {
    color: #657b8d;
    font-size: 12px;
    font-weight: 700;
}

.archive-shared-donors-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-shared-donors-action-button {
    border: 1px solid #cfe0ee;
    border-radius: 999px;
    background: #f7fbff;
    color: #3a6787;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 12px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.archive-shared-donors-action-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #edf7ff;
    border-color: #b8d6ec;
}

.archive-shared-donors-action-button.is-muted {
    background: #fbfcfe;
    color: #698095;
}

.archive-shared-donors-action-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.archive-shared-donor-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #24445f;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(44, 98, 144, 0.08);
}

.archive-shared-donor-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.archive-shared-donor-chip-remove {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: #ffe5e8;
    color: #be3953;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.18s ease, background 0.18s ease;
}

.archive-shared-donor-chip-remove:hover {
    transform: scale(1.06);
    background: #ffd8de;
}

.archive-shared-donor-chip.is-invalid {
    color: #9f3148;
    background: rgba(255, 241, 244, 0.95);
}

.archive-shared-donor-chip-code {
    color: #6f879d;
    font-size: 11px;
    font-weight: 800;
}

.archive-month-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.65);
    color: #30485f;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.archive-month-check-item:hover {
    background: #ffffff;
}

.archive-month-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1db5c8;
    cursor: pointer;
}

.archive-month-check-item.is-selected {
    background: #dff7f5;
    color: #16656d;
    box-shadow: inset 0 0 0 1px rgba(29, 181, 200, 0.2);
}


.archive-filter-empty {
    background: #f8fafc;
    color: #7b90a1;
}

.archive-field:focus-within {
    background: rgba(52, 172, 224, 0.08);
    box-shadow: 0 0 0 1px rgba(52, 172, 224, 0.14);
}

.archive-field:focus-within label {
    color: #176c99;
}

.archive-field select:focus,
.archive-field input:focus,
.archive-field textarea:focus,
.archive-field select:focus-visible,
.archive-field input:focus-visible,
.archive-field textarea:focus-visible {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(60, 180, 227, 0.22), inset 0 0 0 1px rgba(49, 139, 189, 0.34);
    transform: translateY(-1px);
}


.archive-submit-button:focus,
.archive-submit-button:focus-visible,
.archive-drive-link:focus,
.archive-drive-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(54, 182, 210, 0.22);
}

.archive-upload-dropzone {
    padding: 20px 18px;
    border-radius: 22px;
    border: 1px dashed #bfd0de;
    background: #f7fbfd;
    text-align: center;
    margin-bottom: 16px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.archive-inline-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.archive-inline-search button {
    border: 1px solid #cfe5f5;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf7ff 0%, #dff1ff 100%);
    color: #2f5f83;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 12px 18px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.archive-inline-search button:hover {
    background: linear-gradient(135deg, #e2f3ff 0%, #d3ecff 100%);
    transform: translateY(-1px);
}

.archive-upload-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-bottom: 14px;
}

.archive-upload-control-wide {
    grid-column: 1 / -1;
}

.archive-drive-links-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.archive-drive-links-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.archive-drive-links-help {
    margin: 10px 0 0;
    color: #6e8197;
    font-size: 12px;
    line-height: 1.8;
}

.archive-drive-link-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.archive-drive-link-number {
    min-width: 30px;
    color: #36587c;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.archive-drive-link-input {
    width: 100%;
}

.archive-drive-link-add-button,
.archive-drive-link-remove-button {
    border: none;
    border-radius: 16px;
    padding: 10px 14px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.archive-drive-link-add-button {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    background: #e9f5fb;
    color: #1f6286;
}

.archive-drive-link-add-button:hover {
    background: #dceef8;
}

.archive-drive-link-remove-button {
    background: #fde8ea;
    color: #b84c58;
}

.archive-drive-link-remove-button:hover {
    background: #f9d9de;
}

.archive-upload-dropzone.is-dragover {
    border-color: #24cfaa;
    background: #eefbf7;
    box-shadow: 0 0 0 4px rgba(36, 207, 170, 0.12);
}

.archive-upload-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.archive-upload-title {
    color: #23425a;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.archive-upload-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.archive-add-files-button {
    margin-top: 12px;
    padding: 10px 18px;
    border: none;
    border-radius: 16px;
    background: #e9f5fb;
    color: #1f6286;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.archive-add-files-button:hover {
    background: #dceef8;
}

.archive-file-list-wrap,
.archive-side-summary {
    padding: 16px;
    border-radius: 22px;
    background: #f7fbfd;
    border: 1px solid #dbe6ef;
}

.archive-file-list-wrap {
    margin-bottom: 14px;
}

.archive-drive-file-note {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f4f9fd;
    border: 1px solid #dbe6ef;
    color: #49667d;
    font-size: 12px;
    line-height: 1.9;
}

.archive-file-list-empty {
    color: #698095;
    font-size: 12px;
    line-height: 1.8;
}

.archive-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-file-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e3ecf3;
}

.archive-file-item.is-missing-local {
    border-bottom-color: #efd9a8;
    background: linear-gradient(180deg, rgba(255, 248, 232, 0.45), rgba(255, 248, 232, 0));
    border-radius: 16px;
    padding-inline: 8px;
}

.archive-file-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.archive-file-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.archive-file-top-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.archive-file-order {
    color: #2b5d7b;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.archive-file-name {
    color: #23425a;
    font-size: 13px;
    font-weight: 700;
    word-break: break-word;
    flex: 1;
}

.archive-file-item.is-missing-local .archive-file-name {
    color: #9b6816;
}

.archive-file-item.is-missing-local .archive-file-main {
    width: 100%;
}

.archive-file-item.is-missing-local .archive-file-actions {
    width: 100%;
    justify-content: flex-start;
}

.archive-file-meta {
    color: #7b90a1;
    font-size: 11px;
    white-space: nowrap;
}

.archive-file-rebind {
    border: 1px dashed #edc47f;
    border-radius: 999px;
    background: #fff7e7;
    color: #956317;
    padding: 5px 10px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.archive-file-rebind:hover {
    background: #fff1d0;
    border-color: #e4b45d;
    transform: translateY(-1px);
}

.archive-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.archive-file-controls-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.archive-file-bulk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
}

.archive-file-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.archive-file-list-head .archive-card-label {
    margin-bottom: 0;
}

.archive-file-chip {
    border: 1px dashed #b7cde0;
    border-radius: 999px;
    background: #f6fbff;
    color: #2b5d7b;
    padding: 2px 8px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.archive-file-chip:hover:not(:disabled) {
    background: #e9f6ff;
    border-color: #8ec0e7;
    transform: translateY(-1px);
}

.archive-file-chip.is-active {
    background: #dff5ea;
    border-style: solid;
    border-color: #74c79a;
    color: #16704b;
}

.archive-file-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.archive-file-remove {
    border: none;
    border-radius: 14px;
    background: #ffe9eb;
    color: #c24757;
    padding: 8px 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.archive-file-remove:hover {
    background: #ffd9de;
}

.archive-file-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.archive-file-access-toggle {
    border: none;
    border-radius: 14px;
    background: #edf3fb;
    color: #25528b;
    padding: 8px 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.archive-file-access-toggle[data-mode="viewer"] {
    background: #dff6ef;
    color: #13856f;
}

.archive-file-access-toggle:hover {
    transform: translateY(-1px);
}

.archive-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #24cfaa, #47a7ef);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.archive-summary-pill[data-flow="kafalat"] {
    background: linear-gradient(135deg, #ef8f3f, #f25c5c);
}

.archive-submit-button {
    width: 100%;
    margin-top: 0;
    min-height: 56px;
    white-space: normal;
    line-height: 1.35;
    padding: 10px 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.archive-submit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 14px;
    align-items: stretch;
}

.archive-submit-all-button {
    border: 1px solid #cfe0ec;
    border-radius: 18px;
    background: #f7fbfe;
    color: #315c78;
    padding: 0 18px;
    min-height: 52px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.archive-submit-all-button:hover:not(:disabled) {
    background: #edf7fd;
    border-color: #b7d4e6;
    transform: translateY(-1px);
}

.archive-submit-all-button:disabled {
    opacity: 0.68;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .archive-submit-actions {
        grid-template-columns: 1fr;
    }
}

.archive-progress-card {
  margin-top: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.archive-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.archive-progress-title {
    color: #23425a;
    font-size: 13px;
    font-weight: 700;
}

.archive-progress-percent {
    color: #0c6cc2;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.archive-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
    background: #e2ebf3;
    box-shadow: inset 2px 2px 4px #cfdae5, inset -2px -2px 4px #f9fcff;
    overflow: hidden;
}

.archive-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24cfaa, #2f80ed);
  transition: width 0.25s ease;
}

.archive-progress-card.is-waiting {
  background: linear-gradient(180deg, #fffdf7 0%, #fff7e8 100%);
  border-color: #f3d9a4;
  box-shadow: 0 16px 34px rgba(209, 155, 47, 0.12);
}

.archive-progress-card.is-waiting .archive-progress-title,
.archive-progress-card.is-waiting .archive-progress-percent {
  color: #9c6a10;
}

.archive-progress-card.is-waiting .archive-progress-detail,
.archive-progress-card.is-waiting .archive-progress-meta {
  color: #8d7343;
}

.archive-progress-card.is-waiting .archive-progress-track {
  background: #f7ecd0;
  box-shadow: inset 2px 2px 4px #e9d9ab, inset -2px -2px 4px #fffdf5;
}

.archive-progress-card.is-waiting .archive-progress-bar {
  background: linear-gradient(90deg, #f7b733, #fc8b2d);
}

.archive-progress-card.is-retrying {
  background: linear-gradient(180deg, #fffaf5 0%, #fff2ea 100%);
  border-color: #f0c8b0;
  box-shadow: 0 16px 34px rgba(215, 132, 89, 0.1);
}

.archive-progress-card.is-retrying .archive-progress-title,
.archive-progress-card.is-retrying .archive-progress-percent {
  color: #b0622f;
}

.archive-progress-card.is-retrying .archive-progress-detail,
.archive-progress-card.is-retrying .archive-progress-meta {
  color: #956954;
}

.archive-progress-card.is-retrying .archive-progress-track {
  background: #f7e4db;
  box-shadow: inset 2px 2px 4px #eed0c2, inset -2px -2px 4px #fffaf7;
}

.archive-progress-card.is-retrying .archive-progress-bar {
  background: linear-gradient(90deg, #f59e0b, #ef6c57);
}

.archive-progress-card.is-error {
  background: linear-gradient(180deg, #fffafb 0%, #fff0f2 100%);
  border-color: #efc2ca;
}

.archive-progress-card.is-error .archive-progress-title,
.archive-progress-card.is-error .archive-progress-percent {
  color: #c04f59;
}

.archive-progress-card.is-error .archive-progress-bar {
  background: linear-gradient(90deg, #ff8c8c, #e25b6d);
}

.archive-progress-card.is-completed .archive-progress-bar {
  background: linear-gradient(90deg, #28d3a7, #4da2ff);
}

.archive-progress-card.is-background .archive-progress-track {
  background: #f3ead2;
}

.archive-progress-card.is-background .archive-progress-bar {
  background: linear-gradient(90deg, #f0c34b, #d59f2b);
}

.archive-progress-detail,
.archive-progress-meta {
    margin-top: 10px;
    color: #60778c;
    font-size: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.archive-progress-meta {
    color: #7b90a1;
}

.archive-progress-detail {
    max-height: 96px;
    overflow-y: auto;
    padding-left: 2px;
}

.archive-side-summary-records {
    margin-top: 14px;
}

.archive-recent-records-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.archive-recent-records-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.archive-recent-records-table-button {
    min-height: 34px;
    border: 1px solid #d7e4ee;
    border-radius: 11px;
    background: #ffffff;
    color: #315875;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 12px;
    cursor: pointer;
}

.archive-recent-records-table-button:hover {
    background: #eef7ff;
    border-color: #c8deef;
}

.archive-recent-records-filter-toggle {
    width: 34px;
    height: 34px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e4ee;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffffff 0%, #eef6fd 100%);
    color: #476c88;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.archive-recent-records-filter-toggle:hover {
    background: linear-gradient(135deg, #fbfeff 0%, #e4f1fb 100%);
    border-color: #c8deef;
    transform: translateY(-1px);
}

.archive-recent-records-filter-toggle.is-open {
    background: linear-gradient(135deg, #e8fbf6 0%, #d7f4ee 100%);
    border-color: #bce7df;
    color: #1f7f70;
}

.archive-recent-records-filter-toggle.has-active-filters {
    background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%);
    border-color: #b9cadb;
    color: #1d2833;
    box-shadow: inset 0 0 0 1px rgba(29, 40, 51, 0.04);
}

.archive-recent-records-filter-toggle.has-active-filters::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #1d2833;
    position: absolute;
    top: 6px;
    left: 6px;
}

.archive-recent-records-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e3ecf3;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.95) 0%, rgba(243, 249, 253, 0.88) 100%);
}

.archive-recent-records-toolbar[hidden] {
    display: none !important;
}

.archive-recent-records-filter {
    width: 100%;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: #fff;
    color: #35546e;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
}

.archive-recent-records-search {
    width: 100%;
    grid-column: 1 / -1;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: #fff;
    color: #35546e;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
}

.archive-recent-records-search::placeholder {
    color: #7e93a7;
    font-weight: 600;
}

.archive-recent-records-refresh-button {
    width: 100%;
    grid-column: 1 / -1;
    border: 1px solid #cfe5f5;
    border-radius: 999px;
    background: linear-gradient(135deg, #edf7ff 0%, #dff1ff 100%);
    color: #2f5f83;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.archive-recent-records-refresh-button:hover {
    background: linear-gradient(135deg, #e4f3ff 0%, #d3ecff 100%);
    transform: translateY(-1px);
}

.archive-recent-records-refresh-button:disabled {
    cursor: wait;
    opacity: 0.8;
}

.archive-recent-records-more-button {
    width: 100%;
    margin-top: 10px;
    border: 1px dashed #cfe5f5;
    border-radius: 999px;
    background: linear-gradient(135deg, #f8fcff 0%, #edf7ff 100%);
    color: #356483;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.archive-recent-records-more-button:hover {
    background: linear-gradient(135deg, #eef8ff 0%, #e1f2ff 100%);
    transform: translateY(-1px);
}

.archive-recent-records-more-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

.archive-records-empty {
    color: #698095;
    font-size: 12px;
    line-height: 1.8;
}

.archive-records-table-popup {
    max-width: none !important;
    width: 96vw !important;
}

body.archive-records-table-body-open {
    overflow: hidden;
}

body.archive-records-standalone-body.archive-records-table-body-open {
    overflow: auto;
}

body.archive-records-table-body-open .swal2-container {
    z-index: 10080 !important;
}

.archive-records-standalone-body .archive-page-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.archive-records-standalone-shell {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
}

.archive-records-standalone-body .archive-page-logo,
.archive-records-standalone-body > .container-login > .title,
.archive-records-standalone-body > .container-login > br {
    display: none;
}

.archive-records-standalone-body .archive-workspace {
    display: block;
    width: 100%;
    min-height: 100vh;
}

.archive-records-standalone-body .archive-workspace > :not(.archive-records-table-page) {
    display: none !important;
}

.archive-records-table-page {
    position: fixed;
    inset: 0;
    z-index: 10020;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.archive-records-standalone-body .archive-records-table-page {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.archive-records-table-page[hidden] {
    display: none !important;
}

.archive-records-table-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4edf5;
}

#archiveRecordsTablePageContent {
    height: calc(100vh - 102px);
    min-height: 0;
}

.archive-records-standalone-body #archiveRecordsTablePageContent {
    height: calc(100vh - 86px);
}

.archive-records-table-page-head h2 {
    margin: 4px 0 0;
    color: #263f55;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 22px;
    font-weight: 900;
}

.archive-records-table-back-button {
    border: 1px solid #d7e4ee;
    border-radius: 10px;
    background: #f7fbff;
    color: #315875;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 900;
    padding: 10px 14px;
    cursor: pointer;
}

.archive-records-table-back-button:hover {
    background: #eef7ff;
}

.archive-records-table-dialog {
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    height: 100%;
    min-height: 0;
}

.archive-records-table-controls {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) repeat(5, minmax(145px, 180px)) minmax(130px, 150px) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e1ebf4;
    border-radius: 12px;
    background: #f8fbfe;
}

.archive-records-table-search,
.archive-records-table-flow-filter,
.archive-records-table-processing-filter {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d8e5ef;
    border-radius: 10px;
    background: #fff;
    color: #28475f;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    outline: none;
}

.archive-records-table-search:focus,
.archive-records-table-flow-filter:focus,
.archive-records-table-processing-filter:focus,
.archive-records-table-uploader-filter:focus,
.archive-records-table-donor-filter:focus,
.archive-records-table-project-filter:focus {
    border-color: #9fc5e8;
    box-shadow: 0 0 0 3px rgba(159, 197, 232, 0.18);
}

.archive-records-table-count {
    white-space: nowrap;
    color: #45657d;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 10px;
    border: 1px dashed #cfe0ed;
    border-radius: 999px;
    background: #f7fbff;
    text-align: center;
}

.archive-records-table-scan-button,
.archive-records-table-wake-button {
    min-height: 40px;
    border: 1px solid #cfe5f5;
    border-radius: 10px;
    background: #eef7ff;
    color: #315875;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 12px;
    cursor: pointer;
}

.archive-records-table-wake-button {
    background: #fff5e7;
    border-color: #f3d7ac;
    color: #8d5b12;
}

.archive-records-table-wake-button.is-deep {
    background: #ffe9d8;
    border-color: #efc4a3;
    color: #974b12;
}

.archive-records-table-wake-button.is-adopt {
    background: #ecfff6;
    border-color: #bfead7;
    color: #087658;
}

.archive-records-table-wake-button.is-preprocess {
    background: #eef4ff;
    border-color: #cbdaf7;
    color: #2e4f9e;
}

.archive-records-table-scan-button:disabled,
.archive-records-table-wake-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

.archive-bulk-wake-confirm {
    color: #334e63;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    text-align: right;
}

.archive-bulk-wake-warning {
    color: #9a4b13;
    font-weight: 800;
}

.archive-bulk-wake-confirm label {
    display: block;
    margin: 10px 0 4px;
    font-weight: 900;
}

.archive-bulk-wake-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.archive-bulk-wake-range[hidden] {
    display: none;
}

.archive-bulk-wake-count {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed #d7e6f0;
    border-radius: 10px;
    background: #f7fbff;
    font-weight: 800;
}

.archive-processing-ops-panel {
    border: 1px solid #dce8f2;
    border-radius: 10px;
    background: #fbfdff;
    overflow: hidden;
}

.archive-processing-ops-panel[hidden] {
    display: none !important;
}

.archive-processing-ops-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e6eef6;
}

.archive-processing-ops-head h3 {
    margin: 2px 0 0;
    color: #263f55;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 14px;
    font-weight: 900;
}

.archive-processing-ops-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #44647b;
    font-size: 11px;
    font-weight: 800;
}

.archive-processing-ops-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-processing-ops-toggle,
.archive-processing-ops-clear {
    appearance: none;
    border: 1px solid #cfe0ed;
    border-radius: 999px;
    background: #ffffff;
    color: #244767;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 900;
    min-height: 30px;
    padding: 6px 12px;
}

.archive-processing-ops-toggle:hover,
.archive-processing-ops-clear:hover {
    background: #eef7ff;
}

.archive-processing-ops-clear {
    border-color: #ffd7d7;
    color: #a33a3a;
}

.archive-processing-ops-summary span {
    padding: 5px 8px;
    border: 1px dashed #cfe0ed;
    border-radius: 999px;
    background: #ffffff;
}

.archive-processing-ops-empty {
    padding: 12px;
    color: #6f8394;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.archive-processing-ops-scroll {
    max-height: 210px;
    overflow: auto;
    direction: ltr;
}

.archive-processing-ops-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    direction: rtl;
    color: #27445b;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
}

.archive-processing-ops-table th,
.archive-processing-ops-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e6eef6;
    text-align: right;
    vertical-align: top;
}

.archive-processing-ops-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eff6fc;
    font-weight: 900;
}

.archive-processing-ops-table tr.is-running td:first-child {
    color: #1769aa;
    font-weight: 900;
}

.archive-processing-ops-table tr.is-done td:first-child {
    color: #15834c;
    font-weight: 900;
}

.archive-processing-ops-table tr.is-skipped td:first-child {
    color: #7a8793;
    font-weight: 900;
}

.archive-processing-ops-table tr.is-failed td:first-child {
    color: #b42318;
    font-weight: 900;
}

.archive-processing-ops-file {
    max-width: 260px;
    overflow-wrap: anywhere;
}

.archive-records-table-uploader-filter,
.archive-records-table-donor-filter,
.archive-records-table-project-filter {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d8e5ef;
    border-radius: 10px;
    background: #fff;
    color: #28475f;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    outline: none;
}

.archive-records-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border: 1px solid #dce8f2;
    border-radius: 10px;
    background: #fff;
    direction: ltr;
}

.archive-records-table {
    width: 100%;
    min-width: 1950px;
    table-layout: fixed;
    border-collapse: collapse;
    color: #253f55;
    font-size: 11px;
    text-align: right;
    direction: rtl;
}

.archive-records-col-index {
    width: 44px;
}

.archive-records-col-operation {
    width: 220px;
}

.archive-records-col-date {
    width: 120px;
}

.archive-records-col-flow {
    width: 170px;
}

.archive-records-col-path {
    width: 310px;
}

.archive-records-col-uploader {
    width: 170px;
}

.archive-records-col-donor {
    width: 175px;
}

.archive-records-col-code {
    width: 165px;
}

.archive-records-col-count {
    width: 70px;
}

.archive-records-col-status {
    width: 145px;
}

.archive-records-col-checked {
    width: 120px;
}

.archive-records-col-files {
    width: 250px;
}

.archive-records-col-action {
    width: 90px;
}

.archive-records-table th,
.archive-records-table td {
    border-bottom: 1px solid #e4edf5;
    border-left: 1px solid #edf3f8;
    padding: 9px 10px;
    vertical-align: top;
    line-height: 1.7;
}

.archive-records-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f2f8fc;
    color: #28475f;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.archive-records-table td:nth-child(2),
.archive-records-table td:nth-child(3),
.archive-records-table td:nth-child(4),
.archive-records-table td:nth-child(9),
.archive-records-table td:nth-child(10),
.archive-records-table td:nth-child(11),
.archive-records-table td:nth-child(13) {
    white-space: nowrap;
}

.archive-records-table td:nth-child(4),
.archive-records-table td:nth-child(6),
.archive-records-table td:nth-child(7),
.archive-records-table td:nth-child(8) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.65;
}

.archive-records-table-index {
    color: #7890a4;
    font-weight: 800;
    text-align: center;
}

.archive-records-table-id-wrap {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    direction: ltr;
}

.archive-records-table-id {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px dashed #b8d2e2;
    border-radius: 999px;
    background: #f7fbfe;
    color: #28455c;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: left;
}

.archive-records-table-flow,
.archive-records-processing-chip {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 900;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    cursor: default;
}

.archive-records-processing-chip.is-pending {
    cursor: pointer;
}

.archive-records-status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.archive-records-status-menu {
    position: relative;
}

.archive-records-status-more {
    appearance: none;
    border: 1px solid #d6e7f7;
    border-radius: 999px;
    background: #f7fbff;
    color: #244767;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    height: 28px;
    line-height: 1;
    min-width: 36px;
    padding: 0 10px;
}

.archive-records-status-more:hover {
    background: #eaf5ff;
}

.archive-records-status-actions {
    background: #fff;
    border: 1px solid #dbeaf7;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(15, 54, 96, 0.16);
    display: grid;
    gap: 5px;
    min-width: 92px;
    padding: 7px;
    position: absolute;
    right: 50%;
    top: calc(100% + 6px);
    transform: translateX(50%);
    z-index: 30;
}

.archive-records-status-actions[hidden] {
    display: none;
}

.archive-records-status-actions::before {
    background: #fff;
    border-left: 1px solid #dbeaf7;
    border-top: 1px solid #dbeaf7;
    content: "";
    height: 8px;
    position: absolute;
    right: 50%;
    top: -5px;
    transform: translateX(50%) rotate(45deg);
    width: 8px;
}

.archive-records-status-actions .archive-records-status-action {
    position: relative;
    z-index: 1;
}

.archive-records-status-actions.is-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.archive-records-status-action {
    appearance: none;
    border: 1px solid #d6e7f7;
    border-radius: 999px;
    background: #f7fbff;
    color: #244767;
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    min-height: 26px;
    padding: 5px 8px;
    white-space: nowrap;
}

.archive-records-status-action:hover {
    background: #eaf5ff;
}

.archive-records-status-action.is-adopt {
    border-color: #c7f3de;
    background: #edfff6;
    color: #087658;
}

.archive-records-status-action.is-preprocess {
    border-color: #cbdaf7;
    background: #eef4ff;
    color: #2e4f9e;
}

.archive-records-status-action:disabled {
    cursor: wait;
    opacity: 0.75;
}

.archive-records-processing-chip:disabled {
    opacity: 1;
}

.archive-records-table-flow {
    background: #eef5fc;
    color: #2d547b;
}

.archive-records-processing-chip.is-pending {
    background: #fff4df;
    color: #9c6512;
}

.archive-records-processing-chip.is-ready {
    background: #eaf8ef;
    color: #2c7a45;
}

.archive-records-processing-chip.is-neutral,
.archive-records-processing-chip.is-unknown {
    background: #eef3f7;
    color: #5d7183;
}

.archive-records-processing-chip small {
    font-size: 9px;
    font-weight: 900;
}

.archive-records-table-path,
.archive-records-table-files {
    max-width: none;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.archive-records-table-path {
    line-height: 1.9;
}

.archive-records-table-files {
    line-height: 1.85;
}

.archive-records-table-empty {
    text-align: center;
    color: #6d8599;
    padding: 24px;
}

@media (max-width: 760px) {
    .archive-records-table-page {
        padding: 10px;
    }

    .archive-records-table-controls {
        grid-template-columns: 1fr;
    }

    .archive-records-table-count {
        text-align: center;
    }
}

.archive-pending-records-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #d8e6f1;
}

.archive-orphan-records-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #d8e6f1;
}

.archive-orphan-records-note {
    margin-top: 2px;
}

.archive-orphan-records-status {
    margin: 0 0 10px;
    color: #6e87a0;
    font-size: 11px;
    line-height: 1.9;
}

.archive-path-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.archive-admin-mini-button {
    opacity: 0.82;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

.archive-admin-mini-button:hover,
.archive-admin-mini-button:focus-visible {
    opacity: 1;
}

.archive-pending-records-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.archive-records-list-pending {
    max-height: 180px;
}

.archive-record-item.is-pending-sync {
    border-bottom-color: #efe4c8;
}

.archive-orphan-record-item {
    border-bottom-color: #e6edf4;
}

.archive-orphan-record-badge {
    background: #fff4e8;
    color: #b36a18;
    border-color: #f1d1a0;
}

.archive-records-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    padding-left: 4px;
    scrollbar-width: thin;
    scrollbar-color: #bfd5e4 #eef5fa;
}

.archive-records-list::-webkit-scrollbar {
    width: 8px;
}

.archive-records-list::-webkit-scrollbar-track {
    background: #eef5fa;
    border-radius: 999px;
}

.archive-records-list::-webkit-scrollbar-thumb {
    background: #bfd5e4;
    border-radius: 999px;
}

.archive-records-list-orphan {
    max-height: 220px;
}

.archive-record-item {
    padding: 12px 0;
    border-bottom: 1px solid #e3ecf3;
}

.archive-record-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.archive-record-title {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    text-align: right;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #23425a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

.archive-record-title:hover,
.archive-record-title:focus-visible {
    color: #1a73e8;
    text-decoration: underline;
    outline: none;
}

.archive-record-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.archive-record-flow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.archive-record-flow-badge.is-program {
    background: #e3f3ff;
    color: #2d7097;
}

.archive-record-flow-badge.is-kafalat {
    background: #fff1e2;
    color: #b96a24;
}

.archive-record-flow-badge.is-files {
    background: #edf8ea;
    color: #4b803a;
}

.archive-record-flow-badge.is-shared {
    background: #efeafb;
    color: #6a53a8;
}

.archive-record-item.is-shared .archive-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.archive-record-shared-meta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3eefc;
    color: #6d58a3;
    font-size: 10px;
    font-weight: 800;
}

.archive-record-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #daf8e8;
    color: #198a57;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid #bdeccd;
}

.archive-record-sync-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff3dd;
    color: #b36a18;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid #f4d8a8;
}

.archive-record-id-badge {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #b9d2e1;
    border-radius: 999px;
    background: #f7fbfe;
    color: #4a6b84;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.archive-record-id-badge:hover,
.archive-record-id-badge:focus-visible {
    background: #eef6fb;
    border-color: #90bdd7;
    color: #2f5874;
    transform: translateY(-1px);
}

.archive-record-details-badge {
    width: 32px;
    height: 32px;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f7f2ff 0%, #efe7fe 100%);
    border-color: #d7caf2;
    color: #6c56a0;
    box-shadow: 0 8px 18px rgba(108, 86, 160, 0.12);
    justify-content: center;
}

.archive-record-details-badge:hover,
.archive-record-details-badge:focus-visible {
    background: linear-gradient(180deg, #f2eaff 0%, #e8dcff 100%);
    border-color: #c4b0ea;
    color: #563f8b;
    box-shadow: 0 10px 22px rgba(108, 86, 160, 0.18);
}

.archive-record-details-icon {
    width: 17px;
    height: 17px;
    color: currentColor;
    opacity: 0.98;
}

.archive-record-meta {
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #7b90a1;
    font-size: 11px;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.archive-record-meta-part {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.archive-record-meta-part.is-uploader {
    color: #6e87a0;
}

.archive-record-meta-part.is-time {
    color: #7b90a1;
}

.archive-record-meta-part.is-count {
    color: #6e87a0;
}

.archive-orphan-record-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.archive-orphan-record-button {
    width: auto;
    grid-column: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 8px 14px;
}

.archive-orphan-record-button.is-soft {
    background: linear-gradient(135deg, #edf6ff 0%, #e2f1ff 100%);
    color: #356584;
}

.archive-orphan-record-button.is-soft:hover {
    background: linear-gradient(135deg, #e2f1ff 0%, #d7ebff 100%);
}

.archive-orphan-record-button.is-danger {
    background: linear-gradient(135deg, #fff1f1 0%, #ffdede 100%);
    color: #b64f4f;
}

.archive-orphan-record-button.is-danger:hover {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffd2d2 100%);
}

.archive-orphan-record-button.is-danger:disabled {
    opacity: 0.75;
    cursor: wait;
}

.archive-orphan-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.archive-orphan-dialog-head > div {
    flex: 1 1 260px;
    min-width: 0;
}

.archive-orphan-dialog-head .archive-recent-records-refresh-button {
    width: auto;
    min-width: 150px;
    grid-column: auto;
    flex: 0 0 auto;
    align-self: center;
    padding-inline: 22px;
}

.archive-orphan-dialog-list {
    max-height: 360px;
}

.archive-orphan-records-dialog-empty {
    padding: 6px 0 2px;
}

.archive-orphan-link-summary {
    margin-bottom: 14px;
}

.archive-orphan-link-search-wrap {
    margin-top: 10px;
    margin-bottom: 14px;
}

.archive-orphan-link-search-input {
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(174, 203, 250, 0.9);
    background: #f8fbff;
    color: #274a7f;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    text-align: right;
    direction: rtl;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.archive-orphan-link-search-input:focus {
    outline: none;
    border-color: rgba(34, 193, 167, 0.5);
    box-shadow: 0 0 0 4px rgba(34, 193, 167, 0.08);
    background: #ffffff;
}

.archive-orphan-link-search-input::placeholder {
    color: #89a0c1;
    font-weight: 500;
}

.archive-orphan-link-records-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-inline-end: 4px;
    margin-top: 14px;
}

.archive-orphan-link-record-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(174, 203, 250, 0.8);
    border-radius: 16px;
    background: #f8fbff;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.archive-orphan-link-record-option:hover,
.archive-orphan-link-record-option.is-selected {
    border-color: rgba(34, 193, 167, 0.45);
    background: #eefaf7;
    box-shadow: 0 10px 22px rgba(163, 197, 242, 0.12);
}

.archive-orphan-link-record-option input {
    margin-top: 4px;
}

.archive-orphan-link-record-option-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.archive-orphan-link-record-option-title {
    color: #274a7f;
    font-weight: 700;
    line-height: 1.7;
    text-align: right;
}

.archive-orphan-link-record-option-meta {
    color: #6f86ab;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: right;
}

.archive-orphan-link-record-id-copy {
    border: 0;
    background: transparent;
    color: #2e6bb2;
    font: inherit;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.archive-orphan-link-record-id-copy:hover,
.archive-orphan-link-record-id-copy:focus-visible {
    color: #1e4f87;
    outline: none;
}

.archive-links-dialog {
    display: grid;
    gap: 14px;
    text-align: right;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-links-preview-panel {
    border: 1px solid #d9e8f5;
    border-radius: 18px;
    background: #f8fbfe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: grid;
    gap: 10px;
    padding: 12px;
}

.archive-links-preview-panel[hidden] {
    display: none;
}

.archive-links-preview-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.archive-links-preview-head strong {
    color: #244767;
    display: block;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.7;
}

.archive-links-preview-close {
    align-items: center;
    appearance: none;
    background: #fff0f1;
    border: 1px solid #f5c6cb;
    border-radius: 999px;
    color: #bb3d48;
    cursor: pointer;
    display: inline-flex;
    font-size: 20px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}

.archive-links-preview-close:hover {
    background: #ffe5e8;
}

.archive-links-preview-frame-wrap {
    aspect-ratio: 16 / 9;
    background: #edf4fa;
    border: 1px solid #d2e2f0;
    border-radius: 14px;
    overflow: hidden;
}

.archive-links-preview-frame {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.archive-record-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.archive-record-details-fact {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #dce9f4;
    background: linear-gradient(135deg, #fbfdff 0%, #f3f8fd 100%);
}

.archive-record-details-fact-label {
    color: #6e88a0;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}

.archive-record-details-fact-value {
    color: #29465e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
    word-break: break-word;
}

.archive-record-details-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-record-details-summary {
    display: grid;
    gap: 8px;
}

.archive-record-details-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #e1ebf4;
    background: #f9fcff;
}

.archive-record-details-summary-label {
    color: #7690a6;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.archive-record-details-summary-value {
    color: #27445d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    text-align: left;
    word-break: break-word;
}

.archive-record-details-dialog-v2 {
    gap: 16px;
}

.archive-record-details-dialog-v2 .archive-links-inline-status {
    border-radius: 16px;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 800;
}

.archive-record-details-dialog-v2 .archive-file-status-card {
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(53, 96, 132, 0.08);
}

.archive-record-details-dialog-v2 .archive-file-status-title {
    font-size: 17px;
    line-height: 1.9;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px dashed #d7e5f2;
}

.archive-record-details-dialog-v2 .archive-record-details-summary-list {
    gap: 10px;
}

.archive-record-details-dialog-v2 .archive-file-status-summary-row {
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed #e0ebf5;
}

.archive-record-details-dialog-v2 .archive-file-status-summary-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.archive-record-details-dialog-v2 .archive-file-status-summary-label {
    color: #6e88a0;
}

.archive-record-details-dialog-v2 .archive-file-status-summary-value {
    color: #22405b;
    line-height: 1.95;
}

.archive-record-details-dialog-v2 .archive-record-details-actions {
    justify-content: center;
    gap: 10px;
    padding-top: 2px;
}

.archive-record-details-dialog-v2 .archive-file-status-section-title {
    padding: 0 4px;
}

.archive-record-metadata-edit-form {
    display: grid;
    gap: 12px;
    text-align: right;
}

.archive-record-metadata-field {
    display: grid;
    gap: 7px;
}

.archive-record-metadata-field span {
    color: #244767;
    font-size: 12px;
    font-weight: 900;
}

.archive-record-metadata-field small {
    color: #7890a6;
    direction: ltr;
    display: inline-block;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 800;
    margin-inline-start: 6px;
}

.archive-record-metadata-field input,
.archive-record-metadata-field select,
.archive-record-metadata-field textarea {
    background: #f8fbfe;
    border: 1px solid #d6e5f2;
    border-radius: 14px;
    color: #24425e;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    outline: none;
    padding: 10px 12px;
    width: 100%;
}

.archive-record-metadata-field textarea {
    min-height: 110px;
    resize: vertical;
}

.archive-record-metadata-field input:focus,
.archive-record-metadata-field select:focus,
.archive-record-metadata-field textarea:focus {
    background: #fff;
    border-color: #8fbcd6;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}

.archive-related-records-slot {
    display: grid;
    gap: 10px;
}

.archive-related-records-loading {
    border: 1px dashed #cfe0ee;
    border-radius: 16px;
    background: #f8fbfe;
    color: #5b7890;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.8;
    padding: 12px 14px;
    text-align: center;
}

.archive-related-records-loading.is-error {
    background: #fff3f3;
    border-color: #efc1c1;
    color: #b24a57;
}

.archive-related-records-panel {
    border: 1px solid #d9e8f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
    display: block;
    padding: 14px;
}

.archive-related-records-head {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
}

.archive-related-records-head::-webkit-details-marker {
    display: none;
}

.archive-related-records-head strong {
    color: #244767;
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.8;
}

.archive-related-records-toggle {
    background: #eef5ff;
    border: 1px solid #d3e3f2;
    border-radius: 999px;
    color: #315c9a;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 900;
    padding: 5px 9px;
    white-space: nowrap;
}

.archive-related-records-panel[open] .archive-related-records-toggle {
    background: #e8f8f4;
    border-color: #bfe7dc;
    color: #16725d;
}

.archive-related-records-note {
    background: #fff8e8;
    border: 1px solid #f2d698;
    border-radius: 999px;
    color: #996b12;
    font-size: 10px;
    font-weight: 900;
    margin-top: 10px;
    padding: 5px 9px;
}

.archive-related-records-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.archive-related-records-panel-expanded .archive-related-records-head {
    cursor: default;
}

.archive-folder-orphan-files-panel {
    border-color: #f1d5a7;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);
}

.archive-folder-orphan-files-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.archive-folder-orphan-file-row {
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f0ddb8;
    border-radius: 16px;
    background: #fff;
}

.archive-folder-orphan-file-row .archive-links-order-badge {
    background: #fff7e8;
    border-color: #efd39b;
    color: #9a6818;
}

.archive-folder-orphan-link {
    background: #e8fff6;
    color: #087658;
}

.archive-folder-orphan-rename {
    background: #f2ecff;
    color: #6848c7;
}

.archive-folder-orphan-access {
    background: #fff0f1;
    color: #a94452;
}

.archive-folder-orphan-files-empty {
    background: #fff;
    border: 1px dashed #e2cfaa;
    border-radius: 14px;
    color: #7b6950;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.9;
    margin-top: 12px;
    padding: 12px;
    text-align: center;
}

.archive-related-record-card {
    align-items: stretch;
    background: #fff;
    border: 1px solid #e0ebf4;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.archive-related-record-main {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
}

.archive-related-record-index {
    align-items: center;
    background: #eef5fc;
    border: 1px solid #d3e3f2;
    border-radius: 10px;
    color: #2d547b;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-width: 28px;
}

.archive-related-record-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
}

.archive-related-record-title {
    background: transparent;
    border: 0;
    color: #24426c;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.8;
    padding: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.archive-related-record-meta {
    color: #6f8395;
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 800;
    gap: 5px 8px;
    line-height: 1.8;
}

.archive-related-record-meta span {
    background: #f2f6fa;
    border-radius: 999px;
    padding: 3px 7px;
}

.archive-related-record-id {
    appearance: none;
    background: #f7fbfe;
    border: 1px dashed #b8d2e2;
    border-radius: 999px;
    color: #28455c;
    cursor: pointer;
    direction: ltr;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 800;
    justify-self: start;
    line-height: 1.4;
    padding: 5px 9px;
    unicode-bidi: isolate;
}

.archive-related-record-id.is-copied {
    background: #e4f8ec;
    border-color: #98d8b0;
    color: #177248;
}

.archive-related-record-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.archive-related-record-open {
    background: #eef5ff;
    color: #315c9a;
}

.archive-related-record-files {
    display: grid;
    gap: 8px;
}

.archive-related-record-file-row {
    align-items: center;
    background: #f7fbff;
    border: 1px solid #dbeaf5;
    border-radius: 14px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 10px;
}

.archive-related-record-file-title {
    align-items: center;
    color: #24426c;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 900;
    gap: 7px;
    line-height: 1.9;
    min-width: 0;
    overflow-wrap: anywhere;
}

.archive-related-record-file-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.archive-related-record-empty-files {
    background: #f7fbff;
    border: 1px dashed #cfe0ee;
    border-radius: 14px;
    color: #6f8395;
    font-size: 11px;
    font-weight: 900;
    padding: 10px;
    text-align: center;
}

.archive-record-details-dialog-v2 .archive-file-status-empty {
    border-radius: 18px;
    padding: 16px;
    text-align: center;
}

@media (max-width: 640px) {
    .archive-record-details-dialog-v2 .archive-file-status-card {
        padding: 14px;
        border-radius: 18px;
    }

    .archive-record-details-dialog-v2 .archive-file-status-title {
        font-size: 15px;
        text-align: right;
    }

    .archive-record-details-dialog-v2 .archive-file-status-summary-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .archive-related-record-card,
    .archive-related-records-head {
        align-items: stretch;
        flex-direction: column;
    }

    .archive-related-record-open {
        align-self: flex-start;
    }
}

.archive-links-inline-status {
    display: block;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid #d9e8f4;
    background: #f7fbfe;
    color: #40627b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.archive-links-inline-status[hidden] {
    display: none !important;
}

.archive-links-inline-status.is-pending {
    background: #fff8e8;
    border-color: #f2d698;
    color: #996b12;
}

.archive-links-inline-status.is-success {
    background: #ebfaef;
    border-color: #bfe4c8;
    color: #2c7a45;
}

.archive-links-inline-status.is-error {
    background: #fff3f3;
    border-color: #efc1c1;
    color: #b24a57;
}

.archive-links-section-title {
    color: #23425a;
    font-size: 14px;
    font-weight: 800;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-links-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-record-links-return-row {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.archive-record-links-return-table {
    min-width: 150px;
    background: #eef5ff;
    color: #315c9a;
}

.archive-links-refresh-processing {
    background: #eef5ff;
    color: #315c9a;
}

.archive-links-row {
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dde8f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.archive-links-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    color: #24426c;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-links-name-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.archive-links-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.8;
    font-size: 15px;
    font-weight: 800;
    direction: ltr;
    text-align: right;
    unicode-bidi: isolate;
}

.archive-links-order-badge {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef5fc;
    border: 1px solid #d3e3f2;
    color: #2d547b;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.archive-record-id-stamp-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.archive-record-id-stamp-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f9ff 100%);
    border: 1px solid #d9e8f4;
    box-shadow: 0 10px 24px rgba(43, 93, 141, 0.05);
}

.archive-record-date-stamp-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-record-id-stamp-label {
    color: #40627b;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-record-date-stamp-label {
    color: #40627b;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-record-id-stamp {
    appearance: none;
    border: 1px dashed #b8d2e2;
    border-radius: 999px;
    background: #f7fbfe;
    color: #28455c;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 9px 14px;
    direction: ltr;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.archive-record-id-stamp:hover,
.archive-record-id-stamp:focus-visible {
    background: #eef6fb;
    border-color: #8fbcd6;
    color: #1f4a66;
    transform: translateY(-1px);
}

.archive-record-date-stamp {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed #b8d2e2;
    background: #f7fbfe;
    color: #28455c;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}

.archive-record-id-stamp.is-copied {
    background: #e4f8ec;
    border-color: #98d8b0;
    color: #177248;
}

.archive-links-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4px;
    color: #6f8395;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.8;
    direction: ltr;
    text-align: right;
    unicode-bidi: isolate;
}

.archive-links-processing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 900;
    direction: rtl;
}

.archive-links-processing-badge.is-ready {
    background: #eaf8ef;
    border-color: #bfe6ca;
    color: #227344;
}

.archive-links-processing-badge.is-pending {
    background: #fff7e8;
    border-color: #f0d29a;
    color: #9a6818;
}

.archive-links-processing-badge.is-running {
    background: #eef5ff;
    border-color: #bcd2f2;
    color: #315c9a;
}

.archive-links-meta-time {
    direction: ltr;
    unicode-bidi: isolate;
}

.archive-links-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
    max-width: 100%;
}

.archive-link-action {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    white-space: nowrap;
    flex: 0 0 auto;
}

.archive-link-action.is-locked,
.archive-link-action:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

.archive-link-open {
    background: linear-gradient(135deg, #1cc8b0, #2eb4de);
    color: #fff;
}

.archive-link-copy {
    background: #edf3fb;
    color: #25528b;
}

.archive-link-processing-wake {
    background: #fff3dc;
    color: #9a6517;
}

.archive-link-processing-deep-wake {
    background: #ffe9d8;
    color: #9a4b13;
}

.archive-link-adopt-copy,
.archive-file-adopt-copy-button {
    background: #e8fff6;
    color: #087658;
}

.archive-link-video-preprocess,
.archive-file-video-preprocess-button {
    background: #e9f7ff;
    color: #12628f;
}

.archive-link-details {
    background: #eef5ff;
    color: #4467a4;
}

.archive-link-download {
    background: #eef8f2;
    color: #2d7c4d;
}

.archive-link-more {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.archive-link-more-toggle {
    min-width: 38px;
    padding-inline: 10px;
    background: #eef3f8;
    color: #5f7690;
    letter-spacing: 2px;
}

.archive-link-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 20;
    min-width: 148px;
    padding: 8px;
    border: 1px solid #d9e4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(44, 82, 120, 0.14);
    display: grid;
    gap: 6px;
}

.archive-link-more-menu[hidden] {
    display: none !important;
}

.archive-link-more-menu.is-open-up {
    top: auto;
    bottom: calc(100% + 8px);
}

.archive-link-more-menu .archive-link-action {
    width: 100%;
    justify-content: center;
}

.archive-action-icon {
    font-size: 16px;
    line-height: 1;
}

.archive-action-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.archive-action-icon-svg svg {
    width: 16px;
    height: 16px;
    display: block;
}

.archive-link-replace {
    background: #fff2df;
    color: #b26a12;
}

.archive-link-rename {
    background: #f3f0ff;
    color: #5b4fb6;
}

.archive-link-trash {
    background: #fff1e8;
    color: #bf6422;
}

.archive-file-status-dialog {
    display: grid;
    gap: 14px;
    text-align: right;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.archive-file-status-card {
    border: 1px solid #d8e6f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
    padding: 16px;
    display: grid;
    gap: 10px;
}

.archive-file-status-title {
    color: #24426c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.archive-file-status-path {
    color: #69829a;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.archive-file-status-summary {
    display: grid;
    gap: 8px;
}

.archive-file-status-summary-row {
    display: grid;
    grid-template-columns: minmax(110px, 150px) 1fr;
    gap: 10px;
    align-items: start;
}

.archive-file-status-summary-label {
    color: #557189;
    font-size: 12px;
    font-weight: 800;
}

.archive-file-status-summary-value {
    color: #23425a;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.archive-file-status-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-file-processing-wake-button {
    background: #eef7ff;
    color: #1f5d8f;
}

.archive-file-processing-deep-wake-button {
    background: #fff3df;
    color: #9a5a00;
}

.archive-file-processing-wake-button:disabled,
.archive-file-processing-deep-wake-button:disabled {
    opacity: 0.7;
    cursor: wait;
}

.archive-file-status-section-title {
    color: #23425a;
    font-size: 14px;
    font-weight: 800;
}

.archive-file-status-timeline {
    display: grid;
    gap: 10px;
}

.archive-file-status-event {
    border: 1px solid #dde7f2;
    border-radius: 16px;
    background: #fbfdff;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.archive-file-status-event-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.archive-file-status-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #47699c;
    font-size: 11px;
    font-weight: 800;
}

.archive-file-status-event-time {
    color: #6a8096;
    font-size: 11px;
    font-weight: 700;
}

.archive-file-status-event-actor,
.archive-file-status-event-change,
.archive-file-status-event-details {
    color: #2f4d67;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.archive-file-status-empty {
    border: 1px dashed #d9e4ef;
    border-radius: 16px;
    background: #f8fbfe;
    color: #6a8096;
    font-size: 12px;
    font-weight: 700;
    padding: 14px;
    text-align: center;
}

.archive-rename-file-label {
    display: block;
    margin: 0 0 8px;
    color: #35507a;
    font-size: 0.96rem;
    font-weight: 700;
    text-align: right;
}

.archive-rename-file-group {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 460px);
    margin: 0 auto;
}

.archive-rename-file-input.swal2-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
}

.archive-rename-extension-badge {
    flex: 0 0 auto;
    padding: 11px 14px;
    border: 1px dashed rgba(88, 130, 193, 0.35);
    border-radius: 14px;
    background: rgba(226, 239, 255, 0.6);
    color: #35507a;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.archive-rename-file-hint {
    margin: 10px auto 0;
    color: #6b86aa;
    font-size: 0.9rem;
    text-align: center;
}

.archive-workspace.is-review-only-draft .archive-flow-switcher,
.archive-workspace.is-review-only-draft .archive-form-grid,
.archive-workspace.is-review-only-draft .archive-upload-controls,
.archive-workspace.is-review-only-draft .archive-file-list-wrap {
    position: relative;
    opacity: 0.74;
}

.archive-workspace.is-review-only-draft .archive-flow-switcher::after,
.archive-workspace.is-review-only-draft .archive-form-grid::after,
.archive-workspace.is-review-only-draft .archive-upload-controls::after,
.archive-workspace.is-review-only-draft .archive-file-list-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: auto;
    cursor: not-allowed;
}

.archive-record-delete-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline: 12px;
    background: #fff4f4;
    color: #ba4856;
    border: 1px solid #f0c7cd;
    box-shadow: 0 8px 18px rgba(192, 77, 90, 0.08);
}

.archive-record-delete-action:hover,
.archive-record-delete-action:focus-visible {
    background: #feecee;
    color: #a73c4a;
}

.archive-record-delete-label {
    font-size: 12px;
    font-weight: 800;
}

.archive-link-replace.is-locked,
.archive-link-replace:disabled {
    background: #f3f5f8;
    color: #7b8799;
}

.archive-link-access.is-locked,
.archive-link-access:disabled {
    background: #f3f5f8;
    color: #7b8799;
}

.archive-link-replace[data-state="uploading"],
.archive-link-replace[data-state="finalizing"] {
    background: #e8f2ff;
    color: #1f63b8;
}

.archive-link-replace[data-state="success"] {
    background: #dff6ef;
    color: #13856f;
}

.archive-link-replace[data-state="error"] {
    background: #f6e8ea;
    color: #b54c5b;
}

.archive-link-access {
    background: #eef2f7;
    color: #50637f;
}

.archive-link-access[data-mode="viewer"] {
    background: #dff6ef;
    color: #13856f;
}

.archive-link-access[data-mode="none"] {
    background: #f6e8ea;
    color: #b54c5b;
}

@media (max-width: 720px) {
    .archive-links-row {
        padding: 14px;
    }

    .archive-links-copy {
        width: 100%;
    }

    .archive-links-name-wrap {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .archive-links-name {
        text-align: right;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .archive-links-meta {
        text-align: right;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .archive-links-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .archive-links-order-badge {
        margin-inline-start: 8px;
    }

    .archive-file-status-summary-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.archive-drive-status-card {
    border: 1px solid #d8e4ef;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    margin-top: 14px;
}

.archive-drive-status-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.archive-drive-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #9fb2c3;
    box-shadow: 0 0 0 5px rgba(159, 178, 195, 0.18);
    flex: 0 0 auto;
}

.archive-drive-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eef4f9;
    color: #466178;
    font-size: 12px;
    font-weight: 800;
}

.archive-drive-status-text {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.8;
}

.archive-drive-status-card.is-connected {
    background: linear-gradient(180deg, #f1fff8 0%, #ebfff5 100%);
    border-color: #85d8b2;
    box-shadow: inset 0 0 0 1px rgba(133, 216, 178, 0.16);
}

.archive-drive-status-card.is-connected .archive-drive-status-icon {
    background: #18a765;
    box-shadow: 0 0 0 5px rgba(24, 167, 101, 0.18);
}

.archive-drive-status-card.is-connected .archive-drive-status-badge {
    background: #ddf8ea;
    color: #12744a;
}

.archive-drive-status-card.is-connected .archive-drive-status-text {
    color: #236647;
}

.archive-drive-status-card.is-disconnected,
.archive-drive-status-card.is-unconfigured {
    background: linear-gradient(180deg, #fff4f4 0%, #fff0f0 100%);
    border-color: #efaaaa;
    box-shadow: inset 0 0 0 1px rgba(239, 170, 170, 0.12);
}

.archive-drive-status-card.is-disconnected .archive-drive-status-icon,
.archive-drive-status-card.is-unconfigured .archive-drive-status-icon {
    background: #d94b4b;
    box-shadow: 0 0 0 5px rgba(217, 75, 75, 0.18);
}

.archive-drive-status-card.is-disconnected .archive-drive-status-badge,
.archive-drive-status-card.is-unconfigured .archive-drive-status-badge {
    background: #ffe3e3;
    color: #a12c2c;
}

.archive-drive-status-card.is-disconnected .archive-drive-status-text,
.archive-drive-status-card.is-unconfigured .archive-drive-status-text {
    color: #8e3a3a;
}

.archive-drive-link {
    display: inline-flex;
    margin-top: 12px;
    color: #1b77d2;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(27, 119, 210, 0.1);
}

.archive-drive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.archive-drive-actions .archive-drive-link {
    margin-top: 0;
}

.archive-drive-check-button {
    border: none;
    cursor: pointer;
    font-family: "Noto Kufi Arabic", Arial, sans-serif;
}

.archive-drive-check-button:disabled {
    opacity: 0.72;
    cursor: wait;
}

.archive-drive-link:hover {
    text-decoration: underline;
}

@media (max-width: 980px) {
    .archive-page-shell {
        width: calc(100vw - 28px);
        padding: 28px 20px 24px;
    }

    .archive-hero,
    .archive-layout {
        grid-template-columns: 1fr;
    }

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

    .archive-upload-controls {
        grid-template-columns: 1fr;
    }

    .archive-sticky-path-bar {
        top: 8px;
        width: calc(100vw - 24px);
        padding: 8px 10px;
    }

    .archive-sticky-path-text {
        font-size: 12px;
    }

    .archive-record-id-stamp-main,
    .archive-record-id-stamp-wrap,
    .archive-record-date-stamp-wrap {
        justify-content: center;
    }
}

.notice {
    padding-top: 15px;
    opacity: 0.6;
    font-size: 12px;
    text-align: center;
    color: coral;
}

.profile-field-notice {
    padding-top: 0;
    padding-bottom: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
    line-height: 1.7;
}

.profile-hint-anchor {
    position: relative;
    overflow: visible;
}

.profile-field-hint {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    z-index: 25;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 145, 92, 0.28);
    box-shadow: 0 12px 28px rgba(40, 56, 78, 0.14);
    color: #d97a4d;
    font-size: 12px;
    line-height: 1.85;
    text-align: right;
}

.profile-field-hint strong,
.profile-field-hint span {
    display: block;
}

.profile-field-hint strong {
    color: #b9653e;
    margin-bottom: 4px;
    font-size: 12px;
}

.profile-hint-anchor:hover .profile-field-hint,
.profile-hint-anchor:focus-within .profile-field-hint {
    display: block;
}

/* جديد */

.sub-sub-title {
    font-size: 18px;
    text-align: center;
    padding-top: 15px;
}

.label {
    margin: 20px;
    font-size: 12px;
}

.xcfooter {
    margin-top: 20px;
    margin-bottom: -25px;
    font-size: 10px;
    text-align: center;
    line-height: 1;
}


.btn-option:hover {
    background-color: #2fdbb6;
}

.btn-option:active {
    background-color: #1da88a;
}

.btn-option:disabled {
    background-color: #a9b1af;
}

.btn-option.is-muted-action {
    background-color: #8a9698;
    box-shadow: 2px 2px 6px #c8d0d2, -4px -4px 8px #ffffff;
}

.btn-option.is-active-action {
    background-color: #2a9dd6;
}

.btn-option.is-attention {
    background-color: #ff8a5c;
}

.btn-option.is-attention:hover {
    background-color: #ff7541;
}


.btn-container-open {
    width: 100%;
    /* padding: 30px 5px 5px 5px; */
    display: flexbox;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.btn-container-open .btn-option-open {
    outline: none;
    border: none;
    cursor: pointer;
    width: 80%;
    height: 40px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #fff;
    text-align: center;
    background-color: #24cfaa;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    margin: 5px;

}

.menu-itemsqr {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    padding: 0px 10px;
    padding-bottom: 15px;
    display: flexbox;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    text-align: center;
    /* background-color: #ffffff; */
}

.menu-btnopen {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    padding: 0px 10px;
    padding-bottom: 15px;
    display: flexbox;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    text-align: center;
    /* background-color: #ffffff; */
}


.image {
    border: 1px solid #dcdfe1;
    border-radius: 20px;
    padding: 5px;
    background-color: white;
    box-shadow: 3px 3px 8px #b1b1b1, -6px -6px 8px #ffffff;
    opacity: 0.7;
    width: 165px;
    height: 165px;
    margin: auto;
}


.qr {
    /* display: inline-block; */
    font-family: Arial, sans-serif;
    font-weight: 300;
    line-height: 2;
    text-align: center;

    /* min-width: 300px; */
    min-height: 90%;
    position: relative;
    /* top: 5px; */
}

.qr::before {
    content: '';
    /* width: 100%; */
    width: 165px;
    height: 165px;

    /* height: calc(100% + 10px); */
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    position: absolute;
    top: 55%;
    left: -6px;
    transform: translateY(-50%);
}

.qr::after {
    content: "\2639" " " attr(alt);

    font-size: 18px;
    color: rgb(100, 100, 100);

    display: block;
    position: absolute;
    z-index: 2;
    top: 30%;
    left: 0;
    width: 100%;
    /* height: 100%; */
}


.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 30% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    /* position: absolute; */
    /* left: 47.5%; */
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}

.select-input {
    outline: none;
    border: none;
    background: none;
    font-size: 15px;
    color: #555;
    padding: 15px 6px 15px 2px;
    text-align: center;
    width: 100%;

}

.txta {

    outline: none;
    border: none;
    background: none;
    font-size: 15px;
    color: #555;
    padding: 15px 6px 15px 2px;
    text-align: center;
    width: 100%;
    max-width: 500px;
    min-height: 100px;
    overflow: hidden;
    line-height: 1.5;
}


.iframeHolder {
    opacity: 0%;
    position: absolute;
}


svg {
    width: 180px;
    height: 120px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

svg #plug,
svg #socket {
    fill: #a2cd3c;
}

svg #loop-normal {
    fill: none;
    stroke: #ee4645;
    stroke-width: 12;
}

svg #loop-offset {
    display: none;
}



.wrapper {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #fff;
    display: grid;
    place-items: center;
    transition: opacity 0.25s, visibilty 1s;

}

.fada {
    opacity: 0;
    visibility: hidden;
}


/* loader */

.loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #db2424;
    background: -moz-linear-gradient(left, #db2424 10%, rgba(219, 36, 36, 0) 42%);
    background: -webkit-linear-gradient(left, #db2424 10%, rgba(219, 36, 36, 0) 42%);
    background: -o-linear-gradient(left, #db2424 10%, rgba(219, 36, 36, 0) 42%);
    background: -ms-linear-gradient(left, #db2424 10%, rgba(219, 36, 36, 0) 42%);
    background: linear-gradient(to right, #db2424 10%, rgba(219, 36, 36, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loader:before {
    width: 50%;
    height: 50%;
    background: #db2424;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.loader:after {
    background: #ecf0f3;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.archive-loader {
    width: min(560px, calc(100vw - 32px));
    margin: 42px auto;
    padding: 28px 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, #f9fcff 0%, #eff6fb 100%);
    border: 1px solid #d7e5ef;
    box-shadow: 0 18px 40px rgba(123, 158, 186, 0.16);
    text-align: center;
}

.archive-loader-spinner {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 5px solid #d9ebf5;
    border-top-color: #1fc3b2;
    animation: archiveLoaderSpin 0.9s linear infinite;
}

.archive-loader-title {
    color: #2f506a;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.archive-loader-text {
    color: #688095;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 16px;
}

.archive-loader-progress-track {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e1edf5;
    box-shadow: inset 0 2px 6px rgba(81, 110, 136, 0.08);
}

.archive-loader-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #21c9a8 0%, #25a7d7 100%);
    transition: width 0.25s ease;
}

.archive-loader-progress-meta {
    margin-top: 10px;
    color: #587286;
    font-size: 12px;
    font-weight: 700;
}

@keyframes archiveLoaderSpin {
    from {
        transform: rotate(0deg);
    }

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

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}







/* ============== */

.lds-ellipsis-box {
    text-align: center;
    margin-top: 10px;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #db2424;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}



/* Reset default list styles */
#playlist {
    list-style: none;
    padding: 0;
}

/* Style each playlist item */
#playlist li {
    margin-bottom: 35px;
}

/* Style audio controls */
audio {
    width: 100%;
    height: 65px;
    background-color: #f2f2f2;
    /* لون الخلفية الذي ترغب في استخدامه */

    padding: 5px;
    border-radius: 30px;

    box-shadow: 13px 13px 20px #c0ced1, -13px -13px 20px #ffffff;
}

/* Style audio controls when they're actively being interacted with */
audio:focus {
    outline: none;
    border: 2px solid #007bff;
}

.timer {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

#linkdrive {
    text-align: center;
    padding-bottom: 30px;
}

.name-audio-player {
    text-align: center;
    margin: 5px;

}


.aTagErr {
    color: #ff0000;
}


/* Style the container div */
.div-upload-download {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    justify-content: center;

}

/* Style the Download button */
.download-button,
.upload-button {
    text-decoration: none;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.download-button {
    background-color: #007bff;
    /* Change this to your desired background color */
    color: #fff;
    /* Change this to your desired text color */
}

.upload-button {
    background-color: #28a745;
    /* Change this to your desired background color for Upload */
    color: #fff;
    /* Change this to your desired text color for Upload */
}

/* Hover effect */
.download-button:hover,
.upload-button:hover {
    background-color: #0056b3;
    /* Change this to the hover background color */
}

/* Center the text vertically */
.div-upload-download a {
    display: flex;
    align-items: center;
}

/* Add spacing between the text and buttons */
.div-upload-download a:not(:last-child) {
    margin-right: 10px;
}

.document-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.document-delete-button {
    border: none;
    border-radius: 999px;
    background: #ffe6e6;
    color: #c0392b;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
}

.document-delete-button:hover {
    background: #ffd3d3;
}

.achievement-reports-shell {
    width: min(720px, calc(100vw - 28px));
}

.achievement-intro {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff, #eef6fb);
    box-shadow: inset 2px 2px 4px #d8e0e7, inset -2px -2px 4px #ffffff;
    color: #5a7084;
    font-size: 13px;
    line-height: 2;
    text-align: right;
}

.achievement-card {
    margin-bottom: 18px;
    padding: 18px 16px;
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #edf4fa);
    box-shadow: 10px 10px 18px #d3dce4, -10px -10px 18px #ffffff;
}

.achievement-composer-card {
    background: linear-gradient(145deg, #fdfefe, #edf6fb);
    border: 1px solid #ddeaf4;
}

.achievement-date-card {
    background: linear-gradient(145deg, #ffffff, #f2f8fc);
}

.achievement-date-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.achievement-date-input-shell {
    flex: 1;
    margin-bottom: 0;
}

.achievement-date-field-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #eef4fa);
    box-shadow: inset 4px 4px 8px #d7dfe7, inset -4px -4px 8px #ffffff;
    gap: 10px;
}

.achievement-date-native-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Noto Kufi Arabic', sans-serif;
    color: #24435b;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    direction: ltr;
    cursor: pointer;
}

.achievement-date-native-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

.achievement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.achievement-composer-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #dde8f2;
}

.achievement-toggle-button,
.achievement-secondary-button,
.achievement-remove-button,
.achievement-ghost-button {
    border: none;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: 700;
}

.achievement-toggle-button {
    min-width: 150px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #1f8fdd;
    color: #fff;
    box-shadow: 4px 4px 10px #d0dae2, -4px -4px 10px #ffffff;
    white-space: nowrap;
}

.achievement-toggle-button:hover {
    background: #177dcb;
}

.achievement-new-entries-list {
    display: grid;
    gap: 14px;
}

.achievement-draft-card {
    padding: 14px;
    border-radius: 22px;
    background: #f8fbfe;
    border: 1px solid #dce8f2;
    box-shadow: inset 2px 2px 4px #e0e8ef, inset -2px -2px 4px #ffffff;
}

.achievement-draft-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.achievement-remove-button {
    padding: 7px 14px;
    border-radius: 999px;
    background: #ffe8e8;
    color: #bf3535;
}

.achievement-remove-button:hover {
    background: #ffdcdc;
}

.achievement-draft-answer-shell {
    margin-top: 4px;
}

.achievement-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.achievement-secondary-button {
    min-width: 180px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #eef5fb;
    color: #1f5f8e;
    box-shadow: 4px 4px 10px #d5dde4, -4px -4px 10px #ffffff;
}

.achievement-secondary-button:hover {
    background: #e4eff9;
}

.achievement-ghost-button {
    min-width: 150px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff7ec;
    color: #9b651f;
    box-shadow: 4px 4px 10px #e0ddd4, -4px -4px 10px #ffffff;
}

.achievement-ghost-button:hover {
    background: #fff0db;
}

.achievement-primary-inline {
    width: auto;
    min-width: 220px;
    padding-right: 22px;
    padding-left: 22px;
}

.achievement-card-title {
    color: #1f3b53;
    font-size: 17px;
    font-weight: 700;
}

.achievement-card-note {
    color: #698196;
    font-size: 12px;
    line-height: 1.8;
    margin-top: 4px;
}

.achievement-summary-chip {
    min-width: 88px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #24cfaa, #52a7f8);
    color: #fff;
    font-size: 12px;
    text-align: center;
    box-shadow: 4px 4px 10px #d0dae2, -4px -4px 10px #ffffff;
}

.achievement-fields {
    padding: 0;
}

.achievement-card,
.achievement-card *,
.achievement-card input,
.achievement-card select,
.achievement-card textarea,
.achievement-card button,
.achievement-card option {
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.achievement-card,
.achievement-card-title,
.achievement-card-note,
.achievement-question-card,
.achievement-question-index,
.achievement-question-text,
.achievement-meta,
.achievement-today-badge,
.achievement-empty-state,
.achievement-draft-card,
.achievement-draft-answer-shell,
.achievement-answers-form,
.achievement-fields,
.achievement-date-input-shell,
.achievement-intro {
    text-align: right;
    direction: rtl;
}

.achievement-fields input:not([type="checkbox"]):not([type="radio"]),
.achievement-fields textarea,
.achievement-fields select,
.achievement-input,
.achievement-textarea,
.achievement-date-native-input {
    text-align: right !important;
    direction: rtl;
}

.achievement-fields input:not([type="checkbox"]):not([type="radio"])::placeholder,
.achievement-fields textarea::placeholder,
.achievement-input::placeholder,
.achievement-textarea::placeholder {
    text-align: right;
}

.achievement-draft-head,
.achievement-card-head,
.achievement-composer-actions,
.achievement-date-toolbar {
    direction: rtl;
}

.achievement-select-shell {
    padding-right: 14px;
    padding-left: 14px;
}

.achievement-select {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    color: #555;
    font-size: 14px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    padding: 14px 4px;
    text-align: right;
    direction: rtl;
}

.achievement-answers-form {
    margin: 0;
}

.achievement-questions-list {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.achievement-review-box {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(145deg, #f9fcff, #eef5fb);
    border: 1px solid #d9e7f2;
    box-shadow: inset 2px 2px 4px #e0e8ef, inset -2px -2px 4px #ffffff;
}

.achievement-review-title {
    color: #1f3b53;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.achievement-review-note {
    color: #6f8598;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.achievement-review-list {
    display: grid;
    gap: 10px;
}

.achievement-review-item {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #dde9f3;
}

.achievement-review-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.achievement-review-badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.achievement-review-badge-success {
    background: #e8f8ef;
    color: #1f7a49;
}

.achievement-review-badge-warning {
    background: #fff4dc;
    color: #9b651f;
}

.achievement-review-badge-info {
    background: #eaf3ff;
    color: #1f5f8e;
}

.achievement-review-index {
    color: #7b90a1;
    font-size: 11px;
    font-weight: 700;
}

.achievement-review-question {
    color: #23425a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 6px;
}

.achievement-review-summary {
    color: #5d7488;
    font-size: 12px;
    line-height: 1.9;
}

.achievement-category-group {
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, #fafdff, #edf5fb);
    border: 1px solid #d8e6f1;
}

.achievement-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
    padding-bottom: 10px;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 1px solid #dce8f2;
    border-top: none;
    border-right: none;
    border-left: none;
    background: transparent;
    cursor: pointer;
}

.achievement-category-title {
    color: #1e4d73;
    font-size: 15px;
    font-weight: 700;
}

.achievement-category-count {
    padding: 6px 12px;
    border-radius: 999px;
    background: #e7f2fb;
    color: #2d648e;
    font-size: 11px;
    font-weight: 700;
}

.achievement-category-head-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.achievement-category-head-main {
    display: grid;
    gap: 8px;
    flex: 1;
}

.achievement-category-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #2d648e;
    border-bottom: 2px solid #2d648e;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex: 0 0 auto;
    margin-left: 6px;
}

.achievement-category-head.is-open .achievement-category-arrow {
    transform: rotate(-135deg);
}

.achievement-category-list {
    display: grid;
    gap: 12px;
}

.achievement-category-stats {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.achievement-category-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.achievement-category-pill-success {
    background: #e8f8ef;
    color: #1f7a49;
}

.achievement-category-pill-muted {
    background: #eef4fa;
    color: #648099;
}

.achievement-category-pill-warning {
    background: #fff4dc;
    color: #9b651f;
}

.achievement-category-pill-info {
    background: #eaf3ff;
    color: #1f5f8e;
}

.achievement-category-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.achievement-category-progress-track {
    position: relative;
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: #e6eef6;
    overflow: hidden;
}

.achievement-category-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #24cfaa, #52a7f8);
}

.achievement-category-progress-text {
    min-width: 42px;
    color: #50708a;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}

.achievement-category-list[hidden] {
    display: none;
}

.achievement-question-card {
    padding: 15px 14px;
    border-radius: 22px;
    background: #f7fbff;
    border: 1px solid #d9e8f5;
}

.achievement-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.achievement-question-index {
    color: #0f6ab8;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 0;
}

.achievement-visibility-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6fd;
    border: 1px solid #d4e6f4;
    color: #28597f;
    font-size: 15px;
    line-height: 1;
    cursor: help;
}

.achievement-visibility-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    inset: auto auto calc(100% + 10px) 50%;
    transform: translateX(-50%);
    min-width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #1f3b53;
    color: #fff;
    font-size: 11px;
    line-height: 1.7;
    white-space: normal;
    text-align: center;
    box-shadow: 0 12px 24px rgba(20, 38, 56, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.achievement-visibility-badge::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1f3b53 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    z-index: 19;
}

.achievement-visibility-badge:hover::after,
.achievement-visibility-badge:hover::before,
.achievement-visibility-badge:focus::after,
.achievement-visibility-badge:focus::before,
.achievement-visibility-badge:focus-visible::after,
.achievement-visibility-badge:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.achievement-visibility-badge:hover::after,
.achievement-visibility-badge:focus::after,
.achievement-visibility-badge:focus-visible::after {
    transform: translateX(-50%) translateY(-2px);
}

.achievement-tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff4dc;
    color: #9b651f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.achievement-question-text {
    color: #23384d;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 8px;
}

.achievement-meta {
    color: #7a8f9f;
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 8px;
}

.achievement-today-badge {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #e8f8ef;
    color: #1f7a49;
    font-size: 11px;
    line-height: 1.8;
    border: 1px solid #caebd6;
}

.achievement-input,
.achievement-textarea {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    background: #ecf3f9;
    box-shadow: inset 3px 3px 6px #d2dbe3, inset -3px -3px 6px #ffffff;
    color: #394d5f;
    font-size: 14px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    padding: 14px 16px;
}

.achievement-textarea {
    resize: vertical;
    min-height: 110px;
}

.achievement-choice-empty {
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fbfe;
    border: 1px dashed #d6e4f0;
    color: #6f8598;
    font-size: 12px;
    line-height: 1.8;
}

.achievement-choice-group {
    display: grid;
    gap: 8px;
}

.achievement-choice-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fbfe;
    color: #30485f;
    font-size: 13px;
    cursor: pointer;
    text-align: right;
}

.achievement-employee-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 0;
    max-height: calc((48px + 24px) * 5);
    overflow-y: auto;
    padding-left: 6px;
}

.achievement-employee-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #d8e6f2;
    background: #f8fbfe;
    color: #24425b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.achievement-employee-option span {
    display: block;
    min-width: 0;
    text-align: right;
    line-height: 1.7;
}

.achievement-employee-option:hover {
    border-color: #c4d9ea;
    background: #fbfdff;
}

.achievement-employee-option:focus-within {
    background: rgba(52, 172, 224, 0.08);
    box-shadow: 0 0 0 1px rgba(52, 172, 224, 0.14);
}

.achievement-employee-option:has(input:checked) {
    background: #dff7f5;
    color: #16656d;
    box-shadow: inset 0 0 0 1px rgba(29, 181, 200, 0.2);
}

.achievement-draft-assignee {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    flex: 0 0 16px;
    justify-self: start;
    align-self: center;
    margin: 0;
    accent-color: #24cfaa;
    direction: ltr !important;
}

.achievement-draft-assignee:focus,
.achievement-draft-assignee:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(60, 180, 227, 0.22), inset 0 0 0 1px rgba(49, 139, 189, 0.34);
    border-radius: 6px;
}

.achievement-select-all-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #eef6fd;
    color: #28597f;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.achievement-draft-select-all {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #24cfaa;
}

@media (max-width: 640px) {
    .achievement-employee-picker {
        grid-template-columns: 1fr;
        max-height: calc((48px + 24px) * 4);
    }
}

.achievement-choice-option input {
    margin: 0;
    accent-color: #24cfaa;
}

.achievement-empty-state {
    padding: 18px 16px;
    border-radius: 18px;
    background: #f8fbfe;
    color: #667d91;
    line-height: 1.9;
}

.hr-admin-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 16px;
}

.hr-admin-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.hr-admin-tab,
.hr-admin-refresh-button,
.hr-admin-approve-button,
.hr-admin-reject-button {
    border: none;
    cursor: pointer;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: 700;
}

.hr-admin-tab {
    min-height: 42px;
    border-radius: 16px;
    background: #eef5fb;
    color: #45647e;
    box-shadow: 4px 4px 10px #d2dce5, -4px -4px 10px #ffffff;
}

.hr-admin-tab.is-active {
    background: linear-gradient(135deg, #24cfaa, #52a7f8);
    color: #ffffff;
}

.hr-admin-refresh-button {
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #eef5fb;
    color: #356584;
    font-size: 12px;
    box-shadow: 4px 4px 10px #d2dce5, -4px -4px 10px #ffffff;
}

.hr-admin-refresh-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.hr-admin-last-updated {
    margin-top: 10px;
    color: #6d8193;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}

.hr-admin-requests-list {
    display: grid;
    gap: 14px;
}

.hr-admin-request-card {
    border: 1px solid rgba(82, 167, 248, 0.18);
}

.hr-admin-status-pill {
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.documents-approval-notice {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #bfe2ff;
    border-radius: 16px;
    color: #226aa8;
    background: #eaf6ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

.hr-admin-status-pill.is-pending {
    background: #d6a840;
}

.hr-admin-status-pill.is-approved {
    background: #1fa883;
}

.hr-admin-status-pill.is-rejected {
    background: #c85c5c;
}

.hr-admin-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.hr-admin-request-grid div {
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fbfe;
}

.hr-admin-request-grid span,
.hr-admin-request-grid strong {
    display: block;
}

.hr-admin-request-grid span {
    color: #6b8194;
    font-size: 11px;
    margin-bottom: 4px;
}

.hr-admin-request-grid strong {
    color: #233b52;
    font-size: 12px;
    word-break: break-word;
}

.hr-admin-reason,
.hr-admin-manager-note,
.hr-admin-request-review {
    border-radius: 16px;
    padding: 12px 14px;
    line-height: 1.8;
    font-size: 12px;
    text-align: right;
}

.hr-admin-reason {
    background: #ffffff;
    color: #2c455d;
    box-shadow: inset 3px 3px 7px #dbe3ea, inset -3px -3px 7px #ffffff;
}

.hr-admin-manager-note,
.hr-admin-request-review {
    margin-top: 10px;
    background: #fff7ec;
    color: #775835;
}

.hr-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.hr-admin-approve-button,
.hr-admin-reject-button {
    min-height: 42px;
    border-radius: 16px;
    color: #ffffff;
}

.hr-admin-approve-button {
    background: #1fa883;
}

.hr-admin-reject-button {
    background: #c85c5c;
}

.achievement-recent-list {
    display: grid;
    gap: 10px;
}

.achievement-recent-item {
    padding: 14px;
    border-radius: 18px;
    background: #f8fbfe;
    border: 1px solid #e0ebf5;
}

.achievement-recent-question {
    color: #1f3b53;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.achievement-recent-answer {
    color: #51697c;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 6px;
}

@media (max-width: 640px) {
    .achievement-reports-shell {
        width: calc(100vw - 18px);
        padding: 30px 18px 24px 18px;
        border-radius: 30px;
    }

    .achievement-card-head {
        flex-direction: column;
    }

    .achievement-summary-chip {
        min-width: 0;
    }

    .achievement-composer-actions {
        flex-direction: column;
    }

    .achievement-secondary-button,
    .achievement-primary-inline,
    .achievement-toggle-button,
    .achievement-ghost-button {
        width: 100%;
    }

    .achievement-date-toolbar {
        flex-direction: column;
    }

    .achievement-date-input-shell,
    .achievement-secondary-button,
    .achievement-ghost-button {
        width: 100%;
    }

    .hr-admin-tabs,
    .hr-admin-actions {
        grid-template-columns: 1fr;
    }

    .hr-admin-request-grid,
    .hr-my-request-details,
    .hr-request-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-admin-summary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .hr-month-dialog-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .hr-month-title {
        font-size: 14px;
        line-height: 1.6;
    }

    .hr-month-subtitle {
        font-size: 11px;
    }

    .hr-month-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 10px;
    }

    .hr-month-summary div {
        border-radius: 12px;
        padding: 8px 8px;
    }

    .hr-month-summary span {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .hr-month-summary strong {
        font-size: 15px;
    }

    .hr-month-picker {
        min-height: 36px;
        width: 100%;
    }

    .hr-month-table-shell {
        border: 0;
        border-radius: 0;
        max-height: min(62vh, 560px);
        padding-left: 4px;
    }

    .hr-month-table,
    .hr-month-table tbody {
        display: block;
        width: 100%;
    }

    .hr-month-table thead {
        display: none;
    }

    .hr-month-table tr {
        border: 1px solid #dce8f2;
        border-radius: 16px;
        display: grid;
        gap: 7px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 9px;
        overflow: hidden;
        padding: 9px;
    }

    .hr-month-table tr.is-complete {
        background: #f0fbf7;
    }

    .hr-month-table tr.is-leave {
        background: #eef8ff;
    }

    .hr-month-table tr.is-day-off {
        background: #f4f7f8;
    }

    .hr-month-table tr.is-partial {
        background: #fff8ea;
    }

    .hr-month-table tr.is-empty,
    .hr-month-table tr.is-unauthorized-absence {
        background: #fff3f3;
    }

    .hr-month-table tr.is-future {
        background: #f7f9fb;
    }

    .hr-month-table td {
        align-content: center;
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(220, 232, 242, 0.75);
        border-radius: 12px;
        display: grid;
        gap: 3px;
        min-height: 48px;
        padding: 7px 8px;
        text-align: right;
    }

    .hr-month-table td::before {
        color: #708090;
        content: '';
        display: block;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.4;
    }

    .hr-month-table td:nth-child(1)::before {
        content: 'اليوم';
    }

    .hr-month-table td:nth-child(2)::before {
        content: 'التاريخ';
    }

    .hr-month-table td:nth-child(3)::before {
        content: 'الحضور';
    }

    .hr-month-table td:nth-child(4)::before {
        content: 'الانصراف';
    }

    .hr-month-table td:nth-child(5)::before {
        content: 'الحالة والطلبات';
    }

    .hr-month-table td:nth-child(6)::before {
        content: 'إجراء';
    }

    .hr-month-table td:nth-child(1),
    .hr-month-table td:nth-child(2) {
        color: #17364f;
        font-weight: 900;
    }

    .hr-month-table td:nth-child(5),
    .hr-month-table td:nth-child(6) {
        grid-column: 1 / -1;
    }

    .hr-month-time-cell {
        justify-items: start;
    }

    .hr-month-status-pill,
    .hr-month-day-request-button {
        width: 100%;
    }

    .hr-month-requests {
        justify-items: stretch;
        margin-top: 5px;
    }

    .hr-month-request-chip {
        max-width: none;
        width: 100%;
    }

    .hr-my-requests-card {
        width: 100%;
        padding: 12px;
    }

    .hr-my-requests-head,
    .hr-my-request-item,
    .hr-my-request-meta {
        align-items: stretch;
    }

    .hr-my-requests-head {
        flex-direction: column;
        gap: 10px;
    }

    .hr-my-request-item {
        grid-template-columns: 1fr;
        text-align: right;
    }

    .hr-my-request-meta {
        gap: 6px;
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .hr-my-request-meta .hr-month-request-chip {
        align-self: stretch;
    }

    .hr-my-request-meta small {
        max-width: none;
        text-align: right;
    }

    .hr-requests-page {
        width: 100%;
    }

    .hr-requests-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .hr-requests-back,
    .hr-requests-filters button,
    .hr-requests-refresh-button,
    .hr-requests-clear-button,
    .hr-requests-filters a {
        width: 100%;
    }

    .hr-requests-filters {
        grid-template-columns: 1fr;
    }

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

    .hr-request-history-grid {
        gap: 7px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-request-history-grid div {
        min-height: 34px;
        padding: 7px 10px;
    }

    .hr-request-history-badges {
        justify-content: flex-start;
    }

    .hr-request-history-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-request-history-grid span,
    .hr-request-history-grid strong {
        line-height: 1.5;
    }

    .hr-request-history-grid strong {
        font-size: 0.78rem;
        text-align: right;
    }
}

@media (max-width: 380px) {
    .attendance-status-lines {
        grid-template-columns: 1fr;
    }

    .attendance-status-head,
    .attendance-status-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #attendanceStatusDate,
    .attendance-refresh-button {
        width: 100%;
    }

    .hr-my-requests-actions .attendance-refresh-button {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }

    .hr-requests-summary,
    .hr-request-history-grid,
    .hr-request-history-facts {
        grid-template-columns: 1fr;
    }

    .hr-request-history-grid div:nth-child(3) {
        grid-column: auto;
    }
}

.avatar-cropper-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 18px;
}

.avatar-cropper-modal[hidden] {
    display: none !important;
}

.avatar-cropper-dialog {
    width: min(100%, 420px);
    background: #f7fafc;
    border-radius: 26px;
    padding: 18px 16px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
    text-align: right;
}

.avatar-cropper-title {
    color: #1f3b53;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.avatar-cropper-note {
    color: #678096;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 14px;
}

.avatar-cropper-viewport {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto 14px;
    border-radius: 24px;
    overflow: hidden;
    background: #dfe8f0;
    touch-action: none;
    cursor: grab;
}

.avatar-cropper-viewport:active {
    cursor: grabbing;
}

.avatar-cropper-viewport img {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.avatar-cropper-viewport img:not([src]),
.avatar-cropper-viewport img[src=""] {
    display: none;
}

.avatar-cropper-frame {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    box-shadow: inset 0 0 0 2000px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.avatar-cropper-zoom-label {
    display: block;
    color: #1f3b53;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

#avatarCropperZoom {
    width: 100%;
    margin-bottom: 14px;
}

.avatar-cropper-actions {
    display: flex;
    gap: 10px;
}

.avatar-cropper-actions .btn-submit,
.avatar-cropper-actions .btn-logout {
    margin-top: 0;
    width: 100%;
}

body.avatar-cropper-open {
    overflow: hidden;
}

.employee-notices-popup {
    width: min(780px, calc(100vw - 22px)) !important;
    border-radius: 14px !important;
    padding: 20px 18px 18px !important;
}

.employee-notices-title {
    color: #34454f !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: clamp(18px, 2.8vw, 22px) !important;
    letter-spacing: 0 !important;
}

.employee-notices-html {
    margin: 0 !important;
}

.employee-notices-modal-body {
    text-align: right;
    direction: rtl;
}

.employee-notices-modal-note {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f3f7f8;
    color: #4f5f76;
    line-height: 1.8;
    font-size: 13px;
}

.employee-notices-modal-note strong {
    color: #15866f;
    font-size: 14px;
}

.employee-notices-modal-note span {
    color: #68747a;
}

.employee-notices-list {
    display: grid;
    gap: 12px;
    max-height: min(54vh, 430px);
    overflow-y: auto;
    padding: 2px 2px 2px 8px;
}

.employee-notice-card {
    background: #ffffff;
    border: 1px solid #dfe7eb;
    border-right: 5px solid #24cfaa;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 6px 16px rgba(30, 50, 64, 0.08);
}

.employee-notice-card.is-high {
    border-right-color: #f59f00;
}

.employee-notice-card.is-urgent {
    border-right-color: #fa5252;
}

.employee-notice-card.is-low {
    border-right-color: #74b816;
}

.employee-notice-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.employee-notice-title-wrap {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.employee-notice-priority {
    width: fit-content;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 10px;
    color: #15866f;
    background: #e2fbf5;
    font-size: 11px;
    font-weight: 700;
}

.employee-notice-card.is-high .employee-notice-priority {
    color: #8a5a00;
    background: #fff1cc;
}

.employee-notice-card.is-urgent .employee-notice-priority {
    color: #b42318;
    background: #ffe2df;
}

.employee-notice-card.is-low .employee-notice-priority {
    color: #4d7c0f;
    background: #edf8d8;
}

.employee-notice-card-title {
    font-weight: 800;
    color: #34454f;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.employee-notice-card-body {
    color: #40515a;
    line-height: 1.85;
    font-size: 14px;
    white-space: normal;
    word-break: break-word;
}

.employee-notice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 12px;
    color: #7b8796;
}

.employee-notice-ack-button {
    border: 0;
    border-radius: 8px;
    background: #24cfaa;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    min-height: 38px;
    padding: 0 14px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(36, 207, 170, 0.24);
}

.employee-notice-ack-button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.employee-notices-actions {
    gap: 10px !important;
    margin-top: 16px !important;
}

.employee-notices-snooze-button,
.employee-notices-close-button {
    border-radius: 8px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 13px !important;
}

.employee-notices-snooze-button {
    background: #24cfaa !important;
}

.employee-notices-close-button {
    background: #eef2f5 !important;
    color: #40515a !important;
}

.updates-popup {
    width: min(590px, calc(100vw - 28px)) !important;
    border-radius: 10px !important;
    padding: 26px 24px 22px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.98)) !important;
    box-shadow:
        0 18px 42px rgba(42, 61, 72, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    direction: rtl;
}

.updates-modal-title {
    margin: 4px 0 12px !important;
    color: #2d4351 !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
}

.updates-modal-html {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.updates-modal-list {
    max-height: min(58vh, 430px);
    overflow-y: auto;
    padding: 4px 6px 4px 2px;
    display: grid;
    gap: 10px;
    scrollbar-color: #99a3a9 transparent;
    scrollbar-width: thin;
}

.updates-modal-list::-webkit-scrollbar {
    width: 8px;
}

.updates-modal-list::-webkit-scrollbar-track {
    background: transparent;
}

.updates-modal-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #a6b0b6;
}

.updates-modal-card {
    text-align: right;
    border: 1px solid #e1e8eb;
    border-radius: 9px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 5px 14px rgba(75, 92, 103, 0.08);
}

.updates-modal-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 8px;
}

.updates-modal-card h3 {
    margin: 0;
    color: #263946;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.75;
}

.updates-modal-card time {
    color: #008b78;
    background: #e8fbf6;
    border: 1px solid rgba(36, 207, 170, 0.22);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
}

.updates-modal-card p {
    margin: 0;
    color: #52636d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.updates-modal-confirm {
    min-width: 108px !important;
    min-height: 40px !important;
    margin-top: 14px !important;
    border-radius: 8px !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 16px rgba(36, 207, 170, 0.22) !important;
}

@media (max-width: 560px) {
    .employee-notices-popup {
        padding: 16px 12px 14px !important;
    }

    .employee-notices-list {
        max-height: 58vh;
    }

    .employee-notice-card {
        padding: 12px;
    }

    .employee-notice-card-head {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .employee-notice-ack-button {
        width: 100%;
    }

    .employee-notice-meta {
        display: grid;
        gap: 4px;
    }

    .updates-popup {
        padding: 20px 14px 16px !important;
    }

    .updates-modal-title {
        font-size: 23px !important;
    }

    .updates-modal-list {
        max-height: 62vh;
        padding-inline: 3px;
    }

    .updates-modal-card {
        padding: 12px;
    }

    .updates-modal-card-head {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .updates-modal-card time {
        width: fit-content;
    }
}

/* Subtle 2026 system refresh: keeps workflows familiar while making the update visible. */
.container-login:not(.new-system-dashboard) {
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        10px 12px 24px rgba(123, 141, 152, 0.22),
        -10px -10px 22px rgba(255, 255, 255, 0.92);
}

.container-login:not(.new-system-dashboard) > .title {
    position: relative;
    color: #2d4351;
    font-weight: 800;
    line-height: 1.75;
}

.container-login:not(.new-system-dashboard) > .title::after {
    content: "تحديث جديد";
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    padding: 5px 12px;
    border: 1px solid rgba(36, 207, 170, 0.28);
    border-radius: 8px;
    background: rgba(232, 251, 246, 0.86);
    color: #008b78;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}

.container-login:not(.new-system-dashboard) .sub-title {
    color: #40515a;
    font-weight: 800;
}

.container-login:not(.new-system-dashboard) {
    border-radius: 18px;
}

.container-login:not(.new-system-dashboard) .username-field,
.container-login:not(.new-system-dashboard) .password-field {
    border-radius: 10px;
}

.container-login:not(.new-system-dashboard) hr {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(36, 207, 170, 0.34), transparent);
}

.container-login:not(.new-system-dashboard) .btn-submit,
.container-login:not(.new-system-dashboard) .btn-container .btn-option,
.container-login:not(.new-system-dashboard) .btn-optionA,
.container-login:not(.new-system-dashboard) .btn-green {
    border: 1px solid rgba(255, 255, 255, 0.56);
    background: linear-gradient(135deg, #27cfab, #20bfa0);
    box-shadow: 0 8px 16px rgba(36, 207, 170, 0.22), -4px -4px 10px #ffffff;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.container-login:not(.new-system-dashboard) .btn-submit:hover,
.container-login:not(.new-system-dashboard) .btn-container .btn-option:hover,
.container-login:not(.new-system-dashboard) .btn-optionA:hover,
.container-login:not(.new-system-dashboard) .btn-green:hover {
    background: linear-gradient(135deg, #2bdcb8, #22cba9);
    box-shadow: 0 10px 20px rgba(36, 207, 170, 0.28), -4px -4px 10px #ffffff;
    transform: translateY(-1px);
}

.container-login:not(.new-system-dashboard) .btn-logout {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, #ff5858, #ef4545);
    box-shadow: 0 8px 16px rgba(245, 82, 82, 0.22), -4px -4px 10px #ffffff;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.container-login:not(.new-system-dashboard) .btn-logout:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(245, 82, 82, 0.28), -4px -4px 10px #ffffff;
}

.container-login:not(.new-system-dashboard) .username-field,
.container-login:not(.new-system-dashboard) .password-field,
.container-login:not(.new-system-dashboard) .document-card,
.container-login:not(.new-system-dashboard) .profile-avatar-card,
.container-login:not(.new-system-dashboard) .attendance-status-card {
    border: 1px solid rgba(255, 255, 255, 0.62);
}

@media (max-width: 560px) {
    .container-login:not(.new-system-dashboard) > .title::after {
        font-size: 9px;
        padding: 4px 10px;
    }
}

/* Unified employee-facing card/slice pattern. */
.container-login:not(.new-system-dashboard) .attendance-status-card,
.container-login:not(.new-system-dashboard) .attendance-status-row,
.container-login:not(.new-system-dashboard) .hr-my-requests-card,
.container-login:not(.new-system-dashboard) .hr-my-request-card,
.container-login:not(.new-system-dashboard) .hr-request-history-card,
.container-login:not(.new-system-dashboard) .welcome-card,
.container-login:not(.new-system-dashboard) .profile-avatar-card,
.container-login:not(.new-system-dashboard) .document-card,
.container-login:not(.new-system-dashboard) .certificates-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 58, 85, 0.1);
    border-inline-start: 4px solid #28ccb0;
    border-radius: 12px;
    box-shadow: 4px 4px 12px rgba(15, 58, 85, 0.07), -4px -4px 12px rgba(255, 255, 255, 0.82);
    box-sizing: border-box;
}

.container-login:not(.new-system-dashboard) .attendance-status-card:hover,
.container-login:not(.new-system-dashboard) .attendance-status-row:hover,
.container-login:not(.new-system-dashboard) .hr-my-requests-card:hover,
.container-login:not(.new-system-dashboard) .hr-my-request-card:hover,
.container-login:not(.new-system-dashboard) .hr-request-history-card:hover,
.container-login:not(.new-system-dashboard) .welcome-card:hover,
.container-login:not(.new-system-dashboard) .document-card:hover,
.container-login:not(.new-system-dashboard) .certificates-card:hover {
    box-shadow: 5px 7px 16px rgba(15, 58, 85, 0.1), -4px -4px 12px rgba(255, 255, 255, 0.86);
}

.container-login:not(.new-system-dashboard) .attendance-check-out-card,
.container-login:not(.new-system-dashboard) .hr-request-history-card.is-rejected {
    border-inline-start-color: #ff4d4f;
}

.container-login:not(.new-system-dashboard) .attendance-permission-out-card,
.container-login:not(.new-system-dashboard) .hr-request-history-card.is-pending {
    border-inline-start-color: #e0a924;
}

.container-login:not(.new-system-dashboard) .attendance-return-office-card {
    border-inline-start-color: #52a7f8;
}

.container-login:not(.new-system-dashboard) .hr-request-history-card.is-cancelled {
    border-inline-start-color: #aab8c2;
}

/* Unified employee HR fields and buttons. */
.container-login:not(.new-system-dashboard) .hr-requests-filters input,
.container-login:not(.new-system-dashboard) .hr-requests-filters select,
.container-login:not(.new-system-dashboard) .hr-adjustment-dialog .swal2-input,
.container-login:not(.new-system-dashboard) .hr-adjustment-dialog .swal2-textarea {
    background: #f8fbfc;
    border: 1px solid rgba(15, 58, 85, 0.08);
    border-radius: 10px;
    box-shadow: inset 3px 3px 8px rgba(67, 81, 90, 0.14), inset -3px -3px 8px #ffffff;
    box-sizing: border-box;
    color: #2c4050;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 850;
    min-height: 38px;
    outline: none;
    padding: 0 14px;
    text-align: right;
    width: 100%;
}

.container-login:not(.new-system-dashboard) #auth-form.custom-fields input {
    background: transparent;
    border: none;
    border-radius: 10px !important;
    box-shadow: none;
    color: #2c4050;
    font-size: 12px;
    font-weight: 850;
    min-height: 38px;
    padding: 0 14px;
    text-align: center;
    width: 100%;
}

.container-login:not(.new-system-dashboard) #auth-form.custom-fields [hidden],
.container-login:not(.new-system-dashboard) #auth-form.custom-fields [data-auth-extra-field][hidden],
.container-login:not(.new-system-dashboard) #auth-form.custom-fields input[hidden] {
    display: none !important;
}

.container-login:not(.new-system-dashboard) #auth-form.custom-fields .username-field,
.container-login:not(.new-system-dashboard) #auth-form.custom-fields .password-field {
    align-items: center;
    background: #f8fbfc;
    border: 1px solid rgba(15, 58, 85, 0.08);
    border-radius: 10px !important;
    box-shadow: inset 3px 3px 8px rgba(67, 81, 90, 0.14), inset -3px -3px 8px #ffffff;
    display: flex;
    margin: 0 auto 14px;
    max-width: 250px;
    min-height: 38px;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.container-login:not(.new-system-dashboard) .hr-adjustment-dialog .swal2-textarea {
    border-radius: 12px;
    line-height: 1.7;
    min-height: 96px;
    padding-block: 10px;
}

.hr-arabic-time-picker {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(68px, 0.65fr);
    margin: 0 auto 12px;
    width: 100%;
}

.hr-arabic-time-picker select {
    appearance: none;
    background: #f8fbfc;
    border: 1px solid rgba(15, 58, 85, 0.08);
    border-radius: 10px;
    box-shadow: inset 3px 3px 8px rgba(67, 81, 90, 0.14), inset -3px -3px 8px #ffffff;
    color: #2c4050;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 900;
    min-height: 38px;
    outline: none;
    padding: 0 10px;
    text-align: center;
    width: 100%;
}

.hr-arabic-time-picker span {
    color: #708090;
    font-size: 16px;
    font-weight: 950;
}

.container-login:not(.new-system-dashboard) input[type="date"],
.container-login:not(.new-system-dashboard) input[type="month"],
.container-login:not(.new-system-dashboard) input[type="time"],
.container-login:not(.new-system-dashboard) input[type="number"] {
    direction: ltr;
    text-align: center;
}

.container-login:not(.new-system-dashboard) .btn-submit,
.container-login:not(.new-system-dashboard) .btn-logout,
.container-login:not(.new-system-dashboard) .btn-container .btn-option,
.container-login:not(.new-system-dashboard) .btn-optionA,
.container-login:not(.new-system-dashboard) .btn-green,
.container-login:not(.new-system-dashboard) .attendance-refresh-button,
.container-login:not(.new-system-dashboard) .hr-requests-filters button,
.container-login:not(.new-system-dashboard) .hr-requests-refresh-button,
.container-login:not(.new-system-dashboard) .hr-requests-clear-button,
.container-login:not(.new-system-dashboard) .hr-request-history-actions a,
.container-login:not(.new-system-dashboard) .hr-my-requests-open-link {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 10px !important;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    line-height: 1.3;
    min-height: 38px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.container-login:not(.new-system-dashboard) .btn-submit,
.container-login:not(.new-system-dashboard) .btn-container .btn-option,
.container-login:not(.new-system-dashboard) .btn-optionA,
.container-login:not(.new-system-dashboard) .btn-green,
.container-login:not(.new-system-dashboard) .attendance-refresh-button,
.container-login:not(.new-system-dashboard) .hr-requests-filters button,
.container-login:not(.new-system-dashboard) .hr-requests-refresh-button,
.container-login:not(.new-system-dashboard) .hr-request-history-actions a,
.container-login:not(.new-system-dashboard) .hr-my-requests-open-link {
    background: linear-gradient(135deg, #28ccb0, #20bfa0);
    box-shadow: 3px 5px 10px rgba(36, 207, 170, 0.22), -4px -4px 10px #ffffff;
    color: #ffffff;
}

.container-login:not(.new-system-dashboard) .btn-logout {
    background: linear-gradient(135deg, #ff5858, #ef4545);
    box-shadow: 3px 5px 10px rgba(245, 82, 82, 0.22), -4px -4px 10px #ffffff;
    color: #ffffff;
}

.container-login:not(.new-system-dashboard) .hr-requests-clear-button {
    background: #edf5f6;
    box-shadow: none;
    color: #607380;
}

.container-login:not(.new-system-dashboard) .hr-request-history-type,
.container-login:not(.new-system-dashboard) .hr-request-history-badges > strong,
.container-login:not(.new-system-dashboard) .hr-month-status-pill,
.container-login:not(.new-system-dashboard) .hr-month-request-chip,
.container-login:not(.new-system-dashboard) .hr-my-request-meta .hr-month-request-chip,
.container-login:not(.new-system-dashboard) .attendance-status-date,
.container-login:not(.new-system-dashboard) .attendance-status-badge,
.container-login:not(.new-system-dashboard) .updates-trigger,
.container-login:not(.new-system-dashboard) .menu {
    border-radius: 10px !important;
}

.container-login:not(.new-system-dashboard) .btn-submit:hover,
.container-login:not(.new-system-dashboard) .btn-logout:hover,
.container-login:not(.new-system-dashboard) .btn-container .btn-option:hover,
.container-login:not(.new-system-dashboard) .btn-optionA:hover,
.container-login:not(.new-system-dashboard) .btn-green:hover,
.container-login:not(.new-system-dashboard) .attendance-refresh-button:hover,
.container-login:not(.new-system-dashboard) .hr-requests-filters button:hover,
.container-login:not(.new-system-dashboard) .hr-requests-refresh-button:hover,
.container-login:not(.new-system-dashboard) .hr-requests-clear-button:hover,
.container-login:not(.new-system-dashboard) .hr-request-history-actions a:hover {
    transform: translateY(-1px);
}

/* Force one approved font across the full application UI. */
html,
body,
body *,
button,
input,
select,
textarea,
option,
.swal2-popup,
.swal2-popup *,
.swal2-container,
.swal2-container * {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}