/* ========================================
   🎨 Admin shell — معالج فتح الحساب داخل لوحة الإدارة
   ======================================== */
.admin-main-content .open-account-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .admin-main-content .open-account-container {
        padding: 0.75rem 1rem 1.5rem;
    }
}

/* ========================================
   🎨 Admin Pages - Shared Styles
   ======================================== */

/* 📌 Page Title Section */
.page-title-section {
    margin-bottom: 2rem;
}

.title-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #003d7a;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i {
    color: #d4af37;
    font-size: 1.5rem;
}

.section-subtitle {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
}

/* 🎯 Common Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    color: white;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }

    .title-with-action {
        flex-direction: column;
        align-items: stretch;
    }

    .title-with-action .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.25rem;
    }

    .section-title i {
        font-size: 1.25rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }
}

/* ========================================
   🔐 Force Logout Dialog
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.force-logout-dialog {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.force-logout-dialog .modal-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.force-logout-dialog .modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.force-logout-dialog .modal-body {
    padding: 2rem;
}

.warning-message {
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 1.5rem;
    text-align: center;
}

.session-info {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.session-info h4 {
    color: #003d7a;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.session-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.session-details li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.95rem;
}

.session-details li:last-child {
    border-bottom: none;
}

.session-details li i {
    color: #d4af37;
    font-size: 1.1rem;
    width: 20px;
}

.session-details li strong {
    color: #495057;
    min-width: 120px;
}

.warning-note {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.warning-note i {
    color: #856404;
    font-size: 1.2rem;
    margin-top: 2px;
}

.warning-note p {
    color: #856404;
    margin: 0;
    font-size: 0.9rem;
}

.force-logout-dialog .modal-footer {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e9ecef;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.force-logout-dialog .modal-footer .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.force-logout-dialog .modal-footer .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
}

.force-logout-dialog .modal-footer .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.force-logout-dialog .modal-footer .btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
}

.force-logout-dialog .modal-footer .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* ============================================
   📱 Global Responsive Enhancements
   ============================================ */

/* Smooth Scrolling */
* {
    -webkit-overflow-scrolling: touch;
}

/* Touch Target Size (min 44x44px for accessibility) — مع استثناء أزرار الجداول المدمجة */
button:not(.btn-sm):not(.btn-action-details):not(.btn-action-delete),
.btn:not(.btn-sm):not(.btn-action-details):not(.btn-action-delete),
a.nav-link,
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
}

table .action-buttons .btn-action-details,
table .action-buttons .btn-action-delete {
    min-height: 36px;
    min-width: auto;
}

/* Better Touch Feedback */
button:active,
.btn:active {
    transform: scale(0.98);
}

/* Prevent Text Selection on Double Tap */
.btn,
button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   تفاصيل الطلب — أنماط عامة (محتوى RenderTreeBuilder)
   ============================================ */
.details-page .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.details-page .info-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px 18px;
    border-right: 4px solid #003d7a;
}

.details-page .info-item.full-width {
    grid-column: 1 / -1;
}

.details-page .info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 6px;
}

.details-page .info-label i {
    color: #003d7a;
}

.details-page .info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    word-break: break-word;
}

/* معلومات إضافية — ملخص امتثال مضغوط */
.details-page .additional-info-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.details-page .compliance-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.details-page .compliance-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-right: 4px solid #003d7a;
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 110px;
}

.details-page .compliance-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003d7a 0%, #0056b3 100%);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.details-page .compliance-card-icon.pep {
    background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
}

.details-page .compliance-card-icon.fatca {
    background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%);
}

.details-page .compliance-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.details-page .compliance-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #003d7a;
    line-height: 1.35;
}

.details-page .compliance-card-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
}

.details-page .compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
}

.details-page .compliance-badge.is-no {
    background: #e9ecef;
    color: #495057;
}

.details-page .compliance-badge.is-yes {
    background: #d4edda;
    color: #155724;
}

.details-page .compliance-badge.is-yes.is-alert {
    background: #f8d7da;
    color: #721c24;
}

.details-page .compliance-badge.is-yes.is-warn {
    background: #fff3cd;
    color: #856404;
}

