/* =============================================================================
   INCASO COMPONENTS — Reusable, general UI layer
   -----------------------------------------------------------------------------
   Loaded globally on every AdminLTE page (see vendor/adminlte/master.blade.php).

   Purpose:
   - Standardize modal popups (uniform look, no overlap/clipping).
   - Provide general, reusable component classes (buttons, badges) that work
     ANYWHERE on the page — including inside modals, which render outside the
     `.invo-page` scope where the design-system tokens live.

   Design tokens mirror invoto-design-system.css so the look is identical.
   These class names are custom (not Bootstrap/AdminLTE names) and therefore
   safe to declare at the global scope without clashing with framework styles.
   ============================================================================= */

:root {
    --ic-primary: #2563EB;
    --ic-primary-dark: #1D4ED8;
    --ic-primary-soft: #EFF6FF;
    --ic-success: #16A34A;
    --ic-success-soft: #F0FDF4;
    --ic-warning: #F59E0B;
    --ic-warning-soft: #FFFBEB;
    --ic-danger: #DC2626;
    --ic-danger-soft: #FEF2F2;
    --ic-text: #111827;
    --ic-text-muted: #6B7280;
    --ic-text-light: #9CA3AF;
    --ic-border: #E5E7EB;
    --ic-border-light: #F3F4F6;
    --ic-bg-soft: #F8FAFC;
    --ic-r-sm: 6px;
    --ic-r-md: 8px;
    --ic-r-lg: 12px;
    --ic-r-xl: 16px;
    --ic-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --ic-modal-shadow: 0 25px 60px rgba(15, 29, 53, .18);
    --ic-modal-brand: linear-gradient(135deg, #2e507f 0%, #2c5185 50%, #3c6091 100%);
    --c-border: #E5E7EB;
}

/* =============================================================================
   1. MODAL STACKING / OVERLAP NOTE
   -----------------------------------------------------------------------------
   The modal z-index scale is owned by finance_style.css (backdrop 1040,
   modal 1050, above the 1000 nav/sidebar) and set with !important, so it is
   intentionally NOT redefined here. The structural fix for "modal tumpang
   tindih" (modals clipped/positioned by an ancestor .content-wrapper) is to
   render every modal in the body-level @stack('modals') — see the <x-modal>
   component and the migrated pages.

   The only rule kept here is a smooth open transition (visually neutral).
   ============================================================================= */
.modal.fade .modal-dialog {
    transition: transform .2s ease-out;
}

/* Authoritative stacking fix: when any modal is open, no layout chrome may sit
   above the backdrop. This neutralizes stacking contexts on the AdminLTE shell
   so body-level modals (rendered in @stack('modals')) always overlay the whole
   page — navbar and sidebar included — instead of overlapping it. */
body.modal-open .wrapper,
body.modal-open .main-header,
body.modal-open nav.main-header,
body.modal-open .navbar,
body.modal-open .main-sidebar,
body.modal-open .content-wrapper,
body.modal-open .control-sidebar {
    z-index: auto !important;
}

/* =============================================================================
   2. STANDARDIZED MODAL — `.invo-modal`
   -----------------------------------------------------------------------------
   Add `invo-modal` to any `.modal.fade` root to get the unified Incaso look.
   Works with standard Bootstrap 4 markup:
     .modal-dialog > .modal-content > .modal-header/.modal-body/.modal-footer
   ============================================================================= */
.invo-modal .modal-dialog {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}
.invo-modal .modal-content {
    border: none;
    border-radius: var(--ic-r-xl);
    box-shadow: var(--ic-modal-shadow);
    overflow: hidden;
}
.invo-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--ic-modal-brand);
    border-bottom: none;
}
.invo-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.invo-modal .modal-title i,
.invo-modal .modal-title .modal-title-icon {
    color: #fff;
    font-size: 16px;
}
/* Circular close button (supports both Bootstrap 4 `.close` and custom markup) */
.invo-modal .modal-header .close,
.invo-modal .modal-header .btn-close,
.invo-modal .modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
    text-shadow: none;
}
.invo-modal .modal-header .close:hover,
.invo-modal .modal-header .btn-close:hover,
.invo-modal .modal-close:hover {
    background: rgba(255, 255, 255, .30);
    color: #fff;
    opacity: 1;
}

