/* Minimal shared app styles for E-Tiket starter */
:root{
  --brand:#0d6efd; /* Bootstrap primary */
  --muted:#6c757d;
}

body{background:#f8f9fa; color:#212529}
.navbar-brand{font-weight:700}
.card{border-radius:.5rem}
.btn-brand{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Improved contrast helpers */
.btn-outline-secondary { border-color: #cfcfcf; }
.card { background: #ffffff; }

/* Small utilities */
.text-muted-small{color:var(--muted); font-size:.9rem}
.table-sm td, .table-sm th{vertical-align:middle}

/* Admin sidebar */
.sidebar { background:#fff; border-right:1px solid #e9ecef; }

/* Toast-like WA indicator */
.wa-toast{box-shadow:0 6px 18px rgba(0,0,0,0.08)}

/* Accessibility: focus outline for keyboard users */
a:focus, button:focus, input:focus { outline: 3px solid rgba(13,110,253,0.18); outline-offset:2px }

/* Skip link visible focus helper (also used by layouts) */
.visually-hidden-focusable { position: absolute; left: -999px; top: auto; width:1px; height:1px; overflow:hidden }
.visually-hidden-focusable:focus { position: static; left: auto; width: auto; height: auto; padding: 8px 12px; background: #fff; border: 1px solid #e9ecef; z-index: 1050 }

/* Inline SVG icon utility (self-hosted sprite) */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; margin-right: .35rem }
.icon-inline { width: 1.05em; height: 1.05em; }

/* Button interaction animation: subtle lift on hover, press feedback on active */
.btn {
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s cubic-bezier(.2,.8,.2,1), opacity .12s ease;
}
.btn:hover, .btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(18,38,63,0.08);
  opacity: 1;
}
.btn:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 4px 10px rgba(18,38,63,0.06);
}
.btn[disabled], .btn.disabled {
  transform: none !important;
  opacity: .6 !important;
  box-shadow: none !important;
}

/* Ensure icon color transitions smoothly with button */
.btn .icon { transition: transform .12s ease, color .12s ease; }
.btn:hover .icon { transform: translateY(-1px); }

/* Make all buttons appear boxed with a subtle outline without breaking theme borders
   Using inset box-shadow keeps the button background intact while providing a visible
   'kotak' border for buttons that previously looked borderless. */
.btn, a.btn {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  border-radius: .375rem;
}

/* Outline-style buttons already have a visible border; avoid doubling the effect */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-outline-warning {
  box-shadow: none;
}

/* Slightly lighter box for disabled buttons */
.btn[disabled], .btn.disabled {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04) !important;
  opacity: .75 !important;
}

/* Table/action icon tweaks: keep icons small and aligned in tables and buttons */
.table .icon, .table td .icon { width: 1.05rem; height: 1.05rem; max-width:1.25rem; max-height:1.25rem; vertical-align:middle; margin-right: .35rem; }
.table td .btn, .table td a { display: inline-flex; align-items: center; gap: .4rem; }
.btn .icon { width: 1rem; height: 1rem; }

/* Strong defensive rules for admin tables and action buttons to prevent oversized SVGs */
.table td .btn, .table td a { padding: .25rem .5rem !important; min-width: 0 !important; }
.table td .btn svg, .table td a svg { width: 1rem !important; height: 1rem !important; max-width:1.25rem !important; max-height:1.25rem !important; display:inline-block !important; }
.btn-group .btn { padding: .25rem .45rem !important; }

/* Strong admin-scoped overrides to undo any theme CSS that enlarges icons */
#maincontent .table td, #maincontent .table th { vertical-align: middle; }
#maincontent .table td .btn, #maincontent .table td a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .25rem .5rem !important; width: auto !important; min-width: 0 !important; }
#maincontent .table td .btn svg.icon, #maincontent .table td a svg.icon, #maincontent .table td svg.icon { width: 1rem !important; height: 1rem !important; max-width:1.25rem !important; max-height:1.25rem !important; display: inline-block !important; }
#maincontent .btn-group .btn { padding: .25rem .45rem !important; }

/* If some theme provides large icon-card blocks, hide that display inside admin tables */
#maincontent .icon-card, #maincontent .icon-card svg { width: auto !important; height: auto !important; }



/* Ensure SVGs inside larger decorative blocks don't overflow */
svg.icon { display: inline-block; overflow: hidden; }

/* Defensive: reduce huge icon-card elements from theme if accidentally included */
/* Reduced from 2.2rem to 1.2rem to keep decorative icons compact in admin */
.icon-card svg { width: 1.2rem !important; height: 1.2rem !important; }

/* Icon-only buttons in btn-groups should not have extra right margin */
.btn-group .btn .icon { margin-right: 0; }

/* Emergency: very-specific override for admin Events table icons
   This forces small sizes for inline SVG icons inside the Events list actions.
   Scoped to #maincontent and the table.table-striped used by Events to minimize side-effects. */
#maincontent .table.table-striped td.text-end .btn svg.icon,
#maincontent .table.table-striped td.text-end a.btn svg.icon,
#maincontent .table.table-striped td.text-end .btn svg,
#maincontent .table.table-striped td.text-end a.btn svg,
#maincontent .table.table-striped td.text-end svg.icon {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* If any parent rule scales SVG via transform/scale, normalize transforms on action icons */
#maincontent .table.table-striped td.text-end .btn svg,
#maincontent .table.table-striped td.text-end a.btn svg {
  transform: none !important;
}

/* Header action icons in Events header: keep compact and vertically aligned */
#maincontent .d-flex.gap-2.align-items-center a.btn svg.icon,
#maincontent .d-flex.gap-2.align-items-center a.btn svg { 
  width: 16px !important; height: 16px !important; max-width: 20px !important; max-height:20px !important; vertical-align: middle !important; display: inline-block !important;
}

