/* Aadya Ticketing v2 — charcoal + amber theme, layered on top of SmartAdmin's
   default (blue) palette to match the legacy system's branding (TICKET-024). */
:root {
  --bs-primary: #ff9800;
  --primary-50: #ffe0b2;
  --primary-100: #ffcc80;
  --primary-200: #ffb74d;
  --primary-300: #ffa726;
  --primary-400: #ff9f1c;
  --primary-500: #ff9800;
  --primary-600: #fb8c00;
  --primary-700: #f57c00;
  --primary-800: #ef6c00;
  --primary-900: #e65100;
  --primary: 255, 152, 0;
}

/* Light theme, orange (--bs-primary) accents -- was a dark charcoal
   header/sidebar/login (see git history); switched per explicit request.
   Every contrast-dependent rule below was re-measured for the new light
   backgrounds rather than just inverted by guesswork. */
.app-header,
.app-sidebar {
  background-color: #ffffff !important;
  color: #2b2621;
  border-color: #e7e1d9;
}
.app-header {
  border-bottom: 1px solid #e7e1d9;
}
.app-sidebar {
  border-right: 1px solid #e7e1d9;
}

.app-sidebar .nav-link {
  color: #495057;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  color: #b35400;
  background-color: rgba(255, 152, 0, 0.12);
}

/* The real SmartAdmin sidebar markup (.primary-nav ul li a) reads nav-link
   colors from these custom properties, not the .nav-link class above (that
   rule predates the shell rewrite and now only matches nothing -- kept for
   history, harmless). Active/hover text uses a darkened orange (#b35400,
   not the brand --bs-primary #ff9800) -- measured contrast of #ff9800 as
   *text* on a white background is only ~2.2:1, well under WCAG AA's
   4.5:1; #b35400 measures ~5.16:1. The brand orange itself stays reserved
   for icon fills/buttons/badges/backgrounds, where it's paired with white
   glyphs or used as a block of color rather than small text. */
.app-sidebar {
  --app-nav-link-color: #495057;
  --app-nav-link-hover-color: #b35400;
  --app-nav-link-active-color: #b35400;
  --app-nav-title-color: #6c757d;
}

/* Header search box: was styled as a translucent white pill (for a dark
   header) -- inverted to a translucent dark pill for the light header,
   keeping the same "visibly interactive, not static text" intent. */
.app-header .app-search .form-control {
  color: #2b2621;
  background-color: rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 1.5rem;
  padding-left: 1rem;
}
.app-header .app-search .form-control:focus {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: #ff9800;
  box-shadow: none;
}
.app-header .app-search .form-control::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

.btn-primary {
  --bs-btn-bg: #ff9800;
  --bs-btn-border-color: #ff9800;
  --bs-btn-hover-bg: #f57c00;
  --bs-btn-hover-border-color: #f57c00;
  --bs-btn-active-bg: #ef6c00;
  --bs-btn-active-border-color: #ef6c00;
}