/* Unify the custom share-invoice modal header with the standard branded header */
.invo-modal .share-modal-header {
    background: var(--ic-modal-brand);
    padding: 20px 24px;
}
.invo-modal .share-modal-title-text {
    color: #fff;
}
.invo-modal .share-modal-title-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.invo-modal .share-modal-close {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.invo-modal .share-modal-close:hover {
    background: rgba(255, 255, 255, .30);
    color: #fff;
}

.invo-modal .modal-body {
    padding: 22px 24px;
    font-size: 14px;
    color: var(--ic-text);
}
.invo-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--ic-border-light);
}
.invo-modal .modal-footer > * {
    margin: 0;
}
/* Form fields inside modals (modals live outside the .invo-page scope) */
.invo-modal .form-group {
    margin-bottom: 16px;
}
.invo-modal .form-control {
    border-radius: 8px !important;
    border: 1px solid var(--c-border) !important;
}
.invo-modal .form-control:focus {
    border-color: var(--ic-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

/* Sizing helpers */
.invo-modal.invo-modal-sm .modal-dialog { max-width: 420px; }
.invo-modal.invo-modal-lg .modal-dialog { max-width: 800px; }

@media (max-width: 576px) {
    .invo-modal .modal-header,
    .invo-modal .modal-body,
    .invo-modal .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
    .invo-modal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .invo-modal .modal-footer > * {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   3. GENERAL REUSABLE BUTTONS (unscoped — usable anywhere, incl. modals)
   -----------------------------------------------------------------------------
   Mirror the design-system definitions so pages/modals outside `.invo-page`
   render identical buttons. Inside `.invo-page` the scoped rules match these
   values, so there is no visual change.
   ============================================================================= */
.btn-primary-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ic-primary);
    color: #fff;
    border: 1px solid var(--ic-primary);
    padding: 10px 18px;
    border-radius: var(--ic-r-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-primary-solid:hover {
    background: var(--ic-primary-dark);
    border-color: var(--ic-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
    text-decoration: none;
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: var(--ic-text);
    border: 1px solid var(--ic-border);
    padding: 10px 18px;
    border-radius: var(--ic-r-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-outline:hover {
    border-color: var(--ic-primary);
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    text-decoration: none;
}
.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ic-danger);
    color: #fff;
    border: 1px solid var(--ic-danger);
    padding: 10px 18px;
    border-radius: var(--ic-r-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-danger-solid:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    text-decoration: none;
}
.btn-primary-solid.btn-sm,
.btn-outline.btn-sm,
.btn-danger-solid.btn-sm {
    padding: 7px 14px;
    font-size: 12px;
}
.btn-primary-solid.btn-block,
.btn-outline.btn-block,
.btn-danger-solid.btn-block {
    width: 100%;
}

/* =============================================================================
   4. GENERAL REUSABLE BADGES (unscoped)
   ============================================================================= */
.badge-soft {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-soft-primary { background: var(--ic-primary-soft); color: var(--ic-primary); }
.badge-soft-success { background: var(--ic-success-soft); color: #166534; }
.badge-soft-warning { background: var(--ic-warning-soft); color: #92400E; }
.badge-soft-danger { background: var(--ic-danger-soft); color: #991B1B; }

/* =============================================================================
   5. SHARE-CHANNEL BRAND COLORS (reusable — replaces repeated inline styles)
   -----------------------------------------------------------------------------
   Exact same values previously inlined on `.share-channel-icon`, so the look
   is unchanged. Apply alongside `.share-channel-icon`.
   ============================================================================= */
.share-channel-icon.channel-whatsapp { background: rgba(37, 211, 102, .12); color: #25D366; }
.share-channel-icon.channel-telegram { background: rgba(0, 136, 204, .12); color: #0088cc; }
.share-channel-icon.channel-email    { background: rgba(234, 67, 53, .12); color: #EA4335; }

/* =============================================================================
   6. SMALL GENERAL TEXT UTILITIES (exact values from common inline styles)
   ============================================================================= */
.text-warning-strong { color: var(--ic-warning); font-weight: 600; }
.text-danger-strong  { color: var(--ic-danger); font-weight: 600; }

/* Common flex layout helpers (exact values from repeated inline styles) */
.hstack-wrap   { display: flex; gap: 8px; flex-wrap: wrap; }
.hstack-center { display: flex; align-items: center; gap: 10px; }

.cursor-default { cursor: default; }

/* Square image thumbnails (exact values from repeated inline styles) */
.img-thumb-30 { width: 30px; height: 30px; object-fit: cover; }
.img-thumb-40 { width: 40px; height: 40px; object-fit: cover; }

/* =============================================================================
   7. GLOBAL FORM CONTROLS — uniform inputs, textareas, selects, Select2
   -----------------------------------------------------------------------------
   Mirrors the design-system look (which is scoped to .invo-page) but at the
   GLOBAL scope, so text inputs / textareas / dropdowns are consistent on every
   page. Inside .invo-page the design-system rules (with !important) still win —
   the values are identical, so there is no visual difference there.
   Uses the globally-defined --ic-* tokens (the --c-* tokens only exist inside
   .invo-page, so they can't be used here).
   ============================================================================= */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    border-radius: var(--ic-r-md);
    border: 1px solid var(--ic-border);
    background-color: #fff;
    font-size: 14px;
    color: var(--ic-text);
    padding: 9px 12px;
    height: auto;
    min-height: 40px;
    font-family: inherit;
    font-weight: 400;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--ic-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}
.form-control[readonly] {
    background: var(--ic-bg-soft);
}
.form-control.is-invalid {
    border-color: var(--ic-danger);
}
textarea.form-control {
    min-height: 60px;
}
.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--ic-text-light);
    opacity: 1;
}
/* Size variants stay consistent */
.form-control.form-control-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
}
.form-control.form-control-lg {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 15px;
}

/* Select2 single-select widget — match the form-control look globally.
   (The dropdown panel is already styled globally in invoto-design-system.css.) */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-r-md);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding: 0 12px;
    color: var(--ic-text);
    font-size: 14px;
    font-weight: 400;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--ic-text-light);
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 8px;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--ic-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
/* Multi-select height should grow naturally */
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-r-md);
}

/* Dropdown results: scroll INSIDE the list only — never chain to the page.
   The dropdown is appended to <body>, so this rule is intentionally global. */
.select2-container .select2-results > .select2-results__options {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}