/* Last resort: icon-only buttons in the Events list should be square and compact */
#maincontent .table.table-striped td.text-end .btn.btn-sm { width: auto !important; padding: .25rem .35rem !important; }

/* WA Jobs toolbar specific tweaks: keep toolbar items readable and prevent awkward wrapping */
.wa-toolbar .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.wa-toolbar .icon { width: 1rem; height: 1rem; }
.wa-toolbar .input-group { min-width: 220px; max-width: 420px; }
.wa-toolbar { width: 100%; }
.wa-toolbar .ms-auto { min-width: 220px; }

/* small icon utility for tight UI areas */
.icon-sm { width: 1rem !important; height: 1rem !important; max-width: 1.25rem !important; max-height: 1.25rem !important; display:inline-block !important; }

/* Strong overrides for WA Jobs area to avoid oversized SVGs from stray theme rules */
#maincontent .wa-toolbar svg,
#maincontent .wa-toolbar .icon,
#maincontent .card .icon,
#maincontent .table .icon,
#maincontent .table.table-striped td.text-end .btn svg.icon {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transform: none !important;
}

/* Ensure buttons render inline and compact inside WA Jobs */
#maincontent .wa-toolbar .btn, #maincontent .wa-toolbar a.btn { display: inline-flex !important; align-items: center !important; gap: .4rem !important; padding: .35rem .6rem !important; }

/* Responsive: on small screens stack the toolbar groups so search/filter are full-width below actions */
@media (max-width: 720px) {
  .wa-toolbar { gap: .5rem; }
  .wa-toolbar > .d-flex { width: 100%; }
  .wa-toolbar .d-flex:first-child { order: 1; }
  .wa-toolbar .ms-auto { order: 2; width: 100%; display: flex; justify-content: flex-start; gap: .5rem; }
  .wa-toolbar .input-group { flex: 1 1 auto; min-width: 0; }
  .wa-toolbar .btn { flex: 0 0 auto; }
}

/* Use Bootstrap grid for sidebar layout (non-fixed) to match other admin pages.
   Avoid forcing fixed positioning which may overlap content or hide sidebar. */
/* Prefer grid column behaviour: avoid hard margin-left on maincontent.
   Keep sidebar static and let the Bootstrap grid determine layout. */
