* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f7fb;
    --white: #ffffff;
    --text: #25323a;
    --muted: #667782;
    --line: #dfe8ee;

    --primary: #406f8e;
    --primary-dark: #244f68;
    --primary-soft: #edf6fb;

    --sage: #6f9f8b;
    --sage-dark: #48715f;
    --sage-soft: #eef8f3;

    --gold: #c79a45;
    --gold-soft: #fff7e5;

    --danger: #d94b5f;
    --danger-soft: #fff0f3;

    --success: #2f8f5b;
    --success-dark: #1f6e43;
    --success-soft: #eaf8ef;

    --shadow: 0 8px 20px rgba(36, 63, 82, 0.08);
    --soft-shadow: 0 4px 10px rgba(36, 63, 82, 0.04);

    --side-w: 164px;
    
    --sheet-w: 1460px;

    --field-w: 130px;
    
    --field-h: 25px;
    --label-h: 14px;
    --small-h: 4px;
    --field-total-h: 44px;

    --number-w: 30px;
    --actions-w: 72px;
    --gap: 4px;
    --radius: 7px;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    overflow-y: auto;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.app-page {
    width: 100%;
    min-height: 100vh;
    padding: 5px 7px;
    display: grid;
    grid-template-rows: 52px 1fr;
    gap: 5px;
    background:
        radial-gradient(circle at 10% 12%, rgba(64, 111, 142, 0.07), transparent 25%),
        radial-gradient(circle at 92% 12%, rgba(199, 154, 69, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

/* Header */

.top-header {
    height: 52px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f9fcfe 55%, #fff8ea 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.logo-mark,
.welcome-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.logo-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.title-text h1 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 22px;
    line-height: 1.1;
}

.title-text p,
.currentDate {
    margin: 2px 0 0;
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
}

.company-name {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

/* Layout */

.form-shell {
    min-height: calc(100vh - 64px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.form-layout {
    min-height: calc(100vh - 64px);
    display: grid;
    grid-template-columns: var(--side-w) 1fr;
    align-items: stretch;
}

.side-panel {
    min-height: calc(100vh - 64px);
    padding: 5px;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fb 100%);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.side-heading {
    min-height: 34px;
    padding: 5px;
    border-radius: 10px;
    background: var(--primary-soft);
    border: 1px solid #d8eaf2;
    display: grid;
    place-items: center;
}

.side-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

.steps {
    display: grid;
    gap: 3px;
}

.step {
    width: 100%;
    height: 29px;
    min-height: 29px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    text-align: right;
    transition: 0.18s ease;
}

.step span {
    width: 21px;
    height: 21px;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    flex: 0 0 auto;
}

.step b {
    font-size: 10px;
    font-weight: 900;
}

.step.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-color: var(--primary);
}

.step.active span {
    background: #ffffff;
    color: var(--primary-dark);
}

.step.locked,
.step:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Side */

.side-data-box {
    margin-top: auto;
    padding: 5px;
    border-radius: 10px;
    background: var(--gold-soft);
    border: 1px solid #ecd8a9;
    display: grid;
    gap: 4px;
}

.side-data-box label,
.reference-field label {
    display: grid;
    gap: 2px;
}

.side-data-box label span,
.reference-field span,
.signature-mouse-field > span {
    color: #5d4d2d;
    font-size: 9.5px;
    font-weight: 900;
}

.side-data-box input,
.reference-field input {
    width: 100%;
    height: 24px;
    min-height: 24px;
    border: 1px solid #d6c18f;
    border-radius: 6px;
    padding: 0 6px;
    outline: none;
    font-size: 10.5px;
    font-weight: 800;
    background: #ffffff;
}

.side-data-box small,
.reference-field small {
    min-height: 4px;
    color: var(--danger);
    font-size: 8px;
    font-weight: 900;
}

.signature-mouse-field {
    display: grid !important;
    gap: 2px !important;
    margin-top: 2px !important;
}

#canvas-container {
    width: 100% !important;
    height: 52px !important;
    border: 0 !important;
    border-bottom: 2px dashed #666 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    position: relative !important;
}

#signature-pad {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: crosshair !important;
    touch-action: none !important;
    background: transparent !important;
}

#clear-signature {
    width: 42px;
    height: 18px;
    border: 0;
    border-radius: 5px;
    background: #f44336;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 0;
    justify-self: end;
}

#signatureError {
    min-height: 8px !important;
    color: var(--danger) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
}

.status-box {
    width: 100%;
    padding: 5px;
    border: 1px solid #c9d2d8;
    border-radius: 8px;
    font-size: 9.5px;
    background: #ffffff;
    display: grid;
    gap: 2px;
}

.status-box label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 800;
}

.status-box input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
}

.reference-field {
    padding: 5px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e4edf2;
}

/* Main */

.main-panel {
    min-width: 0;
    min-height: 0;
    background: #ffffff;
}

.one-page-form {
    width: min(100%, var(--sheet-w));
    margin-inline: auto;
    height: auto;
    overflow: visible;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.form-section {
    min-height: auto;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: var(--soft-shadow);
    padding: 3px;
}

.section-title-line {
    min-height: 20px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #edf2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}


.section-title-line h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900 !important;
    flex-grow: 1; /* تجعل العنوان يتمدد ليملأ الفراغ وبالتالي ينجح التوسيط داخله */
    text-align: center !important;
}


.inline-add-btn {
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--sage), var(--primary));
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 0 8px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Unified Fields */

.field {
    width: var(--field-w);
    min-width: var(--field-w);
    max-width: var(--field-w);
    height: var(--field-total-h);
    min-height: var(--field-total-h);
    max-height: var(--field-total-h);
    display: grid;
    grid-template-rows: var(--label-h) var(--field-h) var(--small-h);
    gap: 1px;
    align-items: start;
    flex: 0 0 var(--field-w);
}

.field span {
    height: var(--label-h);
    line-height: var(--label-h);
    color: #243743;
    font-size: 11px;
    font-weight: 900;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field.required span::after {
    content: " *";
    color: var(--danger);
}

.field input,
.field select,
.field textarea,
.phone-control,
.phone-control input,
.phone-control strong {
    width: 100%;
    height: var(--field-h);
    min-height: var(--field-h);
    max-height: var(--field-h);
    font-size: 10.5px;
    border-radius: var(--radius);
}

.field input,
.field select,
.field textarea {
    min-width: 0;
    border: 1px solid #d8e0e5;
    background: #ffffff;
    color: var(--text);
    padding: 0 6px;
    outline: none;
    font-weight: 800;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 111, 142, 0.08);
}

.field input[readonly] {
    background: #eef6fa;
    color: var(--primary-dark);
    border-color: #c8dfe9;
    cursor: not-allowed;
}

.field small {
    height: var(--small-h);
    min-height: var(--small-h);
    max-height: var(--small-h);
    line-height: var(--small-h);
    display: block;
    font-size: 7px;
    color: var(--danger);
    font-weight: 800;
    overflow: hidden;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea,
.side-data-box label.invalid input {
    border-color: var(--danger);
}

/* Phone */

.phone-field {
    width: var(--field-w) !important;
    min-width: var(--field-w) !important;
    max-width: var(--field-w) !important;
    flex: 0 0 var(--field-w) !important;
}

.phone-control {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    border: 1px solid #d8e0e5;
    overflow: hidden;
    background: #ffffff;
}

.phone-control strong {
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-left: 1px solid #d8e0e5;
    font-size: 9px;
    font-weight: 900;
    border-radius: 0;
}

.phone-control input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 4px !important;
}

/* Rows */

.paper-line {
    display: grid;
    align-items: start;
    gap: var(--gap);
    width: 100%;
    overflow: visible;
}

.applicant-line {
    grid-template-columns: repeat(10, var(--field-w));
}

.mother-line {
    grid-template-columns: repeat(9, var(--field-w));
}

.line-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    overflow: visible;
    padding: 0;
    margin: 0;
}

.line-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    align-items: start;
    gap: var(--gap);
    padding: 2px;
    overflow: visible;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: #ffffff;
    box-shadow: none;
}

.spouse-line-card {
    grid-template-columns: var(--number-w) repeat(10, var(--field-w)) var(--actions-w);
}

.child-line-card {
    grid-template-columns: var(--number-w) repeat(6, var(--field-w)) var(--actions-w);
}

.external-line-card {
    grid-template-columns: var(--number-w) repeat(7, var(--field-w)) var(--actions-w);
}

.hidden-number-field {
    display: none !important;
}

/* Hide labels after first spouse/child row */

#spousesList .spouse-card:not(:first-child),
#childrenList .child-card:not(:first-child) {
    padding-top: 2px;
    padding-bottom: 2px;
}

#spousesList .spouse-card:not(:first-child) .field,
#childrenList .child-card:not(:first-child) .field {
    height: calc(var(--field-h) + 2px);
    min-height: calc(var(--field-h) + 2px);
    max-height: calc(var(--field-h) + 2px);
    grid-template-rows: var(--field-h) 0;
}

#spousesList .spouse-card:not(:first-child) .field span,
#childrenList .child-card:not(:first-child) .field span,
#spousesList .spouse-card:not(:first-child) .field small,
#childrenList .child-card:not(:first-child) .field small {
    display: none !important;
}

/* Number + Actions */

.row-number {
    width: var(--number-w);
    min-width: var(--number-w);
    max-width: var(--number-w);
    height: var(--field-h);
    min-height: var(--field-h);
    max-height: var(--field-h);
    margin-top: var(--label-h);
    display: grid;
    place-items: center;
    border: 1px solid #d8e0e5;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.row-number b {
    font-size: 10.5px;
    line-height: 1;
    font-weight: 900;
}

#spousesList .spouse-card:not(:first-child) .row-number,
#childrenList .child-card:not(:first-child) .row-number {
    margin-top: 0;
}

.row-actions {
    width: var(--actions-w);
    min-width: var(--actions-w);
    max-width: var(--actions-w);
    height: var(--field-h);
    min-height: var(--field-h);
    max-height: var(--field-h);
    margin-top: var(--label-h);
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    justify-content: center;
}

#spousesList .spouse-card:not(:first-child) .row-actions,
#childrenList .child-card:not(:first-child) .row-actions {
    margin-top: 0;
}

