/*
 * SIL Connect — modern dashboard design layer.
 * Purely additive on top of the existing theme (style.css/responsive.css).
 * Loaded site-wide via assets/styleLink.blade.php.
 */

:root {
    --sc-primary: #481d63;
    --sc-primary-dark: #34123f;
    --sc-primary-light: #f4eff7;
    --sc-accent: #3ba23f;
    --sc-accent-dark: #328e36;
    --sc-danger: #dc3545;
    --sc-text: #1a1a2e;
    --sc-text-muted: #6b7280;
    --sc-border: #ecebf0;
    --sc-surface: #ffffff;
    --sc-surface-alt: #f7f6fa;
    --sc-radius-sm: 10px;
    --sc-radius-md: 14px;
    --sc-radius-lg: 20px;
    --sc-shadow-sm: 0 2px 8px rgba(20, 10, 30, 0.06);
    --sc-shadow-md: 0 8px 24px rgba(20, 10, 30, 0.08);
    --sc-space-xs: 8px;
    --sc-space-sm: 12px;
    --sc-space-md: 20px;
    --sc-space-lg: 32px;
}

/* ---------- Modernized cards used throughout dashboards ---------- */
.ps-widget,
.dashboard__content .ps-widget {
    border-radius: var(--sc-radius-lg) !important;
    box-shadow: var(--sc-shadow-md) !important;
    border: 1px solid var(--sc-border);
}

.dashboard_sidebar_list .sidebar_list_item a.-is-active,
.dashboard_sidebar_list .sidebar_list_item a:hover {
    background-color: var(--sc-primary) !important;
    color: #fff !important;
    border-radius: var(--sc-radius-sm);
}

.dashboard_sidebar_list .sidebar_list_item a.-is-active i,
.dashboard_sidebar_list .sidebar_list_item a:hover i {
    color: #fff !important;
}

/* ---------- Buttons ---------- */
.ud-btn.btn-thm,
.ud-btn.btn-dark {
    border-radius: var(--sc-radius-sm) !important;
}

/* ---------- Tables: safety net so nothing overflows on small screens ---------- */
.dashboard__content table,
.packages_table table {
    width: 100%;
}

.dashboard__content .table-responsive,
.packages_table.table-responsive,
.packages_table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Modals: never wider than the viewport ---------- */
.modal-dialog {
    max-width: min(500px, calc(100vw - 24px));
}

.modal-dialog.modal-lg {
    max-width: min(800px, calc(100vw - 24px));
}

.modal-dialog.modal-dialog-centered {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Mobile breakpoint (<= 991px) — dashboard layout hardening
   ========================================================= */
@media (max-width: 991.98px) {
    .dashboard__content {
        padding: var(--sc-space-md) var(--sc-space-sm) !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dashboard_content_wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 80px;
    }

    .dashboard__main {
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .dashboard.dashboard_wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* Any bare table becomes horizontally scrollable rather than overflowing the page */
    .dashboard__content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack md-grid columns on mobile inside dashboard content, forms included */
    .dashboard__content .row > [class*="col-md"]:not([class*="col-sm"]) {
        width: 100%;
    }

    .ps-widget {
        padding: var(--sc-space-md) !important;
    }
}

@media (max-width: 575.98px) {
    .dashboard__content {
        padding: var(--sc-space-sm) 10px !important;
    }

    .dashboard_content_wrapper {
        padding-top: 70px;
    }

    .ps-widget {
        padding: var(--sc-space-sm) !important;
    }
}