/* ForTrust EUDI admin polish on top of django-jazzmin AdminLTE.
 *
 * Loaded via JAZZMIN_SETTINGS["custom_css"] = "admin/fortrust-admin.css".
 * Mirrors the wallet's Material-You-ish indigo accent and tightens
 * a few jazzmin defaults that read busy on a wallet provider's
 * operator dashboard (long credential / wallet-unit lists). */

/* Brand wordmark — slightly tighter letter-spacing, modern look. */
.main-header .navbar-brand,
.main-header .brand-link,
.brand-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Inter", "Sora", Roboto, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Make the indigo navbar a touch more "ForTrust" by deepening the
 * brand-area color a notch — easier on the eyes than the stock
 * AdminLTE indigo at 100% saturation. */
.bg-indigo,
.brand-link.bg-indigo,
.main-sidebar.sidebar-dark-indigo .brand-link {
    background-color: #3f3d8c !important;
}
.navbar-indigo {
    background-color: #4845a8 !important;
}

/* Section headers in the index page — slightly more contrast +
 * better whitespace so apps don't visually merge into each other. */
.app-list .app-content,
.app-list .module {
    margin-bottom: 1.5rem !important;
}
.app-list .module > h2,
.dashboard .module > h2 {
    background: #3f3d8c !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

/* Tabular list rows — denser, easier to scan when you have 50+ creds. */
table.table tbody tr td,
.results table tbody tr td {
    padding: 0.45rem 0.55rem !important;
}

/* "Add / Change" pill buttons on the dashboard — softer, smaller. */
.app-list .addlink,
.app-list .changelink {
    font-size: 0.8rem !important;
    padding: 2px 8px !important;
}

/* Modal Z-index over the jazzmin sidebar — fixes related-modal
 * appearing behind the sticky sidebar when navigation_expanded=False. */
.related-modal.modal {
    z-index: 1080 !important;
}

/* Compact status badges (jazzmin renders them too tall by default). */
.changelist .status,
.changelist .boolean-icon {
    line-height: 1 !important;
}

/* ── Sidebar contrast fix (AdminLTE 4 / jazzmin 3.x class names) ─────
 * Jazzmin 3.x ships with AdminLTE 4 + Bootstrap 5.3, which renamed
 * the sidebar class from `.main-sidebar` to `.app-sidebar` and the
 * nav container from `.nav-sidebar` to `.sidebar-menu`. The dark-*
 * variant CSS still ships with grey-ish text colors that are
 * unreadable on the bg-body-tertiary backdrop. Force white text on
 * the entire sidebar — both legacy and current class names — and
 * bump the icons / section headers to high-opacity white too.
 */

/* Catch-all — every anchor and label inside the sidebar shell */
.app-sidebar,
.app-sidebar *,
.main-sidebar,
.main-sidebar * {
    color: #ffffff !important;
}
.app-sidebar a,
.app-sidebar a:hover,
.app-sidebar a:focus,
.main-sidebar a,
.main-sidebar a:hover,
.main-sidebar a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Specific tweaks (cleaner hover + active-row highlight) */
.app-sidebar .sidebar-menu .nav-link:hover,
.app-sidebar .nav-sidebar .nav-link:hover,
.main-sidebar .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}
.app-sidebar .sidebar-menu .nav-link.active,
.app-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .nav-link.active {
    background-color: #5d5ac7 !important;
    color: #ffffff !important;
}

/* Section headers (e.g. app-name banners) — slightly toned, uppercase */
.app-sidebar .nav-header,
.app-sidebar .sidebar-menu .nav-header,
.main-sidebar .nav-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.75) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem 0.25rem !important;
}

