/* overrides.css — consolidated conservative overrides for the admin UI
   Purpose:
   - Keep a minimal, non-invasive baseline for layout and sidebar scrolling
   - Provide dark-mode visual fixes for tabs (.nav-tabs), input icon pills
     (.input-group-text) and scrollbars so UI elements integrate on dark
     backgrounds.

   Keep this file conservative: avoid large z-index changes or forced heights.
*/

/* ---------- Baseline layout helpers ---------- */
.sidebar .sidebar-brand { padding-top: .5rem !important; padding-bottom: .35rem !important; }
.sidebar .sidebar-brand img.brand-mark-lg { display:inline-block; height:auto !important; max-height:120px !important; width:auto !important; }

/* Prevent transition/layout jank during initial paint */
html:not(.ui-ready) .sidebar, html:not(.ui-ready) .admin-header, html:not(.ui-ready) .card, html:not(.ui-ready) .table, html:not(.ui-ready) img { transition:none !important; }

/* Sidebar scrolling: prefer outer container as scrollable on desktop */
#adminSidebarDesktop.sidebar { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
#adminSidebarDesktop .position-sticky { display:flex; flex-direction:column; padding-right:4px; }
#adminSidebarDesktop .position-sticky .sidebar-brand { position: static; z-index: auto; background: inherit; }
#adminSidebarDesktop .position-sticky .nav { overflow-y: visible; max-height: none !important; }
#adminSidebarDesktop .nav .collapse > ul { max-height: none !important; padding-right: 6px; }

/* Prevent horizontal overflow */
#adminSidebarDesktop, #adminSidebarDesktop .position-sticky, #adminSidebarDesktop .nav, .sidebar { overflow-x: hidden !important; box-sizing: border-box; }

/* Small helper for tab panels to match the container */
.tab-pane { background: transparent; }

/* Dark-mode styling moved to assets/dark-mode.css
   This file (`assets/overrides.css`) now contains only conservative
   baseline overrides and layout helpers. All dark-mode visual rules
   (scrollbars, nav-tabs, input-group, navbar/sidebar color rules)
   were consolidated into `assets/dark-mode.css` to provide a single
   source-of-truth for theme visuals.

   If you need to tweak a specific dark-mode rule, edit
   `assets/dark-mode.css` instead of touching this file.
*/

/* ---------- Sidebar icon coloring (light / default theme) ---------- */
/* Make Bootstrap icons used in the sidebar show a subtle muted color when
    idle and an accent color on hover/active. The rule is conservative and
    uses CSS variables so it can be tuned centrally. */
#adminSidebarDesktop .nav-link .bi,
.sidebar .nav-link .bi,
#adminSidebarDesktop .list-group-item .bi,
.sidebar .list-group-item .bi {
   color: var(--sidebar-icon-inactive, #6c757d); /* muted by default */
   opacity: 0.95;
   transition: color .12s ease, opacity .12s ease;
}

#adminSidebarDesktop .nav-link:hover .bi,
.sidebar .nav-link:hover .bi,
#adminSidebarDesktop .nav-link.active .bi,
.sidebar .nav-link.active .bi {
   color: var(--sidebar-icon-active, #0d6efd); /* bootstrap primary by default */
   opacity: 1;
}

/* Ensure top-level <i> icons inherit color when used directly inside links */
#adminSidebarDesktop .nav-link > i, .sidebar .nav-link > i { color: inherit; }

/* Sidebar collapse toggle caret alignment & rotation
   - ensure the caret sits at the far right of the toggle button
   - rotate when the toggle has the helper class `toggle-open` (kept in sync via JS)
   - keep a small transition so the rotation is smooth
*/
.sidebar [data-bs-toggle="collapse"] { display: flex; align-items: center; justify-content: space-between; }
.sidebar [data-bs-toggle="collapse"] .bi-caret-down { margin-left: 0.5rem; transition: transform .16s ease; min-width: 1.0rem; }
.sidebar [data-bs-toggle="collapse"].toggle-open .bi-caret-down { transform: rotate(180deg); }

/* Also apply to desktop nav variant */
#adminSidebarDesktop [data-bs-toggle="collapse"] { display: flex; align-items: center; justify-content: space-between; }
#adminSidebarDesktop [data-bs-toggle="collapse"] .bi-caret-down { margin-left: 0.5rem; transition: transform .16s ease; }
#adminSidebarDesktop [data-bs-toggle="collapse"].toggle-open .bi-caret-down { transform: rotate(180deg); }

/* Force toggle content to use remaining space and keep caret aligned to right
    This ensures the visible label + leading icon stay left-aligned and the
    caret sits flush at the far right regardless of text wrapping. The rule
    targets offcanvas, sidebar and desktop variants conservatively. */
.sidebar [data-bs-toggle="collapse"],
.offcanvas [data-bs-toggle="collapse"],
#adminSidebarDesktop [data-bs-toggle="collapse"] {
   width: 100%;
   box-sizing: border-box;
   align-items: center;
}
.sidebar [data-bs-toggle="collapse"] > span,
.offcanvas [data-bs-toggle="collapse"] > span,
#adminSidebarDesktop [data-bs-toggle="collapse"] > span {
   display: flex;
   align-items: center;
   flex-direction: row; /* ensure icon and text are on the same row */
   gap: .5rem;
   flex: 1 1 auto; /* allow the text/icon block to take available space */
   min-width: 0; /* allow truncation / ellipsis if necessary */
}
.sidebar [data-bs-toggle="collapse"] > span > .bi,
.offcanvas [data-bs-toggle="collapse"] > span > .bi,
#adminSidebarDesktop [data-bs-toggle="collapse"] > span > .bi {
   display: inline-flex; /* avoid block-level stacking */
   flex: 0 0 auto;
   margin-right: .5rem; /* ensure spacing between icon and text */
}
.sidebar [data-bs-toggle="collapse"] > span { text-align: left; }
.sidebar [data-bs-toggle="collapse"] .bi-caret-down,
.offcanvas [data-bs-toggle="collapse"] .bi-caret-down,
#adminSidebarDesktop [data-bs-toggle="collapse"] .bi-caret-down {
   margin-left: auto; /* push caret to the far right of the toggle */
   flex: 0 0 auto;
}