@media (min-width: 768px) {
  aside.sidebar {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 200px !important;
    overflow: visible !important;
    z-index: 1035 !important;
    display: block !important;
    flex: 0 0 200px !important;
    max-width: 200px !important;
  }
  /* remove margin-left hacks that conflict with grid; maincontent will flow next to sidebar */
  #maincontent {
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-left: 1rem !important;
  }
}

/* Limit WA Jobs table height so long empty area doesn't fill viewport */
.wa-jobs-table .table-responsive {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

/* Ensure maincontent occupies full available width to the right of fixed sidebar */
#maincontent { min-height: calc(100vh - 56px); }

/* Enforce consistent navbar and sidebar sizing across admin pages */
nav.navbar.fixed-top { height: 56px; min-height: 56px; }
nav.navbar .navbar-brand { height: 56px; display: flex; align-items: center; }
.sidebar { width: 200px !important; }
.sidebar .nav-link { padding: .45rem 1rem; }
#sidebar { width: 200px !important; }

/* Ensure collapsed sidebar width matches expectation */
body.sidebar-collapsed .sidebar { width: 56px !important; }
  /* When sidebar is collapsed we prefer flex layout; do not apply a hard
    margin-left on #maincontent. The sidebar already shrinks via flex and
    `#maincontent` uses `flex: 1` so it will occupy the remaining space
    without layout jumps. */
  /* body.sidebar-collapsed #maincontent { margin-left: 56px !important; } */

/* Ensure sidebar is on top of maincontent (so links are clickable) and visible */
aside.sidebar { z-index: 1035 !important; background: #fff; }
/* Avoid forcing a low z-index on maincontent which can interfere with fixed-position modals
  (a low z-index on an ancestor can cause stacking context issues and block clicks). */
#maincontent { z-index: auto; }

/* Strong admin layout normalization: force row to behave as two columns (sidebar + content)
   This overrides any vendor/theme rules that may have broken the Bootstrap grid. */
main.container-fluid > .row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

aside.sidebar {
  flex: 0 0 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  order: 0 !important;
  display: block !important;
  background: #ffffff !important;
  border-right: 1px solid #e9ecef !important;
}

/* Ensure sticky wrapper inside sidebar behaves properly and doesn't float over main content
   Make it sticky below the fixed navbar on larger screens; when collapsed, make it static so
   inner content doesn't overflow as a floating card inside #maincontent. */
aside.sidebar .position-sticky {
  position: sticky !important;
  top: 56px !important; /* sit under fixed-top navbar */
  z-index: 1036 !important;
  overflow: visible !important;
}

/* When sidebar is collapsed, don't keep inner wrapper sticky — keep it static and clipped */
body.sidebar-collapsed aside.sidebar .position-sticky {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  overflow: hidden !important;
}

#maincontent {
  flex: 1 1 auto !important;
  width: auto !important;
  margin-left: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Make sure our collapsed state still works visually */
body.sidebar-collapsed aside.sidebar {
  flex: 0 0 56px !important;
  max-width: 56px !important;
  min-width: 56px !important;
}

/* Also respond to common Sneat/layout class names so collapse works even if
   the theme script toggles different body classes. This ensures the sidebar
   shrinks and maincontent fills the space regardless of which class is used. */
body.layout-menu-collapsed aside.sidebar,
body.layout-menu-compact aside.sidebar,
body.layout-menu-hidden aside.sidebar,
body.layout-menu-minimal aside.sidebar {
  flex: 0 0 56px !important;
  max-width: 56px !important;
  min-width: 56px !important;
}

body.layout-menu-collapsed #maincontent,
body.layout-menu-compact #maincontent,
body.layout-menu-hidden #maincontent,
body.layout-menu-minimal #maincontent {
  margin-left: 0 !important;
  padding-left: 1rem !important;
}

/* Reduce excessive empty area by capping WA Jobs table height */
.wa-jobs-table .table-responsive {
  max-height: calc(100vh - 220px) !important;
  overflow: auto !important;
}


/* WA Jobs specific fine-tuning */
#maincontent .wa-stats .h5 { font-size: 1.15rem; margin-bottom: .25rem }
#maincontent .wa-stats .small { display:block }
#maincontent .wa-empty-state { border: 1px dashed #e9ecef }

/* Table payload/result pre blocks: keep compact rows and allow scroll for long text */
#maincontent table tbody td pre { margin:0; font-size: .92rem; max-width: 320px; white-space: pre-wrap; overflow:auto; max-height: 5.5rem; word-break: break-word; }
#maincontent table tbody td:nth-child(5) pre { max-width: 320px; }
#maincontent table tbody td:nth-child(8) pre { max-width: 360px; }

/* Reduce vertical spacing inside table rows */
#maincontent .table.table-sm td, #maincontent .table.table-sm th { padding: .45rem .5rem; }

/* Ensure action cell buttons align neatly */
#maincontent table td > .btn, #maincontent table td > button { white-space: nowrap; }

/* Make table action buttons uniform size and square-ish for tidy appearance */
#maincontent table td > .btn {
  min-width: 36px; /* ensure same width for icon-only buttons */
  height: 34px;
  padding: .25rem .45rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#maincontent table td > .btn .icon { margin-right: 0 !important; }
#maincontent table td > a.btn { padding-left: .5rem !important; padding-right: .5rem !important; }

/* Action buttons container: keep buttons in one row and prevent wrapping */
.action-buttons { gap: .35rem; flex-wrap: nowrap; white-space: nowrap; }
.action-buttons .btn, .action-buttons a.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.action-status { display: inline-flex; align-items: center; margin-left: .5rem; }
.action-buttons .btn .icon, .action-buttons a.btn .icon { margin: 0 !important; }

/* Pager small style */
#maincontent .pagination, #maincontent .pagination a { gap: .25rem }

/* Force table action column to be narrow and sticky on the right to prevent horizontal reflow */
#maincontent .table thead th:last-child, #maincontent .table tbody td:last-child { width: 120px; text-align: center; }

/* Keep created/updated smaller and aligned to the right */
#maincontent .table thead th:nth-last-child(3), #maincontent .table tbody td:nth-last-child(3),
#maincontent .table thead th:nth-last-child(2), #maincontent .table tbody td:nth-last-child(2) {
  width: 120px; white-space: nowrap; text-align: right; font-size: .92rem;
}

