/*
 * app.css — CUSTOMER theme (/buy, /login, /cafe…) = Tabler 1.6.1 markup with the "light & airy" skin:
 * Plus Jakarta Sans, soft grey page, white borderless cards with big radius and soft shadow, white sidebar
 * with pill-shaped active links. Components still output Tabler markup; the skin lives only here. Rules: design.md.
 */

:root {
  /* Light & airy skin. */
  --tblr-font-sans-serif: "Plus Jakarta Sans", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Tokens read by components.css (dropzone, tool workspace, filter bar…) — mapped to Tabler colours. */
  --cc-primary: var(--tblr-primary);
  --cc-primary-rgb: var(--tblr-primary-rgb);
  --cc-primary-hover: var(--tblr-primary-darken);
  --cc-primary-soft: var(--tblr-primary-lt);
  --cc-accent: var(--tblr-orange);
  --cc-accent-hover: var(--tblr-orange);
  --cc-success: var(--tblr-green);  --cc-success-soft: var(--tblr-green-lt);
  --cc-warning: var(--tblr-yellow); --cc-warning-soft: var(--tblr-yellow-lt);
  --cc-danger: var(--tblr-red);     --cc-danger-soft: var(--tblr-red-lt);
  --cc-info: var(--tblr-azure);     --cc-info-soft: var(--tblr-azure-lt);
  --cc-muted: var(--tblr-secondary); --cc-muted-soft: var(--tblr-bg-surface-secondary);
  --cc-body-bg: var(--tblr-body-bg);
  --cc-surface: var(--tblr-bg-surface);
  --cc-border: var(--tblr-border-color);
  --cc-text: var(--tblr-body-color);
  --cc-radius: var(--tblr-border-radius);
  --cc-radius-lg: var(--tblr-border-radius-lg);
  --cc-shadow: var(--tblr-shadow-card);
  --cc-shadow-lg: var(--tblr-shadow-dropdown);

  --tblr-body-bg: #f5f6fa;
  --tblr-border-radius: .625rem;
  --tblr-border-radius-lg: 1rem;
  --tblr-card-border-radius: 1rem;
  --cafe-soft-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
  --cafe-lift-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}
body { background: var(--tblr-body-bg); }

/* Cards: borderless, rounded, soft shadow. */
.card {
  --tblr-card-border-color: transparent;
  --tblr-card-border-radius: 1rem;
  --tblr-card-inner-border-radius: 1rem;
  --tblr-card-cap-bg: transparent;
  box-shadow: var(--cafe-soft-shadow);
}
.card-header { border-bottom-color: var(--tblr-border-color-translucent); }
.card-title { font-weight: 700; }
.card-link-pop { transition: box-shadow .18s ease; }
/* Clickable cards don't move on hover: a primary ring appears, the icon square fills, the title turns primary. */
.card.card-link-pop:hover { transform: none; box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-primary); }
.card-link-pop .avatar, .card-link-pop .card-title { transition: background-color .18s ease, color .18s ease; }
.card-link-pop:hover .avatar { background: var(--tblr-primary) !important; color: #fff !important; }
.card-link-pop:hover .card-title { color: var(--tblr-primary); }
.card.card-link-pop.opacity-75:hover { box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-orange); }
.card-link-pop.opacity-75:hover .avatar { background: var(--tblr-orange) !important; }
.card-link-pop.opacity-75:hover .card-title { color: inherit; }
.card .avatar { border-radius: .75rem; }
.cafe-stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--tblr-body-color); }

/* Buttons and inputs: softer, rounder. */
.btn { border-radius: .625rem; font-weight: 600; }
.btn-primary { box-shadow: 0 4px 12px rgba(var(--tblr-primary-rgb), .25); }
.form-control, .form-select { border-radius: .625rem; }
.badge { border-radius: 999px; font-weight: 600; }

/* Page header. */
.page-pretitle { letter-spacing: .08em; }
.page-title { font-size: 1.5rem; font-weight: 800; }
@media (max-width: 575.98px) { .page-title { font-size: 1.25rem; } }

/* Sidebar: white, hairline border, pill-shaped links. */
.cafe-sidebar {
  --tblr-navbar-bg: #fff;
  --tblr-navbar-border-color: var(--tblr-border-color-translucent);
  background: #fff !important;
  border-right: 1px solid var(--tblr-border-color-translucent);
  box-shadow: none;
}
.cafe-sidebar .navbar-collapse { flex-direction: column; align-items: stretch; }
@media (min-width: 992px) { .cafe-sidebar .navbar-collapse { height: calc(100vh - 4.5rem); } }
.cafe-sidebar .navbar-brand { font-size: 1.125rem; }
.cafe-sidebar .navbar-nav { padding-inline: .75rem; gap: .125rem; }
.cafe-sidebar .nav-link {
  border-radius: 999px;
  padding: .55rem .9rem;
  color: var(--tblr-secondary);
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.cafe-sidebar .nav-link:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.cafe-sidebar .nav-item.active > .nav-link {
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}
.cafe-sidebar .nav-item.active > .nav-link::after { display: none; }
.cafe-sidebar .nav-item.active > .nav-link .nav-link-icon { color: var(--tblr-primary); }
.cafe-sidebar .dropdown-menu { background: transparent; border: 0; box-shadow: none; }
.cafe-sidebar .dropdown-item { border-radius: 999px !important; font-weight: 500; }
.cafe-sidebar .dropdown-item.active { background: var(--tblr-primary-lt); color: var(--tblr-primary); font-weight: 700; }
.cafe-sidebar .dropdown-header { font-size: .6875rem; letter-spacing: .08em; }
.cafe-plan-card {
  margin: 1rem .75rem 1.25rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--tblr-primary-lt), var(--tblr-green-lt));
  color: var(--tblr-body-color);
}
.cafe-plan-card .ti, .cafe-plan-card i { color: var(--tblr-primary); font-size: 1.125rem; }

/* Top bar: transparent, blurred, sticks while scrolling. */
.cafe-topbar {
  --tblr-navbar-bg: transparent;
  --tblr-navbar-border-color: transparent;
  background: rgba(245, 246, 250, .8) !important;
  backdrop-filter: saturate(180%) blur(10px);
  position: sticky; top: 0; z-index: 1020;
  box-shadow: none;
}

/* Footer: quiet. */
.footer { border-top: 0; }

/* Brand mark (no logo image yet): Tabler avatar used as the logo. */
.navbar-brand .avatar, .brand-logo .avatar { --tblr-avatar-size: 2rem; }

/* Live India clock (<x-live-clock>) — dashboard header, right side. */
.cafe-clock { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 16px; padding: .6rem 1rem; box-shadow: var(--cc-shadow); }
.cafe-clock-time { font-size: 1.375rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tblr-body-color); }
.cafe-clock-date { font-size: .8125rem; color: var(--tblr-secondary); }

/* Tool search (<x-tool-search>) — big white pill on the dashboard. */
.cafe-tool-search .form-control { border: 0; border-radius: 16px; box-shadow: var(--cc-shadow); background: #fff; }
.cafe-tool-search .form-control:focus { box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-primary); }
.cafe-tool-search kbd { background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); border: 1px solid var(--tblr-border-color); box-shadow: none; font-size: .75rem; }