/* ── DocOrbit Admin Theme ─────────────────────────────────────────────────── */

:root {
    --do-primary: #3A6463;
    --do-secondary: #E08040;
    --tblr-primary: #3A6463;
    --tblr-primary-rgb: 58, 100, 99;
}

.bg-primary { background-color: var(--do-primary) !important; }

/* Alerts */
.alert-success { border: 1px solid #2fb344; background-color: #f0faf1; color: #1a6928; }
.alert-danger  { border: 1px solid #d63939; background-color: #fdf0f0; color: #8b2020; }
.alert-success .btn-close,
.alert-danger .btn-close { color: inherit; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.navbar-vertical { background-color: var(--do-primary) !important; }

/* ── Top navbar ──────────────────────────────────────────────────────────── */
header.navbar { background-color: var(--do-primary) !important; }
header.navbar,
header.navbar .nav-link,
header.navbar .btn,
header.navbar .navbar-toggler-icon { color: #fff !important; }
header.navbar .btn { border-color: rgba(255,255,255,0.2); background-color: transparent !important; }
header.navbar .btn:hover { background-color: rgba(255,255,255,0.1) !important; }
header.navbar .dropdown-toggle::after { border-top-color: #fff; }

/* Language and timezone switchers: icon, label, caret. Tabler spaces button
   icons through `.btn .icon`, which only matches its own icon class, and these
   use Font Awesome, so the glyph sat flush against the label ("[icon]Türkçe").
   A flex gap spaces all three without touching icon-only buttons, and the
   caret's own margin comes off so it is not spaced twice. */
header.navbar .btn.dropdown-toggle { display: inline-flex; align-items: center; gap: 0.375rem; }
header.navbar .btn.dropdown-toggle::after { margin-left: 0; }

/* ── Dropdown menus (always light) ───────────────────────────────────────── */
.dropdown-menu { background-color: #fff !important; color: #1e293b !important; }
.dropdown-menu .dropdown-item { color: #1e293b !important; }
.dropdown-menu .dropdown-item:hover { background-color: #f1f5f9 !important; color: #1e293b !important; }

/* ── Action buttons (secondary brand color) ──────────────────────────────── */
.btn-primary { background-color: var(--do-secondary) !important; border-color: var(--do-secondary) !important; color: #fff !important; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: #c46e30 !important; border-color: #c46e30 !important; color: #fff !important; }
.btn-success { background-color: var(--do-secondary) !important; border-color: var(--do-secondary) !important; color: #fff !important; }
.btn-success:hover,
.btn-success:focus,
.btn-success:active { background-color: #c46e30 !important; border-color: #c46e30 !important; color: #fff !important; }

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: var(--do-primary); }
a:hover { color: #2d504f; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--do-primary) !important; }
.breadcrumb-item.active { color: var(--do-primary) !important; opacity: 0.7; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--do-primary) !important; }

/* Breadcrumb left margin to align with table content */
.page-header .breadcrumb { margin-left: 0.75rem; }

/* ── Logo ────────────────────────────────────────────────────────────────── */
/* Mark plus wordmark. Tabler already lays out .navbar-brand (the <h1>) as a
   centred flex row, but the real content sits inside the <a> it wraps, which is
   a plain inline link: it needs the same treatment, or the mark and the word
   align on their text baselines and the word rides low against a round mark. */
.navbar-brand .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

/* Bootstrap underlines links on hover, and .navbar-brand's own no-underline
   rule lands on the <h1>, not on the <a> inside it. */
.navbar-brand .brand-link,
.navbar-brand .brand-link:hover,
.navbar-brand .brand-link:focus { text-decoration: none; color: #fff; }

.navbar-brand .brand-link img { height: 30px; width: auto; object-fit: contain; display: block; }

/* The login page reuses .navbar-brand for a standalone logo and Tabler's
   `navbar-brand-autodark` flattens it to solid white (brightness(0) invert(1)),
   which is meant for a white-on-dark wordmark. The Orbius mark carries its own
   colour on a light card, so the filter has to come off or it renders as a
   featureless white disc. */
.navbar-brand-autodark .navbar-brand-image { filter: none; }

.navbar-wordmark {
    /* The h1 carries Tabler's own brand font-size; the wordmark is set here so
       it stays proportionate to the mark rather than to the heading scale. */
    font-size: 1.0625rem;
    font-weight: 600;
    /* The disc has visual weight the letters do not, so a touch of tracking
       keeps the word from crowding it. */
    letter-spacing: 0.01em;
    line-height: 1;
    /* Optical centring: the mark is a circle, the word has no descenders, so
       matching their boxes leaves the word looking a hair high. */
    padding-top: 1px;
}

/* ── Login page brand ────────────────────────────────────────────────────── */
/* The same mark-plus-word lockup the sidebar uses, on the one page that has no
   sidebar. Upstream's login template renders the mark alone, so the product name
   appeared nowhere on the first screen anyone sees. The colours differ from the
   sidebar's because this sits on a light page, not on the teal navbar. */
.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}
.login-brand,
.login-brand:hover,
.login-brand:focus { text-decoration: none; color: var(--do-primary); }
.login-brand .navbar-brand-image { height: 36px; width: auto; object-fit: contain; display: block; }
/* Proportionate to the 36px mark here, where .navbar-wordmark's own size is set
   against the sidebar's smaller 30px one. */
.login-brand .navbar-wordmark { font-size: 1.25rem; }

/* ── Mobile user avatar ──────────────────────────────────────────────────── */
.navbar-nav .avatar { background-color: transparent !important; border: 1px solid rgba(255,255,255,0.4) !important; color: #fff !important; }
.navbar-nav .nav-link.d-flex { background: transparent !important; }

/* ── DataTable toolbar buttons (export, show/hide columns, filter) ────── */
#btn_container .btn.btn-secondary {
    background-color: var(--do-secondary) !important;
    border-color: var(--do-secondary) !important;
    color: #fff !important;
}
#btn_container .btn.btn-secondary:hover,
#btn_container .btn.btn-secondary:focus,
#btn_container .btn.btn-secondary:active {
    background-color: #c46e30 !important;
    border-color: #c46e30 !important;
    color: #fff !important;
}

/* Keep border-radius on filter (searchBuilder) button when active */
#btn_container .btn.btn-secondary {
    border-radius: 4px !important;
    margin-right: 0.35rem;
}

/* Vertically center toolbar button groups in card header */
.card-header { align-items: center !important; }
#btn_container { display: flex; align-items: center; }
#btn_container .dt-buttons.btn-group { margin-bottom: 0 !important; box-shadow: none !important; }


/* ── Mobile: icon-only toolbar buttons (exclude filter panel internals) ─── */
@media (max-width: 991.98px) {
    #btn_container .btn { font-size: 0 !important; padding: 0.375rem 0.5rem !important; }
    #btn_container .btn i,
    #btn_container .btn .fa-solid { font-size: 1rem !important; }
    /* Restore text for buttons inside filter/searchBuilder panels */
    #btn_container .dtsb-group .btn,
    #btn_container .dt-button-collection .btn { font-size: 0.875rem !important; padding: 0.25rem 0.5rem !important; }
    /* Hide text on "New X" and card-action buttons on mobile */
    .card-actions .btn-primary,
    .card-actions .btn-list .btn { font-size: 0 !important; padding: 0.375rem 0.5rem !important; }
    .card-actions .btn-primary i,
    .card-actions .btn-list .btn i { font-size: 1rem !important; margin-right: 0 !important; }
    .card-actions .btn-primary .me-2,
    .card-actions .btn-list .btn .me-2 { margin-right: 0 !important; }
}

/* ── Fixed sidebar vs Tabler's scrollbar compensation ────────────────────── */
/* Tabler 1.4 ships:
       @media (min-width: 992px) { :host, :root { margin-left: calc(100vw - 100%) } }
   which shifts the whole document right by the scrollbar width so centred content does
   not jump when a scrollbar appears. The sidebar is `position: fixed; left: 0` and is
   anchored to the viewport, so it does NOT shift with it: every page long enough to
   scroll showed a strip of page background between the sidebar and the header, exactly
   the width of the scrollbar. Most visible on view-report, which is the longest page.

   `margin-left: 0` is the whole fix; the gutter never entered into it, because the
   reservation is on the inline-END side and the sidebar is on the start side.

   This deliberately does NOT also set `scrollbar-gutter: stable`. That was added to
   keep Tabler's no-jump intent, and it cost more than it bought: on a page too short
   to scroll it reserves the scrollbar width anyway, so the full-width header stopped
   15px short of the right edge and left a visible strip of page background. The login
   page is the most-seen short page, so the seam showed on the first screen anyone
   sees. Without it, content shifts by the scrollbar width between a short page and a
   long one, which only happens across a full navigation. */
@media (min-width: 992px) {
    :root {
        margin-left: 0;
    }
}