/* Show it is fixed to the top */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}

a {
    text-decoration: none;
    color: #337ab7;
}

a:hover {
    color: #23527c;
    text-decoration: underline;
}

:root {
    --navbar-height: 56px; /* approx height of the sticky top navbar; single source of truth */
    /* Brand color: one hex drives the navbar accent line and the sidebar
       active states in both themes (dark derivations in dark-mode.css).
       Overridable later per organisation by injecting a :root override. */
    --app-brand: #337ab7;
    --app-primary: var(--app-brand);
    --app-primary-hover: color-mix(in srgb, var(--app-brand) 75%, #000);
    --app-primary-subtle: color-mix(in srgb, var(--app-brand) 12%, transparent);
    --bs-focus-ring-color: color-mix(in srgb, var(--app-primary) 25%, transparent);
}

/* Brand accent line at the bottom edge of the top bar. Inset box-shadow
   instead of border so the navbar height stays exactly --navbar-height
   (the sidebar rail is positioned against it). */
.navbar.bg-dark {
    box-shadow: inset 0 -3px 0 var(--app-primary);
}

/*
 * Sidebar
 *
 * Rendered as a Bootstrap responsive offcanvas (`offcanvas-md offcanvas-start`):
 * a normal in-flow rail at >=768px, a slide-in drawer below 768px. Bootstrap
 * handles the show/hide, backdrop and focus trapping — no custom JS or
 * per-breakpoint width syncing required.
 */

.sidebar {
    /* Mobile: slide-in offcanvas drawer. The visible surface comes from the
       .bg-light on .offcanvas-header / .sidebar-inner (dark-mode.css remaps
       it for the dark theme); the offcanvas bg is matched to it so a short
       menu doesn't leave a differently-colored strip below .sidebar-inner. */
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-bg: #e9ecef;
    /* Light theme: darken the rail below the page default (#f8f9fa) so it
       reads as its own surface against the white content. Scoped here so
       content-area .bg-light panels keep Bootstrap's default. */
    --bs-light-rgb: 233, 236, 239;
}

@media (min-width: 768px) {
    /* Desktop: fixed-width rail that sticks just below the navbar */
    #sidebarMenu {
        flex: 0 0 210px;
        align-self: flex-start;
        position: sticky;
        top: var(--navbar-height);
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
    }

    /*
     * offcanvas-md forces `background: transparent !important` on both
     * .offcanvas-md and .offcanvas-body at >=768px and sets the body to
     * display:flex. Restore the body to a normal block and let .sidebar-inner
     * carry the background so the rail stays filled on desktop.
     */
    #sidebarMenu .offcanvas-body {
        display: block;
        height: 100%;
    }

    #sidebarMenu .sidebar-inner {
        min-height: 100%;
    }

    /* Subtle right-edge separator (dark-mode.css overrides it for the dark theme) */
    .sidebar {
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* left padding compensates the reserved accent border so text keeps
       its original alignment */
    padding: 1rem 1.5rem 1rem calc(1.75rem - 4px);
    border-left: 4px solid transparent; /* reserved so .active doesn't shift the text */
}

.sidebar .nav-link.disabled {
    padding-bottom: 0.5rem;
}

.sidebar .nav-link.sidebar-sub {
    padding: 0.5rem 1.5rem 0.5rem calc(2.25rem - 4px);
}

.sidebar .nav-link.active {
    color: var(--app-primary);
    background-color: var(--app-primary-subtle);
    border-left-color: var(--app-primary);
    font-weight: 600;
}

.sidebar .nav-link:hover {
    background-color: rgba(0, 0, 0, .05);
}

/*
 *  Main view
 */
.main {
    min-width: 0; /* allow the flex child to shrink so .table-responsive can scroll */
}

/*
 * Tab bars: keep the tabs on one row and scroll horizontally on narrow
 * screens instead of wrapping into a ragged multi-row border.
 * NOTE: do NOT use on a nav that contains a dropdown — the overflow clips
 * the open dropdown menu (see event/calendar_tabs.html, which wraps instead).
 */
.nav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
}


/*
 * Form
 */

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.normal-link {
    text-decoration: none;
    color: #337ab7;
}

/*Kalenterin fontin väri*/
#cal-slide-content a.event-item {
    font-weight: normal;
    line-height: 22px;
}

.data-left {
    width: 150px;
    float: left;
    overflow-wrap: break-word;
    font-weight: bold;
}

.data-right {
    overflow-wrap: break-word;
    width: calc(100% - 150px);
    float: left;
    padding-bottom: 3px;
}

