/* ── 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 ────────────────────────────────────────────────────────────────── */
/* DocOrbit's white wordmark on the teal navbar. Tabler lays out .navbar-brand
   (the <h1>) as a flex row, but the image sits in the <a> it wraps, a plain
   inline link, which would leave it on a text baseline. */
.navbar-brand .brand-link {
    display: inline-flex;
    align-items: center;
    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 its logo, and Tabler's
   `navbar-brand-autodark` flattens it to solid white (brightness(0) invert(1)),
   which would turn the teal wordmark white on a white page. */
.navbar-brand-autodark .navbar-brand-image { filter: none; }

/* ── Login page brand ────────────────────────────────────────────────────── */
/* The teal wordmark with the platform's name under it, on the one page that has
   no sidebar. */
.login-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    line-height: 1;
}
.login-brand,
.login-brand:hover,
.login-brand:focus { text-decoration: none; color: var(--do-primary); }
.login-brand .navbar-brand-image { height: 40px; width: auto; object-fit: contain; display: block; }
.login-product { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.01em; }

/* ── 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;
    }
}