/* Card wrapper for WA Jobs table to avoid large gray background and match other menus */
.wa-jobs-table { background: transparent; border: none; }
.wa-jobs-table .card-body { padding: 0.25rem 0.5rem; }
.wa-jobs-table .table-responsive { background: #fff; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; border-radius: 0 0 .25rem .25rem; }

/* Make table rows compact and avoid huge empty areas */
#maincontent .table.table-sm tbody tr { height: auto; min-height: 40px; }
#maincontent .table.table-sm tbody td { vertical-align: middle; }

/* Make header sticky only visually minimal */
#maincontent .table thead th { background: #fafafa; }

/* Ensure the stats area sits close below toolbar */
.wa-toolbar + .wa-stats { margin-top: 0.25rem; margin-bottom: 0.5rem; }

/* ===== Minimal Sneat/theme neutralization =====
   Keep these rules conservative and non-destructive. They only:
   - prevent theme-added layout padding from shifting #maincontent
   - neutralize overlays/menus when they end up inside #maincontent
   Avoid touching global positioning of .layout-menu to reduce side-effects.
*/

/* If theme adds layout classes that pad the page, undo that padding for admin pages */
body[class*="layout-menu"] #maincontent,
main.container-fluid > .row > #maincontent {
  margin-left: 0 !important;
  padding-left: 1rem !important;
}

/* Keep layout wrapper/page padding neutral inside admin pages */
.layout-page, .layout-wrapper, .layout-content-navbar { padding-left: 0 !important; padding-right: 0 !important; }

/* Keep the navbar full-width and not offset by theme classes */
.layout-navbar-fixed .layout-navbar, .layout-navbar-full .layout-navbar { left: 0 !important; right: 0 !important; }

/* The more specific hiding of overlays/menus that are accidentally injected inside #maincontent
   is handled lower in the file (scoped to #maincontent). This keeps theme neutralization minimal. */