.details-page .compliance-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-page .compliance-detail-block {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.details-page .compliance-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    color: #003d7a;
    font-weight: 700;
    font-size: 0.92rem;
}

.details-page .compliance-detail-body {
    padding: 14px 16px;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.details-page .compliance-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 0.88rem;
    border: 1px dashed #dee2e6;
}

@media (max-width: 992px) {
    .details-page .compliance-summary-grid {
        grid-template-columns: 1fr;
    }
}

.details-page .signatures-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.details-page .signature-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.details-page .signature-card .signature-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #e9ecef;
}

.details-page .signature-preview {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px dashed #dee2e6;
    overflow: hidden;
}

.details-page .signature-preview img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.details-page .files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.details-page .file-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e9ecef;
}

.details-page .file-type-badge {
    display: inline-flex;
    align-self: flex-start;
    background: linear-gradient(135deg, #003d7a 0%, #0056b3 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.details-page .file-icon {
    font-size: 1.75rem;
    color: #003d7a;
}

.details-page .file-name {
    font-weight: 600;
    color: #333;
    word-break: break-word;
}

.details-page .file-meta {
    font-size: 0.8rem;
    color: #888;
}

.details-page .review-notes {
    background: #fff3cd;
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    grid-column: 1 / -1;
}

.details-page .review-notes h5 {
    color: #856404;
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.details-page .review-notes p {
    color: #664d03;
    margin: 0;
    white-space: pre-wrap;
}

/* تبويبات التفاصيل — لا تستخدم تنسيق معالج فتح الحساب */
.details-page .tabs-nav .tab-btn {
    flex: 0 1 auto;
    width: auto;
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: 'Tajawal', sans-serif;
}

.details-page .tabs-nav .tab-btn:hover {
    background: #e9ecef;
    color: #333;
}

.details-page .tabs-nav .tab-btn.active {
    background: linear-gradient(135deg, #003d7a 0%, #0056b3 100%);
    color: #fff;
    border-color: transparent;
}

/* لا تُلغَ محاذاة RTL لبطاقة الحالة — التفاصيل في Details.razor.css */

@media (max-width: 992px) {
    .details-page .signatures-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .details-page .signatures-grid {
        grid-template-columns: 1fr;
    }

    .details-page .page-header-details {
        flex-direction: column;
    }

    .details-page .header-actions {
        width: 100%;
    }

    .details-page .header-actions .btn {
        flex: 1 1 auto;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .title-with-action {
        gap: 1rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .btn {
        padding: 0.6rem 1.25rem;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .page-title-section {
        margin-bottom: 1.5rem;
    }

    .title-with-action {
        flex-direction: column;
        align-items: stretch;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-title i {
        font-size: 1.35rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Full-width only for primary page CTAs — not every button */
    .title-with-action > .btn,
    .page-title-section > .btn,
    .form-actions .btn {
        padding: 0.75rem 1.25rem;
        width: 100%;
        justify-content: center;
    }

    /* Dialog Responsive */
    .force-logout-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .force-logout-dialog .modal-header h3 {
        font-size: 1.25rem;
    }

    .session-details li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .session-details li strong {
        min-width: auto;
    }

    .force-logout-dialog .modal-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .force-logout-dialog .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile (480px and down) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.35rem;
    }

    .section-title i {
        font-size: 1.25rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .force-logout-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .force-logout-dialog .modal-header h3 {
        font-size: 1.1rem;
    }
}

/* ============================================
   📱 Admin mobile polish (global shell + pages)
   ============================================ */

/* Avoid horizontal scroll on admin pages */
.admin-main-content,
.admin-page,
.users-page,
.details-page,
.profile-page,
.create-user-page {
    overflow-x: clip;
    max-width: 100vw;
}

/* iOS: prevent zoom on focus */
@media (max-width: 768px) {
    .admin-main-content input,
    .admin-main-content select,
    .admin-main-content textarea,
    .admin-page input,
    .admin-page select,
    .admin-page textarea,
    .users-page input,
    .users-page select,
    .users-page textarea,
    .profile-page input,
    .profile-page select,
    .profile-page textarea,
    .details-page input,
    .details-page select,
    .details-page textarea {
        font-size: 16px !important;
    }

    /* Don't force full-width on compact / icon action buttons */
    .admin-main-content .btn.btn-sm,
    .admin-main-content .btn-action,
    .admin-main-content .btn-action-details,
    .admin-main-content .btn-action-delete,
    .admin-main-content .action-buttons .btn,
    .admin-main-content .status-buttons .btn,
    .admin-main-content .header-actions .btn,
    .admin-page .header-actions .btn,
    .users-page .header-actions .btn,
    .details-page .header-actions .btn {
        width: auto;
    }

    .admin-main-content .header-actions,
    .admin-page .header-actions,
    .users-page .header-actions,
    .details-page .header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .admin-main-content .header-actions .btn,
    .admin-page .header-actions .btn,
    .users-page .header-actions .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        justify-content: center;
    }

    /* Pagination */
    .pagination-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem !important;
        text-align: center;
    }

    .pagination-bar .btn {
        width: 100%;
        justify-content: center;
    }

    /* Modals: better fit on small screens */
    .modal-overlay {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .preview-modal,
    .image-preview-modal,
    .edit-modal,
    .modal-dialog,
    .force-logout-dialog {
        max-width: 100% !important;
        width: 100%;
        max-height: min(92vh, 100%);
        border-radius: 16px 16px 0 0 !important;
        margin: 0;
    }

    .preview-pdf-frame iframe,
    .pdf-preview-iframe {
        height: 55vh !important;
    }
}

@media (max-width: 480px) {
    .admin-page,
    .users-page,
    .profile-page,
    .create-user-page {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .details-page .container-fluid {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .admin-main-content .header-actions .btn,
    .admin-page .header-actions .btn,
    .users-page .header-actions .btn {
        flex: 1 1 100%;
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem;
    }

    .details-page .status-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .details-page .status-buttons .btn {
        width: 100%;
        min-width: 0;
        font-size: 0.78rem;
        padding: 0.65rem 0.4rem;
    }

    .details-page .file-actions {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .details-page .file-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* Safe area under sticky header on notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .hb-header {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
}

/* ============================================================================
   Table pagination — one control for every table in the app
   ----------------------------------------------------------------------------
   Shared rather than scoped per page, so the audit log and any future table look
   and behave identically. Matched to HB.OpenAcct so the two bank apps agree.

   Note for anyone adding rules for this: admin-shared.css loads BEFORE the scoped
   bundles, and a scoped selector carries an extra [b-hash] attribute, so a copy of
   any of these rules inside a *.razor.css would silently win. Keep them here only.
   ============================================================================ */

.pagination-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid #eef0f3;
    background: #fbfcfd;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* `button.page-nav` matches the specificity of the global 44px touch-target rule above, which would
   otherwise stretch these into squares wide enough to wrap the row on a phone. */
button.page-nav,
button.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.55rem;
    background: #fff;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

button.page-nav:hover:not(:disabled),
button.page-btn:hover:not(:disabled) {
    border-color: #003d7a;
    color: #003d7a;
    background: #f0f5ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 61, 122, 0.12);
}

button.page-nav:active:not(:disabled),
button.page-btn:active:not(:disabled) { transform: translateY(0); }

button.page-nav:disabled,
button.page-btn:disabled { opacity: 0.45; cursor: not-allowed; }

button.page-btn.active {
    background: #003d7a;
    border-color: #003d7a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 61, 122, 0.3);
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.25rem;
    color: #6c757d;
    font-weight: 700;
}

.pagination-info {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .pagination-bar { gap: 0.5rem; padding: 0.85rem 1rem; }
    .pagination-controls { gap: 0.25rem; }

    /* Numbers first on their own row; the arrows sit under them so neither wraps mid-group. */
    .page-numbers {
        gap: 0.2rem;
        order: -1;
        width: 100%;
        justify-content: center;
    }

    button.page-nav,
    button.page-btn {
        min-width: 2.1rem;
        min-height: 2.1rem;
        height: 2.1rem;
        font-size: 0.85rem;
    }
}