.data.row {
    margin-bottom: 10px;
}

.small_text {
    color: #6c6a6a;
    font-size: 90%;
}

.indent {
    margin-left: 40px;
}


.error-text {
    color: #a94442;
}

.list-group {
    margin-bottom: 0;
}

.rounded-block {
    margin: 20px;
}

.custom-file-label {
    width: 100%;
}

.custom-file-border {
    line-height: 1.5;
    padding: .375rem .75rem;
    color: #495057;
    background-color: #ffffff;
    border: 1px solid #ced4da;
}

.custom-file-ext-border {
    margin-left: -.5rem;
    padding: .5rem 1rem .8rem .7rem;
    line-height: 1.5;
    color: #495057;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.custom-modal-title {
    display: inline;
}

.table-responsive .dt-buttons {
    margin-bottom: 0.5rem;
}

/* Event table toolbar: buttons + length/search on one row, so no per-item bottom margin. */
.table-responsive .dt-top-row .dt-buttons {
    margin-bottom: 0;
}

.table-responsive {
    margin-bottom: 3rem;
}

.margin_top_1 {
    margin-top: 0.5rem;
}

.dt-left {
    text-align: left !important;
}

#calendar {
    margin-top: 6rem;
}

.draft {
    font-style: italic;
    color: #000000; /* #a9a9a9 was too light for datatables view*/
}

.draft a {
    color: #000000; /* #b0c4de was too light for datatables view*/
}

.loader-box {
    text-align: center;
    text-align: -webkit-center;
    padding: 6rem;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #337ab7; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.text-white {
    color: #d3d3d3;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Event state indicator colors */
.event-state-ready {
    background-color: #99d4f4;
}

.event-state-draft {
    background-color: #ffb6b6;
}

.event-state-reservation {
    background-color: #def499;
}

.scroll-menu{
   min-width: 220px;
   max-height: 90vh;
   overflow: auto;
 }

.org-search-container {
   position: sticky;
   top: 0;
   background: inherit;
   z-index: 1;
   padding-top: 0.25rem;
 }

/*
 * Detail views (tilaisuus, paikka, ...)
 * ------------------------------------
 * A label/value listing that survives a phone screen. The old pattern was
 * either `.data-left` (a 150px float, which leaves a 360px phone 200px for the
 * value) or `col-md-3` pairs (which stack into unseparated label/value blocks).
 * Here the desktop keeps the familiar two-pairs-per-row look, and below 768px
 * each field becomes label-above-value with a hairline separator.
 */

/* Flex/grid children need this before they will shrink below their content
   width — without it a long title pushes the action buttons off screen. */
.min-w-0 {
    min-width: 0;
}

/* base.html gives the content row 20px of top margin, and Bootstrap gives the
   breadcrumb 1rem below itself: together some 36px before the title, which is
   a lot of a small laptop's screen spent on a single line of navigation. */
.detail-breadcrumb {
    --bs-breadcrumb-margin-bottom: 0.25rem;
    margin-top: -0.5rem;
}

.detail-title {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
}

.detail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.05rem 1rem;
    padding: 0.3rem 0.25rem;
    border-top: 1px solid var(--bs-border-color);
    min-width: 0;
}