/* Icons stay slightly dimmer so labels lead the visual hierarchy */
.app-sidebar .nav-icon,
.app-sidebar i,
.main-sidebar .nav-icon,
.main-sidebar i {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Brand wordmark (top-left) and user-panel name */
.app-sidebar .sidebar-brand,
.app-sidebar .sidebar-brand *,
.app-sidebar .brand-link,
.app-sidebar .brand-link * {
    color: #ffffff !important;
}

/* Login page — center + reduce visual noise. */
.login-page {
    background: linear-gradient(135deg, #2d2b5e 0%, #1a193d 100%) !important;
}
.login-box .card,
.login-box-msg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
    border-radius: 12px !important;
}

/* Code / monospace fields (JWTs, JSON metadata) — readable font. */
textarea.vLargeTextField,
code,
pre {
    font-family: ui-monospace, "SF Mono", "Cascadia Code",
        "JetBrains Mono", Menlo, monospace !important;
    font-size: 0.85rem;
}

/* ── Mobile / responsive (< 768px) ────────────────────────────────────
 * AdminLTE 4 + jazzmin 3.x ship with Bootstrap-5 responsive utilities
 * but the default dashboard layout still puts the module list in a
 * narrow column on phones, which makes module headers wrap one-char
 * per line ("I/d/e/n/t/i/t/y") and tables overflow off-screen.
 * Tighten the breakpoint behaviour: stack modules vertically, scroll
 * tables, expand h2 to full width, and let the sidebar collapse
 * properly into the hamburger toggle. Tested on iPhone 13 & Pixel 7
 * widths (390-412 px).
 */
@media (max-width: 768px) {
    /* App list — single column, full width per module */
    .app-list,
    .dashboard,
    #content-main,
    #content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        margin: 0 !important;
    }
    .app-list .module,
    .dashboard .module,
    .module {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box;
        overflow-x: auto;
    }

    /* Module headers — full width, normal word wrap, smaller padding */
    .app-list .module > h2,
    .dashboard .module > h2,
    .module > h2,
    .module caption {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        writing-mode: horizontal-tb !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        box-sizing: border-box;
    }

    /* Tables — horizontal scroll instead of overflow */
    .module table,
    table.results,
    .changelist-results table {
        display: block;
        overflow-x: auto;
        width: 100% !important;
        white-space: nowrap;
    }
    .module table tbody tr td,
    .module table tbody tr th {
        white-space: normal;
        word-break: break-word;
    }

    /* Smaller add/change pill buttons on mobile */
    .app-list .addlink,
    .app-list .changelink {
        font-size: 0.75rem !important;
        padding: 2px 6px !important;
    }

    /* Sidebar — let AdminLTE's built-in collapse take over.
     * Don't force a width here; just make sure our color overrides
     * still apply when the offcanvas drawer is open. */
    .app-sidebar.sidebar-open,
    .app-sidebar:not(.sidebar-collapse) {
        width: 80vw !important;
        max-width: 320px !important;
    }

    /* Header brand wordmark — shorter to leave room for hamburger */
    .brand-link .brand-text {
        font-size: 0.95rem !important;
    }

    /* Form rows — stack labels above inputs (Django default is side-by-side
     * which breaks on phones). */
    .form-row .field-box {
        display: block !important;
        width: 100% !important;
    }
    .form-row label {
        display: block !important;
        margin-bottom: 4px !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea,
    select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Recent actions side panel — push below main content instead of
     * fighting for narrow screen real estate */
    #content-related,
    .module.recent-actions-module {
        float: none !important;
        width: 100% !important;
        margin-top: 16px !important;
    }
}

/* Very small phones (< 400px — iPhone SE etc) */
@media (max-width: 400px) {
    .brand-link .brand-text {
        font-size: 0.85rem !important;
    }
    .module > h2 {
        font-size: 0.85rem !important;
        padding: 6px 10px !important;
    }
    .app-list .addlink,
    .app-list .changelink {
        font-size: 0.7rem !important;
        padding: 1px 4px !important;
    }
}

/* ── Changelist views (Django admin lists) ─────────────────────────
 * Django's stock /admin/<app>/<model>/ pages use templates that
 * predate responsive design. The viewport renders OK on desktop but
 * collapses to tiny grey-on-white text on phones. Force readable
 * font sizes + higher contrast + table horizontal scroll on mobile.
 */
@media (max-width: 768px) {
    /* Body / wrapper — force usable base size */
    body, .content {
        font-size: 15px !important;
    }

    /* Page heading + breadcrumbs */
    #content h1,
    .content-header h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin: 0 0 12px 0 !important;
        color: #0f172a !important;
    }
    div.breadcrumbs {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
    }

    /* Changelist controls (search box, filters, actions row) */
    #changelist {
        padding: 0 !important;
    }
    #changelist-search {
        padding: 12px 8px !important;
        margin-bottom: 12px !important;
    }
    #changelist-search input[type="text"] {
        font-size: 16px !important; /* prevent iOS zoom-on-focus */
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-radius: 8px !important;
    }
    #changelist-search input[type="submit"] {
        margin-top: 8px !important;
        padding: 10px 16px !important;
        font-size: 0.95rem !important;
    }

    /* Filter sidebar — collapse to top, full width */
    #changelist-filter {
        float: none !important;
        width: 100% !important;
        position: static !important;
        margin: 0 0 12px 0 !important;
        font-size: 0.95rem !important;
    }
    #changelist-filter h2,
    #changelist-filter h3 {
        font-size: 0.95rem !important;
        padding: 8px 12px !important;
    }
    #changelist-filter li {
        padding: 4px 0 !important;
    }

    /* Action bar */
    .actions {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }
    .actions select {
        font-size: 16px !important;
        padding: 8px !important;
    }

    /* Results table — bigger text + contrast */
    table#result_list,
    .results table {
        font-size: 0.9rem !important;
        width: 100% !important;
    }
    table#result_list thead th {
        font-size: 0.85rem !important;
        padding: 8px 6px !important;
    }
    table#result_list tbody td,
    table#result_list tbody th {
        padding: 8px 6px !important;
        color: #0f172a !important;
    }
    table#result_list a {
        color: #2e5ae6 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    /* Pagination */
    .paginator {
        font-size: 0.95rem !important;
        padding: 10px !important;
        text-align: center;
    }

    /* Change form labels — readable */
    .form-row label {
        font-weight: 600 !important;
        color: #0f172a !important;
        font-size: 0.95rem !important;
    }
    .help, .help-tooltip, p.help {
        font-size: 0.85rem !important;
        color: #475569 !important;
    }

    /* Submit row buttons — full width on mobile */
    .submit-row {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .submit-row input,
    .submit-row a {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
        font-size: 1rem !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
}

/* Default-mode dark text fallback — defensive override for any
 * page where jazzmin's `data-bs-theme` autoswitch + Django's
 * default white background combine to make text invisibly light.
 * Applies only to MAIN content area, never the sidebar. */
.app-content,
.main-content,
#content,
.content {
    color: #0f172a;
}
.app-content h1, .app-content h2, .app-content h3,
.content h1, .content h2, .content h3,
#content h1, #content h2, #content h3 {
    color: #0f172a;
}