/* ---------- Table pager styling (make pagers larger and nicer) ---------- */
/* Scoped and conservative: affects elements with the .table-pager class only. */
.table-pager {
   padding: .5rem .75rem; /* slightly larger touch target */
   gap: .5rem;
   background: var(--pager-bg, rgba(0,0,0,0.03));
   border-top: 1px solid rgba(0,0,0,0.06);
   border-bottom-left-radius: .375rem;
   border-bottom-right-radius: .375rem;
}

.table-pager .small { font-size: .9rem; color: var(--bs-muted, #6c757d); }

.table-pager .btn {
   padding: .45rem .85rem;
   font-size: .95rem;
   border-radius: .45rem;
   box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
   transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}

.table-pager .btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(13,110,253,0.08);
}

/* Slightly stronger visual for primary-like controls when outline-secondary is used */
.table-pager .btn-outline-secondary {
   background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
   border-color: rgba(108,117,125,0.18);
}

@media (max-width: 576px) {
   .table-pager { padding: .4rem .5rem; }
   .table-pager .btn { padding: .35rem .6rem; font-size: .9rem; }
}

/* Invoice create button: small icon-only purple button used in clients table */
.btn-invoice {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: .35rem .45rem;
   min-width: 2.05rem;
   height: 2.05rem;
   background-color: #6f42c1; /* purple */
   color: #fff !important;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: .45rem;
}
.btn-invoice:hover, .btn-invoice:focus {
   background-color: #5a2fa8;
   color: #fff !important;
   text-decoration: none;
}
.btn-invoice i { font-size: 0.95rem; line-height:1; }

/* Small helper for bulk-delete icon-only buttons used in action toolbars */
.bulk-delete-btn.btn-icon {
   padding: .28rem .45rem;
   min-width: 2.05rem;
   height: 2.05rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.bulk-delete-btn.btn-icon i { font-size: 1rem; line-height: 1; }

/* Keep outline look subtle when hovered/focused so it doesn't paint a large
    solid red background that hides content. Use a light translucent fill. */
.bulk-delete-btn.btn-icon:hover, .bulk-delete-btn.btn-icon:focus {
   background-color: rgba(220,53,69,0.06); /* subtle red */
   border-color: rgba(220,53,69,0.45);
   color: rgba(220,53,69,0.9);
}

/* Reduce avatar size inside tables to keep rows compact
   Dashboard.css increases `.avatar-sm` globally (48px) which makes
   table rows unnecessarily tall. Target avatars appearing inside
   tables to restore compact row height similar to legacy styles. */
.table .avatar-sm { width: 28px !important; height: 28px !important; }
.table .avatar-sm img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* Ensure table cells keep compact padding for small tables */
.table.table-sm td, .table.table-sm th { padding: .25rem .5rem !important; }

/* Prevent forced large minimum heights on table wrappers (fixes giant blank areas) */
.card .table-responsive, .table-responsive {
   min-height: 0 !important;
   max-height: none !important;
}

/* Ensure table rows don't get a large fixed height */
.table tbody tr {
   height: auto !important;
}

/* Limit any large images inside cards/tables to keep layout compact */
.card img, .card .table img, .table img {
   max-width: none !important;
   max-height: 28px !important;
   width: auto !important;
   height: auto !important;
}

/* Ensure brand/large marks remain bounded */
.brand-mark, .brand-mark-md, .brand-mark-lg {
   max-height: 120px !important;
   height: auto !important;
}

/* Public site header tweaks: constrain logo and ensure navbar is visible
    These rules are intentionally specific to the public header to avoid
    affecting the admin dashboard styles. Keeps the logo compact and the
    collapse area visible on wide screens. */
.site-header .navbar-brand .logo-circle {
   width: 66px !important;
   height: 66px !important;
   min-width: 66px !important;
   border-radius: 50% !important;
}
.site-header .navbar-brand img {
   max-height: 44px !important;
   width: auto !important;
   display: block !important;
}

/* Ensure the navbar collapse section is displayed (prevents accidental hiding from other CSS) */
.site-header .navbar .collapse {
   display: flex !important;
   align-items: center !important;
   gap: 1rem;
}

/* On narrow screens keep collapse behavior but limit logo size slightly */
@media (max-width: 576px) {
   .site-header .navbar-brand .logo-circle { width:54px !important; height:54px !important; min-width:54px !important; }
   .site-header .navbar-brand img { max-height:36px !important; }
}