/* public/assets/css/app.css */
body { background-color: #f8f9fa; }

/* Amber color utilities (used for reminder icons/timestamps) */
.text-amber { color: #b76e00 !important; }
.icon-amber { color: #b76e00 !important; }

/* Brand colour utility (for icons/text using primary brand colour) */
.text-brand-primary { color: var(--brand-primary, #0d6efd) !important; }

/* Fixed-width numeric badges for counts */
.badge-count {
  width: 2.8ch; /* more breathing room for 2 digits */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; /* align digits evenly */
  box-sizing: content-box; /* padding won't change width */
  font-size: .8rem; /* slightly larger for readability */
  font-weight: 600;
}

/* Normalize action button groups across lists (anchors + forms together) */
.actions-group {
  display: inline-flex;
  gap: 0; /* rely on borders to separate */
}
/* Allow buttons inside forms to behave like direct children of the group */
.actions-group form {
  display: contents; /* so the button becomes a direct child for rounded corners */
  margin: 0 !important;
}
/* Ensure contiguous borders and correct rounding regardless of whitespace/text nodes */
/* Base: make all action buttons square by default */
.actions-group a.btn,
.actions-group button.btn { border-radius: 0 !important; }

/* Apply overlap to all except the very first button */
.actions-group a.btn,
.actions-group button.btn { margin-left: -1px; }
.actions-group > a.btn:first-child { margin-left: 0; }
.actions-group > button.btn:first-child { margin-left: 0; }
.actions-group > form:first-child > .btn { margin-left: 0; }

/* Left rounding for the first button (anchor or form>button) */
.actions-group > a.btn:first-child,
.actions-group > button.btn:first-child {
  border-top-left-radius: .375rem !important;
  border-bottom-left-radius: .375rem !important;
}
.actions-group > form:first-child > .btn {
  border-top-left-radius: .375rem !important;
  border-bottom-left-radius: .375rem !important;
}

/* Right rounding for the last button (anchor or form>button) */
.actions-group > a.btn:last-child,
.actions-group > button.btn:last-child {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
}
.actions-group > form:last-child > .btn {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
}

/* --- Login page enhancements --- */
.full-bleed { /* let a section extend edge-to-edge inside a centered container */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.login-hero {
  /* Let global blobs (body.blobs-bg) be visible */
  background: transparent !important;
  position: relative;
  overflow: visible;
}

/* Remove any background/shadow from wrappers inside the hero */
.login-hero > .container,
.login-hero > .container > .row,
.login-hero > .container > .row > [class^="col-"],
.login-hero > .container > .row > [class*=" col-"] {
  background: transparent !important;
  box-shadow: none !important;
}

.auth-card {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(13,110,253,.08), 0 2px 10px rgba(0,0,0,.04);
  transform: translateY(8px);
  opacity: 0;
  animation: floatIn .7s ease forwards;
}

.login-icon {
  font-size: 3rem; /* requires bootstrap-icons in layout */
  line-height: 1;
  display: inline-block;
  background: linear-gradient(135deg, #0d6efd, #6f42c1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 12px rgba(13,110,253,.25));
}

.btn-glow {
  position: relative;
  box-shadow: 0 8px 18px rgba(13,110,253,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-glow:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(13,110,253,.35); }
.btn-glow:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(13,110,253,.2); }

@keyframes floatIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; opacity: 1; transform: none; }
  .btn-glow { transition: none; }
}

/* Decorative blobs inspired by marketing pages (global) */
.blobs-bg::before,
.blobs-bg::after {
  content: '';
  position: fixed;
  width: 432px; /* +20% */
  height: 432px; /* +20% */
  border-radius: 50%;
  filter: blur(30px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
.blobs-bg::before {
  left: -144px;   /* -120 * 1.2 */
  bottom: -72px;  /* -60 * 1.2 */
  background: radial-gradient(circle at 30% 30%, var(--brand-primary, #0d6efd), rgba(13,110,253,0) 60%),
              radial-gradient(circle at 70% 70%, var(--brand-accent, #6f42c1), rgba(111,66,193,0) 60%),
              linear-gradient(135deg, var(--brand-primary, #0d6efd), var(--brand-accent, #6f42c1));
}
.blobs-bg::after {
  right: -120px;  /* -100 * 1.2 */
  top: 12px;      /* 10 * 1.2 */
  background: radial-gradient(circle at 30% 30%, var(--brand-accent, #6f42c1), rgba(111,66,193,0) 60%),
              radial-gradient(circle at 70% 70%, var(--brand-primary, #0d6efd), rgba(13,110,253,0) 60%),
              linear-gradient(135deg, var(--brand-accent, #6f42c1), var(--brand-primary, #0d6efd));
}

/* Ensure content renders above global blobs */
main { position: relative; z-index: 1; }
/* Navbar and dropdowns should be above main content */
/* Do not force a position on .navbar so Bootstrap's .sticky-top can work */
.navbar { z-index: 1040; }
/* Ensure sticky navbar actually stays sticky even if other rules try to override */
.navbar.sticky-top { position: sticky; top: 0; }
.dropdown-menu { z-index: 1050; }

/* Brand-styled button and pill shape */
.btn-brand {
  color: #fff;
  background-image: linear-gradient(135deg, var(--brand-primary, #0d6efd) 0%, var(--brand-accent, #6f42c1) 100%);
  border: 0;
}
.btn-brand:hover { color:#fff; background-image: linear-gradient(135deg, color-mix(in oklab, var(--brand-primary, #0d6efd), #000 10%) 0%, color-mix(in oklab, var(--brand-accent, #6f42c1), #000 10%) 100%); }
.btn-brand:active { color:#fff; background-image: linear-gradient(135deg, color-mix(in oklab, var(--brand-primary, #0d6efd), #000 18%) 0%, color-mix(in oklab, var(--brand-accent, #6f42c1), #000 18%) 100%); }
.btn-brand:focus { box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--brand-primary, #0d6efd), transparent 70%); }

.btn-pill { border-radius: 999px; }

/* --- Operations page: collapse toggle arrow icons --- */
.inv-toggle .icon-collapse::before { content: "▼"; display: inline-block; }
.inv-toggle[aria-expanded="true"] .icon-collapse::before { content: "▲"; }

/* --- App shell and sidebar layout (moved from layout inline styles) --- */
.app-shell { display: flex; min-height: 100vh; width: 100%; }
.app-sidebar {
  width: 260px; flex: 0 0 260px;
  background: linear-gradient(180deg, var(--brand-primary) 0%, color-mix(in oklab, var(--brand-primary), #000 35%) 100%);
  color: #fff; position: sticky; top: 0; height: 100vh;
  box-shadow: 0 0 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column; /* allow footer to push to bottom */
  z-index: 1051; /* ensure flyout submenus overlay main content */
}
.sidebar-edge-toggle {
  position: absolute;
  top: 56px; /* align to brand header bottom edge */
  right: -20px; /* hang outside slightly */
  transform: translateY(-50%); /* half over brand, half over nav */
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  background: var(--brand-primary, #0f3d68);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 1060; /* above sidebar */
}
.sidebar-edge-toggle:hover { background: color-mix(in oklab, var(--brand-primary, #0f3d68), #000 8%); }
.sidebar-edge-toggle:active { background: color-mix(in oklab, var(--brand-primary, #0f3d68), #000 14%); }
.sidebar-edge-toggle .icon { display: inline-flex; gap: 2px; font-size: 1rem; line-height: 1; }
.sidebar-edge-toggle .icon.inward { display: inline-flex; }
.sidebar-edge-toggle .icon.outward { display: none; }

/* When collapsed, show outward arrows (toggle is inside .app-sidebar) */
.app-sidebar.collapsed .sidebar-edge-toggle .icon.inward { display: none; }
.app-sidebar.collapsed .sidebar-edge-toggle .icon.outward { display: inline-flex; }
.app-sidebar.collapsed { width: 72px; flex-basis: 72px; }
.app-sidebar .brand { height: 56px; display:flex; align-items:center; gap:.5rem; padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.app-sidebar .brand img { height: 28px; width: auto; }
.app-sidebar .brand-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar .nav-section {
  padding: .75rem .5rem;
  flex: 1 1 auto;           /* take remaining space between brand and footer */
  min-height: 0;            /* allow flex child to shrink for overflow */
  overflow-y: auto;         /* scroll instead of pushing past viewport */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
.app-sidebar .menu { list-style: none; margin: 0; padding: 0; }
.app-sidebar .menu > li > a { color: rgba(255,255,255,.95); display:flex; align-items:center; gap:.5rem; padding: .5rem .75rem; border-radius: .375rem; text-decoration:none; }
.app-sidebar .menu > li > a:hover { background: rgba(255,255,255,.12); }
.app-sidebar .menu > li > a.active {
  background: var(--brand-accent, #00a3a3);
  color: #fff;
}
.app-sidebar .menu .submenu { list-style:none; padding-left: .5rem; margin: .25rem 0 .5rem; }
.app-sidebar .menu .submenu a { color: rgba(255,255,255,.85); display:block; padding:.375rem .75rem; border-radius:.375rem; text-decoration:none; }
.app-sidebar .menu .submenu a:hover { background: rgba(255,255,255,.1); }
.app-sidebar .menu .submenu li.emp-sub { margin-left: 16px; }
/* Financials submenu indentation (Reports/Settings subitems) */
.app-sidebar .menu .submenu li.fin-sub { margin-left: 16px; }
/* Reports submenu indentation (grouped report subitems) */
.app-sidebar .menu .submenu li.rep-sub { margin-left: 16px; }
.app-sidebar .menu .submenu a.active {
  background: color-mix(in oklab, var(--brand-accent, #00a3a3), #000 10%);
  color: #fff;
}
.app-sidebar .section-title { font-size: .75rem; letter-spacing:.08em; opacity:.7; padding:.25rem .75rem; text-transform: uppercase; }
.app-sidebar .footer { margin-top:auto; padding: .75rem; border-top: 1px solid rgba(255,255,255,.15); }
.app-sidebar .version { font-size: .75rem; opacity: .8; }
.app-sidebar .version .ver-full { display: none; }
.app-sidebar:not(.collapsed) .version .ver-full { display: inline; }
.app-sidebar:not(.collapsed) .version .ver-short { display: none; }
.sidebar-toggle { border: 0; color:#fff; background: transparent; width: 36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius: .5rem; }
.sidebar-toggle:hover { background: rgba(255,255,255,.12); }
.content-wrap { flex: 1 1 auto; min-width: 0; }
.content-wrap main { width: 100%; }

/* Footer cache indicator dot (hidden by default, shown in collapsed mode) */
.app-sidebar .footer .status-dot {
  display: none; /* hidden by default */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 4px;
}

/* Center the cache badge when sidebar is expanded */
.app-sidebar:not(.collapsed) .footer .cache-badge {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  display: block;            /* allow auto margins to center */
  width: fit-content;        /* shrink to content width */
  margin-bottom: 6px;        /* small gap above buttons */
}

/* Force full-width containers when sidebar is present */
body.has-sidebar .container,
body.has-sidebar .container-sm,
body.has-sidebar .container-md,
body.has-sidebar .container-lg,
body.has-sidebar .container-xl,
body.has-sidebar .container-xxl { max-width: 100% !important; }
.content-wrap .container,
.content-wrap .container-sm,
.content-wrap .container-md,
.content-wrap .container-lg,
.content-wrap .container-xl,
.content-wrap .container-xxl { max-width: 100% !important; }

/* Hide decorative blobs on app pages with sidebar */
body.has-sidebar.blobs-bg::before,
body.has-sidebar.blobs-bg::after { display: none !important; content: none !important; }

/* Responsive sidebar behavior */
@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; left: -260px; z-index: 1040; transition: left .2s ease; }
  .app-sidebar.toggled { left: 0; }
  .app-sidebar.collapsed { left: -72px; }
  .content-wrap { width: 100%; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background: rgba(0,0,0,.35); z-index:1039; }
  .sidebar-overlay.show { display:block; }
}

/* --- Collapsed sidebar behavior (icons only with hover flyout) --- */
.app-sidebar.collapsed .brand-name { display: none; }
.app-sidebar.collapsed .brand { justify-content: center; }
.app-sidebar.collapsed .menu > li > a span { display: none; }
.app-sidebar.collapsed .menu > li > a { justify-content: center; padding: .5rem; }
/* sidebar menu icons while collapsed size */
.app-sidebar.collapsed .menu > li > a i { font-size: 1.5rem; line-height: 1; }
.app-sidebar.collapsed .nav-section { overflow: visible; }
.app-sidebar.collapsed .menu > li { position: relative; }
.app-sidebar.collapsed .menu > li::after {
  content: '';
  position: absolute; top: 0; right: -10px; width: 10px; height: 100%;
  /* invisible hover bridge so pointer stays within the li while moving to submenu */
}
.app-sidebar.collapsed .menu > li > .submenu {
  position: absolute; left: 64px; top: 0; /* overlap by 8px to avoid hover gap */
  min-width: 220px; margin: 0; padding: .5rem;
  background: rgba(8, 32, 54, 0.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: none; z-index: 1050;
  max-height: calc(100vh - 32px); overflow: auto;
}
.app-sidebar.collapsed .menu > li:hover > .submenu,
.app-sidebar.collapsed .menu > li > .submenu:hover { display: block !important; }

/* Collapsed footer: icon-only buttons and cache dot */
.app-sidebar.collapsed .footer .cache-badge { display: none !important; }
.app-sidebar.collapsed .footer .status-dot {
  display: block !important;
  margin: 0 auto 8px !important; /* center horizontally with a small bottom gap */
}
.app-sidebar.collapsed .footer .btn { display: inline-flex; align-items: center; justify-content: center; }
.app-sidebar.collapsed .footer .btn .btn-text { display: none; }