/*
 * TallySync Pro - application styles.
 *
 * The shell, the cards, the tables and the badges follow the Tabler design language (the tokens
 * come from tabler.min.css, so the light and the dark theme work without extra rules). The "ts-"
 * prefixed classes are the application level API that every page uses; they are kept stable so the
 * existing pages inherit the new look without being rewritten.
 */

:root {
  --ts-sidebar-width: 15.75rem;
  --ts-topbar-height: 3.75rem;
  --ts-radius: 8px;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

body {
  background-color: var(--tblr-body-bg, #f6f8fb);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ shell */

.page {
  min-height: 100vh;
}

.ts-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--ts-sidebar-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: var(--tblr-bg-surface);
  border-inline-end: 1px solid var(--tblr-border-color);
  box-shadow: none;
  color: var(--tblr-body-color);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
}

.ts-sidebar-brand {
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.ts-brand-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}

.ts-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ts-radius);
  background: var(--tblr-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.ts-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ts-brand-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  line-height: 1.2;
}

.ts-brand-sub {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tblr-muted);
}

.ts-sidebar-nav {
  flex: 1 1 auto;
  padding: 0.5rem 0.5rem 2rem;
  display: block !important;
}

.ts-sidebar-nav .navbar-nav {
  flex-direction: column;
  gap: 1px;
}

.ts-sidebar-nav .nav-section-title {
  display: block;
  padding: 0.85rem 0.6rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tblr-muted);
}

.ts-sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--ts-radius);
  color: var(--tblr-body-color);
  font-size: 0.88rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ts-sidebar-nav .nav-link:hover {
  background: var(--tblr-hover-bg, rgba(32, 39, 58, 0.06));
  color: var(--tblr-body-color);
}

.ts-sidebar-nav .nav-link.active {
  background: var(--tblr-primary);
  color: #fff;
  font-weight: 600;
}

.ts-sidebar-nav .nav-link.active .nav-link-icon,
.ts-sidebar-nav .nav-link.active .nav-link-title {
  color: #fff;
}

.ts-sidebar-nav .nav-link-icon {
  font-size: 1.15rem;
  color: var(--tblr-muted);
  flex: 0 0 1.25rem;
  text-align: center;
}

.ts-sidebar-nav .nav-link-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1029;
}

.ts-sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.ts-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-inline-start: var(--ts-sidebar-width);
}

.ts-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: var(--ts-topbar-height);
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
  box-shadow: none;
  padding: 0.55rem 0;
}

.ts-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ts-page-title {
  font-size: 1.22rem;
  font-weight: 700;
  margin: 0;
  color: var(--tblr-body-color);
  line-height: 1.25;
}

.ts-page-subtitle {
  color: var(--tblr-muted);
  font-size: 0.82rem;
  margin: 0.1rem 0 0;
}

.ts-breadcrumb {
  font-size: 0.76rem;
  margin: 0 0 0.15rem;
  padding: 0;
}

.ts-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--tblr-muted);
}

.ts-content {
  flex: 1 1 auto;
  padding: 1.25rem 0 2rem;
}

.ts-footer {
  padding: 0.9rem 0;
  font-size: 0.78rem;
  color: var(--tblr-muted);
  border-top: 1px solid var(--tblr-border-color);
}

.ts-theme-toggle .ts-theme-icon-dark,
[data-bs-theme="dark"] .ts-theme-toggle .ts-theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .ts-theme-toggle .ts-theme-icon-dark {
  display: inline-block;
}

.ts-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ cards */

.ts-card {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--ts-radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(24, 36, 58, 0.04);
}

/*
 * Equalise card heights across a bootstrap grid row, but only when a column
 * holds a single card (e.g. the "list + form" two-column layouts). A column
 * that stacks several cards must let them size to their own content, otherwise
 * the first card stretches to the full row height and pushes the rest down.
 * Using :has() (instead of :only-child) tolerates non-card siblings such as a
 * conditional alert while still ignoring columns with multiple cards.
 */
.row > [class*="col-"]:has(> .ts-card):not(:has(> .ts-card ~ .ts-card)) > .ts-card {
  height: 100%;
}

.ts-stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tblr-body-color);
}

.ts-stat-value-sm {
  font-size: 1.1rem;
}

.ts-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-muted);
}

.ts-stat-hint {
  font-size: 0.76rem;
  color: var(--tblr-muted);
}

/* ------------------------------------------------------------------- KPI */

.ts-kpi {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--ts-radius);
  padding: 0.9rem 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ts-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ts-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tblr-body-color);
}

.ts-kpi-hint {
  font-size: 0.76rem;
  color: var(--tblr-muted);
}

.ts-kpi-trend {
  font-size: 0.76rem;
  font-weight: 600;
}

.ts-kpi-trend.up { color: var(--tblr-success); }
.ts-kpi-trend.down { color: var(--tblr-danger); }
.ts-kpi-trend.flat { color: var(--tblr-muted); }

/* ---------------------------------------------------------------- badges */

