/*
    Console glue: the handful of things the layout needs that AdminLTE does
    not provide. Everything structural (sidebar, header, content wrapper,
    responsive collapse) belongs to AdminLTE and is not restated here.
*/


/*
--------------------------
- Typography
--------------------------
*/

body {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
}

/*
    The console builds its toolbars, legends and several table cells out of
    bare <ul>/<li>, so the list marker is off by default and turned back on
    where a list is meant to read as one.
*/
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*
    Scoped to the content region on purpose. AdminLTE wraps each sidebar nav
    label in a <p>, so a bare `p` rule repaints the menu in this content
    colour and the labels vanish against the dark sidebar.
*/
.app-main p {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #444;
    margin-bottom: 0;
}


/*
--------------------------
- Preloader
--------------------------
*/

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

#preloader .loader {
    width: 40px;
    height: 40px;
    border: 3px solid #dee2e6;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: console-spin 0.8s linear infinite;
}

@keyframes console-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #preloader .loader {
        animation: none;
    }
}


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

/*
    AdminLTE leaves the sidebar scroll to the OverlayScrollbars plugin, which
    the console does not load; this is the native equivalent.
*/
.sidebar-wrapper {
    overflow-y: auto;
}

/*
    The brand is the wordmark on its own, with no text beside it, so it gets
    the height the row allows rather than the small leading-icon size.
*/
.sidebar-brand .brand-link {
    display: flex;
    justify-content: center;
    padding: .35rem .5rem;
}

/* a definite height: the flex parent is content-sized, so a percentage
   height on the image resolves to zero and the wordmark disappears */
.sidebar-brand .brand-image {
    width: auto;
    height: 40px;
}


/*
--------------------------
- Panel navigation
--------------------------
*/

/*
    While the next page is being fetched the content is dimmed rather than
    blanked, so the panel does not flash between two lists.
*/
.panel-loading .app-main {
    opacity: .6;
    transition: opacity .15s linear;
}


/*
--------------------------
- List tables
--------------------------
*/

/*
    The lists carry Bootstrap's `.table`, so the row shading, the hover state,
    the borders and the cell padding all come from the framework. Only two
    things are set here.

    Roomier columns: Bootstrap's default cell padding is .5rem on both axes,
    which runs adjacent columns together on the wider lists.
*/
.app-main .table {
    --bs-table-cell-padding-x: .75rem;
}

/*
    The promoter name and its priority swatch sit at opposite ends of the cell.
    The cell itself stays a table cell; the row is laid out by its contents.
*/
.promoter-name-cell > * {
    display: inline-block;
    vertical-align: middle;
}

.promoter-name-cell > a {
    margin-right: .5rem;
}


/*
    A faint column separator. Deliberately lighter than the row borders, so the
    rows stay the dominant grid line and the verticals only guide the eye down
    a column. Not `.table-bordered`, which boxes every cell at the full border
    weight. The last cell in a row is skipped so the table has no inner edge
    against its own outer border.
*/
.app-main .table > tbody > tr > *:not(:last-child) {
    border-right: var(--bs-border-width) solid rgba(var(--bs-emphasis-color-rgb), .08);
}

/*
    The dark header. `.bg-light` on the thead is repainted dark in layout2.css,
    but `.table` paints its own background onto each cell, which would cover
    that, so the colour is restated at cell level where it now has to sit.
*/
.app-main .table > thead.bg-light > tr > th {
    --bs-table-bg: #444;
    color: #fff;
}


/*
--------------------------
- Row actions
--------------------------
*/

/*
    The action controls sit directly in the cell rather than in a btn-group,
    because Blade gates them individually on the row's status and a group
    wrapper cannot span those conditionals.
*/
td .btn + .btn,
td .btn + form,
td a.btn + .btn {
    margin-left: .25rem;
}


/*
--------------------------
- Login
--------------------------
*/

/* AdminLTE's .login-page on the body does the centring */
.login-panel {
    width: 100%;
    max-width: 380px;
    margin: 1.5rem;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
}

.login-logo {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 14px;
}

.login-panel-msg {
    margin: 1.25rem 0 1.75rem;
    text-align: center;
    color: #6c757d;
    font-size: .95rem;
}

.login-field + .login-field {
    margin-top: 1rem;
}

.login-panel .form-label {
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
}

.login-panel .form-control {
    padding: .6rem .8rem;
    border-radius: 8px;
}

.login-submit {
    width: 100%;
    margin-top: 1.75rem;
    padding: .6rem;
    border-radius: 8px;
    font-weight: 600;
}

.login-panel .alert {
    border: 0;
    border-radius: 8px;
    font-size: .9rem;
}


/*
--------------------------
- Searchable selects
--------------------------
*/

/*
    Tom Select renders into a wrapper of its own, so the form-control sizing
    the console's forms expect has to be restated on it.
*/
.ts-wrapper {
    width: 100%;
}

.ts-wrapper.single .ts-control {
    background-image: none;
}