.detail-item > dt {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.detail-item > dd {
    margin-bottom: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Paikan osat yhdelle riville pilkuilla eroteltuna. Flex-kontti hylkää
   elementtien välisen tyhjän, joten templatessa saa rivittää vapaasti ilman
   että pilkun eteen jää välilyönti. */
.detail-place {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.35rem;
}

.detail-place > span:not(:last-child)::after {
    content: ",";
}

/* Paikan nimi ja osoite erotetaan viivalla, osoitteen osat pilkuilla:
   "toimitalo – Professorinväylä 7, 90100 Oulu" */
.detail-place > .detail-place-name:not(:last-child)::after {
    content: " \2013";
}

/* Section with its own heading and free-form content (työvuorot, muuta, ...):
   heading in the label column on desktop, above the content on a phone. */
.detail-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin-top: 1.5rem;
}

.detail-block > .detail-block-title {
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    margin-bottom: 0;
}

.detail-block > .detail-block-body {
    min-width: 0;
}

/* The global .table-responsive reserves 3rem below itself for the DataTables
   controls; inside a detail block the next thing is usually a button that
   belongs with the table. */
.detail-block .table-responsive {
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .detail-title {
        font-size: 2rem;
    }

    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    .detail-item {
        grid-template-columns: 10rem minmax(0, 1fr);
        align-items: baseline;
    }

    /* Long free text (lisätiedot, kommentti) gets the whole row */
    .detail-item--wide {
        grid-column: 1 / -1;
    }

    .detail-item--wide > dd {
        max-width: 60rem;
    }

    .detail-block {
        grid-template-columns: 10rem minmax(0, 1fr);
    }
}

/*
 * Tables that become cards on a phone
 * -----------------------------------
 * `table-responsive` only moves the overflow into a sideways scroll, which on a
 * phone hides the last columns (and with them the row actions). A `.table-stack`
 * table keeps one markup for both layouts: below 768px every row becomes a card
 * where the cells are laid out by role instead of by column —
 *
 *   .stack-title    the row's name; first line, together with
 *   .stack-actions  the row's buttons, pushed to the right of that same line
 *   .stack-people   ) and then whatever the row is about, in this order
 *   .stack-time     )
 *   .stack-fill     )
 *   .stack-hide     cell that carries nothing worth a line on a card
 *
 * Anything without one of these classes gets a line of its own.
 */

@media (max-width: 767.98px) {
    .table-stack > thead {
        display: none;
    }

    .table-stack,
    .table-stack > tbody {
        display: block;
        width: auto;
    }

    .table-stack > tbody > tr {
        /* Two columns: the content, and a narrow one for what belongs on the
           right edge (the row's buttons, the fill rate). */
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
        align-items: start;
        margin-bottom: 0.5rem;
        padding: 0.3rem 0.6rem 0.35rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        /* The row variant classes (.table-success, .table-warning) set these
           variables on the row; on desktop the cells consume them. */
        background-color: var(--bs-table-bg);
        color: var(--bs-table-color);
    }

    .table-stack > tbody > tr > td,
    .table-stack > tbody > tr > th {
        /* A cell with no role of its own gets a line to itself */
        grid-column: 1 / -1;
        padding: 0.1rem 0;
        border: 0;
        /* Bootstrap paints the cell background with a 9999px inset shadow, which
           would spill over the card's rounded corners. */
        box-shadow: none;
        text-align: left;
        overflow-wrap: anywhere;
    }

    /* The two things worth reading first on a phone: what the turn is, and who
       is on it. The times and the fill rate stay at body size below them. */
    .table-stack .stack-title {
        grid-row: 1;
        grid-column: 1;
        font-weight: 600;
        font-size: 1.15rem;
    }

    .table-stack .stack-actions {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        padding: 0;
    }

    .table-stack .stack-people {
        grid-row: 2;
        font-size: 1.15rem;
        line-height: 1.35;
    }

    /* Last line: the times on the left, the fill rate against the right edge */
    .table-stack .stack-time {
        grid-row: 3;
        grid-column: 1;
        white-space: nowrap;
        /* Slightly recessed against the title and the names. Not opacity: that
           would also dim the .time-differs highlight nested inside. */
        color: color-mix(in srgb, currentcolor 80%, transparent);
    }

    .table-stack .stack-fill {
        grid-row: 3;
        grid-column: 2;
        justify-self: end;
        text-align: right;
        color: color-mix(in srgb, currentcolor 80%, transparent);
    }

    .table-stack .stack-hide {
        display: none;
    }

    /* Thumb-sized icon buttons */
    .table-stack .stack-actions .btn {
        --bs-btn-padding-y: 0.4rem;
        --bs-btn-padding-x: 0.7rem;
        --bs-btn-font-size: 1rem;
    }
}

/*
 * A time that differs from the one the event itself has: work turns default to
 * the event's own start and end, so one that begins earlier or ends later is
 * the exception and has to be visible at a glance. The colour is fixed because
 * these rows are always the pale .table-success / .table-warning variants,
 * which keep their dark text in the dark theme too.
 */
.time-differs {
    font-weight: 700;
    color: #b02a37;
    white-space: nowrap;
}

@media print {
    /* Hide navigation elements */
    .navbar { display: none !important; }
    .sidebar { display: none !important; }

    /* Main content uses full page width once the sidebar is hidden */
    .main {
        width: 100% !important;
    }

    /* Hide UI-only elements */
    .dropdown,
    .breadcrumb,
    .murupolku,
    .pagination,
    .ryhman_kommentit,
    #sidebar,
    .feedback-widget-container
    {
        display: none !important;
    }

    /* Let content use full width since sidebar is hidden */
    .left_site {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Clean page setup */
    body {
        font-size: 12pt;
        color: #000 !important;
    }

    a { color: #000 !important; }

    /* Force light mode for print */
    html[data-bs-theme="dark"] { color-scheme: light !important; }
}