.ts-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ts-badge-ok { background: var(--tblr-success-lt, #d3f9d8); color: var(--tblr-success-darker, #0ca678); }
.ts-badge-warn { background: var(--tblr-warning-lt, #fff3bf); color: var(--tblr-warning-darker, #f76707); }
.ts-badge-bad { background: var(--tblr-danger-lt, #ffe3e3); color: var(--tblr-danger-darker, #f03e3e); }
.ts-badge-info { background: var(--tblr-primary-lt, #e7f5ff); color: var(--tblr-primary-darker, #1c7ed6); }
.ts-badge-muted { background: var(--tblr-secondary-lt, #f1f3f5); color: var(--tblr-secondary-darker, #495057); }

/* ------------------------------------------------------------------ bars */

.ts-bar-track {
  background: var(--tblr-tertiary-bg, #eef2f7);
  border-radius: 0.35rem;
  height: 1.35rem;
  position: relative;
  overflow: hidden;
}

.ts-bar-fill {
  background: linear-gradient(90deg, var(--tblr-primary), var(--tblr-info));
  height: 100%;
  border-radius: 0.35rem;
  min-width: 2px;
  transition: width 0.4s ease;
}

.ts-bar-ok {
  background: linear-gradient(90deg, var(--tblr-success), var(--tblr-teal));
}

.ts-bar-warn {
  background: linear-gradient(90deg, var(--tblr-warning), var(--tblr-orange));
}

.ts-bar-bad {
  background: linear-gradient(90deg, var(--tblr-danger), var(--tblr-pink));
}

/* ----------------------------------------------------------------- tables */

table.ts-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-muted);
  border-bottom: 1px solid var(--tblr-border-color);
  white-space: nowrap;
  background: var(--tblr-bg-surface);
}

table.ts-table td {
  vertical-align: middle;
  font-size: 0.87rem;
}

table.ts-table tbody tr:hover {
  background: var(--tblr-hover-bg, rgba(32, 39, 58, 0.03));
}

/* --------------------------------------------------------------- data grid */

.ts-datatable-toolbar,
.ts-datatable-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
}

.ts-datatable-toolbar .dataTables_length,
.ts-datatable-toolbar .dataTables_filter {
  margin: 0;
}

.ts-datatable-toolbar .form-select,
.ts-datatable-toolbar .form-control {
  font-size: 0.82rem;
}

table.ts-grid {
  width: 100% !important;
  font-size: 0.85rem;
}

table.ts-grid thead th {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-muted);
  white-space: nowrap;
}

table.ts-grid td {
  vertical-align: middle;
}

.ts-grid-link {
  color: var(--tblr-primary);
  text-decoration: none;
  font-weight: 500;
}

.ts-grid-link:hover {
  text-decoration: underline;
}

.ts-grid-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--tblr-muted);
}

/* Rows whose click follows the report's drilldown template. */
table.ts-grid.ts-row-link tbody tr {
  cursor: pointer;
}

/* Footer totals, filled from the response aggregates on every draw. */
table.ts-grid tfoot td {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--tblr-muted);
  border-top: 2px solid var(--tblr-border);
  white-space: nowrap;
}

/* ------------------------------------------------------------- filter bar */

.ts-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.ts-filter-bar .ts-filter-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 9rem;
}

.ts-filter-bar .ts-filter-item label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-muted);
}

.ts-filter-bar .form-control,
.ts-filter-bar .form-select {
  font-size: 0.84rem;
}

.ts-searchable {
  position: relative;
}

.ts-searchable-menu {
  position: absolute;
  z-index: 1055;
  inset-inline: 0;
  top: calc(100% + 0.2rem);
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--ts-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.ts-searchable-option {
  padding: 0.35rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.84rem;
  color: var(--tblr-body-color);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-searchable-option:hover,
.ts-searchable-option.active {
  background: var(--tblr-primary-lt, #e7f5ff);
  color: var(--tblr-primary-darker, #1c7ed6);
}

.ts-searchable-option.selected {
  font-weight: 600;
}

.ts-searchable-empty {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--tblr-muted);
}

.ts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ts-toolbar-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.ts-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ts-report-meta {
  font-size: 0.78rem;
  color: var(--tblr-muted);
}

/* ----------------------------------------------------------------- misc */

.ts-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tblr-muted);
  font-size: 0.9rem;
}

.ts-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.ts-muted { color: var(--tblr-muted); }
.ts-small { font-size: 0.8rem; }
.ts-nowrap { white-space: nowrap; }
.ts-end { text-align: right; }
.ts-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.ts-wizard-steps { list-style: none; padding-left: 0; counter-reset: step; }
.ts-wizard-steps li {
  padding: 0.6rem 0.75rem;
  border-radius: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.88rem;
  color: var(--tblr-body-color);
  border: 1px solid transparent;
}
.ts-wizard-steps li.current { background: var(--tblr-primary-lt, #e7f5ff); border-color: var(--tblr-primary-lt, #a5d8ff); font-weight: 600; color: var(--tblr-primary-darker, #1c7ed6); }
.ts-wizard-steps li.done { color: var(--tblr-success-darker, #0ca678); }
.ts-wizard-steps li.current::before { content: "\25B8"; margin-right: 0.5rem; }

.ts-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1c7ed6, #0b3d91);
  padding: 2rem 1rem;
}

.ts-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--tblr-bg-surface);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991.98px) {
  .ts-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.25);
  }

  .ts-sidebar.open {
    transform: translateX(0);
  }

  .ts-main {
    margin-inline-start: 0;
  }
}

/* ---------------------------------------------------------------- print */
/* List pages print the grid itself: the shell, filters and grid controls are chrome, not data. */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .ts-sidebar,
  .ts-sidebar-backdrop,
  .ts-topbar,
  .ts-footer,
  .ts-filter-form,
  .ts-toolbar,
  .ts-datatable-toolbar,
  .ts-datatable-footer,
  .ts-breadcrumb,
  #ts-menu-toggle {
    display: none !important;
  }

  .ts-main,
  .page-body,
  .ts-content,
  .container-xl {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .ts-card {
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  table.ts-grid {
    font-size: 0.78rem;
  }

  table.ts-grid thead {
    display: table-header-group;
  }

  table.ts-grid tr {
    break-inside: avoid;
  }
}