/* Dashboard content currently sits flush against the viewport edges on both sides —
   fine for the full-bleed map, but looks off for a page built from framed cards/panels.
   Add a modest gutter here only; Fleet Map stays edge-to-edge as intended. */
body.view-dashboard main {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Fleet Details table (#summaryStatus) scroll height on Dashboard is sized dynamically
   at runtime (see the script block at the bottom of dashboard/tmpl/default.php) rather
   than a fixed calc() offset — a hardcoded px value only matches the window size it was
   measured on and clips real content (buttons/footer) on any other screen. */

/* The table's internal scrollbar should be the only one on this page — same
   single-viewport pattern already used by the tracking view (html,body{overflow:hidden}
   in tracking/tmpl/default.php). Without this, the page still overflows by however
   much of the footer is left showing, adding an outer scrollbar alongside the
   table's own one. */
body.view-dashboard {
    overflow: hidden;
}

/* DataTables export buttons (Copy/CSV/Excel/PDF/Print/Pick Columns): these render
   as bare native <button> elements (border: outset black) because the .uk-button
   class they carry no longer has UIkit CSS backing it post-migration. Restyle to
   a quiet, Bootstrap-consistent look instead of the raw browser-default chrome. */
.dt-buttons .uk-button {
    border: 1px solid #d5d5d5 !important;
    outline: none;
    background: #f8f9fa;
    color: #495057;
    border-radius: 4px;
    font-size: 0.8rem;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dt-buttons .uk-button:hover {
    background: #eaeaea;
    border-color: #bbb;
}

/* Compact header: logo and nav on one line */
.container-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 1rem !important;
    gap: 0 !important;
}

.container-header .grid-child {
    padding: 0.25em 0.5em !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.container-header nav {
    margin-top: 0 !important;
    padding: 0 !important;
}

.container-header .navbar-brand {
    margin-inline-end: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.container-header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-bottom: 0 !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.container-header .container-nav a,
.container-header .container-nav button {
    font-size: 14px !important;
}

.container-header .container-search {
    display: none;
}


.container-header .navbar-brand img {
    max-height: 40px;
    width: auto;
}

/* Right-hand map control panel (#rightControlPanel): visual separation from map + WCAG 2.2 touch targets */
#rightControlPanel {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.6rem;
    /* Bootstrap's .modal wrapper is position:fixed and spans the full viewport at
       z-index 9999 (not just the visible dialog box), so with the panel's default
       z-index:auto a click here lands on the modal's backdrop-dismiss area instead
       of the sidebar link, closing the open panel without opening the next one. */
    position: relative;
    z-index: 10000;
}

#rightControlPanel li {
    padding: 0 !important;
    border-radius: 6px;
    overflow: hidden;
}

#rightControlPanel .sidebarMenu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    padding: 0 0.75rem !important;
    font-size: 0.8rem;
}

#rightControlPanel .sidebarMenu:hover {
    background-color: #f4f4f4;
    cursor: pointer;
}

#rightControlPanel .sidebarMenuOpenControls {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
}

/* Dashboard left view-switcher (#dashboardTabRow): col-md-2 is wasted width for
   short single-line labels; narrow it to ~60% and let the content column grow
   to fill the freed space (Bootstrap grid columns don't do that automatically). */
#dashboardTabRow {
    /* Bootstrap's .row wraps by default; the wide DataTable's intrinsic content
       width was enough to force the content column onto a new line below the
       nav even with min-width:0, so force the two columns to stay side by side. */
    flex-wrap: nowrap !important;
}

#dashboardTabRow > .col-md-2 {
    flex: 0 0 auto;
    width: 215px;
    max-width: 215px;
    /* Match .trBoxBorder (used by the right-hand panel and the summary cards) so
       both sides of the row read as the same card style instead of one rounded
       panel next to one with a flat, mismatched corner. */
    border: 2.4px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    /* Bootstrap's .row defaults to align-items:stretch, so this column was
       stretching to match the much taller table column's height, leaving a
       huge empty rounded box below the last nav item. Size to its own content. */
    align-self: flex-start;
    /* Bootstrap's column gutter padding (12px) was left in place after adding the
       card border, leaving a visible white gap between the border and the list
       on both sides instead of the rows spanning flush to it. */
    padding-left: 0;
    padding-right: 0;
}

/* .trBoxBorder normally carries a 10px margin-top, which is fine on its own but
   left the right-hand panel's card border sitting 10px off from the left nav's
   and from the summary cards above it (border applied directly on those, no
   margin). Scoped to just this one instance — .trBoxBorder itself is used
   site-wide and must stay untouched. */
#dashboardTabRow .tab-content .trBoxBorder {
    margin: 0;
}

/* The active tab's own hard-edged, non-rounded border was what clashed with the
   panel's rounded corner. A background highlight reads as "selected" just as
   clearly without fighting the container's border-radius. */
#dashboardTabRow .nav-link.active {
    border: none !important;
    background-color: #f2f2f2 !important;
}

/* Page breadcrumb heading (e.g. "Dashboard | Summary"): every com_tracker view
   uses a bare <h2> for this, so scoping to body.com_tracker (a Joomla-added body
   class unique to this component) tightens it consistently across all of them. */
/* Cassiopeia's <main> carries a 16px margin-top site-wide; combined with the h2's
   own margin that reads as an awkward gap under the navbar. Tighten it here only
   (scoped to com_tracker pages) rather than touching the sitewide template rule. */
body.com_tracker main {
    margin-top: 4px;
}

body.com_tracker h2 {
    font-size: 1.5rem;
    font-weight: 700;
    /* Bottom margin needs to be generous: the summary-card row right below uses
       Bootstrap's .g-2 gutter, which applies a -8px margin-top that eats into it. */
    margin: 0.25rem 0 1.25rem 0;
    line-height: 1.3;
}

body.com_tracker h2 a {
    color: #dc3545;
    text-decoration: none;
}

body.com_tracker h2 a:hover {
    text-decoration: underline;
}

#dashboardTabRow > .col-md-10 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    /* Without this the column can't shrink below the wide DataTable's intrinsic
       content width, so flex-wrap:wrap (from Bootstrap's .row) pushes the whole
       column onto a new line below the nav instead of scrolling internally. */
    min-width: 0;
    overflow-x: auto;
    /* Bootstrap's g-2 gutter padding (4px) left a small residual gap between the
       Fleet Details box's right edge and the summary cards' right edge above it. */
    padding-right: 0;
}