/* ---------------------------------------------------------------------------
   App — the few pieces that are specific to this app. Everything else comes from
   components (tokens, components, layout). Rules for this file:
   - tokens only: no hex colors, px sizes, bare font weights or durations
     (1px hairlines and 2px outlines are the exceptions, as in components);
   - a class here is a reusable app component, never one page's styling;
   - anything generic enough for another product belongs in components instead.
--------------------------------------------------------------------------- */

/* --- Top bar ------------------------------------------------------------------------ */

.command-search {
  position: relative;
  flex: 1;
  max-width: calc(var(--spacing) * 105);
}
.command-search .search-box {
  max-width: none;
}
.command-search .search-box input {
  padding-right: calc(var(--spacing) * 14);
}
.command-search-kbd {
  position: absolute;
  right: calc(var(--spacing) * 2);
  pointer-events: none;
}
.command-menu {
  left: 0;
  right: auto;
  width: 100%;
  max-height: min(calc(var(--spacing) * 110), 70vh);
  overflow-y: auto;
  transform-origin: top left;
}
.command-menu[hidden] {
  display: none;
}
.menu-item[data-highlighted] {
  background: var(--muted);
}
.topbar-context {
  max-width: calc(var(--spacing) * 72);
  cursor: pointer;
}
.topbar-context:hover {
  color: var(--foreground);
  background: var(--muted);
}
@media (max-width: 1100px) {
  .topbar-context-label {
    display: none;
  }
}
/* Phones: the search keeps its room; company switching and the shortcuts live in the account menu. */
@media (max-width: 639px) {
  .command-search-kbd,
  .topbar-context,
  .topbar-icon {
    display: none;
  }
  .command-search .search-box input {
    padding-right: calc(var(--spacing) * 3);
  }
}
@media (min-width: 640px) {
  .menu-item-phone {
    display: none;
  }
}
.topbar-icon {
  position: relative;
}
.topbar-icon[aria-current="page"] {
  background: var(--muted);
  color: var(--foreground);
}
.topbar-count {
  position: absolute;
  top: calc(var(--spacing) * -0.5);
  right: calc(var(--spacing) * -0.5);
  min-width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  padding: 0 calc(var(--spacing) * 1);
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--brand-foreground);
  font-size: var(--text-3xs);
  font-weight: var(--font-weight-semibold);
  line-height: calc(var(--spacing) * 4);
  text-align: center;
}
.topbar-count[hidden] {
  display: none;
}
.topbar-user {
  display: inline-flex;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.topbar-user:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.menu-account {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.5);
  padding: calc(var(--spacing) * 2);
  font-size: var(--text-control);
}

/* --- Notice banner (HR broadcasts and celebrations, above the page header) ------------------ */

.notice-banner {
  align-items: center;
  margin-bottom: calc(var(--spacing) * 6);
}
.notice-banner[hidden] {
  display: none;
}
.notice-banner-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-left: auto;
}
.notice-banner .alert-dismiss {
  position: static;
}

/* --- Dialogs and forms used across areas ----------------------------------------------------- */

/* A wide dialog for a form plus a list (expense claim lines, per-employee payouts, previews). */
.dialog.dialog-wide {
  max-width: var(--container-5xl);
}
/* Codes typed in capitals (PAN, IFSC, statutory codes). */
.input-uppercase {
  text-transform: uppercase;
}

/* --- Report criteria: "More filters" disclosure (report criteria, list filters) ------------------------
   <details class="more-filters"><summary>…More filters<svg class="icon more-filters-chevron"></summary>
   <div class="form-grid cols-4">…</div></details>. Rarely changed criteria, closed by default. */
.more-filters {
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--line);
}
.more-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  margin-left: calc(var(--spacing) * -2);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-control);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}
.more-filters > summary::-webkit-details-marker {
  display: none;
}
.more-filters > summary:hover {
  background: var(--muted);
  color: var(--foreground);
}
.more-filters > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.more-filters-chevron {
  transition: transform var(--duration-slow) var(--ease-out);
}
.more-filters[open] > summary {
  margin-bottom: calc(var(--spacing) * 4);
  color: var(--foreground);
}
.more-filters[open] .more-filters-chevron {
  transform: rotate(180deg);
}

/* AG Grid headers, cells and the column filter: components assets/css/grid.css. */

/* --- select2: "[CODE] Name" options show the code as a muted prefix -------------------------- */

.item-code {
  margin-right: calc(var(--spacing) * 1.5);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

/* --- Print: the page content only ----------------------------------------------------------- */

@media print {
  .sidebar,
  .sidebar-overlay,
  .topbar,
  .page-actions,
  .notice-banner,
  .toast-region {
    display: none !important;
  }
  .app-main {
    padding-left: 0;
  }
  .content {
    max-width: none;
    padding: 0;
  }
}

/* --- Grid row actions: state colors for the sync and feedback buttons ------------------------ */

.grid-action-btn.delete:hover {
  color: var(--destructive);
}
.grid-action-btn.synced,
.grid-action-btn.feedback-given {
  color: var(--success);
}
.grid-action-btn.syncpending,
.grid-action-btn.feedback-pending {
  color: var(--warning);
}