/* ==========================================================================
   BSJalan UI polish
   Loaded after the theme's own stylesheets, so it refines the existing look
   rather than replacing it. Everything here is presentational only.
   ========================================================================== */

:root {
    --bsj-navy:      #313a46;   /* the theme's existing dark tone */
    --bsj-primary:   #727cf5;
    --bsj-border:    #e7e9f2;
    --bsj-muted:     #8a94a6;
    --bsj-surface:   #f7f8fc;
    --bsj-radius:    8px;
}

/* ---------- Page rhythm ---------- */

.content {
    padding-top: 20px !important;
}

.card {
    border: 1px solid var(--bsj-border);
    border-radius: var(--bsj-radius);
    box-shadow: 0 1px 2px rgba(49, 58, 70, .04);
    margin-bottom: 18px;
    transition: box-shadow .15s ease;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(49, 58, 70, .07);
}

.card-body {
    padding: 18px 20px;
}

.card-body.py-2 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ---------- Headings ---------- */

.page-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--bsj-navy);
}

.page-title .title_icon {
    color: var(--bsj-primary);
    margin-right: 4px;
}

.header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bsj-navy);
}

/* ---------- Forms ---------- */

.form-label,
.col-form-label {
    font-weight: 500;
    color: #4b5563;
}

.form-control,
.form-select {
    border-color: var(--bsj-border);
    border-radius: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bsj-primary);
    box-shadow: 0 0 0 3px rgba(114, 124, 245, .12);
}

/* Filter bars read as one group rather than loose controls. */
.card-body .row.g-2 > [class*="col-"] .form-label.small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 3px !important;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: transform .08s ease, box-shadow .15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-rounded {
    border-radius: 20px;
}

.btn i {
    margin-right: 3px;
}

.btn-sm i {
    margin-right: 2px;
}

/* ---------- Tables ---------- */

.table {
    font-size: 13px;
}

.table > thead > tr > th {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: none;
    white-space: nowrap;
}

.table > tbody > tr {
    transition: background-color .1s ease;
}

.table > tbody > tr:hover {
    background-color: var(--bsj-surface) !important;
}

.table > tbody > tr > td {
    vertical-align: middle;
    border-color: var(--bsj-border);
}

.table tfoot tr td {
    border-top: 2px solid var(--bsj-border);
}

/* Wide tables scroll inside their own container instead of the page. */
.table-responsive,
.table-responsive-sm {
    overflow-x: auto;
}

/* ---------- Stat cards ---------- */

.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info,
.card.bg-dark {
    border: none;
}

.card.bg-primary h6,
.card.bg-success h6,
.card.bg-danger h6,
.card.bg-warning h6,
.card.bg-info h6,
.card.bg-dark h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}

.card.bg-primary h3, .card.bg-primary h4,
.card.bg-success h3, .card.bg-success h4,
.card.bg-danger h3,  .card.bg-danger h4,
.card.bg-warning h3, .card.bg-warning h4,
.card.bg-info h3,    .card.bg-info h4,
.card.bg-dark h3,    .card.bg-dark h4 {
    font-weight: 600;
    letter-spacing: -.5px;
}

/* ---------- Badges ---------- */

.badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2px;
    padding: .35em .6em;
    border-radius: 4px;
}

/* ---------- Sidebar ---------- */

.side-nav-link {
    border-radius: 6px;
    margin: 1px 6px;
    transition: background-color .12s ease;
}

.side-nav-link:hover {
    background-color: rgba(114, 124, 245, .08);
}

.side-nav-item .side-nav-link i {
    margin-right: 8px;
}

/* ---------- Empty states ---------- */

.empty_box {
    padding: 32px 16px;
    color: var(--bsj-muted);
}

.empty_box img {
    opacity: .55;
}

/* ---------- DataTables ---------- */

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--bsj-border);
    border-radius: 6px;
    padding: 4px 8px;
}

/* The row-count box needs room for three digits and the dropdown arrow —
   too narrow and the number sits on top of its own border. */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--bsj-border);
    border-radius: 6px;
    padding: 4px 26px 4px 10px;
    min-width: 78px;
    height: 34px;
    line-height: 1.4;
    background-color: #fff;
    vertical-align: middle;
}

.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 12px;
    color: var(--bsj-muted);
}

.pagination .page-link {
    border-radius: 6px;
    margin: 0 2px;
    border-color: var(--bsj-border);
}

/* ---------- Modals ---------- */

.modal-content {
    border: none;
    border-radius: var(--bsj-radius);
}

.modal-header {
    border-bottom: 1px solid var(--bsj-border);
}

/* ---------- Tabs ---------- */

.nav-tabs.nav-bordered .nav-link {
    font-weight: 500;
    color: var(--bsj-muted);
    border-bottom-width: 2px;
}

.nav-tabs.nav-bordered .nav-link.active {
    color: var(--bsj-primary);
    border-bottom-color: var(--bsj-primary);
}

/* ---------- Small screens ---------- */

@media (max-width: 767px) {
    .card-body            { padding: 14px; }
    .page-title           { font-size: 15px; }
    .table                { font-size: 12px; }

    /* Title-bar action buttons should not crowd the heading. */
    .alignToTitle.float-end {
        float: none !important;
        display: block;
        margin-top: 10px !important;
    }
}

/* ---------- Print ---------- */

@media print {
    /* Chrome (and everyone else) otherwise prints the whole chrome of the app.
       Applies to every page, so any screen printed from the browser's own menu
       comes out as just its content. Pages that isolate a single element for
       printing add their own rules on top of this. */
    .leftside-menu,
    .navbar-custom,
    .topnav-navbar,
    .footer,
    .side-nav,
    .side-nav-item,
    .menu-arrow,
    .button-menu-mobile,
    .notification-list,
    .d-print-none {
        display: none !important;
    }

    /* The content sits beside the sidebar; with the sidebar gone it should
       take the full width rather than leave a gap where it used to be. */
    .content-page,
    .wrapper,
    .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .content {
        padding-top: 0 !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    /* Chrome drops table header colours unless this is set. */
    .table > thead > tr > th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* A .table-responsive scrolls on screen; on paper there is nothing to
       scroll, so let it spill onto the sheet instead of clipping the columns
       that were off to the right. */
    .table-responsive,
    .table-responsive-sm,
    .dataTables_wrapper {
        overflow: visible !important;
    }

    /* Nothing on a printed page is clickable, so drop the link styling. */
    a[href]:after { content: none !important; }
}