/* Extra specific neutralization for sneat layout classes that may be applied to <html> or <body>
   These ensure a fixed-top navbar and the menu classes do not shift or pad the page content. */
body.layout-menu-fixed .layout-page,
body.layout-menu-fixed-offcanvas .layout-page,
.layout-menu-fixed .layout-page,
.layout-menu-fixed-offcanvas .layout-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.layout-menu-fixed .layout-navbar,
body.layout-menu-fixed-offcanvas .layout-navbar,
.layout-menu-fixed .layout-navbar,
.layout-menu-fixed-offcanvas .layout-navbar {
  left: 0 !important;
  right: 0 !important;
}

.layout-menu-fixed .layout-menu,
.layout-menu-fixed-offcanvas .layout-menu,
body.layout-menu-fixed .layout-menu,
body.layout-menu-fixed-offcanvas .layout-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 200px !important;
  margin: 0 !important;
  z-index: 1035 !important;
}

/* Defensive: if theme tries to add left padding on .layout-wrapper or .layout-page, neutralize it */
.layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-wrapper .layout-page {
  padding-left: 0 !important;
}


/* Safety: hide any duplicated/off-canvas menu that ends up inside #maincontent
   This prevents a floating duplicate menu from appearing in the page body.
   It's intentionally specific so it only affects accidentally-inserted menus. */
#maincontent .layout-menu, #maincontent .layout-menu .menu, #maincontent .menu, #maincontent .menu-inner, #maincontent .layout-menu-expanded .layout-menu {
  display: none !important;
  transform: none !important;
  position: static !important;
  opacity: 1 !important;
}

/* Ensure our job payload/result truncation is consistent and not inline-dependent */
.job-payload-display { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-result-display { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------
   Safety: only hide stray/off-canvas/menu elements that end up inside
   `#maincontent`. This is narrower than the previous global rule and
   avoids disabling legitimate overlay/menu behaviors site-wide.
   ------------------------------------------------------------------ */

/* Hide vendor menu/offcanvas when it appears inside the main content area */
#maincontent .menu-inner,
#maincontent .layout-menu,
#maincontent .layout-overlay,
#maincontent .offcanvas,
#maincontent .app-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* If the real sidebar contains vendor elements, ensure they remain visible there */
aside.sidebar .menu-inner,
aside.sidebar .layout-menu,
aside.sidebar .menu,
aside.sidebar .offcanvas {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure WA Jobs table remains scrollable and visible after hiding overlays */
.wa-jobs-table .table-responsive { max-height: calc(100vh - 180px) !important; overflow: auto !important; }
/* Smoothly animate collapse/expand by transitioning the sidebar flex-basis */
aside.sidebar {
  transition: flex-basis .18s ease, max-width .18s ease, min-width .18s ease;
}

/* Fix: ensure Bootstrap modals and their backdrops are always above admin layout
   in case theme or layout rules create new stacking contexts. Keep this specific
   and conservative to avoid breaking other z-index arrangements. */
.modal {
  z-index: 2050 !important; /* higher than sidebar (1035) and default modal (1050) */
  pointer-events: auto !important;
/* Ensure collapsed state does not apply an extra offset on maincontent */
body.sidebar-collapsed #maincontent { margin-left: 0 !important; padding-left: 1rem !important; }
.modal-backdrop {
  z-index: 2040 !important;
}

/* If modals are rendered inside #maincontent, ensure they still receive pointer events */
#maincontent .modal,
#maincontent .modal-backdrop {
  pointer-events: auto !important;
}

/* ---------- Navbar-only admin layout helpers ---------- */
/* Hide legacy sidebar if present */
#sidebar, aside.sidebar { display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; }

/* Render the vertical nav items horizontally when placed inside the admin navbar collapse */
#adminNavbarCollapse .nav.flex-column { flex-direction: row !important; }
#adminNavbarCollapse .nav-item { margin-right: .5rem; }
#adminNavbarCollapse .nav-link { padding: .45rem .65rem; }
#adminNavbarCollapse .nav-link .nav-label { display: inline-block; }

/* Slight spacing under the admin navbar so page content doesn't touch it */
nav#adminNav { margin-bottom: .5rem; }



}