/* ============================================================
   PAPERLESS CONTROL PLANE
   Custom CSS
   Bootstrap 5 provides the main UI styling.
   This file controls the application shell.
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --paperless-navbar-height: 56px;
    --paperless-sidebar-width: 280px;
    --paperless-sidebar-transition: 250ms ease;
}


/* ============================================================
   PAGE
   ============================================================ */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
}


/* ============================================================
   TOP NAVBAR
   ============================================================ */

#topNavbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--paperless-navbar-height);
    min-height: var(--paperless-navbar-height);

    z-index: 1050;
}


/* The logo in the top bar: 36px high in the 56px bar (the file is trimmed and transparent). */
#topBrand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0.5rem;
}

#topBrand img {
    display: block;
    height: 36px;
    width: auto;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

#mainContent {
    width: 100%;

    min-height: 100vh;

    padding-top: var(--paperless-navbar-height);

    box-sizing: border-box;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

#systemSidebar {
    position: fixed !important;

    top: var(--paperless-navbar-height) !important;
    left: 0 !important;
    bottom: 0 !important;

    width: var(--paperless-sidebar-width) !important;
    

    z-index: 1040 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: var(--bs-body-bg);

    border-right: var(--bs-border-width) solid var(--bs-border-color);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    transform: translateX(-100%) !important;

    transition: transform var(--paperless-sidebar-transition);

    overflow-x: hidden;
    overflow-y: auto;

    box-sizing: border-box;
}


/* ============================================================
   SIDEBAR VISIBLE
   ============================================================ */

#systemSidebar.show {
    transform: translateX(0) !important;
}


/* ============================================================
   SIDEBAR LINKS
   ============================================================ */

#systemSidebar .list-group {
    background-color: transparent;
}

#systemSidebar .list-group-item {
    color: var(--bs-body-color);

    background-color: transparent;

    border: 0;

    border-radius: var(--bs-border-radius);

    margin-bottom: 2px;

    text-align: left;
}

#systemSidebar .list-group-item:hover {
    color: var(--bs-body-color);

    background-color: var(--bs-secondary-bg);
}

#systemSidebar .list-group-item:focus {
    color: var(--bs-body-color);

    background-color: var(--bs-secondary-bg);
}


/* ============================================================
   SIDEBAR BACKDROP
   ============================================================ */

#sidebarBackdrop {
    position: fixed !important;

    top: var(--paperless-navbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 1030 !important;

    background-color: rgba(0, 0, 0, 0.25);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--paperless-sidebar-transition),
        visibility var(--paperless-sidebar-transition);
}

#sidebarBackdrop.show {
    opacity: 1;

    visibility: visible;
}


/* ============================================================
   DARK MODE
   ============================================================ */

[data-bs-theme="dark"] #systemSidebar {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 576px) {
    :root {
        --paperless-sidebar-width: 85vw;
    }
}
.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: #3958a7;
    color: #fff;
    font-weight: 700;
    vertical-align: middle;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar--small { width: 30px; height: 30px; font-size: .85rem; }
.account-avatar--large { width: 96px; height: 96px; font-size: 2rem; }
.profile-image-frame { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; background: #e9ecef; overflow: hidden; border-radius: .5rem; display: flex; align-items: center; justify-content: center; color: #6c757d; }
.profile-image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   DASHBOARDS (Release 20; see docs/analytics.md)
   Chart colours by role. The eight series colours are a fixed order validated for colour-vision
   deficiency (adjacent pairs); never add a ninth: fold the tail into "Other".
   ============================================================ */

.viz-root {
    --viz-surface: #ffffff;
    --viz-grid: #e1e0d9;
    --viz-axis: #c3c2b7;
    --viz-muted: #6c6a64;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;
}
[data-bs-theme="dark"] .viz-root {
    --viz-surface: #212529;
    --viz-grid: #2c2c2a;
    --viz-axis: #383835;
    --viz-muted: #898781;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
}
.dashboard-figure { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.dashboard-chart { position: relative; height: 220px; }
.dashboard-widget.htmx-request { opacity: .6; }
.dashboard-table { font-variant-numeric: tabular-nums; }
.dashboard-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }
.dashboard-key[data-slot="1"] { background: var(--series-1); }
.dashboard-key[data-slot="2"] { background: var(--series-2); }
.dashboard-key[data-slot="3"] { background: var(--series-3); }
.dashboard-key[data-slot="4"] { background: var(--series-4); }
.dashboard-key[data-slot="5"] { background: var(--series-5); }
.dashboard-key[data-slot="6"] { background: var(--series-6); }
.dashboard-key[data-slot="7"] { background: var(--series-7); }
.dashboard-key[data-slot="8"] { background: var(--series-8); }



/* ---------------------------------------------------------------------------------------------------------------
   The workbench's kanban and calendar views (Release 26)
   --------------------------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* A board and a calendar need the width: the queue takes the rest of the row and the pane drops below it. */
    #workbench:not([data-view="list"]) .wb-rail { flex: 0 0 auto; width: 16.66666667%; }
    #workbench:not([data-view="list"]) .wb-queue-col { flex: 0 0 auto; width: 83.33333333%; }
    #workbench:not([data-view="list"]) .wb-pane-col { flex: 0 0 auto; width: 100%; }
}
/* The kanban board fills the width beside the rail: the columns are equal, and the pane (which a board has no use
   for: its cards open in a dialog) is gone. */
@media (min-width: 992px) {
    #workbench[data-view="kanban"] .wb-pane-col { display: none; }
}
.wb-board { display: grid; grid-template-columns: repeat(6, minmax(13rem, 1fr)); gap: 0.75rem; overflow-x: auto; align-items: stretch; }
.wb-column { min-height: 60vh; background: var(--bs-body-bg); }
.wb-column .wb-dropzone { flex: 1 1 auto; }
.wb-card[draggable="true"] { cursor: grab; }
.wb-card.wb-dragging { opacity: 0.45; }
.wb-column.wb-target { outline: 2px dashed var(--bs-primary); outline-offset: -2px; }
.wb-column.wb-over { background: var(--bs-primary-bg-subtle); }
.wb-column.wb-dimmed { opacity: 0.55; }
.wb-calendar { table-layout: fixed; min-width: 42rem; }
.wb-calendar .wb-day { height: 7rem; vertical-align: top; overflow: auto; }
.wb-calendar .wb-day-outside { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.wb-calendar .wb-day-today { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.wb-entry .btn-link { font-size: 0.8rem; }

/* The top bar clock uses the system's own font; tabular figures keep the digits from jittering as they change. */
#clockTime { font-variant-numeric: tabular-nums; }