.row-actions button,
.small-save,
.small-delete,
.mini-delete {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: var(--field-h);
    min-height: var(--field-h);
    max-height: var(--field-h);
    line-height: var(--field-h);
    padding: 0;
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.small-save {
    background: var(--success-soft);
    color: var(--success-dark);
    border-color: #ccebd8;
}

.small-delete,
.mini-delete {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: #f1c9cf;
}

/* Submit */

.submit-section {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 8px;
    align-items: center;
    padding: 4px;
    border: 1px solid #cfead9;
    border-radius: 9px;
    background: linear-gradient(135deg, #ffffff 0%, #f2faf5 100%);
    margin-top: 0;
}

.submit-btn {
    height: 34px;
    border: 0;
    border-radius: 10px;
    
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-message {
    min-height: 18px;
    font-size: 11px;
    font-weight: 900;
}

.form-message.success {
    color: var(--success);
}

.form-message.error {
    color: var(--danger);
}

/* Locked */

.locked-section {
    opacity: 0.48;
    filter: grayscale(0.15);
}

.locked-section input,
.locked-section select,
.locked-section button {
    cursor: not-allowed;
}

/* Modals */

.success-modal,
.welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(23, 39, 50, 0.42);
    backdrop-filter: blur(7px);
    padding: 12px;
}

.success-modal.show,
.welcome-modal.show {
    display: flex;
}

.success-card,
.welcome-card {
    width: min(620px, 96vw);
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dcebe2;
    box-shadow: 0 24px 70px rgba(23, 39, 50, 0.24);
    padding: 14px 16px;
    text-align: center;
    animation: modalPop 0.26s ease;
}

.success-card h2,
.welcome-card h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 20px;
    line-height: 1.25;
}

.welcome-notes {
    text-align: right;
    margin: 8px 0;
}

.paper-notes {
    background: #f8fbfd;
    border: 1px solid #cfd9df;
    border-radius: 12px;
    padding: 7px;
}

.notes-title {
    color: #17384c;
    background: #edf6fb;
    border: 1px solid #d6eaf3;
    border-radius: 9px;
    padding: 5px 8px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.notes-list {
    list-style: none;
    counter-reset: note-counter;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.notes-list li {
    counter-increment: note-counter;
    position: relative;
    min-height: 28px;
    padding: 5px 34px 5px 8px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e1e9ee;
    color: #26343b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.notes-list li::before {
    content: counter(note-counter);
    position: absolute;
    right: 8px;
    top: 5px;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.agree-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.agree-check {
    display: flex;
    justify-content: center;
    align-items: center;
}

.agree-check input {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.welcome-card button,
.success-card button {
    min-width: 170px;
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.welcome-card button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.success-card p {
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 7px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
}

@keyframes modalPop {
    from {
        transform: scale(0.94);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Desktop Fit */

@media (max-width: 1600px) {
    :root {
        --sheet-w: 1135px;
        --field-w: 92px;
        --field-h: 24px;
        --label-h: 13px;
        --small-h: 3px;
        --field-total-h: 40px;
        --number-w: 28px;
        --actions-w: 68px;
        --gap: 4px;
    }

    .field span {
        font-size: 9.1px;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .phone-control input,
    .phone-control strong {
        font-size: 10px;
    }

    .row-actions button,
    .small-save,
    .small-delete,
    .mini-delete {
        width: 31px;
        min-width: 31px;
        max-width: 31px;
        font-size: 8px;
    }

    .title-text h1 {
        font-size: 20px;
    }

    .company-name {
        font-size: 13px;
    }
}

@media (max-width: 1320px) {
    .form-layout {
        grid-template-columns: 1fr;
    }

    .side-panel {
        min-height: auto;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .side-data-box {
        margin-top: 0;
    }

    .one-page-form {
        overflow-x: auto;
    }

    .form-section {
        min-width: 980px;
    }

    .submit-section {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Submit Button Under Sidebar Tabs v232
   ========================================================== */

.side-submit-section {
    width: 100%;
    padding: 5px;
    border-radius: 9px;
    border: 1px solid #cfead9;
    display: grid;
    gap: 4px;
    margin: 0;
}

.side-submit-section .submit-btn {
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 9px;

    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 6px 12px rgba(47, 143, 91, 0.14);
}

.side-submit-section .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.side-submit-section .form-message {
    min-height: 14px;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
}

.side-submit-section .form-message.success {
    color: var(--success);
}

.side-submit-section .form-message.error {
    color: var(--danger);
}

/* لو بقي زر قديم بالمنطقة الرئيسية بالغلط نخفيه */
.main-panel .submit-section,
.one-page-form .submit-section {
    display: none !important;
}
/* ==========================================================
   External Row True Same Line Fix v242
   زوج الأم + عنوان أبناء هذا الزواج + 5 أبناء + حفظ/حذف بنفس اللاين
   ========================================================== */

/* نفس عرض السطر بدون نزول */
.external-line-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--field-w))
        repeat(5, var(--field-w))
        var(--actions-w) !important;
    grid-template-rows: var(--field-total-h) !important;
    gap: var(--gap) !important;
    align-items: start !important;
    overflow: visible !important;
    padding: 2px !important;
}

/* كل عناصر صف زوج الأم تبقى في نفس الصف */
.external-line-card > * {
    grid-row: 1 !important;
}

/* رقم السطر */
.external-line-card > .row-number {
    grid-column: 1 !important;
    margin-top: var(--label-h) !important;
}

/* حقول زوج الأم */
.external-line-card > label.field:nth-of-type(1) {
    grid-column: 2 !important;
}

.external-line-card > label.field:nth-of-type(2) {
    grid-column: 3 !important;
}

.external-line-card > label.field:nth-of-type(3) {
    grid-column: 4 !important;
}

.external-line-card > label.field:nth-of-type(4) {
    grid-column: 5 !important;
}

/* حقول الأبناء الخمسة بنفس اللاين */
.external-line-card > label.external-child-field:nth-of-type(5) {
    grid-column: 6 !important;
}

.external-line-card > label.external-child-field:nth-of-type(6) {
    grid-column: 7 !important;
}

.external-line-card > label.external-child-field:nth-of-type(7) {
    grid-column: 8 !important;
}

.external-line-card > label.external-child-field:nth-of-type(8) {
    grid-column: 9 !important;
}

.external-line-card > label.external-child-field:nth-of-type(9) {
    grid-column: 10 !important;
}

/* العنوان يظهر فوق حقول الأبناء بدون ما يحجز سطر جديد */
.external-children-title {
    grid-column: 6 / span 5 !important;
    grid-row: 1 !important;
    z-index: 5 !important;

    height: var(--label-h) !important;
    line-height: var(--label-h) !important;

    text-align: center !important;
    color: #243743 !important;
    font-size: 9.2px !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    pointer-events: none !important;
}

/* نخفي ليبلات خانات الأبناء فقط، والمدخلات تبقى على نفس خط باقي المدخلات */
.external-child-field span {
    visibility: hidden !important;
}

/* نفس حجم الحقول */
.external-line-card .field,
.external-line-card .external-child-field {
    width: var(--field-w) !important;
    min-width: var(--field-w) !important;
    max-width: var(--field-w) !important;

    height: var(--field-total-h) !important;
    min-height: var(--field-total-h) !important;
    max-height: var(--field-total-h) !important;

    grid-template-rows: var(--label-h) var(--field-h) var(--small-h) !important;
}

/* حفظ / حذف آخر نفس السطر */
.external-line-card > .row-actions {
    grid-column: 11 !important;
    grid-row: 1 !important;

    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;

    margin-top: var(--label-h) !important;
}

/* منع أي كود قديم من تحويلهم لسطر ثاني */
.external-children-group,
.external-children-list,
.external-child-row {
    display: contents !important;
}

/* على شاشة 1600px نخليها تركب بنفس السطر */
@media (max-width: 1600px) {
    .external-line-card {
        grid-template-columns:
            var(--number-w)
            repeat(4, var(--field-w))
            repeat(5, var(--field-w))
            var(--actions-w) !important;
    }

    .external-children-title {
        font-size: 8.7px !important;
    }
}

/* توسيط شعار نافذة الملاحظات */
.welcome-card .welcome-logo {
    margin: 0 auto 8px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.welcome-card .welcome-logo img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    
}


/* رفع خط التوقيع المنقط لفوق وتقليل الفراغ */
.signature-mouse-field {
    gap: 0 !important;
}

.signature-mouse-field > span {
    height: 11px !important;
    line-height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#canvas-container {
    height: 42px !important;
    margin-top: -8px !important;
    border-bottom: 2px dashed #666 !important;
}

/* ==========================================================
   Section Titles Clear Bold v285
   توضيح عناوين الأقسام
   ========================================================== */

.section-title-line h2 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

/* يعطي العنوان حضور أوضح بدون ما يكبر القسم كثير */
.section-title-line {
    background: #f3f8fb !important;
    border-radius: 7px !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid #dbe8ef !important;
}
.field span{
    text-align: center !important;
}
.applicant-line {
    text-align: center !important;
}

/* ==========================================================
   External Mother Siblings Popup v305
   بوب أب إضافة أخوة من الأم مع حفظها داخل الاستمارة
   ========================================================== */

/* مكان التخزين الحقيقي داخل الفورم، مخفي لكنه يرسل مع FormData */
.external-storage-list {
    display: none !important;
}

/* قائمة مختصرة تظهر للمستخدم بعد الحفظ */
.external-saved-list {
    display: grid;
    gap: 4px;
    margin-top: 3px;
}

.external-summary-item {
    min-height: 30px;
    border: 1px solid #d8e0e5;
    border-radius: 8px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 28px 1fr 45px;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
}

.external-summary-number {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
}

.external-summary-text {
    color: #243743;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.external-summary-delete {
    height: 24px;
    border: 1px solid #f1c9cf;
    border-radius: 7px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 8.5px;
    font-weight: 900;
}

/* البوب أب */
.external-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(23, 39, 50, 0.46);
    backdrop-filter: blur(7px);
    padding: 14px;
}

.external-popup.show {
    display: flex;
}

.external-popup-card {
    width: min(1290px, 97vw);
    max-height: 88vh;
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dce7ee;
    box-shadow: 0 24px 70px rgba(23, 39, 50, 0.28);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}

.external-popup-head {
    min-height: 44px;
    padding: 8px 12px;
    border-bottom: 1px solid #e4edf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f5fafc 100%);
}

.external-popup-head h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 900;
}

#externalPopupClose {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 18px;
    font-weight: 900;
}

.external-popup-note {
    padding: 7px 12px;
    border-bottom: 1px solid #e4edf2;
    color: #354650;
    background: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.external-popup-body {
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* نفس مسطرة صف أخوة الأم داخل البوب أب */
.external-popup-body .external-line-card {
    width: max-content !important;
    min-width: 100% !important;
    display: grid !important;
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--field-w))
        repeat(5, var(--field-w))
        var(--actions-w) !important;
    grid-template-rows: var(--field-total-h) !important;
    gap: var(--gap) !important;
    align-items: start !important;
    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

.external-popup-body .external-line-card > * {
    grid-row: 1 !important;
}

.external-popup-body .external-line-card > .row-number {
    grid-column: 1 !important;
    margin-top: var(--label-h) !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(1) {
    grid-column: 2 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(2) {
    grid-column: 3 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(3) {
    grid-column: 4 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(4) {
    grid-column: 5 !important;
}

/* العنوان فوق حقول الأبناء الخمسة */
.external-popup-body .external-children-title {
    grid-column: 6 / span 5 !important;
    grid-row: 1 !important;
    z-index: 4 !important;
    height: var(--label-h) !important;
    line-height: var(--label-h) !important;
    text-align: center !important;
    color: #243743 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(5) {
    grid-column: 6 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(6) {
    grid-column: 7 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(7) {
    grid-column: 8 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(8) {
    grid-column: 9 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(9) {
    grid-column: 10 !important;
}

.external-popup-body .external-child-field span {
    visibility: hidden !important;
}

/* نخفي حفظ/حذف الموجودين داخل template لأن الحفظ الحقيقي من زر البوب أب */
.external-popup-body .external-line-card > .row-actions {
    grid-column: 11 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* أزرار البوب أب */
.external-popup-actions {
    min-height: 48px;
    padding: 8px 12px;
    border-top: 1px solid #e4edf2;
    display: flex;
    justify-content: center;
    gap: 8px;
    background: #fbfdfe;
}

.external-popup-save,
.external-popup-cancel {
    height: 34px;
    border: 0;
    border-radius: 9px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 900;
}

.external-popup-save {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: #ffffff;
}

.external-popup-cancel {
    background: #ffffff;
    color: var(--primary-dark);
    border: 1px solid #d8e0e5;
}

@media (max-width: 1320px) {
    .external-popup-card {
        width: 98vw;
    }

    .external-popup-body {
        overflow-x: auto;
    }
}

/* ==========================================================
   External Mother Siblings Popup Final v306
   لا يفتح تلقائيًا + إضافة أكثر من سطر + توسيط النصوص
   ========================================================== */

/* التخزين الحقيقي داخل الفورم مخفي، لكنه يرسل مع FormData */
.external-storage-list {
    display: none !important;
}

/* القائمة المختصرة بعد الحفظ */
.external-saved-list {
    display: grid !important;
    gap: 4px !important;
    margin-top: 3px !important;
}

.external-summary-item {
    min-height: 30px !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    display: grid !important;
    grid-template-columns: 28px 1fr 45px !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 5px !important;
}

.external-summary-number {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.external-summary-text {
    color: #243743 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.external-summary-delete {
    height: 24px !important;
    border: 1px solid #f1c9cf !important;
    border-radius: 7px !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
}

/* البوب أب */
.external-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(23, 39, 50, 0.46) !important;
    backdrop-filter: blur(7px) !important;
    padding: 14px !important;
}

.external-popup.show {
    display: flex !important;
}

.external-popup,
.external-popup * {
    text-align: center !important;
}

.external-popup-card {
    width: min(1320px, 97vw) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #dce7ee !important;
    box-shadow: 0 24px 70px rgba(23, 39, 50, 0.28) !important;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
}

.external-popup-head {
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #e4edf2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f5fafc 100%) !important;
}

.external-popup-head h3 {
    margin: 0 !important;
    color: var(--primary-dark) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    flex: 1 !important;
    text-align: center !important;
}

#externalPopupClose {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.external-popup-note {
    padding: 7px 12px !important;
    border-bottom: 1px solid #e4edf2 !important;
    color: #354650 !important;
    background: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.external-popup-toolbar {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e4edf2 !important;
    background: #fbfdfe !important;
    display: flex !important;
    justify-content: center !important;
}

#externalPopupAddRow {
    height: 30px !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 0 18px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.external-popup-body {
    padding: 12px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* نفس المسطرة داخل البوب أب */
.external-popup-body .external-line-card {
    width: max-content !important;
    min-width: 100% !important;
    display: grid !important;
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--field-w))
        repeat(5, var(--field-w))
        var(--actions-w) !important;
    grid-template-rows: var(--field-total-h) !important;
    gap: var(--gap) !important;
    align-items: start !important;
    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

.external-popup-body .external-line-card > * {
    grid-row: 1 !important;
}

.external-popup-body .external-line-card > .row-number {
    grid-column: 1 !important;
    margin-top: var(--label-h) !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(1) {
    grid-column: 2 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(2) {
    grid-column: 3 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(3) {
    grid-column: 4 !important;
}

.external-popup-body .external-line-card > label.field:nth-of-type(4) {
    grid-column: 5 !important;
}

.external-popup-body .external-children-title {
    grid-column: 6 / span 5 !important;
    grid-row: 1 !important;
    z-index: 4 !important;
    height: var(--label-h) !important;
    line-height: var(--label-h) !important;
    text-align: center !important;
    color: #243743 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(5) {
    grid-column: 6 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(6) {
    grid-column: 7 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(7) {
    grid-column: 8 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(8) {
    grid-column: 9 !important;
}

.external-popup-body .external-line-card > label.external-child-field:nth-of-type(9) {
    grid-column: 10 !important;
}

.external-popup-body .external-child-field span {
    visibility: hidden !important;
}

/* توسيط النصوص داخل الحقول */
.external-popup-body .field span,
.external-popup-body .field input,
.external-popup-body .field select,
.external-popup-body .field textarea {
    text-align: center !important;
    text-align-last: center !important;
}

.external-popup-body .field input::placeholder {
    text-align: center !important;
}

/* أزرار السطر داخل البوب أب */
.external-popup-body .external-line-card > .row-actions {
    grid-column: 11 !important;
    margin-top: var(--label-h) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.external-popup-body .external-line-card .small-save {
    display: none !important;
}

.external-popup-body .external-line-card .small-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* أزرار أسفل البوب أب */
.external-popup-actions {
    min-height: 48px !important;
    padding: 8px 12px !important;
    border-top: 1px solid #e4edf2 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #fbfdfe !important;
}

.external-popup-save,
.external-popup-cancel {
    height: 34px !important;
    border-radius: 9px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.external-popup-save {
    border: 0 !important;
    background: linear-gradient(135deg, var(--success), var(--success-dark)) !important;
    color: #ffffff !important;
}

.external-popup-cancel {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
    border: 1px solid #d8e0e5 !important;
}

/* ==========================================================
   Reference Boxes + Triple Row Buttons v307
   ========================================================== */

/* المرجع 5 خانات مثل الاستمارة */
.reference-box-field {
    width: 100% !important;
    padding: 5px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e4edf2 !important;
    display: grid !important;
    gap: 4px !important;
}

.reference-title {
    color: #5d4d2d !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-align: right !important;
}

.reference-cells {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
    direction: ltr !important;
}

.reference-cells input {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    border: 1px solid #d6c18f !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #111 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    outline: none !important;
}

.reference-cells input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(199, 154, 69, 0.12) !important;
}

/* توسيع خانة الأزرار حتى حفظ / حذف / جديد ما تلزق */
:root {
    --actions-w: 108px;
}

@media (max-width: 1600px) {
    :root {
        --actions-w: 102px;
    }
}

/* ترتيب 3 أزرار بالسطر */
.row-actions.triple-actions,
.triple-actions {
    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    align-items: start !important;
    justify-content: center !important;
}

.triple-actions button,
.row-actions.triple-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    line-height: var(--field-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius) !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* زر جديد بنفس روح ألوان الموقع بدون اختراع لون جديد */
.small-new {
    background: var(--primary-dark) !important;
    color: white !important;
    border: 1px solid #d6eaf3 !important;
}

/* ضبط أعمدة الزوجة بعد تكبير الأزرار */
.spouse-line-card {
    grid-template-columns: var(--number-w) repeat(10, var(--field-w)) var(--actions-w) !important;
}

/* ضبط أعمدة الأبناء بعد تكبير الأزرار */
.child-line-card {
    grid-template-columns: var(--number-w) repeat(6, var(--field-w)) var(--actions-w) !important;
}

/* ضبط أعمدة زوج الأم بعد تكبير الأزرار */
.external-line-card {
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--field-w))
        repeat(5, var(--field-w))
        var(--actions-w) !important;
}

/* أزرار البوب أب بدون أزرق، مثل ألوان أزرارك */
.external-popup-save {
    background: var(--success-soft) !important;
    color: var(--success-dark) !important;
    border: 1px solid #ccebd8 !important;
    box-shadow: none !important;
}

.external-popup-cancel {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
    border: 1px solid #d8e0e5 !important;
}

/* زر إضافة سطر داخل البوب أب خليه نفس زر جديد */
#externalPopupAddRow {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    border: 1px solid #d6eaf3 !important;
    box-shadow: none !important;
}

/* ==========================================================
   Final Sidebar + Popup + Children Actions v308
   ========================================================== */

/* أزرار الأبناء نفس الزوجة */
.child-line-card .row-actions.triple-actions {
    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
}

/* زر الطباعة تحت المرجع - تصميم فقط بدون تشغيل */
.side-print-btn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 12px rgba(47, 143, 91, 0.14) !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}

/* ضبط صندوق الحالات مثل الاستمارة وتوسيط النصوص */
.status-box {
    padding: 6px 5px !important;
    border-radius: 8px !important;
    border: 1px solid #c9d2d8 !important;
    background: #ffffff !important;
    display: grid !important;
    gap: 4px !important;
}

.status-box label {
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    color: #243743 !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.status-box input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* البوب أب بعد حذف العنوان والزر الزائد */
.external-popup-card {
    grid-template-rows: auto 1fr auto !important;
}

.external-popup-long-head {
    min-height: 46px !important;
    padding: 8px 42px 8px 12px !important;
    position: relative !important;
    justify-content: center !important;
}

.external-popup-long-head h3 {
    margin: 0 !important;
    width: 100% !important;
    color: var(--primary-dark) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

.external-popup-long-head #externalPopupClose {
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
}

/* إلغاء أي شريط إضافة قديم داخل البوب أب لو بقي بالكود */
.external-popup-toolbar {
    display: none !important;
}

/* زر حفظ البوب أب بنفس ألوان أزرارك وليس أزرق */
.external-popup-save {
    background: var(--success-soft) !important;
    color: var(--success-dark) !important;
    border: 1px solid #ccebd8 !important;
    box-shadow: none !important;
}

.external-popup-cancel {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
    border: 1px solid #d8e0e5 !important;
}

/* أزرار حفظ حذف جديد لكل السطور */
.row-actions.triple-actions,
.triple-actions {
    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    align-items: start !important;
    justify-content: center !important;
}

.triple-actions button,
.row-actions.triple-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    line-height: var(--field-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius) !important;
    font-size: 7.4px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* زر جديد */
.small-new {
    background: var(--primary-dark) !important;
    color: white !important;
    border: 1px solid #d6eaf3 !important;
}

/* تثبيت عرض خانة الأزرار */
:root {
    --actions-w: 108px;
}

@media (max-width: 1600px) {
    :root {
        --actions-w: 102px;
    }
}


/* ==========================================================
   Status Checkboxes Fixed Alignment v312
   نفس محاذاة التشيك بوكس والكلام جنبه قريب
   ========================================================== */

.status-box {
    width: 100% !important;
    padding: 6px 5px !important;
    border: 1px solid #c9d2d8 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    display: grid !important;
    gap: 4px !important;
    justify-items: center !important;
}

.status-box label {
    width: 118px !important;
    min-height: 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    direction: rtl !important;
    text-align: right !important;
    color: #243743 !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.status-box label input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 13px !important;
    display: inline-block !important;
}

/* ==========================================================
   تصغير ارتفاع خلفية عناوين الأقسام فقط
   بدون تغيير حجم النصوص
   ========================================================== */

.section-title-line {
    min-height: 16px !important;
    height: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 1px !important;
    display: flex !important;
    align-items: center !important;
}

.section-title-line h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
}

/* للأقسام التي فيها زر إضافة، نخلي الخلفية أقصر بدون لمس النص */
.section-title-line.with-add {
    min-height: 20px !important;
    height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* فقط حتى الزر لا يجبر الخلفية تكبر كثير */
.section-title-line.with-add .inline-add-btn {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

/* ==========================================================
   توضيح عناوين الأقسام فقط بدون تغيير الارتفاع
   ========================================================== */

#section-applicant .section-title-line h2,
#section-mother .section-title-line h2,
#section-spouse .section-title-line h2,
#section-children .section-title-line h2,
#section-external .section-title-line h2 {
    font-weight: 900 !important;
    color: #17384c !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    text-shadow: 0 0 0.25px #17384c !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
}

/* ==========================================================
   Family Inputs Only Gray v407
   المطلوب: فقط Input العائلة رمادي — بدون تغيير عنوان الحقل
   ========================================================== */

input[name="applicant[family_name]"],
input[name="mother[family_name]"],
input[name^="spouses["][name$="[family_name]"],
input[name^="external_husbands["][name$="[family_name]"] {
    background: #d9d9d9 !important;
    background-color: #d9d9d9 !important;
    color: #111111 !important;
    border-color: #b8b8b8 !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* حماية نهائية: عنوان العائلة يبقى مثل باقي العناوين */
.field:has(input[name="applicant[family_name]"]) > span,
.field:has(input[name="mother[family_name]"]) > span,
.field:has(input[name^="spouses["][name$="[family_name]"]) > span,
.field:has(input[name^="external_husbands["][name$="[family_name]"]) > span,
label.field:has(input[name="applicant[family_name]"]) span,
label.field:has(input[name="mother[family_name]"]) span,
label.field:has(input[name^="spouses["][name$="[family_name]"]) span,
label.field:has(input[name^="external_husbands["][name$="[family_name]"]) span {
    background: transparent !important;
    background-color: transparent !important;
    color: #243743 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* ==========================================================
   Sidebar Widen + Form Align + Notes Textarea v408
   توسيع القائمة الجانبية + لصق الفورم جنبها + إضافة ملاحظات
   ========================================================== */

:root {
    --side-w: 235px !important;
}

/* نخلي الفورم جنب القائمة مباشرة وليس متوسّط */
.form-layout {
    grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
}

.main-panel {
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background: #ffffff !important;
}

/* في RTL هذا يخلي الاستمارة تلزق جهة القائمة وتترك المساحة على اليسار */
.one-page-form {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    width: max-content !important;
    max-width: none !important;
}

/* توسيع وترتيب محتويات القائمة الجانبية */
.side-panel {
    width: var(--side-w) !important;
    min-width: var(--side-w) !important;
    max-width: var(--side-w) !important;
    padding: 6px !important;
    gap: 5px !important;
}

.side-heading {
    min-height: 34px !important;
    padding: 5px !important;
}

.side-heading h2 {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.step {
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
    gap: 6px !important;
}

.step b {
    font-size: 10.5px !important;
}

.side-submit-section,
.side-data-box,
.status-box,
.reference-field,
.reference-box-field,
.side-notes-box {
    width: 100% !important;
}

/* صندوق الملاحظات الجديد */
.side-notes-box {
    padding: 5px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e4edf2 !important;
    display: grid !important;
    gap: 3px !important;
}

.side-notes-box label {
    display: grid !important;
    gap: 3px !important;
}

.side-notes-box span {
    color: #5d4d2d !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-align: right !important;
}

.side-notes-box textarea {
    width: 100% !important;
    min-height: 58px !important;
    max-height: 58px !important;
    resize: none !important;
    border: 1px solid #d6c18f !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #25323a !important;
    padding: 5px 6px !important;
    outline: none !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.side-notes-box textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(199, 154, 69, 0.12) !important;
}

.side-notes-box small {
    min-height: 4px !important;
    color: var(--danger) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
}

/* تحسين صندوق التوقيع والبيانات بعد توسيع القائمة */
.side-data-box input,
.reference-field input {
    font-size: 10.5px !important;
}

.reference-cells {
    gap: 4px !important;
}

.reference-cells input {
    height: 28px !important;
}

/* زر الطباعة يبقى مضبوط داخل العرض الجديد */
.side-print-btn {
    width: 100% !important;
    margin-top: 3px !important;
}

/* على الشاشات الأصغر لا نخرب التجاوب */
@media (max-width: 1320px) {
    .form-layout {
        grid-template-columns: 1fr !important;
    }

    .side-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .main-panel {
        display: block !important;
    }

    .one-page-form {
        margin-inline: auto !important;
        width: min(100%, var(--sheet-w)) !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   Sidebar Final Order + Notes + Checker Title v409
   ========================================================== */

:root {
    --side-w: 235px !important;
}

/* القائمة أوسع والفورم جنبها */
.form-layout {
    grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
}

.side-panel {
    width: var(--side-w) !important;
    min-width: var(--side-w) !important;
    max-width: var(--side-w) !important;
    padding: 6px !important;
    gap: 5px !important;
}

.main-panel {
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.one-page-form {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    width: max-content !important;
    max-width: none !important;
}

/* صندوق الملاحظات */
.side-notes-box {
    width: 100% !important;
    padding: 5px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e4edf2 !important;
    display: grid !important;
    gap: 3px !important;
}

.side-notes-box label {
    display: grid !important;
    gap: 3px !important;
}

.side-notes-box span {
    color: #5d4d2d !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-align: right !important;
}

.side-notes-box textarea {
    width: 100% !important;
    min-height: 58px !important;
    max-height: 58px !important;
    resize: none !important;
    border: 1px solid #d6c18f !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #25323a !important;
    padding: 5px 6px !important;
    outline: none !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.side-notes-box textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(199, 154, 69, 0.12) !important;
}

/* إرسال + طباعة تحت الملاحظات */
.side-submit-section {
    width: 100% !important;
    padding: 5px !important;
    border-radius: 9px !important;
    border: 1px solid #cfead9 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
}

.side-submit-section .form-message {
    grid-column: 1 / -1 !important;
    min-height: 14px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.side-submit-section .submit-btn,
.side-submit-section .side-print-btn {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
}

/* طباعة داخل صندوق الإرسال */
.side-submit-section .side-print-btn {
    border: 0 !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
}

/* عنوان استخدام المدقق */
.checker-title {
    width: 100% !important;
    min-height: 22px !important;
    border-radius: 8px !important;
    background: #f3f8fb !important;
    border: 1px solid #dbe8ef !important;
    color: #17384c !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

/* آخر شيء: صندوق الحالات */
.status-box {
    width: 100% !important;
    padding: 6px 5px !important;
    border: 1px solid #c9d2d8 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    display: grid !important;
    gap: 4px !important;
    justify-items: center !important;
    margin-top: 0 !important;
}

.status-box label {
    width: 150px !important;
    min-height: 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    direction: rtl !important;
    text-align: right !important;
    color: #243743 !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.status-box label input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ترتيب المرجع بعد الأزرار وقبل المدقق */
.reference-field,
.reference-box-field {
    width: 100% !important;
}

/* على الشاشات الصغيرة */
@media (max-width: 1320px) {
    .form-layout {
        grid-template-columns: 1fr !important;
    }

    .side-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .main-panel {
        display: block !important;
    }

    .one-page-form {
        margin-inline: auto !important;
        width: min(100%, var(--sheet-w)) !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   رفع بيانات المعبئ + توسيط الاسم والتوقيع والملاحظات v410
   ========================================================== */

/* ترتيب عناصر القائمة */
.side-heading {
    order: 1 !important;
}

.steps {
    order: 2 !important;
}

.side-data-box {
    order: 3 !important;
    margin-top: 0 !important;
}

.side-notes-box {
    order: 4 !important;
}

.side-submit-section {
    order: 5 !important;
}

.reference-field,
.reference-box-field {
    order: 6 !important;
}

.checker-title {
    order: 7 !important;
}

.status-box {
    order: 8 !important;
}

/* رفع الجزء كله لفوق وتقليل الفراغات */
.side-panel {
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 5px !important;
}

/* توسيط اسم من ملأ الاستمارة */
.side-data-box label {
    text-align: center !important;
}

.side-data-box label span,
.signature-mouse-field > span {
    text-align: center !important;
    justify-content: center !important;
    color: #5d4d2d !important;
    font-weight: 900 !important;
}

.side-data-box input {
    text-align: center !important;
    font-weight: 900 !important;
}

/* توسيط التوقيع */
.signature-mouse-field {
    text-align: center !important;
}

#canvas-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* صندوق الملاحظات أكبر وبالنص */
.side-notes-box {
    width: 100% !important;
    text-align: center !important;
}

.side-notes-box label {
    text-align: center !important;
}

.side-notes-box span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #5d4d2d !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.side-notes-box textarea {
    min-height: 105px !important;
    height: 105px !important;
    max-height: 105px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
    padding: 8px !important;
}

/* placeholder الملاحظات بالنص */
.side-notes-box textarea::placeholder {
    text-align: center !important;
}

/* ==========================================================
   زر إضافة أخوة من الأم تحت زر القائمة الجانبية فقط v411
   ========================================================== */

.side-external-add-wrap {
    display: none;
    width: 100%;
    margin-top: -1px;
    margin-bottom: 2px;
}

.side-external-add-wrap.show {
    display: block;
}

.side-external-add-btn {
    width: 100%;
    height: 30px;
    border: 1px solid #d6eaf3;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
}

/* لما يظهر الزر تحت أخوة الأم يكون مرتب */
#externalStepBtn.active + .side-external-add-wrap {
    display: block;
}

/* ==========================================================
   شكل التاريخ dd/mm/yyyy مع بقاء أيقونة التقويم v415
   ========================================================== */

input[type="date"] {
    direction: ltr !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* ==========================================================
   Custom Date Picker dd/mm/yyyy v416
   ========================================================== */

.custom-date-wrap {
    width: 100% !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    display: grid !important;
    grid-template-columns: 1fr 24px !important;
    align-items: center !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: var(--radius) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.custom-date-display {
    width: 100% !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    padding: 0 4px !important;
    outline: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-align: center !important;
    direction: ltr !important;
}

.custom-date-btn {
    width: 24px !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    border: 0 !important;
    border-right: 1px solid #d8e0e5 !important;
    border-radius: 0 !important;
    background: #f3f8fb !important;
    color: #17384c !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: var(--field-h) !important;
    display: grid !important;
    place-items: center !important;
}

.real-date-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   Date dd/mm/yyyy Display v417
   ========================================================== */

.dmy-date-wrap {
    width: 100% !important;
    height: var(--field-h) !important;
    display: grid !important;
    grid-template-columns: 1fr 24px !important;
    align-items: center !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: var(--radius) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    position: relative !important;
}

.dmy-date-display {
    width: 100% !important;
    height: var(--field-h) !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #25323a !important;
    padding: 0 4px !important;
    outline: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-align: center !important;
    direction: ltr !important;
}

.dmy-date-display::placeholder {
    color: #111 !important;
    opacity: 1 !important;
    text-align: center !important;
}

.dmy-date-btn {
    width: 24px !important;
    height: var(--field-h) !important;
    border: 0 !important;
    border-right: 1px solid #d8e0e5 !important;
    background: #f3f8fb !important;
    color: #17384c !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: var(--field-h) !important;
    display: grid !important;
    place-items: center !important;
}

.dmy-real-date {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   أخوة من الأم مثل الاستمارة الأصلية - 6 أبناء + خط فاصل v418
   ========================================================== */

.external-line-card,
.external-popup-body .external-line-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--field-w))
        10px
        repeat(6, var(--field-w))
        var(--actions-w) !important;
    grid-template-rows: var(--field-total-h) !important;
    gap: var(--gap) !important;
    align-items: start !important;
    overflow: visible !important;
}

.external-line-card > * {
    grid-row: 1 !important;
}

.external-line-card > .row-number,
.external-popup-body .external-line-card > .row-number {
    grid-column: 1 !important;
    margin-top: var(--label-h) !important;
}

/* بيانات زوج الأم */
.external-line-card > label.field:nth-of-type(1),
.external-popup-body .external-line-card > label.field:nth-of-type(1) {
    grid-column: 2 !important;
}

.external-line-card > label.field:nth-of-type(2),
.external-popup-body .external-line-card > label.field:nth-of-type(2) {
    grid-column: 3 !important;
}

.external-line-card > label.field:nth-of-type(3),
.external-popup-body .external-line-card > label.field:nth-of-type(3) {
    grid-column: 4 !important;
}

.external-line-card > label.field:nth-of-type(4),
.external-popup-body .external-line-card > label.field:nth-of-type(4) {
    grid-column: 5 !important;
}

/* الخط الفاصل بعد العائلة */
.external-family-separator {
    grid-column: 6 !important;
    grid-row: 1 !important;
    width: 1px !important;
    height: var(--field-total-h) !important;
    background: #8b9aa3 !important;
    justify-self: center !important;
    align-self: stretch !important;
    opacity: 0.9 !important;
}

/* عنوان أبناء هذا الزواج فوق الست خانات */
.external-children-title,
.external-popup-body .external-children-title {
    grid-column: 7 / span 6 !important;
    grid-row: 1 !important;
    height: var(--label-h) !important;
    line-height: var(--label-h) !important;
    z-index: 5 !important;
    text-align: center !important;
    color: #243743 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

/* خانات الأبناء الستة */
.external-line-card > label.external-child-field:nth-of-type(5),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(5) {
    grid-column: 7 !important;
}

.external-line-card > label.external-child-field:nth-of-type(6),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(6) {
    grid-column: 8 !important;
}

.external-line-card > label.external-child-field:nth-of-type(7),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(7) {
    grid-column: 9 !important;
}

.external-line-card > label.external-child-field:nth-of-type(8),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(8) {
    grid-column: 10 !important;
}

.external-line-card > label.external-child-field:nth-of-type(9),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(9) {
    grid-column: 11 !important;
}

.external-line-card > label.external-child-field:nth-of-type(10),
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(10) {
    grid-column: 12 !important;
}

.external-child-field span {
    visibility: hidden !important;
}

.external-line-card > .row-actions,
.external-popup-body .external-line-card > .row-actions {
    grid-column: 13 !important;
    margin-top: var(--label-h) !important;
}

/* عرض البوب أب ليستوعب 6 أبناء */
.external-popup-card {
    width: min(1500px, 98vw) !important;
}

.external-popup-body .external-line-card {
    width: max-content !important;
    min-width: 100% !important;
}

/* ==========================================================
   عرض البيانات المحفوظة مثل الاستمارة الأصلية بدل رسالة نصية
   ========================================================== */

.external-saved-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 3px !important;
}

.external-saved-header,
.external-summary-item.external-original-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        28px
        repeat(4, var(--field-w))
        10px
        repeat(6, var(--field-w))
        45px !important;
    gap: var(--gap) !important;
    align-items: center !important;
}

.external-saved-header {
    min-height: 20px !important;
    padding: 2px !important;
    background: #f3f8fb !important;
    border: 1px solid #dbe8ef !important;
    border-radius: 7px !important;
}

.external-saved-header span {
    height: 16px !important;
    line-height: 16px !important;
    color: #17384c !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.external-saved-header .external-saved-child-title {
    grid-column: 7 / span 6 !important;
}

.external-summary-item.external-original-row {
    min-height: 26px !important;
    padding: 2px !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
}

.external-summary-number {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.external-summary-cell {
    height: 24px !important;
    line-height: 24px !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #243743 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
}

.external-summary-separator {
    width: 1px !important;
    height: 24px !important;
    background: #8b9aa3 !important;
    justify-self: center !important;
}

.external-summary-delete {
    height: 24px !important;
    border: 1px solid #f1c9cf !important;
    border-radius: 6px !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
}

/* ==========================================================
   أخوة من الأم - عرض البيانات بعد البوب أب + حذف / جديد v419
   ========================================================== */

.external-saved-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 3px !important;
}

/* العنوان فوق البيانات مثل الاستمارة الأصلية */
.external-saved-header,
.external-summary-item.external-original-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        28px
        repeat(4, var(--field-w))
        10px
        repeat(6, var(--field-w))
        70px !important;
    gap: var(--gap) !important;
    align-items: center !important;
}

.external-saved-header {
    min-height: 22px !important;
    padding: 2px !important;
    background: #f3f8fb !important;
    border: 1px solid #dbe8ef !important;
    border-radius: 7px !important;
}

.external-saved-header span {
    height: 17px !important;
    line-height: 17px !important;
    color: #17384c !important;
    font-size: 8.3px !important;
    font-weight: 900 !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.external-saved-header .external-saved-child-title {
    grid-column: 7 / span 6 !important;
    background: #ffffff !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 5px !important;
}

/* السطر الراجع من البوب أب */
.external-summary-item.external-original-row {
    min-height: 28px !important;
    padding: 2px !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
}

.external-summary-number {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.external-summary-cell {
    height: 24px !important;
    line-height: 24px !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #243743 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
}

.external-summary-separator {
    width: 1px !important;
    height: 24px !important;
    background: #8b9aa3 !important;
    justify-self: center !important;
}

.external-summary-actions {
    width: 70px !important;
    height: 24px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
}

.external-summary-delete,
.external-summary-new {
    width: 100% !important;
    height: 24px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.external-summary-delete {
    border: 1px solid #f1c9cf !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.external-summary-new {
    border: 1px solid #d6eaf3 !important;
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}

/* داخل البوب أب خلي الأزرار حفظ حذف جديد ظاهرة ومرتبة */
.external-popup-body .external-line-card .row-actions.triple-actions,
.external-popup-body .external-line-card .triple-actions {
    visibility: visible !important;
    pointer-events: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
}

.external-popup-body .external-line-card .small-save,
.external-popup-body .external-line-card .small-delete,
.external-popup-body .external-line-card .small-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ==========================================================
   Header Full Logo Visible v423
   إظهار الشعار كاملًا بدون قص
   ========================================================== */

/* كان الصف 52px ويقص الصورة */
.app-page {
    grid-template-rows: 155px 1fr !important;
}

/* الهيدر كبير كفاية للشعار كامل */
.top-header.center-logo-header {
    position: relative !important;
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 6px 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    overflow: visible !important;
    box-shadow: var(--shadow) !important;
}

/* حاوية الصورة في منتصف الهيدر تمامًا */
.center-logo-header .title-card.image-only-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 520px !important;
    max-width: 46vw !important;
    height: 138px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 1 !important;
}

/* الصورة نفسها كاملة بدون قص */
.center-logo-header .header-main-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 520px !important;
    max-height: 138px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

/* اسم الشركة يبقى يسار ولا يأثر على الشعار */
.center-logo-header .company-name {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--primary-dark) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* إخفاء أي شيء قديم */
.center-logo-header .title-text,
.center-logo-header .logo-mark {
    display: none !important;
}

/* ==========================================================
   Header Full Center Logo v424
   إظهار الشعار الكامل في الوسط بدون قص أو تكبير زائد
   ========================================================== */

.app-page {
    grid-template-rows: 120px 1fr !important;
}

.top-header.center-logo-header {
    position: relative !important;
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}

/* حاوية الشعار في منتصف الهيدر بالضبط */
.header-logo-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 520px !important;
    max-width: 42vw !important;
    height: 106px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}

/* الصورة كاملة بدون قص */
.header-full-logo {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

/* اسم الشركة يبقى يسار ولا يؤثر على توسيط الشعار */
.center-logo-header .company-name {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: var(--primary-dark) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* إلغاء أي تأثير قديم */
.center-logo-header .title-card,
.center-logo-header .image-only-card,
.center-logo-header .title-text,
.center-logo-header .logo-mark {
    display: none !important;
}

/* ==========================================================
   Times New Roman Font For All Form v425
   تطبيق خط Times New Roman على كل الاستمارة
   ========================================================== */

html,
body,
.app-page,
.form-shell,
.familyForm,
#familyForm,
.top-header,
.side-panel,
.main-panel,
.one-page-form,
.form-section,
.field,
.field span,
.field input,
.field select,
.field textarea,
button,
input,
select,
textarea,
label,
small,
h1,
h2,
h3,
p,
div,
span,
b,
strong,
.success-modal,
.welcome-modal,
.external-popup {
    font-family: "Times New Roman", Times, serif !important;
}

/* ==========================================================
   No Scroll + Bigger Row Buttons + Dotted Signature v426
   ========================================================== */

/* إلغاء السكرول العام للصفحة */
html,
body {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}

.app-page {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.form-shell,
.form-layout,
.main-panel,
.one-page-form {
    overflow: hidden !important;
}

/* منع سكرول البوب أب الداخلي قدر الإمكان */
.external-popup-body {
    overflow: hidden !important;
}

/* تكبير مساحة أزرار حفظ / حذف / جديد */
:root {
    --actions-w: 118px !important;
}

.row-actions,
.triple-actions {
    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* الأزرار نفسها أكبر وأوضح */
.row-actions button,
.row-actions .small-save,
.row-actions .small-delete,
.row-actions .small-new,
.small-save,
.small-delete,
.small-new,
.mini-delete {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* زر جديد لو كان inline-add-btn داخل السطر */
.row-actions .inline-add-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    font-size: 9.5px !important;
    border-radius: 7px !important;
}

/* داخل بوب أب أخوة من الأم خلي الأزرار تظهر أكبر */
.external-popup-body .external-line-card > .row-actions {
    width: var(--actions-w) !important;
    min-width: var(--actions-w) !important;
    max-width: var(--actions-w) !important;
    height: 28px !important;
    display: flex !important;
    gap: 4px !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* إظهار حفظ / حذف / جديد داخل البوب أب لو كان كود قديم مخفيها */
.external-popup-body .external-line-card .small-save,
.external-popup-body .external-line-card .small-delete,
.external-popup-body .external-line-card .small-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* التوقيع كنقاط بدل خط داش */
#canvas-container {
    height: 34px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

/* نخلي الكانفاس موجود حتى لا نخرب الجافاسكربت */
#signature-pad {
    opacity: 0 !important;
}

/* النقاط الظاهرة للتوقيع */
#canvas-container::after {
    content: "........................................";
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 2px !important;
    color: #333333 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-align: center !important;
    pointer-events: none !important;
}

.signature-mouse-field > span {
    text-align: center !important;
    font-weight: 900 !important;
}

/* ==========================================================
   Fix Signature Drawing + Dotted Line v427
   يخلي التوقيع يرسم طبيعي مع ظهور النقاط
   ========================================================== */

#canvas-container {
    height: 42px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
}

/* النقاط تكون خلف التوقيع */
#canvas-container::after {
    content: "........................................";
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 2px !important;
    color: #333333 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* الكانفاس يرجع ظاهر وقابل للرسم */
#signature-pad {
    opacity: 1 !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    cursor: crosshair !important;
    touch-action: none !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* ==========================================================
   تكبير خانات المرجع v428
   ========================================================== */

.reference-field.reference-box-field {
    padding: 7px !important;
}

.reference-title {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 5px !important;
}

.reference-cells {
    display: grid !important;
    grid-template-columns: repeat(5, 34px) !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
}

.reference-cells input,
.reference-field input[data-reference-box] {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    padding: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;

    border-radius: 7px !important;
    border: 1px solid #d6c18f !important;
}

/* ==========================================================
   توحيد أزرار حفظ / حذف / جديد للزوج والأبناء v429
   ========================================================== */

/* توسيع خانة الأزرار في بيانات الزوج والأبناء فقط */
#spousesList .spouse-line-card,
#childrenList .child-line-card {
    --actions-w: 132px !important;
}

/* أزرار الزوج والأبناء نفس الشكل */
#spousesList .row-actions,
#childrenList .row-actions,
#childrenList .triple-actions {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* كل الأزرار نفس الحجم */
#spousesList .row-actions button,
#childrenList .row-actions button,
#childrenList .triple-actions button,
#spousesList .small-save,
#spousesList .small-delete,
#spousesList .inline-add-btn,
#childrenList .small-save,
#childrenList .small-delete,
#childrenList .small-new {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    line-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 7px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* زر جديد في الزوج يكون مثل زر جديد في الأبناء */
#spousesList .inline-add-btn,
#childrenList .small-new {
    background: linear-gradient(135deg, var(--sage), var(--primary)) !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* ==========================================================
   Bigger Font For Whole Page v431
   تكبير الخط في كل الصفحة
   ========================================================== */

html,
body,
.app-page,
.form-shell,
.form-layout,
.side-panel,
.main-panel,
.one-page-form,
.form-section,
label,
span,
b,
strong,
div,
p,
h1,
h2,
h3,
button,
input,
select,
textarea,
small {
    font-size: 13px !important;
}

/* عناوين الأقسام */
.section-title-line h2 {
    font-size: 15px !important;
    font-weight: 900 !important;
}

/* عناوين الحقول */
.field span {
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* الكتابة داخل الخانات */
.field input,
.field select,
.field textarea,
.phone-control input,
.phone-control strong {
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* أزرار حفظ / حذف / جديد */
.row-actions button,
.small-save,
.small-delete,
.small-new,
.inline-add-btn,
.mini-delete {
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* القائمة الجانبية */
.step b {
    font-size: 12px !important;
    font-weight: 900 !important;
}

.step span {
    font-size: 12px !important;
}

/* اسم الشركة */
.company-name {
    font-size: 15px !important;
}

/* خانات المرجع */
.reference-title {
    font-size: 15px !important;
}

.reference-cells input,
.reference-field input[data-reference-box] {
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* الملاحظات */
.side-notes-box textarea {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* ==========================================================
   Clear Welcome Notes Popup + Light Signature Dots v433
   ========================================================== */

/* تكبير وتوضيح بوب أب الملاحظات */
.welcome-card.compact-welcome,
.welcome-card {
    width: min(760px, 96vw) !important;
    max-height: 92vh !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 2px solid #d8e4eb !important;
    box-shadow: 0 24px 80px rgba(23, 39, 50, 0.28) !important;
}

/* عنوان البوب أب */
.welcome-card h2 {
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    color: var(--primary-dark) !important;
}

/* صندوق الملاحظات */
.welcome-notes.paper-notes,
.paper-notes {
    background: #f7fbfd !important;
    border: 2px solid #b9cbd6 !important;
    border-radius: 15px !important;
    padding: 12px !important;
    margin: 12px 0 14px !important;
}

/* عنوان رجاء قراءة الملاحظات */
.notes-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;
    color: #17384c !important;
    background: #eaf5fa !important;
    border: 1px solid #c8dfe9 !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

/* قائمة الملاحظات أوضح وأكبر */
.notes-list {
    gap: 7px !important;
}

.notes-list li {
    min-height: 38px !important;
    padding: 8px 42px 8px 10px !important;
    border-radius: 11px !important;
    border: 1px solid #d8e3ea !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
    text-align: right !important;
}

/* رقم الملاحظة */
.notes-list li::before {
    right: 10px !important;
    top: 9px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* زر موافق أكبر */
.welcome-card button,
#agreeBtn {
    min-width: 190px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* مربع الموافقة أوضح */
.agree-check input {
    width: 26px !important;
    height: 26px !important;
}

/* ==========================================================
   التوقيع: تنقيط خفيف وموسّط بدون بولد
   ========================================================== */

#canvas-container {
    height: 42px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
    text-align: center !important;
}

/* التنقيط خلف التوقيع، خفيف، مش بولد، وبالوسط */
#canvas-container::after {
    content: "................................................";
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 3px !important;
    transform: translateX(-50%) !important;

    color: rgba(0, 0, 0, 0.42) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    text-align: center !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

/* الكانفاس يبقى شغال والرسم يظهر فوق التنقيط */
#signature-pad {
    opacity: 1 !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    cursor: crosshair !important;
    touch-action: none !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* كلمة التوقيع بالوسط */
.signature-mouse-field > span {
    text-align: center !important;
    font-weight: 700 !important;
}

.center-logo-header .company-name {
    font-size:16px;
}

.reference-cells input{
    font-size:18px !important;
}

/* ==========================================================
   Bigger Reference Boxes For Elder Users v436
   تكبير خانات المرجع 04 وباقي الخانات
   ========================================================== */

.reference-field.reference-box-field {
    padding: 10px !important;
    border-radius: 10px !important;
}

.reference-title {
    display: block !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #3b2d12 !important;
    margin-bottom: 8px !important;
}

.reference-cells {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 7px !important;
    direction: ltr !important;
}

.reference-cells input[data-reference-box] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    padding: 0 !important;
    text-align: center !important;

    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 46px !important;

    border: 2px solid #b99545 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #111111 !important;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
}

.reference-cells input[data-reference-box]:focus {
    border-color: #8f6b1f !important;
    box-shadow: 0 0 0 3px rgba(199, 154, 69, 0.20) !important;
}

/* ==========================================================
   Very Clear Company Name v437
   تكبير وتوضيح اسم الشركة في الهيدر
   ========================================================== */

.company-name,
.center-logo-header .company-name {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    z-index: 10 !important;

    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    color: #17384c !important;
    background: rgba(255, 255, 255, 0.92) !important;

    padding: 6px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #c8dfe9 !important;

    box-shadow: 0 3px 10px rgba(23, 56, 76, 0.12) !important;
    text-shadow: 0 0 0.4px #17384c !important;

    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

/* ==========================================================
   External Button Bottom Center v459
   زر أخوة من الأم آخر الصفحة بالنص
   ========================================================== */




/* قسم الزر في آخر الصفحة */
.external-bottom-section {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 8px 0 12px !important;
}

/* توسيط الزر آخر الصفحة */
.external-bottom-btn-wrap {
    width: 100% !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

/* زر أخوة من الأم */
.external-bottom-btn {
    min-width: 280px !important;
    height: 48px !important;
    min-height: 48px !important;

    border: 0 !important;
    border-radius: 14px !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 8px 18px rgba(36, 79, 104, 0.20) !important;
    cursor: pointer !important;
}

.external-bottom-btn:hover {
    transform: translateY(-1px) !important;
}

/* ==========================================================
   Center Bottom Mother Siblings Button v460
   تصميم زر أخوة من الأم آخر الصفحة بالنص
   ========================================================== */

/* قسم أخوة من الأم آخر الصفحة */
#section-external {
    width: 100% !important;
    min-height: 72px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 0 18px !important;
    margin-top: 6px !important;
}

/* لو الزر داخل div */
.external-bottom-btn-wrap,
.external-main-add-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* لو الزر مباشرة داخل section */
#section-external #addExternalBtn,
.external-bottom-btn,
.external-main-add-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;

    min-width: 300px !important;
    height: 48px !important;
    min-height: 48px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    box-shadow: 0 8px 18px rgba(36, 79, 104, 0.22) !important;
    cursor: pointer !important;
    transition: 0.18s ease !important;
}

/* حركة خفيفة عند المرور */
#section-external #addExternalBtn:hover,
.external-bottom-btn:hover,
.external-main-add-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(36, 79, 104, 0.28) !important;
}

/* عند الضغط */
#section-external #addExternalBtn:active,
.external-bottom-btn:active,
.external-main-add-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 12px rgba(36, 79, 104, 0.20) !important;
}

/* إخفاء زر القائمة القديم لو بقي موجود */
.side-external-add-wrap,
.side-external-add-btn {
    display: none !important;
}

/* ==========================================================
   Smaller Center Mother Siblings Button v461
   تصغير زر أخوة من الأم وتوسيطه
   ========================================================== */

#section-external {
    min-height: 45px !important;
    padding: 6px 0 10px !important;
    margin-top: 3px !important;
    text-align: center !important;
}

.external-bottom-btn-wrap,
.external-main-add-wrap {
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#section-external #addExternalBtn,
.external-bottom-btn,
.external-main-add-btn {
    min-width: 190px !important;
    max-width: 220px !important;
    width: 200px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 auto !important;
    padding: 0 10px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;

    font-size: 13.5px !important;
    font-weight: 900 !important;
    line-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 5px 12px rgba(36, 79, 104, 0.16) !important;
    cursor: pointer !important;
    transition: 0.15s ease !important;
}

#section-external #addExternalBtn:hover,
.external-bottom-btn:hover,
.external-main-add-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 15px rgba(36, 79, 104, 0.20) !important;
}

/* ==========================================================
   Sidebar Labels + External Popup Bigger Text v462
   ========================================================== */

/* تكبير اسم من ملأ الاستمارة والتوقيع */
.side-data-box label > span,
.signature-mouse-field > span {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    color: #3b2d12 !important;
    text-align: center !important;
}

/* تكبير خانة اسم من ملأ الاستمارة تقريبًا مثل المرجع */
.side-data-box input[name="form_meta[filled_by_name]"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;

    border: 2px solid #b99545 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #111111 !important;
}

/* التوقيع يكون أوضح وبحجم قريب من المرجع */
.signature-mouse-field {
    gap: 4px !important;
}

#canvas-container {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

/* تنقيط التوقيع خفيف وموسّط */
#canvas-container::after {
    content: "................................................" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 5px !important;
    transform: translateX(-50%) !important;

    color: rgba(0, 0, 0, 0.38) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;
    line-height: 1 !important;
    text-align: center !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

/* ==========================================================
   تكبير خط بوب أب أخوة من الأم
   ========================================================== */

.external-popup-card {
    width: min(1420px, 98vw) !important;
}

/* رأس البوب أب */
.external-popup-long-head {
    position: relative !important;
    min-height: 58px !important;
    padding: 8px 130px 8px 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* عنوان جانبي: أخوة من الأم */
.external-popup-side-title {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    min-width: 100px !important;
    height: 34px !important;
    padding: 0 10px !important;

    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 12px rgba(36, 79, 104, 0.16) !important;
}

/* العنوان الطويل */
.external-popup-long-head h3 {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;
    color: #17384c !important;
    text-align: center !important;
}

/* تكبير عناوين وكتابة الحقول داخل البوب أب */
.external-popup-body .field span {
    font-size: 13px !important;
    font-weight: 900 !important;
}

.external-popup-body .field input,
.external-popup-body .field select,
.external-popup-body .field textarea {
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* تكبير عنوان أبناء هذا الزواج */
.external-popup-body .external-children-title {
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* أزرار البوب أب */
.external-popup-save,
.external-popup-cancel {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border-radius: 10px !important;
}

/* زر الإغلاق يبقى واضح */
#externalPopupClose {
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
}

/* ==========================================================
   Fix External Popup Layout + Bigger Notes Label v463
   ========================================================== */

/* رأس بوب أب أخوة من الأم مرتب */
.external-popup-card {
    width: min(1340px, 96vw) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.external-popup-long-head {
    min-height: 50px !important;
    padding: 8px 54px 8px 120px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* عنوان أخوة من الأم على الجنب بدون ما يخرب العنوان الطويل */
.external-popup-side-title {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 92px !important;
    height: 30px !important;
    padding: 0 8px !important;

    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* زر الإغلاق يرجع يسار */
.external-popup-long-head #externalPopupClose {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 9px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
}

/* العنوان الطويل واضح بس مش مكبر زيادة */
.external-popup-long-head h3 {
    margin: 0 !important;
    width: 100% !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.6 !important;
    color: #17384c !important;
    text-align: center !important;
}

/* جسم البوب أب بدون خروج أزرار */
.external-popup-body {
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* صف أخوة من الأم داخل البوب أب: 4 أسماء + فاصل + 6 أبناء + أزرار */
.external-popup-body .external-line-card {
    --popup-field-w: 88px;
    --popup-actions-w: 116px;

    width: max-content !important;
    min-width: 100% !important;

    display: grid !important;
    grid-template-columns:
        var(--number-w)
        repeat(4, var(--popup-field-w))
        10px
        repeat(6, var(--popup-field-w))
        var(--popup-actions-w) !important;

    grid-template-rows: var(--field-total-h) !important;
    gap: 4px !important;
    align-items: start !important;

    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* كل العناصر بنفس الصف */
.external-popup-body .external-line-card > * {
    grid-row: 1 !important;
}

/* الرقم */
.external-popup-body .external-line-card > .row-number {
    grid-column: 1 !important;
    margin-top: var(--label-h) !important;
}

/* حقول الاسم */
.external-popup-body .external-line-card > label.field:nth-of-type(1) { grid-column: 2 !important; }
.external-popup-body .external-line-card > label.field:nth-of-type(2) { grid-column: 3 !important; }
.external-popup-body .external-line-card > label.field:nth-of-type(3) { grid-column: 4 !important; }
.external-popup-body .external-line-card > label.field:nth-of-type(4) { grid-column: 5 !important; }

/* الفاصل */
.external-popup-body .external-family-separator {
    grid-column: 6 !important;
    grid-row: 1 !important;
    width: 1px !important;
    height: var(--field-total-h) !important;
    background: #8b9aa3 !important;
    justify-self: center !important;
}

/* عنوان الأبناء فوق 6 خانات */
.external-popup-body .external-children-title {
    grid-column: 7 / span 6 !important;
    grid-row: 1 !important;
    height: var(--label-h) !important;
    line-height: var(--label-h) !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

/* حقول الأبناء الستة */
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(5) { grid-column: 7 !important; }
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(6) { grid-column: 8 !important; }
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(7) { grid-column: 9 !important; }
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(8) { grid-column: 10 !important; }
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(9) { grid-column: 11 !important; }
.external-popup-body .external-line-card > label.external-child-field:nth-of-type(10) { grid-column: 12 !important; }

.external-popup-body .external-child-field span {
    visibility: hidden !important;
}

/* عرض الحقول داخل البوب أب فقط */
.external-popup-body .external-line-card .field,
.external-popup-body .external-line-card .external-child-field {
    width: var(--popup-field-w) !important;
    min-width: var(--popup-field-w) !important;
    max-width: var(--popup-field-w) !important;
}

/* الأزرار ترجع داخل السطر */
.external-popup-body .external-line-card > .row-actions {
    grid-column: 13 !important;
    grid-row: 1 !important;

    width: var(--popup-actions-w) !important;
    min-width: var(--popup-actions-w) !important;
    max-width: var(--popup-actions-w) !important;

    height: var(--field-h) !important;
    margin-top: var(--label-h) !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;

    visibility: visible !important;
    pointer-events: auto !important;
}

/* أزرار حفظ حذف جديد داخل البوب أب */
.external-popup-body .external-line-card .row-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 8.5px !important;
    font-weight: 900 !important;
    border-radius: 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* خلي حفظ يظهر ولا يختفي */
.external-popup-body .external-line-card .small-save,
.external-popup-body .external-line-card .small-delete,
.external-popup-body .external-line-card .small-new {
    display: inline-flex !important;
}

/* أزرار أسفل البوب أب */
.external-popup-save,
.external-popup-cancel {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border-radius: 9px !important;
}

/* ==========================================================
   تكبير كلمة ملاحظات وخانتها مثل اسم من ملأ الاستمارة
   ========================================================== */

.side-notes-box label > span,
.side-notes-box span {
    display: block !important;
    text-align: center !important;
    color: #3b2d12 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
}

.side-notes-box textarea,
#sideNotes {
    min-height: 74px !important;
    height: 74px !important;
    max-height: 74px !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;

    border: 2px solid #b99545 !important;
    border-radius: 9px !important;
    padding: 8px !important;

    background: #ffffff !important;
    color: #111111 !important;
    resize: none !important;
}

.side-notes-box textarea::placeholder,
#sideNotes::placeholder {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #777777 !important;
}

/* ==========================================================
   Bigger External Children Title v464
   تكبير جملة يكتب فقط الاسم الأول للأبناء من هذا الزواج
   ========================================================== */

.external-popup-body .external-children-title {
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 16px !important;
    height: 16px !important;
    color: #17384c !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* نعطي صفوف البوب أب مساحة بسيطة حتى الكلام ما يضغط على الخانات */
.external-popup-body .external-line-card {
    --label-h: 16px !important;
    --field-total-h: 44px !important;
}

/* ==========================================================
   Shorter Center Signature Dots v486
   تقصير تنقيط التوقيع من اليمين واليسار
   ========================================================== */

#canvas-container {
    width: 100% !important;
    height: 46px !important;
    margin: 0 auto 2px auto !important;
    position: relative !important;
    overflow: visible !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
}

/* التنقيط أقصر وموسّط */
#canvas-container::after {
    content: ".............................." !important;

    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 5px !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    max-width: 72% !important;

    color: rgba(0, 0, 0, 0.38) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.7px !important;
    line-height: 1 !important;
    text-align: center !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

/* يبقى الرسم شغال فوق التنقيط */
#signature-pad {
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* ==========================================================
   Smart Scroll Only When Needed v487
   السكرول يظهر فقط وقت الحاجة
   ========================================================== */

/* الصفحة نفسها: سكرول عمودي فقط عند الحاجة */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* الحاوية الرئيسية لا تمنع السكرول */
.app-page {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;

    overflow: visible !important;
}

/* جسم الفورم لا يقفل السكرول */
.form-shell,
.form-layout,
.main-panel,
.one-page-form {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* القائمة الجانبية لا تقفل الصفحة */
.side-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* منع السكرول الأفقي العام، لكن نخليه داخل الفورم لو الشاشة ضاقت */
.main-panel {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* على الشاشات الصغيرة يظهر سكرول أفقي داخل الاستمارة فقط عند الحاجة */
@media (max-width: 1320px) {
    .one-page-form {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* البوب أب: السكرول يظهر داخله فقط إذا زاد المحتوى */
.external-popup-card,
.welcome-card,
.success-card {
    max-height: 92vh !important;
}

.external-popup-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(92vh - 120px) !important;
}

/* بوب أب الملاحظات إذا كبر المحتوى يظهر سكرول داخله */
.welcome-card {
    overflow-y: auto !important;
}

.field span
 {
    font-size: 17px !important;
    font-weight: bold;
 }
 
 .field input, .field select, .field textarea, .phone-control input, .phone-control strong, .external-popup-body .field span,
 .external-popup-body .external-children-title, .external-popup-long-head h3
 {
    font-size: 17px !important;
 }
 
 .field input, .field select, .field textarea, .phone-control input, .phone-control strong
 {
     
     font-size:17px !important;
 }
 
 /* قفل تشيك بوكسات المدقق */
.status-box input[type="checkbox"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
}
spousesList .row-actions button, #childrenList .row-actions button, #childrenList .triple-actions button,
#spousesList .small-save, #spousesList .small-delete, #spousesList .inline-add-btn, #childrenList .small-save, #childrenList .small-delete, #childrenList .small-new{
    font-size:14px !important;
}

#spousesList .row-actions button, #childrenList .row-actions button, #childrenList .triple-actions button, #spousesList .small-save, 
#spousesList .small-delete, #spousesList .inline-add-btn, #childrenList .small-save, #childrenList .small-delete, #childrenList .small-new{
    font-size:14px !important;
}

.external-popup-body .external-line-card .row-actions button{
    font-size:14px !important;
}


.external-popup-body .field input, .external-popup-body .field select, .external-popup-body .field textarea{
    font-size:17px !important;
}


/* ==========================================================
   Beautiful Mobile Vertical Form v507
   نسخة هاتف عمودية مرتبة مع الحفاظ على قفل الأقسام
   ========================================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #eef5f9 !important;
    }

    .app-page {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 8px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* الهيدر للموبايل */
    .top-header {
        height: auto !important;
        min-height: 72px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
    }

    .header-logo-center,
    .header-full-logo {
        max-width: 100% !important;
    }

    .header-full-logo {
        width: 100% !important;
        max-height: 56px !important;
        object-fit: contain !important;
    }

    .company-name {
        display: none !important;
    }

    /* الفورم كله عمودي */
    .form-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        border-radius: 16px !important;
    }

    .form-layout {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* القائمة فوق بشكل مرتب */
    .side-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;

        padding: 10px !important;
        gap: 8px !important;

        border-left: 0 !important;
        border-bottom: 1px solid #dbe8ef !important;
        background: linear-gradient(180deg, #ffffff 0%, #f3f9fc 100%) !important;
    }

    .side-heading {
        min-height: 42px !important;
        border-radius: 12px !important;
        padding: 8px !important;
    }

    .side-heading h2 {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* التابات عمودية واضحة على الهاتف */
    .steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .step {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;

        padding: 6px 10px !important;
        border-radius: 12px !important;

        justify-content: flex-start !important;
        gap: 9px !important;
    }

    .step span {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .step b {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /* الصناديق الجانبية تصير كروت */
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field,
    .status-box {
        width: 100% !important;
        padding: 10px !important;
        border-radius: 14px !important;
        gap: 8px !important;
        box-shadow: 0 4px 12px rgba(36, 63, 82, 0.06) !important;
    }

    .side-data-box label span,
    .side-notes-box span,
    .reference-title,
    .signature-mouse-field > span {
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    .side-data-box input,
    .side-notes-box textarea {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        text-align: center !important;
        border-radius: 11px !important;
    }

    .side-notes-box textarea {
        min-height: 82px !important;
        text-align: right !important;
        line-height: 1.7 !important;
    }

    /* التوقيع مناسب للهاتف */
    #canvas-container {
        width: 92% !important;
        height: 62px !important;
        margin: 2px auto 0 !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
    }

    /* المرجع */
    .reference-cells {
        gap: 6px !important;
    }

    .reference-cells input {
        height: 46px !important;
        font-size: 24px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    /* أزرار الإرسال والطباعة */
    .submit-btn,
    .side-print-btn {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .form-message {
        min-height: 22px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* منطقة الاستمارة */
    .main-panel {
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
        background: #eef5f9 !important;
        padding-top: 8px !important;
    }

    .one-page-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .form-section {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 10px !important;
        border-radius: 16px !important;
        border: 1px solid #dce7ee !important;

        background: #ffffff !important;
        box-shadow: 0 6px 16px rgba(36, 63, 82, 0.08) !important;
        overflow: visible !important;
    }

    /* عناوين الأقسام */
    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;

        padding: 9px 10px !important;
        margin-bottom: 12px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;

        border-radius: 13px !important;
        background: linear-gradient(135deg, #edf6fb, #ffffff) !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2 {
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.7 !important;
        text-align: center !important;
        color: #17384c !important;
    }

    .inline-add-btn,
    .external-main-add-btn {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    /* كل السطور تصير عمودية */
    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        padding: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 10px !important;
        border-radius: 14px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    /* إظهار كل الليبلات على الهاتف حتى لو كانت مخفية في الصفوف الثانية */
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: block !important;
    }

    /* الحقول عمودية كاملة */
    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: grid !important;
        grid-template-rows: auto auto auto !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.5 !important;

        color: #17384c !important;
        text-align: right !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .dmy-date-display {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: none !important;

        font-size: 15px !important;
        font-weight: 900 !important;

        border-radius: 12px !important;
        text-align: center !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        height: 44px !important;
        font-size: 13px !important;
    }

    .field small {
        height: auto !important;
        min-height: 14px !important;
        max-height: none !important;
        line-height: 1.4 !important;
        font-size: 11px !important;
    }

    /* رقم السطر */
    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        margin: 0 !important;
        border-radius: 11px !important;
    }

    .row-number b {
        font-size: 15px !important;
    }

    /* أزرار حفظ حذف إضافة */
    .row-actions,
    .row-actions.triple-actions,
    .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .row-actions button,
    .row-actions.triple-actions button,
    .triple-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        border-radius: 11px !important;
        font-size: 13px !important;
        font-weight: 900 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* حالة القفل: تبقى واضحة وممنوعة */
    .locked-section {
        opacity: 0.55 !important;
        filter: grayscale(0.1) !important;
        position: relative !important;
    }

    .locked-section::before {
        content: "يرجى تعبئة القسم السابق أولًا" !important;
        display: block !important;

        margin-bottom: 8px !important;
        padding: 8px 10px !important;

        border-radius: 11px !important;
        background: #fff7e5 !important;
        border: 1px solid #ecd8a9 !important;

        color: #7a5a18 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    /* أخوة من الأم في الصفحة */
    #section-external {
        text-align: center !important;
    }

    .external-main-add-wrap {
        width: 100% !important;
        display: block !important;
    }

    /* البوب أب على الهاتف عمودي */
    .external-popup {
        padding: 8px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .external-popup-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;

        margin-top: 8px !important;
        border-radius: 16px !important;

        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    .external-popup-long-head {
        min-height: auto !important;
        padding: 44px 10px 10px !important;
        display: block !important;
    }

    .external-popup-side-title {
        position: static !important;
        transform: none !important;

        width: 100% !important;
        height: 34px !important;
        margin-bottom: 8px !important;

        font-size: 14px !important;
    }

    .external-popup-long-head h3 {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .external-popup-long-head #externalPopupClose {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
    }

    .external-popup-body {
        width: 100% !important;
        max-height: none !important;

        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        overflow: visible !important;
    }

    .external-popup-body .external-line-card {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        padding: 10px !important;
    }

    .external-popup-body .external-line-card > * {
        grid-row: auto !important;
        grid-column: auto !important;
    }

    .external-family-separator {
        display: none !important;
    }

    .external-children-title,
    .external-popup-body .external-children-title {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 8px !important;

        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .external-child-field span,
    .external-popup-body .external-child-field span {
        visibility: visible !important;
        font-size: 0 !important;
    }

    .external-child-field span::before,
    .external-popup-body .external-child-field span::before {
        content: "اسم ابن/ابنة من هذا الزواج" !important;
        font-size: 14px !important;
        visibility: visible !important;
    }

    .external-popup-actions {
        width: 100% !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .external-popup-save,
    .external-popup-cancel {
        width: 100% !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* نافذة البداية */
    .welcome-modal {
        padding: 8px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .welcome-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .welcome-card h2 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .notes-list li {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}

/* ==========================================================
   Beautiful Mobile Vertical Form v507
   نسخة هاتف عمودية مرتبة مع الحفاظ على قفل الأقسام
   ========================================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #eef5f9 !important;
    }

    .app-page {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 8px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* الهيدر للموبايل */
    .top-header {
        height: auto !important;
        min-height: 72px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
    }

    .header-logo-center,
    .header-full-logo {
        max-width: 100% !important;
    }

    .header-full-logo {
        width: 100% !important;
        max-height: 56px !important;
        object-fit: contain !important;
    }

    .company-name {
        display: none !important;
    }

    /* الفورم كله عمودي */
    .form-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        border-radius: 16px !important;
    }

    .form-layout {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* القائمة فوق بشكل مرتب */
    .side-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;

        padding: 10px !important;
        gap: 8px !important;

        border-left: 0 !important;
        border-bottom: 1px solid #dbe8ef !important;
        background: linear-gradient(180deg, #ffffff 0%, #f3f9fc 100%) !important;
    }

    .side-heading {
        min-height: 42px !important;
        border-radius: 12px !important;
        padding: 8px !important;
    }

    .side-heading h2 {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* التابات عمودية واضحة على الهاتف */
    .steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .step {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;

        padding: 6px 10px !important;
        border-radius: 12px !important;

        justify-content: flex-start !important;
        gap: 9px !important;
    }

    .step span {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .step b {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /* الصناديق الجانبية تصير كروت */
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field,
    .status-box {
        width: 100% !important;
        padding: 10px !important;
        border-radius: 14px !important;
        gap: 8px !important;
        box-shadow: 0 4px 12px rgba(36, 63, 82, 0.06) !important;
    }

    .side-data-box label span,
    .side-notes-box span,
    .reference-title,
    .signature-mouse-field > span {
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    .side-data-box input,
    .side-notes-box textarea {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        text-align: center !important;
        border-radius: 11px !important;
    }

    .side-notes-box textarea {
        min-height: 82px !important;
        text-align: right !important;
        line-height: 1.7 !important;
    }

    /* التوقيع مناسب للهاتف */
    #canvas-container {
        width: 92% !important;
        height: 62px !important;
        margin: 2px auto 0 !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
    }

    /* المرجع */
    .reference-cells {
        gap: 6px !important;
    }

    .reference-cells input {
        height: 46px !important;
        font-size: 24px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    /* أزرار الإرسال والطباعة */
    .submit-btn,
    .side-print-btn {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .form-message {
        min-height: 22px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* منطقة الاستمارة */
    .main-panel {
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
        background: #eef5f9 !important;
        padding-top: 8px !important;
    }

    .one-page-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .form-section {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 10px !important;
        border-radius: 16px !important;
        border: 1px solid #dce7ee !important;

        background: #ffffff !important;
        box-shadow: 0 6px 16px rgba(36, 63, 82, 0.08) !important;
        overflow: visible !important;
    }

    /* عناوين الأقسام */
    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;

        padding: 9px 10px !important;
        margin-bottom: 12px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;

        border-radius: 13px !important;
        background: linear-gradient(135deg, #edf6fb, #ffffff) !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2 {
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.7 !important;
        text-align: center !important;
        color: #17384c !important;
    }

    .inline-add-btn,
    .external-main-add-btn {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    /* كل السطور تصير عمودية */
    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        padding: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 10px !important;
        border-radius: 14px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    /* إظهار كل الليبلات على الهاتف حتى لو كانت مخفية في الصفوف الثانية */
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: block !important;
    }

    /* الحقول عمودية كاملة */
    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: grid !important;
        grid-template-rows: auto auto auto !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.5 !important;

        color: #17384c !important;
        text-align: right !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .dmy-date-display {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: none !important;

        font-size: 15px !important;
        font-weight: 900 !important;

        border-radius: 12px !important;
        text-align: center !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        height: 44px !important;
        font-size: 13px !important;
    }

    .field small {
        height: auto !important;
        min-height: 14px !important;
        max-height: none !important;
        line-height: 1.4 !important;
        font-size: 11px !important;
    }

    /* رقم السطر */
    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        margin: 0 !important;
        border-radius: 11px !important;
    }

    .row-number b {
        font-size: 15px !important;
    }

    /* أزرار حفظ حذف إضافة */
    .row-actions,
    .row-actions.triple-actions,
    .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .row-actions button,
    .row-actions.triple-actions button,
    .triple-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        border-radius: 11px !important;
        font-size: 13px !important;
        font-weight: 900 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* حالة القفل: تبقى واضحة وممنوعة */
    .locked-section {
        opacity: 0.55 !important;
        filter: grayscale(0.1) !important;
        position: relative !important;
    }

    .locked-section::before {
        content: "يرجى تعبئة القسم السابق أولًا" !important;
        display: block !important;

        margin-bottom: 8px !important;
        padding: 8px 10px !important;

        border-radius: 11px !important;
        background: #fff7e5 !important;
        border: 1px solid #ecd8a9 !important;

        color: #7a5a18 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    /* أخوة من الأم في الصفحة */
    #section-external {
        text-align: center !important;
    }

    .external-main-add-wrap {
        width: 100% !important;
        display: block !important;
    }

    /* البوب أب على الهاتف عمودي */
    .external-popup {
        padding: 8px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .external-popup-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;

        margin-top: 8px !important;
        border-radius: 16px !important;

        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    .external-popup-long-head {
        min-height: auto !important;
        padding: 44px 10px 10px !important;
        display: block !important;
    }

    .external-popup-side-title {
        position: static !important;
        transform: none !important;

        width: 100% !important;
        height: 34px !important;
        margin-bottom: 8px !important;

        font-size: 14px !important;
    }

    .external-popup-long-head h3 {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .external-popup-long-head #externalPopupClose {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
    }

    .external-popup-body {
        width: 100% !important;
        max-height: none !important;

        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        overflow: visible !important;
    }

    .external-popup-body .external-line-card {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        padding: 10px !important;
    }

    .external-popup-body .external-line-card > * {
        grid-row: auto !important;
        grid-column: auto !important;
    }

    .external-family-separator {
        display: none !important;
    }

    .external-children-title,
    .external-popup-body .external-children-title {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 8px !important;

        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .external-child-field span,
    .external-popup-body .external-child-field span {
        visibility: visible !important;
        font-size: 0 !important;
    }

    .external-child-field span::before,
    .external-popup-body .external-child-field span::before {
        content: "اسم ابن/ابنة من هذا الزواج" !important;
        font-size: 14px !important;
        visibility: visible !important;
    }

    .external-popup-actions {
        width: 100% !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .external-popup-save,
    .external-popup-cancel {
        width: 100% !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* نافذة البداية */
    .welcome-modal {
        padding: 8px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .welcome-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .welcome-card h2 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .notes-list li {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}

/* ==========================================================
   Mobile Vertical Fields + Desktop Popup External v511
   الكمبيوتر: أخوة من الأم بوب أب
   الموبايل: أخوة من الأم فورم عمودي مثل الزوجة والأبناء
   ========================================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #eef5f9 !important;
    }

    .app-page {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: #eef5f9 !important;
        overflow: visible !important;
    }

    .top-header {
        order: 0 !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 4px 6px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .header-logo-center {
        width: 100% !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-full-logo {
        width: auto !important;
        max-width: 96% !important;
        height: 45px !important;
        max-height: 45px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .company-name,
    .side-heading,
    .steps,
    .checker-title,
    .status-box {
        display: none !important;
    }

    .form-shell {
        order: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .form-layout {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .side-panel {
        display: contents !important;
    }

    .main-panel {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .one-page-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    #section-applicant { order: 1 !important; }
    #section-mother { order: 2 !important; }
    #section-spouse { order: 3 !important; }
    #section-children { order: 4 !important; }
    #section-external { order: 5 !important; }

    .side-data-box { order: 2 !important; }
    .side-notes-box { order: 3 !important; }
    .side-submit-section { order: 4 !important; }
    .reference-box-field { order: 5 !important; }

    .form-section,
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 12px !important;
        border: 1px solid #dce7ee !important;
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(36, 63, 82, 0.06) !important;
        overflow: visible !important;
    }

    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: 28px !important;
        height: auto !important;
        padding: 5px 7px !important;
        margin: 0 0 6px 0 !important;
        border-radius: 9px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        background: #edf6fb !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 900 !important;
        color: #17384c !important;
        text-align: center !important;
    }

    .inline-add-btn,
    .external-main-add-btn {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* الحقول كلها عمودية على الموبايل */
    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 7px !important;
        border-radius: 11px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: block !important;
    }

    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: grid !important;
        grid-template-rows: 14px 28px 4px !important;
        gap: 1px !important;
        flex: initial !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span {
        display: block !important;
        visibility: visible !important;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        line-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control {
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 0 7px !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .field input[type="date"] {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        direction: ltr !important;
        text-align: center !important;
        text-align-last: center !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
        min-width: 0 !important;
        padding-inline: 5px !important;
    }

    .field small,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: block !important;
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
        line-height: 4px !important;
        font-size: 7px !important;
        overflow: hidden !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        width: 44px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 0 !important;
        font-size: 10px !important;
    }

    .phone-control input {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        padding: 0 5px !important;
    }

    /* إزالة شكل التاريخ القديم لو بقي من الكاش */
    .dmy-date-wrap {
        display: contents !important;
    }

    .dmy-date-display,
    .dmy-date-btn {
        display: none !important;
    }

    .dmy-real-date {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        pointer-events: auto !important;
    }

    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .row-number b {
        font-size: 12px !important;
    }

    .row-actions,
    .row-actions.triple-actions,
    .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .row-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        line-height: 31px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        padding: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* الموبايل فقط: أخوة من الأم داخل الصفحة مثل الزوجة والأبناء */
    #externalList,
    #externalList.external-storage-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 6px !important;
        overflow: visible !important;
    }

    .external-saved-list {
        display: none !important;
    }

    .external-family-separator {
        display: none !important;
    }

    .external-children-title {
        width: 100% !important;
        height: auto !important;
        min-height: 24px !important;
        padding: 5px 6px !important;
        border-radius: 8px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        font-weight: 900 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        visibility: visible !important;
    }

    .external-child-field span {
        visibility: visible !important;
        font-size: 0 !important;
    }

    .external-child-field span::before {
        content: "اسم ابن/ابنة" !important;
        font-size: 10.5px !important;
        visibility: visible !important;
    }

    .external-popup {
        display: none !important;
    }

    .side-data-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .side-data-box::before {
        content: "اسم من ملأ الاستمارة والتوقيع" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-data-box label span,
    .signature-mouse-field > span {
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 900 !important;
        text-align: right !important;
    }

    .side-data-box input {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    .signature-mouse-field {
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #canvas-container {
        width: 96% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        border-bottom: 2px dashed #666 !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
    }

    .side-notes-box {
        display: grid !important;
        gap: 5px !important;
    }

    .side-notes-box::before {
        content: "ملاحظات" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box label > span {
        display: none !important;
    }

    .side-notes-box textarea {
        width: 100% !important;
        min-height: 58px !important;
        max-height: 82px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 6px 8px !important;
        text-align: right !important;
    }

    .side-submit-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .side-submit-section .form-message {
        grid-column: 1 / -1 !important;
        min-height: 14px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .submit-btn,
    .side-print-btn {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 0 6px !important;
    }

    .reference-box-field {
        gap: 4px !important;
        padding: 6px !important;
    }

    .reference-title {
        font-size: 11px !important;
        color: #17384c !important;
        text-align: center !important;
    }

    .reference-cells {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .reference-cells input {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   Mobile External Inline + Clean Vertical Form v512
   الكمبيوتر: أخوة من الأم تبقى بوب أب كما هي
   الموبايل: نفس فورم الزوجة والأبناء، عمودي، حفظ/حذف/جديد
   ========================================================== */

/* التوقيع: خط منقط واحد فقط، بدون إطارين */
#canvas-container {
    border: 0 !important;
    border-bottom: 2px dashed #666 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
}

#signature-pad {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #eef5f9 !important;
    }

    .app-page {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: #eef5f9 !important;
        overflow: visible !important;
    }

    .top-header {
        order: 0 !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 4px 6px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .header-logo-center {
        width: 100% !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-full-logo {
        width: auto !important;
        max-width: 96% !important;
        height: 45px !important;
        max-height: 45px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .company-name,
    .side-heading,
    .steps,
    .checker-title,
    .status-box {
        display: none !important;
    }

    .form-shell {
        order: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .form-layout {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .side-panel {
        display: contents !important;
    }

    .main-panel {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .one-page-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    #section-applicant { order: 1 !important; }
    #section-mother { order: 2 !important; }
    #section-spouse { order: 3 !important; }
    #section-children { order: 4 !important; }
    #section-external { order: 5 !important; }

    .side-data-box { order: 2 !important; }
    .side-notes-box { order: 3 !important; }
    .side-submit-section { order: 4 !important; }
    .reference-box-field { order: 5 !important; }

    .form-section,
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 12px !important;
        border: 1px solid #dce7ee !important;
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(36, 63, 82, 0.06) !important;
        overflow: visible !important;
    }

    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: 28px !important;
        height: auto !important;
        padding: 5px 7px !important;
        margin: 0 0 6px 0 !important;
        border-radius: 9px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        background: #edf6fb !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 900 !important;
        color: #17384c !important;
        text-align: center !important;
    }

    .inline-add-btn,
    .external-main-add-btn {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* الحقول كلها عمودية وصغيرة */
    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 7px !important;
        border-radius: 11px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: block !important;
    }

    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field,
    #externalList .external-card .field,
    #externalList .external-card .external-child-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: grid !important;
        grid-template-rows: 14px 28px 4px !important;
        gap: 1px !important;
        flex: initial !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #externalList .external-card .field span {
        display: block !important;
        visibility: visible !important;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        line-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control {
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 0 7px !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .field small,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small,
    #externalList .external-card .field small {
        display: block !important;
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
        line-height: 4px !important;
        font-size: 7px !important;
        overflow: hidden !important;
    }

    /* إصلاح التاريخ */
    .dmy-date-wrap {
        display: contents !important;
    }

    .dmy-date-display,
    .dmy-date-btn {
        display: none !important;
    }

    .dmy-real-date,
    .field input[type="date"] {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        direction: ltr !important;
        text-align: center !important;
        text-align-last: center !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
        padding: 0 5px !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        width: 44px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 0 !important;
        font-size: 10px !important;
    }

    .phone-control input {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        padding: 0 5px !important;
    }

    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .row-number b {
        font-size: 12px !important;
    }

    .row-actions,
    .row-actions.triple-actions,
    .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .row-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        line-height: 31px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        padding: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* الموبايل فقط: أخوة من الأم داخل الصفحة، بنفس أسماء وتمبلت البوب أب */
    #section-external {
        text-align: center !important;
    }

    .external-main-add-wrap {
        width: 100% !important;
        display: block !important;
    }

    #externalList,
    #externalList.external-storage-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 6px !important;
        overflow: visible !important;
    }

    .external-saved-list {
        display: none !important;
    }

    #externalList .external-line-card,
    #externalList .external-line-card > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    #externalList .external-family-separator {
        display: none !important;
    }

    #externalList .external-children-title {
        width: 100% !important;
        height: auto !important;
        min-height: 24px !important;
        padding: 5px 6px !important;
        border-radius: 8px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        font-weight: 900 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* نحافظ على نفس طريقة البوب أب: عنوان الأبناء يظهر مرة، وخانات الأبناء بدون أسماء إضافية */
    #externalList .external-child-field span {
        visibility: hidden !important;
    }

    #externalList .external-line-card > .row-actions {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* لا يظهر البوب أب على الموبايل */
    .external-popup {
        display: none !important;
    }

    .side-data-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .side-data-box::before {
        content: "اسم من ملأ الاستمارة والتوقيع" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-data-box label span,
    .signature-mouse-field > span {
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 900 !important;
        text-align: right !important;
    }

    .side-data-box input {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    .signature-mouse-field {
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #canvas-container {
        width: 96% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        border: 0 !important;
        border-bottom: 2px dashed #666 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }

    #signatureError {
        min-height: 8px !important;
        font-size: 8px !important;
        text-align: center !important;
    }

    .side-notes-box {
        display: grid !important;
        gap: 5px !important;
    }

    .side-notes-box::before {
        content: "ملاحظات" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box label > span {
        display: none !important;
    }

    .side-notes-box textarea {
        width: 100% !important;
        min-height: 58px !important;
        max-height: 82px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 6px 8px !important;
        text-align: right !important;
    }

    .side-submit-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .side-submit-section .form-message {
        grid-column: 1 / -1 !important;
        min-height: 14px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .submit-btn,
    .side-print-btn {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 0 6px !important;
    }

    .reference-box-field {
        gap: 4px !important;
        padding: 6px !important;
    }

    .reference-title {
        font-size: 11px !important;
        color: #17384c !important;
        text-align: center !important;
    }

    .reference-cells {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .reference-cells input {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .welcome-card,
    .compact-welcome {
        width: min(340px, 94vw) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding: 9px !important;
        border-radius: 14px !important;
    }
}

/* ==========================================================
   Mobile Next Buttons + Exact Field Sizes v514
   ========================================================== */

.mobile-next-wrap { display: none; }

@media (max-width: 768px) {
    .mobile-next-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 0 2px !important;
        margin: 0 !important;
        order: 99 !important;
    }

    .mobile-next-section-btn {
        width: min(260px, 86vw) !important;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: center !important;
        box-shadow: 0 8px 18px rgba(36, 79, 104, 0.18) !important;
    }

    .mobile-next-section-btn::after {
        content: " ←";
        font-weight: 900;
    }

    .field span,
    .phone-field span,
    .side-data-box label span,
    .signature-mouse-field > span,
    .reference-title,
    .section-title-line h2,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #externalList .external-card .field span {
        font-weight: 900 !important;
    }

    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field,
    #externalList .external-card .field,
    #externalList .external-card .external-child-field {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: grid !important;
        grid-template-rows: 14px 28px 4px !important;
        gap: 1px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #externalList .external-card .field span {
        width: 100% !important;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        line-height: 14px !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        text-align: right !important;
        display: block !important;
        visibility: visible !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .phone-control input,
    .phone-control strong,
    .field input[type="date"],
    .dmy-real-date {
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
    }

    .field input,
    .field select,
    .field textarea,
    .field input[type="date"],
    .dmy-real-date {
        padding: 0 7px !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .field small,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small,
    #externalList .external-card .field small {
        width: 100% !important;
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
        line-height: 4px !important;
        font-size: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        width: 44px !important;
        border-radius: 0 !important;
        display: grid !important;
        place-items: center !important;
        font-size: 10px !important;
        padding: 0 !important;
    }

    .phone-control input {
        border-radius: 0 !important;
        padding: 0 5px !important;
    }

    .field input[type="date"],
    .dmy-real-date {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        direction: ltr !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }

    .dmy-date-wrap { display: contents !important; }
    .dmy-date-display,
    .dmy-date-btn { display: none !important; }

    .spouse-line-card,
    .child-line-card,
    .external-line-card,
    .line-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
}

/* ==========================================================
   Mobile Scroll Form Fix v516
   يرجع السكرول الطبيعي + تحقق بدون كتابة + لوقو بارز + توحيد الفيلدات
   ========================================================== */

.mobile-next-wrap {
    display: none;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #eef5f9 !important;
    }

    .locked-section::before,
    .locked-section::after {
        content: none !important;
        display: none !important;
    }

    .app-page {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 7px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 18% 4%, rgba(64, 111, 142, .12), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #eef5f9 100%) !important;
    }

    /* اللوقو كبير وبارز */
    .top-header {
        order: 0 !important;
        display: flex !important;
        width: 100% !important;
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        padding: 6px 9px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        border: 1px solid #dce7ee !important;
        background: linear-gradient(135deg, #ffffff 0%, #f4fbff 55%, #fff7e7 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 63, 82, 0.14) !important;
        overflow: hidden !important;
    }

    .header-logo-center {
        width: 100% !important;
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-full-logo {
        width: auto !important;
        max-width: 98% !important;
        height: 78px !important;
        max-height: 78px !important;
        object-fit: contain !important;
        display: block !important;
        filter: drop-shadow(0 6px 9px rgba(36, 63, 82, .16)) !important;
    }

    .company-name,
    .side-heading,
    .steps,
    .checker-title,
    .status-box {
        display: none !important;
    }

    .form-shell,
    .form-layout,
    .main-panel,
    .one-page-form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .form-layout,
    .one-page-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .side-panel {
        display: contents !important;
    }

    #section-applicant { order: 1 !important; }
    #section-mother { order: 2 !important; }
    #section-spouse { order: 3 !important; }
    #section-children { order: 4 !important; }
    #section-external { order: 5 !important; }

    .side-data-box { order: 2 !important; }
    .side-notes-box { order: 3 !important; }
    .side-submit-section { order: 4 !important; }
    .reference-box-field { order: 5 !important; }

    /* كل الفورم يظهر بسكرول طبيعي */
    .form-section,
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 16px !important;
        border: 1px solid #dce7ee !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(36, 63, 82, 0.08) !important;
        overflow: visible !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: 28px !important;
        height: auto !important;
        padding: 5px 7px !important;
        margin: 0 0 5px 0 !important;
        border-radius: 11px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        background: #edf6fb !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        font-weight: 900 !important;
        color: #17384c !important;
        text-align: center !important;
    }

    .inline-add-btn,
    .external-main-add-btn {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 7px !important;
        border-radius: 12px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    /* كل الفيلدات نفس الحجم، وزوج/زوجة نفس باقي الفيلدات حرفياً */
    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field,
    #externalList .external-card .field,
    #externalList .external-card .external-child-field {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        display: grid !important;
        grid-template-rows: 13px 27px 4px !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #externalList .external-card .field span {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 13px !important;
        min-height: 13px !important;
        max-height: 13px !important;
        line-height: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .phone-control input,
    .phone-control strong,
    .field input[type="date"],
    .dmy-real-date {
        width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 27px !important;
        box-sizing: border-box !important;
    }

    .field input,
    .field select,
    .field textarea,
    .field input[type="date"],
    .dmy-real-date {
        padding: 0 7px !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .field small,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small,
    #externalList .external-card .field small {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
        line-height: 4px !important;
        font-size: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        width: 44px !important;
        border-radius: 0 !important;
        display: grid !important;
        place-items: center !important;
        font-size: 10px !important;
        padding: 0 !important;
    }

    .phone-control input {
        border-radius: 0 !important;
        padding: 0 5px !important;
    }

    .field input[type="date"],
    .dmy-real-date {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        direction: ltr !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }

    .dmy-date-wrap {
        display: contents !important;
    }

    .dmy-date-display,
    .dmy-date-btn {
        display: none !important;
    }

    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .row-number b {
        font-size: 11px !important;
    }

    .row-actions,
    .row-actions.triple-actions,
    .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .row-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        line-height: 31px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        padding: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-next-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 0 2px !important;
        margin: 0 !important;
        order: 99 !important;
    }

    .mobile-next-section-btn {
        width: min(270px, 88vw) !important;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: center !important;
        box-shadow: 0 8px 18px rgba(36, 79, 104, 0.18) !important;
    }

    .mobile-next-section-btn::after {
        content: " ↓";
        font-weight: 900;
    }

    #externalList,
    #externalList.external-storage-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 5px !important;
        overflow: visible !important;
    }

    .external-saved-list {
        display: none !important;
    }

    #externalList .external-line-card,
    #externalList .external-line-card > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    #externalList .external-family-separator {
        display: none !important;
    }

    #externalList .external-children-title {
        width: 100% !important;
        height: auto !important;
        min-height: 27px !important;
        padding: 5px 6px !important;
        border-radius: 8px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 900 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #externalList .external-child-field span {
        visibility: hidden !important;
    }

    .external-popup {
        display: none !important;
    }

    .side-data-box::before {
        content: "اسم من ملأ الاستمارة والتوقيع" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box::before {
        content: "ملاحظات" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box label > span {
        display: none !important;
    }

    .side-notes-box textarea {
        width: 100% !important;
        min-height: 78px !important;
        max-height: 110px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        padding: 8px !important;
        text-align: right !important;
    }

    #canvas-container {
        width: 96% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        border: 0 !important;
        border-bottom: 2px dashed #666 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }

    .side-submit-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .side-submit-section .form-message {
        grid-column: 1 / -1 !important;
        min-height: 14px !important;
        font-size: 10px !important;
        text-align: center !important;
    }

    .submit-btn,
    .side-print-btn {
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 0 6px !important;
    }

    .reference-box-field {
        gap: 4px !important;
        padding: 7px !important;
    }

    .reference-title {
        font-size: 11px !important;
        color: #17384c !important;
        text-align: center !important;
        font-weight: 900 !important;
    }

    .reference-cells {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .reference-cells input {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   Mobile Restore Clean Flow v519
   يرجع الموبايل لمسار واضح: صاحب الاستمارة -> زر بيانات الأم -> زر الزوجة -> الأبناء...
   مع إمكانية الرجوع بالسكرول، ورفع اللوقو، وإظهار التشيك بوكسات آخر شيء.
   ========================================================== */

@media (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-behavior: smooth !important;
    }

    .app-page {
        min-height: 100vh !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 3px 6px 8px !important;
        gap: 4px !important;
    }

    /* اللوقو لفوق، بدون مساحات كبيرة */
    .top-header,
    .top-header.center-logo-header {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 2px 6px !important;
        margin: 0 0 4px 0 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .header-logo-center {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 66px !important;
        min-height: 66px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .header-full-logo,
    .header-main-image {
        width: auto !important;
        max-width: 98% !important;
        height: 64px !important;
        max-height: 64px !important;
        object-fit: contain !important;
        object-position: top center !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .company-name,
    .side-heading,
    .steps {
        display: none !important;
    }

    .form-shell,
    .form-layout,
    .main-panel,
    .one-page-form {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .form-layout,
    .one-page-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .side-panel {
        display: contents !important;
    }

    .main-panel {
        order: 1 !important;
        display: block !important;
    }

    /* منع التشتيت: المستقبل فقط مخفي، السابق يبقى ظاهر للرجوع بالسكرول */
    .mobile-progressive-hidden {
        display: none !important;
    }

    .mobile-progressive-visible {
        display: flex !important;
    }

    body[data-mobile-visible-step="0"] #section-mother,
    body[data-mobile-visible-step="0"] #section-spouse,
    body[data-mobile-visible-step="0"] #section-children,
    body[data-mobile-visible-step="0"] #section-external,
    body[data-mobile-visible-step="0"] .side-data-box,
    body[data-mobile-visible-step="0"] .side-notes-box,
    body[data-mobile-visible-step="0"] .side-submit-section,
    body[data-mobile-visible-step="0"] .reference-box-field,
    body[data-mobile-visible-step="0"] .checker-title,
    body[data-mobile-visible-step="0"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="1"] #section-spouse,
    body[data-mobile-visible-step="1"] #section-children,
    body[data-mobile-visible-step="1"] #section-external,
    body[data-mobile-visible-step="1"] .side-data-box,
    body[data-mobile-visible-step="1"] .side-notes-box,
    body[data-mobile-visible-step="1"] .side-submit-section,
    body[data-mobile-visible-step="1"] .reference-box-field,
    body[data-mobile-visible-step="1"] .checker-title,
    body[data-mobile-visible-step="1"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="2"] #section-children,
    body[data-mobile-visible-step="2"] #section-external,
    body[data-mobile-visible-step="2"] .side-data-box,
    body[data-mobile-visible-step="2"] .side-notes-box,
    body[data-mobile-visible-step="2"] .side-submit-section,
    body[data-mobile-visible-step="2"] .reference-box-field,
    body[data-mobile-visible-step="2"] .checker-title,
    body[data-mobile-visible-step="2"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="3"] #section-external,
    body[data-mobile-visible-step="3"] .side-data-box,
    body[data-mobile-visible-step="3"] .side-notes-box,
    body[data-mobile-visible-step="3"] .side-submit-section,
    body[data-mobile-visible-step="3"] .reference-box-field,
    body[data-mobile-visible-step="3"] .checker-title,
    body[data-mobile-visible-step="3"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="4"] .side-data-box,
    body[data-mobile-visible-step="4"] .side-notes-box,
    body[data-mobile-visible-step="4"] .side-submit-section,
    body[data-mobile-visible-step="4"] .reference-box-field,
    body[data-mobile-visible-step="4"] .checker-title,
    body[data-mobile-visible-step="4"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="5"] .side-submit-section,
    body[data-mobile-visible-step="5"] .reference-box-field,
    body[data-mobile-visible-step="5"] .checker-title,
    body[data-mobile-visible-step="5"] .status-box {
        display: none !important;
    }

    body[data-mobile-visible-step="5"] .side-data-box,
    body[data-mobile-visible-step="5"] .side-notes-box {
        display: flex !important;
    }

    body[data-mobile-visible-step="6"] .side-submit-section {
        display: grid !important;
    }

    body[data-mobile-visible-step="6"] .reference-box-field,
    body[data-mobile-visible-step="6"] .checker-title,
    body[data-mobile-visible-step="6"] .status-box {
        display: grid !important;
    }

    .form-section,
    .side-data-box,
    .side-notes-box,
    .side-submit-section,
    .reference-box-field,
    .checker-title,
    .status-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 14px !important;
        border: 1px solid #dce7ee !important;
        background: #ffffff !important;
        box-shadow: 0 6px 14px rgba(36, 63, 82, 0.07) !important;
        overflow: visible !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .checker-title {
        order: 8 !important;
        text-align: center !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        background: #edf6fb !important;
    }

    .status-box {
        order: 9 !important;
        gap: 6px !important;
        justify-items: stretch !important;
        margin-bottom: 10px !important;
    }

    .status-box label {
        width: 100% !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 10px !important;
        border: 1px solid #e1e9ee !important;
        border-radius: 10px !important;
        background: #fbfdfe !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .status-box input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        flex: 0 0 18px !important;
        opacity: .75 !important;
    }

    .section-title-line,
    .section-title-line.with-add {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 6px 8px !important;
        margin: 0 0 6px 0 !important;
        border-radius: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        background: #edf6fb !important;
        border: 1px solid #d6eaf3 !important;
    }

    .section-title-line h2,
    .section-title-line.with-add h2,
    #section-external .external-section-full-title h2 {
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        font-size: 12.5px !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .paper-line,
    .applicant-line,
    .mother-line,
    .line-list,
    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .line-card,
    .spouse-line-card,
    .child-line-card,
    .external-line-card {
        padding: 7px !important;
        border-radius: 12px !important;
        border: 1px solid #dfe8ee !important;
        background: #fbfdfe !important;
    }

    .field,
    .phone-field,
    .external-child-field,
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field,
    #externalList .external-card .field,
    #externalList .external-card .external-child-field {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        display: grid !important;
        grid-template-rows: 13px 27px 4px !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .field span,
    .phone-field span,
    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #externalList .external-card .field span {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 13px !important;
        line-height: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17384c !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .field input,
    .field select,
    .field textarea,
    .phone-control,
    .phone-control input,
    .phone-control strong,
    .field input[type="date"],
    .dmy-real-date {
        width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 27px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .field small,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small,
    #externalList .external-card .field small {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        min-height: 4px !important;
        max-height: 4px !important;
        line-height: 4px !important;
        font-size: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .phone-control strong {
        width: 44px !important;
        border-radius: 0 !important;
        display: grid !important;
        place-items: center !important;
        font-size: 10px !important;
        padding: 0 !important;
    }

    .dmy-date-wrap {
        display: contents !important;
    }

    .dmy-date-display,
    .dmy-date-btn {
        display: none !important;
    }

    .field input[type="date"],
    .dmy-real-date {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        direction: ltr !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
        padding: 0 5px !important;
    }

    .row-number {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        margin: 0 !important;
        border-radius: 9px !important;
    }

    .row-number b {
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* حفظ / إضافة / حذف مثل أخوة من الأم: كبار وواضحين */
    .row-actions,
    .row-actions.triple-actions,
    .triple-actions,
    #spousesList .row-actions,
    #childrenList .row-actions,
    #externalList .row-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 2px 0 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .row-actions button,
    .row-actions .small-save,
    .row-actions .small-delete,
    .row-actions .small-new,
    .row-actions .inline-add-btn,
    .row-actions.triple-actions button,
    .triple-actions button,
    .small-save,
    .small-delete,
    .small-new,
    .mini-delete,
    #spousesList .small-save,
    #spousesList .small-delete,
    #spousesList .small-new,
    #spousesList .inline-add-btn,
    #childrenList .small-save,
    #childrenList .small-delete,
    #childrenList .small-new,
    #externalList .small-save,
    #externalList .small-delete,
    #externalList .small-new {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 5px 12px rgba(36, 63, 82, 0.08) !important;
        white-space: nowrap !important;
    }

    .small-save {
        background: var(--success-soft) !important;
        color: var(--success-dark) !important;
        border: 1px solid #ccebd8 !important;
    }

    .small-delete,
    .mini-delete {
        background: var(--danger-soft) !important;
        color: var(--danger) !important;
        border: 1px solid #f1c9cf !important;
    }

    .small-new,
    #spousesList .inline-add-btn,
    #childrenList .small-new,
    #externalList .small-new {
        background: var(--primary-dark) !important;
        color: white !important;
        border: 1px solid #d6eaf3 !important;
    }

    .mobile-next-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 0 2px !important;
        margin: 0 !important;
        order: 99 !important;
    }

    .mobile-next-section-btn {
        width: min(280px, 90vw) !important;
        height: 42px !important;
        min-height: 42px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-align: center !important;
        box-shadow: 0 8px 18px rgba(36, 79, 104, 0.18) !important;
    }

    .mobile-next-section-btn::after {
        content: " ↓";
        font-weight: 900;
    }

    .side-data-box .mobile-next-wrap {
        display: none !important;
    }

    .side-notes-box .mobile-next-wrap {
        display: flex !important;
    }

    .side-data-box::before {
        content: "اسم من ملأ الاستمارة والتوقيع" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box::before {
        content: "ملاحظات" !important;
        display: block !important;
        padding: 5px 7px !important;
        border-radius: 11px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .side-notes-box label > span {
        display: none !important;
    }

    .side-notes-box textarea,
    #sideNotes {
        width: 100% !important;
        min-height: 78px !important;
        height: 78px !important;
        max-height: 110px !important;
        border-radius: 10px !important;
        border: 2px solid #b99545 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 8px !important;
        text-align: right !important;
        resize: vertical !important;
    }

    #canvas-container {
        width: 96% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        border: 0 !important;
        border-bottom: 2px dashed #666 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #signature-pad {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }

    #externalList,
    #externalList.external-storage-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 5px !important;
        overflow: visible !important;
    }

    .external-popup {
        display: none !important;
    }

    .external-saved-list {
        display: none !important;
    }

    #externalList .external-family-separator {
        display: none !important;
    }

    #externalList .external-children-title {
        width: 100% !important;
        height: auto !important;
        min-height: 27px !important;
        padding: 5px 6px !important;
        border-radius: 8px !important;
        background: #edf6fb !important;
        color: #17384c !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 900 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #externalList .external-child-field span {
        visibility: hidden !important;
    }

    .mobile-section-notice {
        width: 100% !important;
        margin: 6px 0 !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        border: 1px solid #f1c9cf !important;
        background: #fff0f3 !important;
        color: #b42335 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        box-shadow: 0 5px 12px rgba(217, 75, 95, 0.10) !important;
    }

    .welcome-modal {
        padding: 10px !important;
        overflow-y: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .welcome-card,
    .welcome-card.compact-welcome,
    .compact-welcome {
        width: min(560px, 96vw) !important;
        max-width: 96vw !important;
        max-height: 90svh !important;
        overflow-y: auto !important;
        padding: 13px 14px !important;
        border-radius: 18px !important;
        border: 2px solid #d8e4eb !important;
        box-shadow: 0 22px 60px rgba(23, 39, 50, 0.24) !important;
    }

    .welcome-card .welcome-logo {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 5px !important;
    }

    .welcome-card h2 {
        font-size: 17px !important;
        line-height: 1.4 !important;
        margin: 0 0 7px !important;
        font-weight: 900 !important;
    }

    .notes-title {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        padding: 6px 8px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
        font-weight: 900 !important;
    }

    .notes-list {
        gap: 4px !important;
    }

    .notes-list li {
        min-height: 0 !important;
        padding: 5px 32px 5px 7px !important;
        border-radius: 9px !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        font-weight: 800 !important;
        text-align: right !important;
    }

    .notes-list li::before {
        right: 8px !important;
        top: 6px !important;
        width: 19px !important;
        height: 19px !important;
        border-radius: 6px !important;
        font-size: 10px !important;
    }

    .agree-check input {
        width: 23px !important;
        height: 23px !important;
    }

    .welcome-card button,
    #agreeBtn {
        min-width: 150px !important;
        min-height: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        margin-top: 5px !important;
    }
}

/* ==========================================================
   Mobile Pretty Row Buttons For Spouse + Children
   حفظ / حذف / إضافة مثل أخوة من الأم - موبايل فقط
   ========================================================== */

@media (max-width: 768px) {

    /* صندوق الأزرار في بيانات الزوج/الزوجة والأبناء */
    #spousesList .row-actions,
    #spousesList .row-actions.triple-actions,
    #childrenList .row-actions,
    #childrenList .row-actions.triple-actions,
    #childrenList .triple-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 7px 0 0 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    /* كل الأزرار نفس الحجم والشكل */
    #spousesList .row-actions button,
    #childrenList .row-actions button,
    #childrenList .triple-actions button,
    #spousesList .small-save,
    #spousesList .small-delete,
    #spousesList .small-new,
    #childrenList .small-save,
    #childrenList .small-delete,
    #childrenList .small-new {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        line-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;

        border-radius: 11px !important;
        font-size: 12px !important;
        font-weight: 900 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
        white-space: nowrap !important;

        box-shadow: 0 4px 10px rgba(36, 63, 82, 0.08) !important;
    }

    /* زر حفظ */
    #spousesList .small-save,
    #childrenList .small-save {
        background: var(--success-soft) !important;
        color: var(--success-dark) !important;
        border: 1px solid #ccebd8 !important;
    }

    /* زر حذف */
    #spousesList .small-delete,
    #childrenList .small-delete {
        background: var(--danger-soft) !important;
        color: var(--danger) !important;
        border: 1px solid #f1c9cf !important;
    }

    /* زر إضافة */
    #spousesList .small-new,
    #childrenList .small-new,
    #spousesList [data-add-spouse-row],
    #childrenList [data-add-child-row] {
        background: #eaf6ff !important;
        color: var(--primary-dark) !important;
        border: 1px solid #d6eaf3 !important;
    }

    /* لما يتحول زر حفظ إلى تم */
    #spousesList .small-save:disabled,
    #childrenList .small-save:disabled {
        opacity: 0.75 !important;
    }
}

/* ==========================================================
   Developer Credit Before Submit Buttons v522
   تنفيذ شركة ديجتال تكسيرف للبرمجيات قبل الإرسال والطباعة
   ========================================================== */

.mobile-only-credit {
    display: none !important;
}
/* ظاهرة على الموبايل فقط */
@media (max-width: 768px) {
    .mobile-only-credit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        margin: 4px 0 6px !important;
        padding: 0 10px !important;

        border-radius: 999px !important;
        border: 1px solid #c8dfe9 !important;

        background: #f4f7fb !important;
        color: var(--primary-dark) !important;

        font-size: 17px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: center !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        box-shadow: 0 6px 14px rgba(23, 56, 76, 0.18) !important;
    }
}

/* ==========================================================
   Final Mobile Credit + Names + Desktop Date + Signature Fix v550
   ========================================================== */

/* إخفاء تنفيذ الشركة على الكمبيوتر */
.mobile-only-credit {
    display: none !important;
}

/* التاريخ على الكمبيوتر: يقدر يكتب ويختار من التقويم */
@media (min-width: 769px) {
    .dmy-date-wrap {
        display: contents !important;
    }

    .dmy-date-display,
    .dmy-date-btn {
        display: none !important;
    }

    .dmy-real-date,
    .field input[type="date"] {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        width: 100% !important;
        height: var(--field-h) !important;
        min-height: var(--field-h) !important;
        max-height: var(--field-h) !important;

        direction: ltr !important;
        text-align: center !important;
        text-align-last: center !important;

        appearance: auto !important;
        -webkit-appearance: auto !important;

        padding: 0 4px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        border-radius: var(--radius) !important;
        cursor: text !important;
    }

    /* تصغير اسم من ملأ الاستمارة والتوقيع على الكمبيوتر */
    .side-data-box label > span,
    .signature-mouse-field > span {
        font-size: 12px !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
        color: #5d4d2d !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .side-data-box input[name="form_meta[filled_by_name]"] {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
}

/* التوقيع: خط واحد منقط، بالنص، ومقصوص من اليمين واليسار */
#canvas-container {
    width: 78% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 auto 2px auto !important;

    border: 0 !important;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.55) !important;

    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;

    position: relative !important;
    overflow: visible !important;
}

/* حذف النقاط القديمة المكتوبة كنص */
#canvas-container::after {
    content: none !important;
    display: none !important;
}

#signature-pad {
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    touch-action: none !important;
    z-index: 2 !important;
}

.signature-mouse-field {
    text-align: center !important;
    gap: 1px !important;
}

/* ==========================================================
   Mobile فقط
   ========================================================== */
@media (max-width: 768px) {

    /* شكل تنفيذ شركة ديجتال مميز وبولد */
    .mobile-only-credit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;

        margin: 6px 0 7px !important;
        padding: 0 12px !important;

        border-radius: 999px !important;
        border: 1px solid #b8d7e6 !important;

        background:
            linear-gradient(135deg, #ffffff 0%, #edf6fb 48%, #fff7e5 100%) !important;

        color: #17384c !important;
        font-size: 14.5px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: center !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        box-shadow:
            0 8px 18px rgba(36, 79, 104, 0.16),
            inset 0 0 0 1px rgba(255, 255, 255, 0.65) !important;

        text-shadow: 0 0 0.4px #17384c !important;
    }

    .mobile-only-credit::before,
    .mobile-only-credit::after {
        content: "◆" !important;
        color: #c79a45 !important;
        font-size: 9px !important;
        margin: 0 7px !important;
        line-height: 1 !important;
    }

    

    /* تصغير عنوان اسم من ملأ الاستمارة والتوقيع على الموبايل */
    .side-data-box::before {
        font-size: 12px !important;
        padding: 5px 7px !important;
        border-radius: 10px !important;
    }

    .side-data-box label > span,
    .signature-mouse-field > span {
        font-size: 10.8px !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .side-data-box input[name="form_meta[filled_by_name]"] {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
    }

    /* التوقيع على الموبايل: خط واحد منقط بالنص */
    #canvas-container {
        width: 76% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        margin: 0 auto 2px auto !important;
        border: 0 !important;
        border-bottom: 2px dotted rgba(0, 0, 0, 0.55) !important;
        background: transparent !important;
    }
}

/* ==========================================================
   Signature + Date Final Fix v576
   التوقيع على الكمبيوتر مثل الموبايل: خط منقط، متوسط، وموسّط
   التاريخ ظاهر دائمًا بصيغة dd/mm/yyyy مع بقاء التقويم والحفظ بصيغة قاعدة البيانات
   ========================================================== */

/* التوقيع: خط منقط حقيقي وليس نقاط نصية */
#canvas-container {
    width: 76% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 auto 2px auto !important;
    border: 0 !important;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.58) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: visible !important;
    text-align: center !important;
}

#canvas-container::before,
#canvas-container::after {
    content: none !important;
    display: none !important;
}

#signature-pad {
    display: block !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    touch-action: none !important;
    z-index: 2 !important;
}

.signature-mouse-field {
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 1px !important;
}

.signature-mouse-field > span {
    width: 100% !important;
    text-align: center !important;
}

@media (min-width: 769px) {
    #canvas-container {
        width: 76% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }
}

/* التاريخ dd/mm/yyyy — إلغاء كل محاولات إظهار input date الأصلي */
.dmy-date-wrap {
    width: 100% !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    max-height: var(--field-h) !important;
    display: grid !important;
    grid-template-columns: 1fr 28px !important;
    align-items: center !important;
    position: relative !important;
    border: 1px solid #d8e0e5 !important;
    border-radius: var(--radius) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dmy-date-display {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #25323a !important;
    padding: 0 4px !important;
    outline: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: var(--field-h) !important;
    text-align: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    letter-spacing: .2px !important;
    box-shadow: none !important;
}

.dmy-date-display::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
    text-align: center !important;
}

.dmy-date-btn {
    width: 28px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-right: 1px solid #d8e0e5 !important;
    border-radius: 0 !important;
    background: #f3f8fb !important;
    color: #17384c !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* input date الحقيقي يبقى موجودًا حتى يفتح التقويم، لكنه فوق زر التقويم فقط */
.dmy-date-wrap > input[type="date"].dmy-real-date {
    display: block !important;
    position: absolute !important;
    inset-inline-end: 0 !important;
    top: 0 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    z-index: 3 !important;
}

.field.invalid .dmy-date-wrap,
label.invalid .dmy-date-wrap {
    border-color: var(--danger) !important;
}

@media (max-width: 768px) {
    #canvas-container {
        width: 76% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        margin: 0 auto 2px auto !important;
        border: 0 !important;
        border-bottom: 2px dotted rgba(0, 0, 0, 0.58) !important;
        background: transparent !important;
    }

    .dmy-date-wrap {
        width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        display: grid !important;
        grid-template-columns: 1fr 32px !important;
        border-radius: 8px !important;
    }

    .dmy-date-display {
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        line-height: 27px !important;
        font-size: 12px !important;
        border-radius: 0 !important;
        display: block !important;
    }

    .dmy-date-btn {
        width: 32px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        display: grid !important;
        font-size: 13px !important;
    }

    .dmy-date-wrap > input[type="date"].dmy-real-date {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        opacity: 0 !important;
        position: absolute !important;
        pointer-events: auto !important;
        display: block !important;
    }
}

/* الحفاظ على شكل تنفيذ الشركة في الموبايل إذا كان موجودًا */
.mobile-only-credit {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only-credit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 12px 0 12px !important;
        padding: 0 16px !important;
        border-radius: 18px !important;
        border: 2px solid rgba(255, 218, 128, 0.75) !important;
        background:
            radial-gradient(circle at 15% 20%, rgba(255,255,255,0.28), transparent 28%),
            linear-gradient(135deg, #102f45 0%, #1f6f93 46%, #c79a45 100%) !important;
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow:
            0 12px 26px rgba(16, 47, 69, 0.28),
            inset 0 1px 0 rgba(255,255,255,0.35),
            inset 0 -1px 0 rgba(0,0,0,0.12) !important;
        text-shadow:
            0 2px 3px rgba(0,0,0,0.42),
            0 0 1px rgba(255,255,255,0.35) !important;
    }

    .mobile-only-credit::before,
    .mobile-only-credit::after {
        content: "✦" !important;
        color: #fff0b8 !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        margin: 0 9px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
        flex: 0 0 auto !important;
    }
}



/* ==========================================================
   Date Picker Open Button Fix v577
   إصلاح فتح التقويم عند الضغط على زر التاريخ
   ========================================================== */

.dmy-date-wrap {
    direction: ltr !important;
}

.dmy-date-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 8 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
}

/* لا نخلي input التاريخ الشفاف يغطي زر التقويم؛ الجافاسكربت يفتحه من الزر */
.dmy-date-wrap > input[type="date"].dmy-real-date {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    opacity: 0.01 !important;
    visibility: visible !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    z-index: 1 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

@media (max-width: 768px) {
    .dmy-date-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        pointer-events: auto !important;
        z-index: 8 !important;
    }

    .dmy-date-wrap > input[type="date"].dmy-real-date {
        width: 1px !important;
        min-width: 1px !important;
        max-width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        max-height: 1px !important;
        pointer-events: none !important;
    }
}

/* ==========================================================
   Mobile Family Label Align Fix v578
   ليبل العائلة على الموبايل مثل باقي الليبلات
   ========================================================== */

@media (max-width: 768px) {

    label.field:has(input[name="applicant[family_name]"]) > span,
    label.field:has(input[name="mother[family_name]"]) > span,
    label.field:has(input[name^="spouses["][name$="[family_name]"]) > span,
    label.field:has(input[name^="external_husbands["][name$="[family_name]"]) > span,
    .field:has(input[name="applicant[family_name]"]) > span,
    .field:has(input[name="mother[family_name]"]) > span,
    .field:has(input[name^="spouses["][name$="[family_name]"]) > span,
    .field:has(input[name^="external_husbands["][name$="[family_name]"]) > span {
        text-align: right !important;
        text-align-last: right !important;
        justify-content: flex-start !important;
        color: #17384c !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
    }
}

@media(min-width: 900px){
    .t {
    width: 80% !important;
   }
}







/* ==========================================================
   Desktop Labels Spacing From Section Line v579
   تنزيل بسيط لليبلات عن خط عنوان السيكشن
   ========================================================== */

@media (min-width: 769px) {

    /* ينزل كل صف الحقول شوي عن عنوان السيكشن */
    .one-page-form .form-section > .paper-line,
    .one-page-form .form-section > .line-list,
    #spousesList,
    #childrenList,
    #externalList,
    .external-saved-list {
        margin-top: 5px !important;
    }

    /* نزلة خفيفة لليبلات نفسها بدون تخريب الخانات */
    .one-page-form .form-section .field span,
    .one-page-form .form-section .phone-field span,
    .one-page-form .form-section label.field > span {
        padding-top: 2px !important;
        line-height: 1.05 !important;
    }

    /* حتى الرقم والأزرار يضلوا بمحاذاة الخانات بعد النزلة */
    .one-page-form .form-section .row-number,
    .one-page-form .form-section .row-actions {
        margin-top: calc(var(--label-h) + 2px) !important;
    }

    /* الصفوف الثانية اللي بدون ليبلات لا تنزل زيادة */
    #spousesList .spouse-card:not(:first-child),
    #childrenList .child-card:not(:first-child) {
        margin-top: 2px !important;
    }

    #spousesList .spouse-card:not(:first-child) .row-number,
    #childrenList .child-card:not(:first-child) .row-number,
    #spousesList .spouse-card:not(:first-child) .row-actions,
    #childrenList .child-card:not(:first-child) .row-actions {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   Compact Label/Input Spacing Fix v580
   حل دخول الليبل داخل الانبوت مع بقاء الصفحة مضغوطة
   ========================================================== */

@media (min-width: 769px) {

    /* نخلي نزلة الصف بسيطة بدل 5px */
    .one-page-form .form-section > .paper-line,
    .one-page-form .form-section > .line-list,
    #spousesList,
    #childrenList,
    #externalList,
    .external-saved-list {
        margin-top: 2px !important;
    }

    /* ضبط ارتفاع الحقل بدون تكبير الصفحة كثير */
    .one-page-form .form-section .field,
    .one-page-form .form-section .phone-field {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        grid-template-rows: 14px 24px 2px !important;
        gap: 1px !important;
        align-items: start !important;
    }

    /* الليبل يرجع فوق وما يدخل بالانبوت */
    .one-page-form .form-section .field span,
    .one-page-form .form-section .phone-field span,
    .one-page-form .form-section label.field > span {
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;

        line-height: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;

        display: block !important;

        font-size: 12.5px !important;
        font-weight: 900 !important;

        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ننزل الانبوت نزلة خفيفة بدون ما نكبر الحقل */
    .one-page-form .form-section .field input,
    .one-page-form .form-section .field select,
    .one-page-form .form-section .field textarea,
    .one-page-form .form-section .phone-control,
    .one-page-form .form-section .dmy-real-date,
    .one-page-form .form-section input[type="date"] {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;

        line-height: 24px !important;
        margin-top: 1px !important;

        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .one-page-form .form-section .phone-control input,
    .one-page-form .form-section .phone-control strong {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
        font-size: 13px !important;
    }

    /* تصحيح مكان رقم السطر والأزرار بعد نزلة الانبوت */
    .one-page-form .form-section .row-number,
    .one-page-form .form-section .row-actions {
        margin-top: 15px !important;
    }

    /* الصفوف الثانية تبقى مضغوطة مثل ما هي */
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field {
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        grid-template-rows: 24px 0 !important;
    }

    #spousesList .spouse-card:not(:first-child) .row-number,
    #childrenList .child-card:not(:first-child) .row-number,
    #spousesList .spouse-card:not(:first-child) .row-actions,
    #childrenList .child-card:not(:first-child) .row-actions {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   Big Labels + Small Gap Fix v581
   خط كبير بدون لزق بين الليبل والإنبوت
   ========================================================== */

@media (min-width: 769px) {

    /* حجم الحقل يزيد زيادة بسيطة جدًا فقط */
    .one-page-form .form-section .field,
    .one-page-form .form-section .phone-field {
        height: 47px !important;
        min-height: 47px !important;
        max-height: 47px !important;

        grid-template-rows: 17px 25px 3px !important;
        gap: 2px !important;
        align-items: start !important;
    }

    /* الليبل كبير وواضح */
    .one-page-form .form-section .field span,
    .one-page-form .form-section .phone-field span,
    .one-page-form .form-section label.field > span {
        height: 17px !important;
        min-height: 17px !important;
        max-height: 17px !important;

        line-height: 16px !important;
        padding: 0 !important;
        margin: 0 !important;

        font-size: 15px !important;
        font-weight: 900 !important;

        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        display: block !important;
    }

    /* الانبوت ينزل شوي ويبقى كبير */
    .one-page-form .form-section .field input,
    .one-page-form .form-section .field select,
    .one-page-form .form-section .field textarea,
    .one-page-form .form-section .phone-control,
    .one-page-form .form-section input[type="date"],
    .one-page-form .form-section .dmy-real-date {
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;

        line-height: 25px !important;
        margin-top: 1px !important;

        font-size: 15px !important;
        font-weight: 900 !important;

        text-align: center !important;
        text-align-last: center !important;
    }

    .one-page-form .form-section .phone-control input,
    .one-page-form .form-section .phone-control strong {
        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
        line-height: 25px !important;
        font-size: 15px !important;
    }

    /* مكان رقم السطر والأزرار يوازي الانبوت */
    .one-page-form .form-section .row-number,
    .one-page-form .form-section .row-actions {
        margin-top: 19px !important;
    }

    /* الصفوف الثانية للزوجات والأبناء تبقى مضغوطة حتى تكفي 4 زوجات و10 أبناء */
    #spousesList .spouse-card:not(:first-child) .field,
    #childrenList .child-card:not(:first-child) .field {
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        grid-template-rows: 25px 0 !important;
        gap: 0 !important;
    }

    #spousesList .spouse-card:not(:first-child) .field span,
    #childrenList .child-card:not(:first-child) .field span,
    #spousesList .spouse-card:not(:first-child) .field small,
    #childrenList .child-card:not(:first-child) .field small {
        display: none !important;
    }

    #spousesList .spouse-card:not(:first-child) .row-number,
    #childrenList .child-card:not(:first-child) .row-number,
    #spousesList .spouse-card:not(:first-child) .row-actions,
    #childrenList .child-card:not(:first-child) .row-actions {
        margin-top: 0 !important;
    }
}

/* الموبايل: العائلة نفس الليبلات الثانية مش بالنص */
@media (max-width: 768px) {
    label.field:has(input[name="applicant[family_name]"]) > span,
    label.field:has(input[name="mother[family_name]"]) > span,
    label.field:has(input[name^="spouses["][name$="[family_name]"]) > span,
    label.field:has(input[name^="external_husbands["][name$="[family_name]"]) > span {
        text-align: right !important;
    }
}

.side-data-box label span ,.side-data-box label{

    font-size:17px !important;
}