.badge-status-new { background-color: #6c757d; }
.badge-status-inprogress { background-color: #2196F3; }
.badge-status-hold { background-color: #ff9800; }
.badge-status-completed { background-color: #4caf50; }
.badge-status-closed { background-color: #413c35; }

.badge-priority-critical { background-color: #d32f2f; }
.badge-priority-high { background-color: #ff9800; }
.badge-priority-medium { background-color: #2196F3; }
.badge-priority-low { background-color: #6c757d; }

.comment-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: normal;
  background: #f0f0f0;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.blocked-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: normal;
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}

tr.row-overdue { background-color: rgba(211, 47, 47, 0.08); }
tr.row-stale { background-color: rgba(255, 152, 0, 0.08); }

/* T-013: Tasks list subtask indent/connector -- padding-left is set inline
   per row (scaled by depth), this just styles the "↳" marker itself. */
.subtask-indent {
  display: inline-block;
}

.subtask-connector {
  color: #9e9e9e;
  margin-right: 2px;
  font-weight: bold;
}

/* Borderless icon toggle for panel collapse/expand -- btn-outline-secondary
   was reused here but that class is meant for bordered actions (Cancel
   buttons etc.), which is why it looked like a boxed button. */
.btn-panel-toggle {
  border: none;
  background: transparent;
  color: #9e9e9e;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.btn-panel-toggle:hover,
.btn-panel-toggle:focus {
  background: rgba(0, 0, 0, 0.06);
  color: #616161;
}

.login-card {
  background-color: #ffffff !important;
  box-shadow: 0 8px 32px rgba(43, 38, 33, 0.12);
}

/* Stat cards (dashboard/list-page counters) -- SmartAdmin's bundled CSS has
   no ready-made "info box" component, just utility classes, so this is a
   small custom pattern layered on top of them. */
.stat-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 0.25rem;
  padding: 0.9rem 1.1rem;
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
a.stat-card:hover {
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.stat-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  flex-shrink: 0;
}
.stat-card-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #333; }
.stat-card-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: .03em; }

.stat-card-primary .stat-card-icon   { background: var(--bs-primary); }
.stat-card-info .stat-card-icon      { background: #2196F3; }
.stat-card-success .stat-card-icon   { background: #4caf50; }
.stat-card-danger .stat-card-icon    { background: #d32f2f; }
.stat-card-warning .stat-card-icon   { background: #ff9800; }
.stat-card-secondary .stat-card-icon { background: #6c757d; }
.stat-card-dark .stat-card-icon      { background: #413c35; }

.stat-card.stat-card-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }

/* Page header: title + breadcrumb, used via partials/page_header.php */
.page-header { margin-bottom: 1.25rem; }
.page-header .breadcrumb { margin-bottom: .15rem; font-size: .8rem; }
.page-header h4 { margin-bottom: 0; }

/* SmartAdmin's real .panel component, used in place of plain bootstrap
   .card so the app actually looks like the theme it's built on. */
.panel-hdr h2 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}
.panel-hdr h2 .sa { color: var(--bs-primary); margin-right: 0.5rem; font-size: 1rem; }

/* Column-filter row (per-column search/select above table rows) used on
   Projects/Tasks/Admin Users/Links/Activity Log list pages. Without a
   min-width, .table-responsive's scrollWidth never exceeds the viewport
   at tablet/mobile widths, so the browser squeezes these inputs instead
   of triggering horizontal scroll -- confirmed the search placeholder
   ("Search...") and "All" selects render clipped to 2-3 characters at
   768px and below. min-width forces the table wide enough to scroll. */
.column-filters th { padding-top: .35rem; padding-bottom: .5rem; font-weight: normal; border-top: none; }
.column-filters .form-control, .column-filters .form-select { font-size: .8rem; min-width: 8.5rem; }

/* Bootstrap's .input-group is flex-wrap: wrap by default, so the
   magnifier-icon + search-input pair (Admin Users, Links, Activity Log)
   stacks the icon above the input instead of beside it whenever its
   column is narrower than icon+input combined -- happens on tables with
   enough other columns competing for width (Admin Users' 7 columns vs.
   Tasks/Projects' narrower filter rows). Force them to stay on one line;
   min-width reserves enough column width for that to render sanely. */
.column-filters .input-group { flex-wrap: nowrap; min-width: 11rem; }

/* Defensive fix: smartNavigation.js sets display:flex on the top-level
   #js-nav-menu via inline style during init(), but that init can race
   (observed: consistently succeeds on some pages, silently leaves the
   base CSS's `.primary-nav ul { display: none }` in effect on others,
   with no JS error either way) -- hiding the whole sidebar nav. Forcing
   the top-level list visible in CSS makes it robust to that JS timing
   issue; nested submenus (ul ul, not a direct child of .primary-nav)
   are untouched and still fully JS-controlled for collapse/expand. */
.primary-nav > ul { display: flex !important; }

/* smartapp.css's 1280px breakpoint stamps a literal "max 1280px" debug
   label into the header (unlike its 991px sibling rule, which is correctly
   scoped behind an .app-debug-mode class we never enable) -- so anyone on
   a common 1280px-wide laptop sees vendor debug text in production. */
@media only screen and (max-width: 1280px) {
  .app-header::before { content: none !important; }
}

/* Dashboard "My Schedule" widget (FullCalendar) -- legend swatches for the
   two event colors set server-side in DashboardController::calendarEvents(). */
.calendar-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.calendar-legend-dot-task { background: #d32f2f; }
.calendar-legend-dot-project { background: #1976d2; }

/* smartapp.css force-positions any .btn-system dropdown-toggle's menu with
   a hardcoded top/right (top: var(--app-header-height), right: 2rem) --
   written for the original demo's header layout, where that happened to
   line up. Ours doesn't match (different header contents/widths), so the
   notification bell's dropdown rendered detached, floating over the page
   content instead of anchored under the bell. Restore normal
   relative-to-toggle positioning. */
.btn-system[data-bs-toggle=dropdown] + .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
}